/* Adhera — shared section components and the glass illustration kit, used by every page.
   Moved out of index.html when the site grew from one page to many. Page-only illustrations live inline in each page. */

/* Hero */
.hero{padding-top:84px;text-align:center}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--body);background:#fff;border:1px solid var(--line);border-radius:819px;padding:6px 13px 6px 11px;box-shadow:0 1px 2px rgba(20,20,20,.04)}
/* Live dot: pings twice once the headline has resolved, then rests */
.pulse{position:relative;width:7px;height:7px;border-radius:50%;flex:none;background:var(--green)}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);opacity:0;animation:ping 2s var(--ease) 1.4s 2}
@keyframes ping{from{opacity:.5;transform:none}to{opacity:0;transform:scale(2.8)}}
.hero h1{font-size:clamp(38px,5.2vw,64px);line-height:1.03;max-width:13em;margin:22px auto 0;text-wrap:balance}
.hero .lead{margin:22px auto 0;max-width:36em}
.hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.hero-photo{margin:56px 0 0;border-radius:23px;overflow:hidden;aspect-ratio:16/10;background:#e6d8c6;box-shadow:0 40px 80px -48px rgba(90,60,30,.55)}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:55% 62%;animation:settle 1.8s var(--ease) both}
@keyframes settle{from{transform:scale(1.03)}to{transform:none}}
/* Hero entrance: one cascade with the headline; the photo (LCP) paints on the first frame */
.load{animation:rise .7s var(--ease) both;animation-delay:var(--at,0ms)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.hero-wait .hero .load{animation-play-state:paused}}

/* Section intro */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;padding-top:120px;padding-bottom:36px}
.intro .lead{max-width:30em}

