/* ============================================================
   OdooBots — premium page system (ThemeForest-grade)
   navy #14143F · coral #FF5A6E · Bricolage Grotesque + Instrument Sans
   ============================================================ */
:root{
  --navy:#14143F; --navy2:#1E1E55; --coral:#FF5A6E; --coral2:#FF8A6B;
  --ink:#141427; --mut:#5B5B78; --mut2:#8A8AA8; --line:#E8E8F2; --bg:#fff; --bg2:#F7F7FC;
  --r:16px; --shadow:0 24px 70px -28px rgba(20,20,63,.30);
  --max:1200px;
}
*{box-sizing:border-box}
.ee{font-family:"Instrument Sans",system-ui,-apple-system,sans-serif;color:var(--ink);
  -webkit-font-smoothing:antialiased}
.ee-wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.ee h1,.ee h2,.ee h3,.ee .dsp{font-family:"Bricolage Grotesque","Instrument Sans",system-ui;
  letter-spacing:-.025em;font-weight:700}

/* ---------- 0. PAGE LOADER ---------- */
#pl{position:fixed;inset:0;z-index:9999;background:var(--navy);display:grid;place-items:center;
  transition:opacity .55s ease,visibility .55s}
#pl.off{opacity:0;visibility:hidden}
#pl .pl-in{text-align:center;transform:translateY(-6px)}
#pl .pl-mark{font-family:"Bricolage Grotesque",system-ui;font-size:30px;font-weight:700;color:#fff;
  letter-spacing:-.03em;margin-bottom:22px}
#pl .pl-mark i{font-style:normal;color:var(--coral)}
#pl .pl-bar{width:190px;height:3px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;margin:0 auto}
#pl .pl-bar u{display:block;height:100%;width:40%;border-radius:99px;
  background:linear-gradient(90deg,var(--coral),var(--coral2));animation:plrun 1.05s ease-in-out infinite}
@keyframes plrun{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}
#pl .pl-t{margin-top:16px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#7B7BA8}