/* Mesh gradients: blurred colour fields under a film grain */
.mesh{position:relative;overflow:hidden;isolation:isolate}
.mesh::before{content:"";position:absolute;inset:-20%;z-index:-2;background:var(--mesh);filter:blur(var(--blur,24px));transition:transform .7s var(--ease)}
.mesh::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);background-size:180px;opacity:var(--grain-o,.38);mix-blend-mode:overlay;pointer-events:none}
/* One family, four close variations (OpenAI-style: light, silky, blue to teal) */
/* One brand colour (Thomas, 6 Nov 2026): all variants are the sand mesh; the class names stay so pages need no edits */
.m-sky{--mesh:linear-gradient(130deg,transparent 30%,rgba(255,255,255,.5) 46%,transparent 62%),radial-gradient(55% 50% at 0% 0%,#f6f2eb,transparent),radial-gradient(60% 55% at 100% 100%,#d6ccbb,transparent),radial-gradient(50% 45% at 100% 0%,#e9e2d6,transparent),linear-gradient(160deg,#ece6dc,#e1d9cc 55%,#e6dfd4)}
.m-peri{--mesh:linear-gradient(130deg,transparent 30%,rgba(255,255,255,.5) 46%,transparent 62%),radial-gradient(55% 50% at 0% 0%,#f6f2eb,transparent),radial-gradient(60% 55% at 100% 100%,#d6ccbb,transparent),radial-gradient(50% 45% at 100% 0%,#e9e2d6,transparent),linear-gradient(160deg,#ece6dc,#e1d9cc 55%,#e6dfd4)}
.m-butter{--mesh:linear-gradient(130deg,transparent 30%,rgba(255,255,255,.5) 46%,transparent 62%),radial-gradient(55% 50% at 0% 0%,#f6f2eb,transparent),radial-gradient(60% 55% at 100% 100%,#d6ccbb,transparent),radial-gradient(50% 45% at 100% 0%,#e9e2d6,transparent),linear-gradient(160deg,#ece6dc,#e1d9cc 55%,#e6dfd4)}
.m-sand{--mesh:linear-gradient(130deg,transparent 30%,rgba(255,255,255,.5) 46%,transparent 62%),radial-gradient(55% 50% at 0% 0%,#f6f2eb,transparent),radial-gradient(60% 55% at 100% 100%,#d6ccbb,transparent),radial-gradient(50% 45% at 100% 0%,#e9e2d6,transparent),linear-gradient(160deg,#ece6dc,#e1d9cc 55%,#e6dfd4)}

/* Feature grid */
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:10px 10px 28px;display:flex;flex-direction:column;transition:border-color .2s ease,box-shadow .2s ease}
.viz{aspect-ratio:5/4;border-radius:13px;display:grid;place-items:center;padding:22px;container-type:inline-size}
@container (max-width:350px){.viz>*{zoom:.88}}
@container (max-width:310px){.viz>*{zoom:.78}}
@container (max-width:270px){.viz>*{zoom:.7}}
.fcard>h3{font-size:20px;line-height:1.2;margin-top:22px;padding:0 12px}
.fcard>p{font-size:14.5px;line-height:1.6;color:var(--body);margin-top:8px;padding:0 12px;max-width:40ch}

/* Glass UI kit for the illustrations */
.gl{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:1px solid rgba(255,255,255,.75);border-radius:11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(20,22,40,.06),0 18px 38px -16px rgba(20,22,40,.42)}
.gl-dark{display:inline-flex;align-items:center;gap:7px;background:rgba(40,40,40,.72);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:819px;font-size:11px;font-weight:500;padding:7px 12px 7px 10px;white-space:nowrap;box-shadow:0 12px 28px -14px rgba(10,12,30,.55)}
.skel{height:5px;border-radius:3px;background:rgba(45,45,45,.09)}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:3px 8px;border-radius:81px;white-space:nowrap}
.c-green{background:var(--green-bg);color:var(--green)}
.av{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:8.5px;font-weight:600;color:#fff;letter-spacing:.02em}
.avs{display:flex}
.avs .av{box-shadow:0 0 0 2px #fff}
.avs .av+.av{margin-left:-6px}
.ref{font-family:var(--mono);font-size:9px;color:#5b5f66;background:rgba(45,45,45,.06);border-radius:5px;padding:2px 6px;white-space:nowrap}
.file{display:grid;place-items:center;width:26px;height:32px;border-radius:5px;flex:none;background:linear-gradient(160deg,#ef6a50,#d6432d);color:#fff;font-size:7.5px;font-weight:700;letter-spacing:.04em}
.file.sm{width:16px;height:20px;font-size:5.5px;border-radius:3px}
.live{width:6px;height:6px;border-radius:50%;flex:none;background:#7ef0c0;box-shadow:0 0 0 3px rgba(126,240,192,.25)}

/* 01 TMF: a stack of signed documents */
.tmf{position:relative;width:264px;padding-top:26px}
.sheet-2,.sheet-3{position:absolute;left:0;right:0;top:26px;bottom:0;padding:11px 14px;font-size:10.5px;font-weight:500;color:var(--muted)}
.sheet-3{transform:translate(24px,-26px) rotate(5deg) scale(.9);opacity:.5}
.sheet-2{transform:translate(12px,-13px) rotate(2.5deg) scale(.95);opacity:.75}
.sheet-1{position:relative;padding:14px 14px 12px}
.sh-head{display:flex;align-items:center;gap:10px}
.sh-head b{display:block;font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.sh-head small{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.sh-lines{display:grid;gap:6px;margin:14px 0}
.sh-foot{display:flex;align-items:center;gap:8px;padding-top:11px;border-top:1px solid rgba(45,45,45,.07);font-size:10px;color:var(--body)}
.sh-foot .chip{margin-left:auto}
.tmf .gl-dark{position:absolute;left:-20px;bottom:-18px}

/* 02 Årshjul: rows of upcoming dates */
.wc-title{font-size:9.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.ms{display:grid;grid-template-columns:8px minmax(0,1fr);column-gap:8px;align-items:center}
.ms i{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #b9b9be}
.ms.on i{background:var(--ink);box-shadow:none}
.ms span{font-size:11px;font-weight:500;line-height:1.25}
.ms small{font-variant-numeric:tabular-nums;grid-column:2;font-size:10px;color:var(--muted);margin-top:1px}

/* 03 Samarbejde: a channel */
.collab{position:relative;width:100%;max-width:290px}
.chatwin{overflow:hidden}
.cw-head{display:flex;align-items:center;gap:5px;padding:11px 14px;border-bottom:1px solid rgba(45,45,45,.07);font-size:12px}
.cw-head .hash{color:var(--muted);font-weight:500}
.cw-head b{font-weight:600;letter-spacing:-.01em}
.cw-head .avs{margin-left:auto}
.cw-head .av{width:18px;height:18px;font-size:6.5px}
.cw-body{padding:12px 14px 14px;display:grid;gap:12px}
.msg{display:flex;gap:9px;align-items:flex-start}
.msg b{display:block;font-size:10.5px;font-weight:600}
.msg b span{font-weight:400;color:var(--muted);margin-left:4px}
.msg p{font-size:11.5px;line-height:1.4;color:var(--body);margin-top:2px}
.attach{display:inline-flex;align-items:center;gap:7px;margin-top:7px;padding:4px 9px 4px 5px;border:1px solid rgba(45,45,45,.08);border-radius:8px;font-size:10.5px;font-weight:500;background:rgba(255,255,255,.7)}
.typing{display:inline-flex;gap:3px;padding:8px 10px;border-radius:8px;background:rgba(45,45,45,.06)}
/* The dots type three times after the card lands, then rest */
.typing i{width:4px;height:4px;border-radius:50%;background:#8c8c92;opacity:.3}
.fcard.in .typing i{animation:blink 1.2s ease-in-out .6s 3}
.fcard.in .typing i:nth-child(2){animation-delay:.75s}
.fcard.in .typing i:nth-child(3){animation-delay:.9s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.collab .gl-dark{position:absolute;right:-14px;bottom:-14px}

/* 04 Delegation: the chain of authority */
.tree{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:300px;padding-top:4px}
.node{display:flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;border-radius:10px;font-size:11px;font-weight:600;white-space:nowrap}
.node small{display:block;font-weight:400;color:var(--muted);font-size:9.5px;margin-top:1px}
.node-pi{box-shadow:0 0 0 3px rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.9),0 18px 38px -16px rgba(20,22,40,.42)}
.vl{display:block;width:1.5px;height:16px;background:rgba(45,45,45,.2)}
.kids{display:flex;gap:10px;padding-top:16px}
.kids>div{position:relative;display:flex;flex-direction:column;align-items:center}
.kids>div::before{content:"";position:absolute;top:-16px;left:50%;width:1.5px;height:16px;background:rgba(45,45,45,.2)}
.kids>div::after{content:"";position:absolute;top:-16px;height:1.5px;background:rgba(45,45,45,.2)}
.kids>div:first-child::after{left:50%;right:-5px}
.kids>div:last-child::after{left:-5px;right:50%}
.sign{position:absolute;right:-20px;top:-18px;padding:8px 11px 5px;border-radius:10px}
.sign small{display:block;font-size:9.5px;font-weight:600;color:var(--blue)}
.sign svg{display:block;margin-top:2px}
/* One-shot explainers, played once when the card is revealed: the PI signs, the readiness ring fills */
.sign path{stroke-dasharray:1;transition:stroke-dashoffset .9s cubic-bezier(.77,0,.175,1) .45s}
.js .fcard:not(.in) .sign path{stroke-dashoffset:1}

/* 05 AI Protocol Chat */
.chat{width:100%;max-width:292px;display:flex;flex-direction:column;gap:9px}
.q{align-self:flex-end;max-width:84%;font-size:11.5px;line-height:1.45;padding:9px 12px;border-radius:11px 11px 4px 11px}
.a{padding:12px 13px}
.a-head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600}
.a-meta{margin-left:auto;font-weight:500;color:var(--muted);font-size:10px}
.ai-dot{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;background:linear-gradient(135deg,#2aa3dc,#5b86f5)}
.ai-dot svg{width:10px;height:10px}
.a p{font-size:11.5px;line-height:1.5;color:var(--body);margin-top:7px}
.a mark{background:rgba(255,210,90,.45);color:inherit;border-radius:3px;padding:0 2px}
.cites{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.ask{display:flex;border-radius:10px;padding:5px 5px 5px 13px;color:rgba(255,255,255,.85)}
.ask .send{margin-left:auto;width:24px;height:24px;border-radius:8px;background:#fff;display:grid;place-items:center}

/* 06 Editor & Review: the requirement checklist */
.review{position:relative;width:100%;max-width:292px;padding-top:44px}
.chk{padding:11px 13px 3px}
.chk-head{display:flex;align-items:center;gap:5px;padding-bottom:8px}
.chk-head b{font-size:11.5px;font-weight:600;margin-right:auto}
.req{display:grid;grid-template-columns:8px minmax(0,1fr) auto;column-gap:9px;align-items:center;padding:8px 0;border-top:1px solid rgba(45,45,45,.07)}
.req i{width:8px;height:8px;border-radius:50%}
.req span{display:block;font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.req small{display:block;font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:2px}
.req em{font-style:normal;font-size:10px;font-weight:600}
.st-ok{color:var(--green)}.st-miss{color:var(--red)}.st-warn{color:var(--amber)}
.score-card{position:absolute;right:-16px;top:-6px;display:flex;align-items:center;gap:10px;padding:8px 13px 8px 8px}
.ring{position:relative;width:38px;height:38px;flex:none}
.ring svg{display:block;width:38px;height:38px;transform:rotate(-90deg)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:700;color:#c8511f;font-variant-numeric:tabular-nums}
.ring circle+circle{stroke-dasharray:94.25;stroke-dashoffset:26.35;transition:stroke-dashoffset 1.2s var(--ease) .6s,opacity .15s linear .6s}
.js .fcard:not(.in) .ring circle+circle{stroke-dashoffset:94.25;opacity:0}
.score-card strong{display:block;font-size:11px;font-weight:600}
.score-card small{display:block;font-size:9.5px;color:var(--muted);margin-top:1px}

/* REDCap: one wide card, copy on the left and the field mapping on a gradient */
.integ{padding-top:120px}
.integ-card{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:10px;background:var(--card);border:1px solid var(--line);border-radius:23px;padding:10px;transition:border-color .2s ease,box-shadow .2s ease}
.integ-text{display:flex;flex-direction:column;justify-content:center;padding:48px 36px 48px 46px}
.integ .lead{margin-top:18px;max-width:30em}
.integ-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.integ-list li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--body)}
.integ-cta{margin-top:30px;padding-top:24px;border-top:1px solid var(--line-soft)}
.integ-cta p{font-size:15px;line-height:1.6;color:var(--body);max-width:32em}
.integ-cta .btn{margin-top:14px}
.tick{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--green-bg);color:var(--green)}
.tick svg{width:11px;height:11px}
.integ-viz{border-radius:16px;padding:72px 40px;min-height:500px;display:grid;place-items:center;container-type:inline-size}
.sys-ic{width:20px;height:20px;border-radius:6px;flex:none}
.sys-ic-adhera{object-fit:contain;padding:1px}
.sys-ic-rc{display:grid;place-items:center;background:#b3261e;color:#fff;font-size:8.5px;font-weight:700;letter-spacing:.02em}
.rc{position:relative;width:100%;max-width:420px}
.rc-proj{position:absolute;right:-26px;top:-46px;display:flex;align-items:center;gap:9px;padding:9px 16px 9px 9px;transform:rotate(3deg);opacity:.85}
.rc-proj b{display:block;font-size:11.5px;font-weight:600;letter-spacing:-.01em}
.rc-proj small{display:block;font-size:10px;color:var(--muted);margin-top:1px}
.rc-map{position:relative;padding-bottom:6px}
.rc-head{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid rgba(45,45,45,.07)}
.rc-app{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.rc-swap{display:grid;place-items:center;color:#9a9aa0}
.rc-head small{margin-left:auto;font-size:10.5px;color:var(--muted)}
.rc-cols,.rc-row{display:grid;grid-template-columns:minmax(0,1fr) 14px minmax(0,.78fr) 16px;column-gap:10px;align-items:center;padding:0 16px}
.rc-cols{padding-top:11px;padding-bottom:5px;font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.rc-row{height:36px;font-size:12px}
.rc-row+.rc-row{border-top:1px solid rgba(45,45,45,.05)}
.rc-row span{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-row>svg{color:#b4b4ba}
.rc-row code{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);font-size:10.5px;color:#a3322a;background:rgba(179,38,30,.07);border-radius:5px;padding:2px 6px}
.rc-st{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--green);transition:background-color .3s,box-shadow .3s;transition-delay:calc(var(--i) * 180ms + 700ms)}
.rc-st svg{width:9px;height:9px;transition:opacity .25s,transform .35s var(--ease);transition-delay:inherit}
/* Rows tick over to synced one by one once the card is revealed */
.js .integ-card:not(.in) .rc-st{background:transparent;box-shadow:inset 0 0 0 1.5px #cfcfd4}
.js .integ-card:not(.in) .rc-st svg{opacity:0;transform:scale(.5)}
.rc .gl-dark{position:absolute;left:-22px;bottom:-26px}
@container (max-width:380px){.rc{zoom:.86}.rc-proj{right:-8px}.rc .gl-dark{left:-12px}}

/* Compliance: four small cards, each with a single piece of proof on a gradient */
.comp{text-align:center;padding-top:120px;padding-bottom:36px}
.comp .lead{margin:16px auto 0;max-width:34em;font-size:16px}
.ccols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ccol{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:8px 8px 26px;display:flex;flex-direction:column;transition:border-color .2s ease,box-shadow .2s ease}
.cviz{aspect-ratio:16/10;border-radius:12px;display:grid;place-items:center;padding:16px;--blur:20px}
.ccol h3{font-size:18px;line-height:1.2;margin-top:20px;padding:0 14px}
.ccol p{font-size:14px;line-height:1.6;color:var(--body);margin-top:8px;padding:0 14px}
.cm{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;column-gap:10px;width:100%;max-width:232px;padding:10px 12px 10px 10px}
.cm-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center}
.cm-ic svg{width:15px;height:15px}
.cm b{display:block;font-size:12px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm small{display:block;font-size:10.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm small.mono{font-family:var(--mono);font-size:9.5px}
.cm-bar{grid-column:1/-1;display:block;height:4px;margin-top:10px;border-radius:2px;background:rgba(45,45,45,.08);overflow:hidden}
.cm-bar i{display:block;width:17%;height:100%;border-radius:2px;background:var(--red)}
.c-amber{background:var(--amber-bg);color:var(--amber)}
.c-red{background:var(--red-bg);color:var(--red)}
.c-ink{background:rgba(45,45,45,.07);color:var(--ink)}

/* All modules */
.mods-head{padding-top:120px;padding-bottom:8px}
.mgroup{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);gap:32px;margin-top:40px}
.mgroup+.mgroup{margin-top:48px}
.mgroup-title{padding-top:6px}
.mgroup-title h3{display:flex;align-items:center;gap:10px;font-size:19px;letter-spacing:-.015em}
.mgroup-title p{font-size:14px;line-height:1.55;color:var(--muted);margin-top:8px;max-width:22em}
.mdot{width:12px;height:12px;border-radius:50%;flex:none}
.mlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mitem{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:22px 22px 24px;transition:border-color .2s,box-shadow .2s}
.mi-ic{display:block;width:26px;height:26px;margin-bottom:18px;color:var(--ink)}
.mitem h4{font-size:15px;font-weight:600;letter-spacing:-.02em}
.mitem p{font-size:14px;line-height:1.55;color:var(--body);margin-top:6px}

/* Hover only where there is a real pointer, so taps don't leave cards stuck */
@media (hover:hover) and (pointer:fine){
  .fcard:hover,.integ-card:hover,.ccol:hover{border-color:#d9dcdf;box-shadow:0 18px 40px -22px rgba(17,20,24,.2)}
  .fcard:hover .mesh::before{transform:scale(1.05) translate3d(-2%,2%,0)}
  .integ-card:hover .integ-viz::before,.ccol:hover .cviz::before{transform:scale(1.04) translate3d(-2%,2%,0)}
  .faq-head:hover .faq-q{color:var(--body)}
  .mitem:hover{border-color:#d5d9dc;box-shadow:0 6px 20px rgba(17,20,24,.05)}
}

/* Team: two labelled groups, the leadership on its own row above everyone else */
.team-group{margin-top:12px}
.team-group+.team-group{margin-top:44px}
.team-grid{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:44px 24px;--per:5;--gap:24px}
.team-grid>.person{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));min-width:0}
.person{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:16px}
.pav{width:100%;height:auto;aspect-ratio:4/5;border-radius:10px;flex:none;object-fit:cover;background:#eef0f2;outline:1px solid rgba(20,23,26,.08);outline-offset:-1px}
.person h4{font-size:15px;font-weight:600;letter-spacing:-.02em}
.person p{font-size:14px;color:var(--body);margin-top:2px}
.person small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;padding-top:120px;padding-bottom:120px}
.faq>h2{position:sticky;top:100px;align-self:start}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-h{font:inherit;letter-spacing:normal}
.faq-head{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;background:none;border:0;border-radius:8px;padding:22px 2px;text-align:left;cursor:pointer;color:var(--ink)}
.faq-head:focus-visible{outline-offset:-2px}
.faq-head:active .faq-q{opacity:.7}
.faq-q{font-size:17px;font-weight:500;letter-spacing:-.015em;transition:color .14s ease,opacity .08s ease}
.faq-sign{position:relative;width:14px;height:14px;flex:none}
.faq-sign::before,.faq-sign::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1.5px;margin-top:-.75px;border-radius:1px;background:var(--muted)}
.faq-sign::after{transform:rotate(90deg);transition:transform .2s var(--ease)}
.faq-item.open .faq-sign::after{transform:rotate(0deg)}
.faq-item.open .faq-sign::before,.faq-item.open .faq-sign::after{background:var(--ink)}
/* Answers are open in the markup; with JS, closed rows collapse (closing ~20% faster than opening) */
.faq-awrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .26s var(--ease)}
.js .faq-item:not(.open) .faq-awrap{grid-template-rows:0fr;transition-duration:.2s}
.faq-awrap>div{overflow:hidden}
.faq-a{font-size:15px;line-height:1.65;color:var(--body);padding:0 40px 24px 2px;transition:opacity .22s var(--ease) .06s}
.js .faq-item:not(.open) .faq-a{opacity:0;transition:opacity .12s ease}
html:not(.js) .faq-sign{display:none}

/* Contact: one wide white card like REDCap; the copy and a direct line to the two directors on the left, the fields on the right */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:23px;padding:64px 64px 60px}
.ct-text{display:flex;flex-direction:column;justify-content:center}
.ct-text .lead{margin-top:18px;max-width:29em;text-wrap:balance}
/* Real people to call, under a hairline: portrait, name and the number as a small grey button */
.ct-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:30em;margin-top:36px;padding-top:30px;border-top:1px solid var(--line)}
.ct-person{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.ct-av{width:72px;height:90px;border-radius:7px;flex:none;object-fit:cover;background:#eef0f2;outline:1px solid rgba(20,23,26,.08);outline-offset:-1px}
.ct-name{font-size:15px;font-weight:600;letter-spacing:-.02em}
.ct-role{font-size:14px;color:var(--body);margin-top:2px}
.ct-tel{margin-top:12px;font-variant-numeric:tabular-nums}
.ct-tel svg{width:14px;height:14px;flex:none;color:var(--body)}
/* The fields sit straight in the card: no panel, no card inside the card */
.cform{position:relative;width:100%;container-type:inline-size}
.cf-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.cf-field{display:grid;gap:6px;min-width:0}
.cf-msg{margin-top:14px}
.cf-lab{font-size:13px;font-weight:500;color:var(--body)}
.cf-in{width:100%;background:#fff;border:1px solid rgba(45,45,45,.12);border-radius:8px;padding:10px 13px;color:var(--ink);font-family:inherit;font-size:16px;line-height:1.45;transition:border-color .15s ease,box-shadow .15s ease}
.cf-in::placeholder{color:var(--muted)}
textarea.cf-in{resize:vertical;min-height:112px;display:block}
.cf-in:focus-visible{outline:2px solid var(--ring);outline-offset:1px;border-color:var(--ring)}
.cf-in[aria-invalid="true"]{border-color:rgba(200,65,43,.6);box-shadow:0 0 0 3px rgba(200,65,43,.1)}
.cf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px}
.cf-status{font-size:13.5px;line-height:1.45;color:var(--body)}
.cf-note{font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:14px}
.cf-note a{color:var(--body);text-decoration:underline;text-decoration-color:rgba(45,45,45,.3);text-underline-offset:2px}
/* Name and e-mail share a row only while each field stays roomy */
@container (max-width:440px){.cf-row{grid-template-columns:minmax(0,1fr);gap:14px}}
/* Submit label morphs between states without the button changing width */
#cfsend[data-state=sent]{opacity:1}
#cfsend .lbls{display:inline-grid}
#cfsend .lbl{grid-area:1/1;text-align:center;transition:opacity .2s ease,filter .2s ease,transform .2s var(--ease),visibility 0s}
#cfsend:not([data-state=idle]) .lbl[data-s=idle],#cfsend:not([data-state=sending]) .lbl[data-s=sending],#cfsend:not([data-state=sent]) .lbl[data-s=sent]{opacity:0;filter:blur(2px);transform:scale(.96);visibility:hidden;transition:opacity .15s ease,filter .15s ease,transform .15s var(--ease),visibility 0s .15s}
@media (prefers-reduced-motion:reduce){.faq-a,#cfsend .lbl{transition-property:opacity!important;transition-duration:.2s!important;transition-delay:0s!important}}

@media (max-width:1024px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ccols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mgroup{grid-template-columns:1fr;gap:16px}
  .integ-text{padding:40px 28px 40px 34px}
  .contact{gap:44px;padding:48px 40px 44px}
  .mlist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team-grid{--per:3}
}
@media (max-width:760px){
  .hero{padding-top:56px}
  .hero-photo{aspect-ratio:5/4;margin-top:40px;border-radius:16px}
  .hero-photo img{object-position:58% 58%}
  .intro{grid-template-columns:1fr;gap:16px;padding-top:88px}
  .fgrid{grid-template-columns:1fr}
  .comp{padding-top:88px}
  .integ{padding-top:88px}
  .integ-card{grid-template-columns:1fr;border-radius:18px;padding:8px}
  .integ-text{padding:30px 18px 26px}
  .integ-viz{order:-1;padding:64px 26px 56px;min-height:0;border-radius:12px}
  .mods-head{padding-top:88px}
  .team-group{margin-top:8px}
  .faq{grid-template-columns:1fr;gap:24px;padding-top:88px;padding-bottom:88px}
  .faq>h2{position:static}
  .contact{grid-template-columns:1fr;gap:28px;padding:34px 24px 30px;border-radius:18px}
}
@media (max-width:560px){
  .ccols,.mlist{grid-template-columns:1fr}
  .team-grid{--per:2;--gap:16px;gap:32px 16px}
  .team-group+.team-group{margin-top:32px}
  .contact{padding:28px 18px 24px}
  /* Too narrow for two columns: one row per person, portrait beside the text */
  .ct-people{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:28px;padding-top:24px}
  .ct-person{flex-direction:row;align-items:center;gap:16px}
  .ct-av{width:68px;height:85px}
  .viz{aspect-ratio:auto;min-height:300px;padding:18px}
  .cviz{aspect-ratio:2/1}
}
/* Form status: errors read as errors */
.cf-status[data-tone=error]{color:var(--red)}
.cf-status[data-tone=ok]{color:var(--green)}