/* ---------- 1. REVEAL ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.40s}.rv-d6{transition-delay:.48s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}
  #pl{display:none}#pl .pl-bar u{animation:none}}

/* ---------- 2. HERO ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:var(--hero-img,url("/img/hero-mrp.webp")) center right/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,#14143F 0%,rgba(20,20,63,.95) 34%,rgba(20,20,63,.72) 56%,rgba(20,20,63,.30) 100%)}
.hero .ee-wrap{padding-top:78px;padding-bottom:88px;position:relative}
.crumb{font-size:13px;color:#A6A6CC;margin-bottom:26px}
.crumb a{color:#A6A6CC;text-decoration:none;transition:color .2s}
.crumb a:hover{color:var(--coral)}
.crumb span{margin:0 8px;opacity:.45}
.crumb strong{color:#fff;font-weight:600}
.hero h1{font-size:clamp(38px,5.1vw,64px);line-height:1.05;margin:0 0 22px;max-width:16ch;color:#fff}
.hero h1 em{font-style:normal;background:linear-gradient(94deg,var(--coral),var(--coral2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{font-size:17.5px;line-height:1.65;color:#C9C9E4;max-width:60ch;margin:0 0 30px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;font-weight:700;color:var(--coral);margin-bottom:16px}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--coral);border-radius:2px}

/* byline chip */
.bychip{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 18px;border-radius:99px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(8px);
  font-size:13.5px;color:#D4D4EC;margin-bottom:30px}
.bychip b{color:#fff;font-weight:600}
.bychip i{font-style:normal;opacity:.35}
.bychip .dot{width:7px;height:7px;border-radius:50%;background:#35D07F;box-shadow:0 0 0 4px rgba(53,208,127,.18)}

.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:99px;font-weight:650;
  font-size:15.5px;text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s;border:0;cursor:pointer}
.btn-pri{background:linear-gradient(94deg,var(--coral),var(--coral2));color:#fff;
  box-shadow:0 16px 38px -12px rgba(255,90,110,.65)}
.btn-pri:hover{transform:translateY(-2px);box-shadow:0 22px 48px -12px rgba(255,90,110,.75)}
.btn-gh{color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-gh:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.btn-dk{background:var(--navy);color:#fff}
.btn-dk:hover{transform:translateY(-2px);box-shadow:0 18px 40px -16px rgba(20,20,63,.6)}

/* hero stat cards */
.hstats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:52px;max-width:860px}
.hstats div{padding:20px 22px;border-radius:14px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px)}
.hstats b{display:block;font-family:"Bricolage Grotesque",system-ui;font-size:30px;line-height:1;color:#fff;
  margin-bottom:7px;letter-spacing:-.03em}
.hstats span{font-size:12.5px;color:#A6A6CC;line-height:1.4;display:block}

/* ---------- 3. SECTION SHELL ---------- */
.sec{padding:96px 0;position:relative}
.sec--tint{background:var(--bg2)}
.sec--navy{background:var(--navy);color:#fff}
.sec--navy h2,.sec--navy h3{color:#fff}
.sec-head{max-width:76ch;margin-bottom:52px}
.sec-head.ctr{margin-left:auto;margin-right:auto;text-align:center}
.sec h2{font-size:clamp(28px,3.4vw,44px);line-height:1.14;color:var(--navy);margin:0 0 18px}
.sec .lead{color:var(--mut);font-size:17px;line-height:1.7;margin:0}
.sec--navy .lead{color:#B9B9DA}

/* ---------- 4. FIGURES (screenshots) ---------- */
.fig{position:relative;border-radius:var(--r);overflow:hidden;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.fig img{display:block;width:100%;height:auto}
.fig figcaption{padding:14px 20px;font-size:13.5px;color:var(--mut);border-top:1px solid var(--line);background:#fff}
.fig figcaption b{color:var(--navy);font-weight:650}
.fig--float{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fig--float:hover{transform:translateY(-6px)}

.split{display:grid;grid-template-columns:1fr 1.12fr;gap:60px;align-items:center}
.split--rev{grid-template-columns:1.12fr 1fr}
.split--rev .sp-txt{order:2}
.sp-txt h3{font-size:25px;color:var(--navy);margin:0 0 14px;line-height:1.25}
.sp-txt p{color:var(--mut);font-size:16px;line-height:1.7;margin:0 0 18px}
.sp-list{margin:0;padding:0}
.sp-list li{list-style:none;padding:10px 0 10px 30px;position:relative;color:#33334D;font-size:15.5px;line-height:1.55}
.sp-list li::before{content:"";position:absolute;left:0;top:17px;width:16px;height:2px;border-radius:2px;
  background:var(--coral)}

/* ---------- 5. CARDS ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#D8D8EC}
.card::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--coral),var(--coral2));transition:width .45s cubic-bezier(.2,.7,.2,1)}
.card:hover::after{width:100%}
.card h3{font-size:18.5px;color:var(--navy);margin:0 0 10px;line-height:1.3}
.card p{color:var(--mut);font-size:14.8px;line-height:1.65;margin:0}
.card .ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;
  background:#F2F2FA;color:var(--navy)}
.card .ico svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pills i{font-style:normal;font-size:12px;background:#F2F2FA;color:var(--navy);border-radius:99px;padding:5px 12px;
  font-weight:500}
.sec--navy .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.sec--navy .card:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.26);box-shadow:none}
.sec--navy .card p{color:#B9B9DA}
.sec--navy .pills i{background:rgba(255,255,255,.1);color:#fff}

/* ---------- 6. CLIENT STRIP ---------- */
.clients{padding:46px 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.clients p{text-align:center;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);
  font-weight:650;margin:0 0 26px}
.clogos{display:flex;align-items:center;justify-content:center;gap:54px;flex-wrap:wrap}
.clogos img{height:34px;width:auto;max-width:150px;object-fit:contain;opacity:.52;filter:grayscale(1);
  transition:opacity .35s,filter .35s,transform .35s}
.clogos img:hover{opacity:1;filter:none;transform:scale(1.05)}

/* ---------- 7. EVIDENCE CARDS ---------- */
.ev{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .4s,box-shadow .4s}
.ev:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.ev-top{padding:24px 26px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px}
.ev-top img{height:30px;width:auto;max-width:118px;object-fit:contain}
.ev-top div{min-width:0}
.ev-top h3{font-size:17px;color:var(--navy);margin:0 0 3px;line-height:1.25}
.ev-top span{font-size:12px;color:var(--mut2);letter-spacing:.03em}
.ev-body{padding:4px 26px 24px}
.ev-row{padding:15px 0;border-bottom:1px dashed var(--line)}
.ev-row:last-child{border-bottom:0;padding-bottom:0}
.ev-row em{display:block;font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--coral);font-weight:700;margin-bottom:6px}
.ev-row p{margin:0;font-size:14.6px;line-height:1.62;color:#33334D}

/* ---------- 8. NUMBERED CHECKLIST ---------- */
.chk{counter-reset:c;display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;margin:0;padding:0}
.chk li{list-style:none;border-top:1px solid var(--line);padding:24px 0 24px 52px;position:relative}
.chk li b{display:block;color:var(--navy);font-size:17px;margin-bottom:7px;font-weight:650;
  font-family:"Bricolage Grotesque",system-ui;letter-spacing:-.01em}
.chk li p{margin:0;color:var(--mut);font-size:14.8px;line-height:1.68}
.chk li code{background:#F0F0F8;color:var(--navy);border-radius:5px;padding:2px 7px;font-size:12.8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}
.chk li::before{content:counter(c,decimal-leading-zero);counter-increment:c;position:absolute;left:0;top:23px;
  font-family:"Bricolage Grotesque",system-ui;font-size:14px;font-weight:700;color:var(--coral);
  width:34px;height:34px;border:1px solid #FFD5DB;border-radius:50%;display:grid;place-items:center;
  background:#FFF5F6}
.sec--navy .chk li{border-color:rgba(255,255,255,.14)}
.sec--navy .chk li b{color:#fff}
.sec--navy .chk li p{color:#B9B9DA}
.sec--navy .chk li code{background:rgba(255,255,255,.12);color:#fff}
.sec--navy .chk li::before{background:rgba(255,90,110,.14);border-color:rgba(255,90,110,.4)}

/* ---------- 9. NOTE / CALLOUT ---------- */
.note{margin-top:34px;padding:22px 26px;border-left:3px solid var(--coral);border-radius:0 12px 12px 0;
  background:rgba(255,90,110,.09);color:#E8E8F5;font-size:15.5px;line-height:1.65}
.note--light{background:#FFF5F6;color:#33334D}

/* ---------- 10. COST ---------- */
.cost{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
.drv{margin:0;padding:0}
.drv li{list-style:none;display:flex;gap:18px;padding:17px 0;border-top:1px solid var(--line);font-size:15.2px}
.drv li:first-child{border-top:0}
.drv b{color:var(--navy);min-width:180px;font-weight:650;flex:0 0 180px}
.drv span{color:var(--mut);line-height:1.6}
.pk{background:var(--navy);color:#fff;border-radius:var(--r);padding:30px;box-shadow:var(--shadow)}
.pk h3{font-size:19px;margin:0 0 6px;color:#fff}
.pk .pk-sub{font-size:13px;color:#9F9FC4;margin:0 0 20px}
.pk-row{border-top:1px solid rgba(255,255,255,.15);padding:15px 0;display:flex;justify-content:space-between;
  align-items:baseline;gap:14px}
.pk-row:first-of-type{border-top:0}
.pk-row b{font-weight:600;font-size:15px}
.pk-row span{color:#C9C9E4;font-size:15px;text-align:right;white-space:nowrap}
.pk-row small{display:block;color:#8A8AB8;font-size:12px;font-weight:400;margin-top:2px}
.pk p.fine{margin:20px 0 0;font-size:13px;color:#9F9FC4;line-height:1.6}

/* ---------- 11. TRUST STRIP ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.trust div{background:#fff;padding:26px}
.trust em{display:block;font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mut2);font-weight:700;margin-bottom:9px}
.trust b{color:var(--navy);font-size:16px;font-weight:650;line-height:1.45;display:block}
.trust small{color:var(--mut);font-size:13px;display:block;margin-top:4px;line-height:1.5}
.trust a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--coral)}

/* ---------- 12. FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 44px 24px 0;font-size:17.5px;color:var(--navy);
  font-weight:650;font-family:"Bricolage Grotesque",system-ui;position:relative;transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--coral)}
.faq summary::after{content:"";position:absolute;right:8px;top:30px;width:11px;height:11px;
  border-right:2px solid var(--coral);border-bottom:2px solid var(--coral);transform:rotate(45deg);
  transition:transform .3s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 60px 26px 0;color:var(--mut);font-size:15.5px;line-height:1.72}
.faq details[open] .ans{animation:fadein .4s ease}
@keyframes fadein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 13. SOURCES ---------- */
.src{columns:2;column-gap:52px;margin:0;padding:0}
.src li{list-style:none;break-inside:avoid;padding:14px 0;border-top:1px solid var(--line);font-size:15px;
  line-height:1.5}
.src a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--coral);transition:color .2s}
.src a:hover{color:var(--coral)}
.src small{display:block;color:var(--mut);font-size:13px;margin-top:4px}

/* ---------- 14. FINAL CTA ---------- */
.fcta{position:relative;background:var(--navy);color:#fff;overflow:hidden;text-align:center}
.fcta::before{content:"";position:absolute;width:680px;height:680px;border-radius:50%;left:50%;top:-54%;
  transform:translateX(-50%);background:radial-gradient(circle,rgba(255,90,110,.22),transparent 68%)}
.fcta .ee-wrap{position:relative;padding:92px 28px}
.fcta h2{font-size:clamp(30px,3.8vw,48px);margin:0 0 20px;color:#fff}
.fcta p{color:#C9C9E4;font-size:17px;line-height:1.7;max-width:62ch;margin:0 auto 34px}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1040px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .hstats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .sec{padding:68px 0}
  .split,.split--rev{grid-template-columns:1fr;gap:34px}
  .split--rev .sp-txt{order:0}
  .g3,.g2{grid-template-columns:1fr}
  .chk{grid-template-columns:1fr;gap:0}
  .cost{grid-template-columns:1fr;gap:34px}
  .trust{grid-template-columns:repeat(2,1fr)}
  .src{columns:1}
  .hero .ee-wrap{padding-top:52px;padding-bottom:62px}
  .hero::after{background:linear-gradient(170deg,#14143F 0%,rgba(20,20,63,.94) 55%,rgba(20,20,63,.84) 100%)}
  .drv li{flex-direction:column;gap:5px}
  .drv b{flex:none;min-width:0}
}
@media(max-width:560px){
  .ee-wrap{padding:0 20px}
  .trust{grid-template-columns:1fr}
  .clogos{gap:30px}
  .clogos img{height:26px}
}

/* hero stat: never let a long value break the card */
.hstats b{font-size:clamp(20px,2.1vw,30px);overflow-wrap:anywhere;hyphens:auto}
.hstats div{min-width:0}

/* link-card used by hub index pages */
.card.lk{display:block;text-decoration:none;color:inherit}
.card.lk h3{color:var(--navy);display:flex;align-items:center;gap:8px}
.card.lk h3::after{content:"→";color:var(--coral);font-size:17px;opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s}
.card.lk:hover h3::after{opacity:1;transform:none}
.sec--navy .card.lk h3{color:#fff}

/* ---------- ANSWER BLOCK (definitional, the part AI assistants quote) ---------- */
.ans-wrap{display:grid;grid-template-columns:1.25fr .9fr;gap:52px;align-items:start}
.ans-lede{font-size:19px;line-height:1.66;color:#2A2A45;margin:0 0 18px;max-width:62ch}
.ans-lede b{color:var(--navy);font-weight:650}
.ans-note{font-size:15px;line-height:1.65;color:var(--mut);margin:0;padding-left:16px;
  border-left:3px solid var(--coral)}
.ans-note em{font-style:normal;font-weight:600;color:var(--navy)}
.ans-defs{margin:0;padding:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:0 12px 36px -22px rgba(20,20,63,.28)}
.ans-defs > div{padding:18px 24px;border-top:1px solid var(--line)}
.ans-defs > div:first-child{border-top:0}
.ans-defs dt{font-family:"Bricolage Grotesque",system-ui;font-weight:650;color:var(--navy);
  font-size:15.5px;margin-bottom:5px;letter-spacing:-.01em}
.ans-defs dd{margin:0;font-size:14.4px;line-height:1.6;color:var(--mut)}

/* ---------- CAPABILITY CHIPS ---------- */
.caps h3{font-family:"Bricolage Grotesque",system-ui;font-size:19px;color:var(--navy);margin:0 0 18px}
.caps-chips{display:flex;flex-wrap:wrap;gap:9px}
.caps-chips span{font-size:14px;color:#33334D;background:#fff;border:1px solid var(--line);
  border-radius:99px;padding:9px 17px;transition:border-color .25s,color .25s,transform .25s}
.caps-chips span:hover{border-color:var(--coral);color:var(--navy);transform:translateY(-2px)}
.sec--navy .caps h3{color:#fff}
.sec--navy .caps-chips span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#D4D4EC}

@media(max-width:900px){
  .ans-wrap{grid-template-columns:1fr;gap:30px}
  .ans-lede{font-size:17.5px}
}

/* ---------- SPECIFICITY FIXES ----------
   .sec--navy h2 and .sec h2 have equal specificity, so the later .sec h2 rule
   wins and the heading goes navy-on-navy. Double the class to beat it.
   Keep these LAST in the file. */
.sec.sec--navy h2,
.sec.sec--navy h3,
.sec.sec--navy .sec-head h2{color:#fff}
.fcta h2{color:#fff}

/* headings inside the numbered checklist */
.chk li h3{color:var(--navy);font-size:17px;margin:0 0 7px;font-weight:650;line-height:1.3;
  font-family:"Bricolage Grotesque",system-ui;letter-spacing:-.01em}
.sec.sec--navy .chk li h3{color:#fff}
.card h3{font-family:"Bricolage Grotesque",system-ui}

/* client logos readable but not shouting */
.clogos img{opacity:.68}
.clogos img:hover{opacity:1}

/* a long stat value must never break out of its card */
.hstats b{font-size:clamp(20px,2.1vw,30px);overflow-wrap:anywhere;hyphens:auto}
.hstats div{min-width:0}

/* ============================================================
   BRIGHT HERO VARIANT  (.hero--bright)
   Light canvas, Odoo purple as the brand tint, photo as a framed
   card rather than a dark full-bleed background. The header must be
   .sh--solid on these pages because the logo is white.
   ============================================================ */
:root{--odoo:#714B67; --odoo2:#8E5F82; --odoo-wash:#F6F2F6;}

.hero--bright{background:
    radial-gradient(1100px 520px at 88% -10%, rgba(113,75,103,.16), transparent 62%),
    radial-gradient(760px 420px at -5% 20%, rgba(255,90,110,.10), transparent 60%),
    linear-gradient(180deg,#FBFAFD 0%, #F4F1F7 100%);
  color:var(--ink)}
.hero--bright::before,.hero--bright::after{display:none}
.hero--bright .ee-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  padding-top:64px;padding-bottom:72px}
.hero--bright .hb-copy{min-width:0}
.hero--bright .crumb{color:#6B6B8C}
.hero--bright .crumb a{color:#6B6B8C}
.hero--bright .crumb strong{color:var(--navy)}
.hero--bright h1{color:var(--navy);max-width:none}
.hero--bright h1 em{background:linear-gradient(94deg,var(--odoo),var(--odoo2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero--bright p.sub{color:#50506E}
.hero--bright .eyebrow{color:var(--odoo)}
.hero--bright .eyebrow::before{background:var(--odoo)}

.hero--bright .bychip{background:#fff;border:1px solid var(--line);color:#50506E;
  box-shadow:0 10px 30px -18px rgba(20,20,63,.28)}
.hero--bright .bychip b{color:var(--navy)}
.hero--bright .bychip i{color:var(--line)}

.hero--bright .btn-gh{color:var(--navy);border:1px solid #D9D5E4;background:#fff}
.hero--bright .btn-gh:hover{background:#F4F1F7}

.hero--bright .hstats{grid-template-columns:repeat(2,1fr);gap:12px;max-width:none;margin-top:40px}
.hero--bright .hstats div{background:#fff;border:1px solid var(--line);
  box-shadow:0 12px 34px -24px rgba(20,20,63,.4)}
.hero--bright .hstats b{color:var(--navy)}
.hero--bright .hstats span{color:#6B6B8C}

/* the photo, framed */
.hb-shot{position:relative;border-radius:22px;overflow:hidden;background:#fff;
  border:1px solid rgba(113,75,103,.16);
  box-shadow:0 44px 90px -40px rgba(113,75,103,.55), 0 10px 28px -18px rgba(20,20,63,.3)}
.hb-shot img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.hb-shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(140deg, rgba(113,75,103,.14), transparent 46%)}
/* a purple plate behind the frame, the detail that makes it feel designed */
.hb-wrap{position:relative}
.hb-wrap::before{content:"";position:absolute;inset:26px -22px -24px 30px;border-radius:26px;
  background:linear-gradient(140deg,var(--odoo),var(--odoo2));opacity:.14;z-index:0}
.hb-wrap .hb-shot{position:relative;z-index:1}

@media(max-width:980px){
  .hero--bright .ee-wrap{grid-template-columns:1fr;gap:34px;padding-top:40px;padding-bottom:52px}
  .hb-wrap{order:2}
  .hero--bright .hstats{grid-template-columns:repeat(2,1fr)}
}

/* ---- Odoo purple woven through the light sections ---- */
.sec--odoo{background:var(--odoo-wash)}
.sec--odoo .eyebrow{color:var(--odoo)}
.sec--odoo .eyebrow::before{background:var(--odoo)}
.card .ico{background:linear-gradient(140deg,rgba(113,75,103,.12),rgba(113,75,103,.04));color:var(--odoo)}
.ans-defs dt{color:var(--odoo)}
.chk li::before{color:var(--odoo);background:rgba(113,75,103,.08);border-color:rgba(113,75,103,.26)}
.sec.sec--navy .chk li::before{color:#D7B9CC;background:rgba(113,75,103,.3);border-color:rgba(113,75,103,.55)}
.caps-chips span:hover{border-color:var(--odoo)}
.src a{border-bottom-color:var(--odoo)}

/* bright hero: the copy column is narrower than a full-bleed hero, so the
   headline needs its own scale and the plate behind the frame needs to read */
.hero--bright h1{font-size:clamp(32px,3.5vw,46px);line-height:1.08}
.hero--bright p.sub{font-size:16.5px;max-width:52ch}
.hero--bright .ee-wrap{grid-template-columns:1.15fr .85fr}
.hb-shot img{aspect-ratio:5/4}
.hb-wrap::before{inset:34px -26px -28px 36px;opacity:.22}
/* ============================================================
   HERO v2 — the previous bright hero was cluttered: small type, a stock
   photo floating in a box, two buttons, four stat boxes and a byline chip
   all competing. This is one visual idea instead.

   Big display type on a light canvas, a large soft Odoo-purple orb, and the
   real Odoo UI tilted and bleeding off the right edge. Stats become a thin
   hairline strip, not boxes. One primary CTA and a text link.
   ============================================================ */

.hero--bright{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#FCFBFD 0%,#F5F2F8 100%);
}
.hero--bright::before,.hero--bright::after{display:none}

/* the orb — one large, slow-moving gradient, the only decoration */
.hb-orb{position:absolute;z-index:0;border-radius:50%;filter:blur(70px);pointer-events:none}
.hb-orb--a{width:760px;height:760px;right:-180px;top:-280px;
  background:radial-gradient(circle,rgba(113,75,103,.42),transparent 68%);
  animation:orbA 22s ease-in-out infinite alternate}
.hb-orb--b{width:520px;height:520px;left:-160px;bottom:-240px;
  background:radial-gradient(circle,rgba(255,90,110,.26),transparent 68%);
  animation:orbB 26s ease-in-out infinite alternate}
@keyframes orbA{to{transform:translate3d(-60px,50px,0) scale(1.08)}}
@keyframes orbB{to{transform:translate3d(50px,-40px,0) scale(1.1)}}
@media(prefers-reduced-motion:reduce){.hb-orb{animation:none}}

.hero--bright .ee-wrap{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:48px;align-items:center;
  padding-top:72px;padding-bottom:84px;max-width:1280px}

.hero--bright .crumb{color:#7A7A9C;margin-bottom:30px}
.hero--bright .crumb a{color:#7A7A9C}
.hero--bright .crumb strong{color:var(--navy)}
.hero--bright .eyebrow{color:var(--odoo);margin-bottom:22px}
.hero--bright .eyebrow::before{background:var(--odoo)}

/* the headline is the hero */
.hero--bright h1{
  font-size:clamp(42px,5.6vw,78px);line-height:.98;letter-spacing:-.035em;
  color:var(--navy);margin:0 0 26px;max-width:14ch}
.hero--bright h1 em{font-style:normal;
  background:linear-gradient(96deg,var(--odoo) 10%,#A96E97 55%,var(--coral) 115%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.hero--bright p.sub{font-size:18px;line-height:1.62;color:#53537A;max-width:46ch;margin:0 0 34px}
.hero--bright p.sub + p.sub{display:none}   /* one paragraph in the hero, the rest belongs below */

/* one button, one text link */
.hero--bright .cta-row{gap:22px;align-items:center;margin-bottom:0}
.hero--bright .btn-pri{padding:17px 34px;font-size:16px}
.hero--bright .btn-gh{background:none;border:0;color:var(--navy);padding:0;font-weight:600;
  text-decoration:none;border-bottom:2px solid rgba(113,75,103,.35);border-radius:0;
  transition:border-color .25s,color .25s}
.hero--bright .btn-gh:hover{transform:none;border-bottom-color:var(--odoo);color:var(--odoo)}

/* byline moves out of the hero's way */
.hero--bright .bychip{order:9;background:none;border:0;padding:0;box-shadow:none;
  margin:34px 0 0;font-size:13px;color:#7A7A9C;gap:10px}
.hero--bright .bychip b{color:var(--navy);font-weight:600}
.hero--bright .bychip i{color:#C9C5D6}
.hero--bright .bychip .dot{width:6px;height:6px;box-shadow:0 0 0 3px rgba(53,208,127,.16)}

/* stats as a hairline strip, not boxes */
.hero--bright .hstats{display:flex;gap:0;margin-top:40px;max-width:none;
  border-top:1px solid rgba(20,20,63,.1);padding-top:24px}
.hero--bright .hstats div{background:none;border:0;padding:0 26px;flex:1;min-width:0;
  border-left:1px solid rgba(20,20,63,.08);backdrop-filter:none}
.hero--bright .hstats div:first-child{padding-left:0;border-left:0}
.hero--bright .hstats b{font-size:clamp(22px,2.3vw,30px);color:var(--navy);margin-bottom:4px}
.hero--bright .hstats span{font-size:12.5px;color:#7A7A9C}

/* ---- the product screen: large, tilted, bleeding off the edge ---- */
.hb-wrap{position:relative;z-index:1}
.hb-wrap::before{display:none}
.hb-shot{
  position:relative;border-radius:14px;overflow:hidden;background:#fff;
  border:1px solid rgba(20,20,63,.1);
  width:132%;max-width:none;
  transform:perspective(1800px) rotateY(-11deg) rotateX(3deg) rotate(1.2deg);
  transform-origin:left center;
  box-shadow:
    0 2px 6px rgba(20,20,63,.06),
    0 24px 50px -24px rgba(113,75,103,.5),
    0 70px 120px -50px rgba(20,20,63,.55);
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hb-shot:hover{transform:perspective(1800px) rotateY(-7deg) rotateX(2deg) rotate(.6deg)}
.hb-shot img{display:block;width:100%;height:auto;aspect-ratio:auto}
.hb-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.26) 0%,transparent 34%)}

/* a browser bar sells it as a product, not a picture */
.hb-shot::before{content:"";position:absolute;top:0;left:0;right:0;height:26px;z-index:2;
  background:#F3F1F6;border-bottom:1px solid rgba(20,20,63,.08)}
.hb-dots{position:absolute;top:9px;left:12px;z-index:3;display:flex;gap:6px}
.hb-dots i{width:8px;height:8px;border-radius:50%;background:#D8D4E0;display:block}
.hb-shot img{margin-top:26px}

/* a single floating proof chip overlapping the screen */
.hb-chip{position:absolute;z-index:3;left:-34px;bottom:34px;background:#fff;
  border:1px solid rgba(20,20,63,.08);border-radius:14px;padding:14px 18px;
  box-shadow:0 26px 60px -26px rgba(20,20,63,.45);
  display:flex;align-items:center;gap:13px;animation:chipFloat 6s ease-in-out infinite}
.hb-chip u{width:38px;height:38px;border-radius:11px;text-decoration:none;flex:0 0 38px;
  background:linear-gradient(140deg,var(--odoo),#A96E97);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:15px;
  font-family:"Bricolage Grotesque",system-ui}
.hb-chip div{line-height:1.3}
.hb-chip b{display:block;font-size:14.5px;color:var(--navy);font-weight:650}
.hb-chip span{display:block;font-size:12.5px;color:#7A7A9C}
@keyframes chipFloat{50%{transform:translateY(-9px)}}
@media(prefers-reduced-motion:reduce){.hb-chip{animation:none}}

@media(max-width:1100px){
  .hero--bright .ee-wrap{grid-template-columns:1fr;gap:46px;padding-top:44px;padding-bottom:56px}
  .hero--bright h1{max-width:18ch}
  .hb-shot{width:100%;transform:none;box-shadow:0 30px 70px -34px rgba(20,20,63,.5)}
  .hb-shot:hover{transform:none}
  .hb-chip{left:14px;bottom:-18px}
  .hb-orb--a{right:-260px;top:-340px}
}
@media(max-width:640px){
  .hero--bright .hstats{flex-wrap:wrap;gap:18px 0}
  .hero--bright .hstats div{flex:0 0 50%;padding:0 14px}
  .hero--bright .hstats div:nth-child(3){padding-left:0;border-left:0}
  .hb-chip{display:none}
}

/* the byline carries order:9 to sit last, which only works if its parent is a
   flex container — without this it lands on top of the CTA */
.hero--bright .hb-copy{display:flex;flex-direction:column;align-items:flex-start}
.hero--bright .hb-copy > *{width:100%}
.hero--bright .crumb{order:0}
.hero--bright .eyebrow{order:1;width:auto}
.hero--bright h1{order:2}
.hero--bright p.sub{order:3}
.hero--bright .cta-row{order:4;width:auto}
.hero--bright .hstats{order:5}
.hero--bright .bychip{order:9;margin-top:26px}

/* the earlier overflow-wrap:anywhere guard was for boxed stats; in the hairline
   strip it breaks words mid-letter ("Chenn / ai"). Size to content instead. */
.hero--bright .hstats b,
.hero--split .hstats b{overflow-wrap:normal;word-break:keep-all;hyphens:none;white-space:nowrap}
.hero--bright .hstats div{flex:0 1 auto}
.hero--bright .hstats div:last-child{flex:1 1 auto}
/* ============================================================
   HERO VARIANTS — one layout across 70 pages reads as a template.
   Four distinct shapes, assigned by page group:

     .hv-tilt    product screen tilted, bleeding right   (hub, customization, developer)
     .hv-center  centred copy, wide screen below the fold (cost, experts, contact)
     .hv-split   dark copy panel beside a full-bleed image (support, migration, consultant)
     .hv-stat    copy left, a big figure card right        (hosting family, training)

   .hv-tilt is the existing .hero--bright layout and needs no new rules.
   ============================================================ */

/* ---------------------------------------------------------- V2  CENTRED */
.hero--bright.hv-center .ee-wrap{grid-template-columns:1fr;gap:0;text-align:center;
  padding-top:76px;padding-bottom:0;max-width:1180px}
.hero--bright.hv-center .hb-copy{align-items:center;text-align:center}
.hero--bright.hv-center .crumb{margin-bottom:26px}
.hero--bright.hv-center h1{max-width:18ch;margin-left:auto;margin-right:auto;
  font-size:clamp(40px,5.2vw,70px)}
.hero--bright.hv-center p.sub{max-width:62ch;margin-left:auto;margin-right:auto}
.hero--bright.hv-center .cta-row{justify-content:center}
.hero--bright.hv-center .hstats{justify-content:center;max-width:860px;
  margin-left:auto;margin-right:auto}
.hero--bright.hv-center .bychip{justify-content:center}
.hero--bright.hv-center .hb-wrap{margin-top:54px;max-width:1060px;
  margin-left:auto;margin-right:auto}
.hero--bright.hv-center .hb-shot{width:100%;transform:perspective(2200px) rotateX(4deg);
  transform-origin:top center;margin-bottom:-90px;
  box-shadow:0 -2px 0 rgba(20,20,63,.05) inset,0 40px 90px -36px rgba(113,75,103,.52)}
.hero--bright.hv-center .hb-shot:hover{transform:perspective(2200px) rotateX(2deg)}
.hero--bright.hv-center .hb-chip{left:auto;right:-26px;bottom:120px}

/* ---------------------------------------------------------- V3  SPLIT */
/* overflow stays visible vertically — the copy panel and chip rely on it — but the
   tilted screen is 132% wide on purpose and was escaping the viewport, giving every
   split-hero page a 32px horizontal scroll at tablet width. overflow-x:clip trims it
   at the edge without turning this into a scroll container the way hidden would. */
.hero--split{background:none;overflow:visible;overflow-x:clip}
.hero--split .hb-orb{display:none}
.hero--split .ee-wrap{max-width:none;padding:0;display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:0;align-items:stretch}
.hero--split .hb-copy{background:
    radial-gradient(760px 520px at 12% 0%, rgba(113,75,103,.5), transparent 64%),
    linear-gradient(170deg,#1B1740 0%,#14143F 60%,#171444 100%);
  padding:92px clamp(28px,5vw,88px) 84px;justify-content:center}
.hero--split .crumb{color:#A49BBC}
.hero--split .crumb a{color:#A49BBC}
.hero--split .crumb strong{color:#fff}
.hero--split .eyebrow{color:#D7B0CA}
.hero--split .eyebrow::before{background:#D7B0CA}
.hero--split h1{color:#fff;font-size:clamp(38px,4.3vw,62px);max-width:15ch}
.hero--split h1 em{background:linear-gradient(96deg,#E3B7D4,#FF8A6B);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero--split p.sub{color:#BFB8D4;max-width:44ch}
.hero--split .btn-gh{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.hero--split .btn-gh:hover{color:#E3B7D4;border-bottom-color:#E3B7D4}
.hero--split .hstats{border-top-color:rgba(255,255,255,.16)}
.hero--split .hstats div{border-left-color:rgba(255,255,255,.1)}
.hero--split .hstats b{color:#fff}
.hero--split .hstats span{color:#A49BBC}
.hero--split .bychip{color:#9A91B4}
.hero--split .bychip b{color:#fff}
.hero--split .bychip i{color:rgba(255,255,255,.2)}
.hero--split .hb-wrap{position:relative;min-height:100%}
.hero--split .hb-shot{position:absolute;inset:0;width:100%;border-radius:0;border:0;
  transform:none;box-shadow:none;overflow:hidden}
.hero--split .hb-shot:hover{transform:none}
.hero--split .hb-shot::before,.hero--split .hb-dots{display:none}
.hero--split .hb-shot img{margin-top:0;width:100%;height:100%;object-fit:cover}
.hero--split .hb-shot::after{background:linear-gradient(100deg,rgba(20,20,63,.42),transparent 42%)}
.hero--split .hb-chip{left:40px;bottom:40px}

/* ---------------------------------------------------------- V4  STAT-LED */
.hero--bright.hv-stat .ee-wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:60px;align-items:center}
.hv-figure{position:relative;z-index:1;background:#fff;border:1px solid rgba(20,20,63,.08);
  border-radius:24px;padding:38px;box-shadow:0 44px 100px -46px rgba(113,75,103,.55)}
.hv-figure .hvf-top{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.hv-figure .hvf-big{font-family:"Bricolage Grotesque",system-ui;font-size:clamp(46px,5.4vw,70px);
  line-height:1;letter-spacing:-.04em;
  background:linear-gradient(96deg,var(--odoo),#A96E97 60%,var(--coral));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hv-figure .hvf-unit{font-size:16px;color:#7A7A9C;font-weight:600}
.hv-figure .hvf-cap{font-size:14.5px;color:#53537A;margin:0 0 26px;line-height:1.6}
.hv-figure .hvf-rows{border-top:1px solid rgba(20,20,63,.08);margin:0;padding:0}
.hv-figure .hvf-rows li{list-style:none;display:flex;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid rgba(20,20,63,.06);font-size:14.5px}
.hv-figure .hvf-rows li:last-child{border-bottom:0}
.hv-figure .hvf-rows b{color:var(--navy);font-weight:600}
.hv-figure .hvf-rows span{color:#7A7A9C;white-space:nowrap}
.hv-figure .hvf-note{margin:22px 0 0;font-size:12.5px;color:#8A8AA8;line-height:1.55}
/* a small screen peeking behind the card */
.hv-figure::before{content:"";position:absolute;inset:-26px -26px 60px 40px;border-radius:26px;
  background:linear-gradient(140deg,rgba(113,75,103,.16),rgba(255,90,110,.08));z-index:-1}

@media(max-width:1100px){
  .hero--split .ee-wrap{grid-template-columns:1fr}
  .hero--split .hb-copy{padding:56px 24px 48px}
  .hero--split .hb-wrap{min-height:320px}
  .hero--split .hb-shot{position:relative;height:320px}
  .hero--bright.hv-stat .ee-wrap{grid-template-columns:1fr;gap:38px}
  .hero--bright.hv-center .hb-shot{margin-bottom:-40px}
  .hero--bright.hv-center .hb-chip{right:10px;bottom:60px}
}

/* split: the copy panel is dark, so the byline and ghost button must not keep
   the light-hero treatment, and the photo should hold its left edge */
.hero--split .bychip{background:none;border:0;padding:0;box-shadow:none;
  margin:30px 0 0;font-size:13px;gap:10px}
.hero--split .cta-row{gap:22px;align-items:center;margin-top:30px}
.hero--split .btn-gh{background:none;border:0;padding:0;border-radius:0;
  border-bottom:2px solid rgba(255,255,255,.35);font-weight:600}
.hero--split .btn-gh:hover{background:none;transform:none}
.hero--split .hb-shot img{object-position:center center}
.hero--split .hb-shot::after{background:
  linear-gradient(100deg,rgba(20,20,63,.55) 0%,rgba(20,20,63,.12) 34%,transparent 60%)}

/* the figure card already carries the numbers, so the strip underneath just
   repeats them — drop it on stat pages and let the copy breathe */
.hero--bright.hv-stat .hstats{display:none}
.hero--bright.hv-stat .bychip{margin-top:34px;padding-top:24px;
  border-top:1px solid rgba(20,20,63,.1);width:100%}

/* ---- the people rail: eighteen developers without pushing the page down ----
   A grid of eighteen profile cards buries whatever follows it, so the team
   scrolls sideways instead. Snap points stop it drifting between cards, and the
   mask fades the right edge so it reads as "there is more" rather than "the
   layout is cut off". Keyboard and touch both scroll it natively; there is no
   JavaScript here on purpose. */
.rail{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 22px;
  scroll-snap-type:x proximity;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent 100%)}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:rgba(20,20,63,.18);border-radius:99px}
.rail::-webkit-scrollbar-track{background:rgba(20,20,63,.05);border-radius:99px}

.person{flex:0 0 206px;scroll-snap-align:start;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:8px;padding:24px 16px 20px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:inherit;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
.person:hover{transform:translateY(-4px);border-color:rgba(113,75,103,.4);
  box-shadow:0 18px 40px -22px rgba(20,20,63,.4)}
.person img{width:96px;height:96px;border-radius:50%;object-fit:cover;
  background:#F3F1F6;display:block}
.person-mark{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--navy),#2A2560);color:#fff;
  font:650 28px var(--sans);letter-spacing:.5px}
.person b{font-size:15.5px;color:var(--navy);font-weight:650;line-height:1.25}
.person-role{font-size:12.5px;color:#7A7A9C;line-height:1.4}
.person-tags{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:auto;padding-top:10px}
.person-tags i{font-style:normal;font-size:10.5px;letter-spacing:.2px;
  padding:4px 9px;border-radius:99px;background:#F3F1F6;color:#5B5680;
  border:1px solid rgba(20,20,63,.07)}

/* on a dark section the cards invert rather than glowing white */
.sec--navy .person{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.sec--navy .person b{color:#fff}
.sec--navy .person-role{color:#A49BBC}
.sec--navy .person-tags i{background:rgba(255,255,255,.08);color:#C9C9E4;
  border-color:rgba(255,255,255,.12)}
.sec--navy .rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.26)}
.sec--navy .rail::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}

@media(max-width:560px){.person{flex-basis:168px;padding:20px 12px 16px}
  .person img,.person-mark{width:80px;height:80px}}
@media(prefers-reduced-motion:reduce){.person{transition:none}
  .person:hover{transform:none}}

/* a developer profile puts their face in the hero chip instead of initials */
.hb-chip u img{width:100%;height:100%;border-radius:inherit;object-fit:cover;display:block}
.hb-chip u:has(img){background:#F3F1F6;padding:0;overflow:hidden}

/* ---------- 22. ENQUIRY FORM ----------
   The contact page had no form at all — only a phone number — so the one thing
   the site exists to do had no route that did not require picking up a phone.
   Styled on the existing card vocabulary rather than anything new. */
.cform-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
@media(max-width:900px){.cform-wrap{grid-template-columns:1fr;gap:34px}}

.cform{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:30px 30px 26px;box-shadow:0 24px 54px -34px rgba(20,20,63,.3)}
.cform > div{display:flex;flex-direction:column;gap:6px}
.cform label{font-size:13.2px;font-weight:600;color:var(--navy);letter-spacing:.01em}
.cform input,.cform select,.cform textarea{
  font:inherit;font-size:15px;color:var(--navy);background:#FBFBFD;
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%;
  transition:border-color .18s,box-shadow .18s,background .18s}
.cform textarea{resize:vertical;min-height:104px;line-height:1.55}
.cform input::placeholder,.cform textarea::placeholder{color:#9A9ABA}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:0;background:#fff;border-color:var(--coral);
  box-shadow:0 0 0 3px rgba(255,90,110,.16)}
.cform .two-col{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:560px){.cform{padding:24px 20px 22px}.cform .two-col{grid-template-columns:1fr}}
.cform button{margin-top:4px;width:100%}
.cform button[disabled]{opacity:.65;cursor:default}
.cform-note{margin:10px 0 0;font-size:14px;line-height:1.5}

/* what the visitor gets for filling it in, beside the form rather than above it */
.cform-aside{padding-top:6px}
.cform-aside h3{font-size:19px;font-weight:700;color:var(--navy);margin:0 0 14px}
.cform-aside ol{margin:0;padding:0;counter-reset:cf}
.cform-aside li{list-style:none;counter-increment:cf;position:relative;padding:0 0 18px 42px}
.cform-aside li::before{content:counter(cf,decimal-leading-zero);position:absolute;left:0;top:-1px;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,90,110,.1);border:1px solid rgba(255,90,110,.32);
  color:var(--coral);font-size:11.5px;font-weight:700}
.cform-aside li b{display:block;font-size:15.4px;color:var(--navy);margin-bottom:3px}
.cform-aside li span{display:block;font-size:14.4px;color:var(--body);line-height:1.6}