/* ═══════════════════════════════════════════════════════════ Rkieh Productions — Design System Editorial/cream ground · confident type · playful accents Productions = warm oat + brand red · Solutions = deep ink + matcha ═══════════════════════════════════════════════════════════ */ /* ── 1. Tokens ──────────────────────────────────────────── */ :root{ --oat-50:#fffcfa; --oat-100:#faf9f6; --oat-200:#f4f2ec; --oat-300:#ece7db; --oat-400:#dcd5c6; --oat-500:#c2bcae; --oat-600:#9d998f; --oat-700:#7d7a73; /* oat-750 exists because oat-700 was being used as a text colour and does not survive that: 3.83:1 on the ground. This is 5.03:1, and oat-700 stays available for the hairlines and fills that are genuinely decorative. */ --oat-750:#6b675f; --oat-800:#514f4a; --oat-900:#33312d; --oat-950:#1a1917; --matcha-100:#dcfbe6;--matcha-200:#b6f2ca;--matcha-300:#7fe4a8;--matcha-400:#41cd83; --matcha-500:#12ab66;--matcha-600:#088a53;--matcha-700:#046a3f;--matcha-900:#04331f; --berry-100:#e8f3ff; --berry-300:#8cc6ff; --berry-500:#0a83f5; --berry-700:#0a54b0; --fruit-100:#ffeef9; --fruit-300:#ffb4e6; --fruit-500:#f767cd; --fruit-700:#c40e92; --lemon-100:#fff6cf; --lemon-300:#fbdf7a; --lemon-500:#f2b622; --lemon-700:#a9770c; --tang-100:#fff0e6; --tang-300:#ffbc92; --tang-500:#f9812f; --tang-700:#b8511c; --ube-100:#f2eeff; --ube-300:#c3b3ff; --ube-500:#8358f4; --ube-700:#5719c4; --pom-100:#ffecec; --pom-300:#ffbdc0; --pom-500:#e5484d; --pom-700:#ab1d24; --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --serif:"Instrument Serif",Georgia,"Times New Roman",serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --t-display:clamp(2.9rem,1.3rem + 6.4vw,6.25rem); /* THE SCALE IS CLAY'S, READ OFF THE LIVE SITE. Their h1 is 88px at weight 575 on a 1.0 line with -0.04em of tracking; h2 72/500/-0.03em; h3 48/500/-0.04em; body 16 on 1.5; small 14. The maxima here are those numbers. The clamps are ours and stay — clay.com sets its display sizes flat and simply lets a phone have an 88px headline, which is a choice a site with five capability names in its bar cannot afford. */ --t-h1:clamp(2.6rem,1.15rem + 6.05vw,5.5rem); /* -> 88px */ --t-h2:clamp(2.05rem,1.2rem + 3.55vw,4.5rem); /* -> 72px */ --t-h3:clamp(1.5rem,1.12rem + 1.6vw,3rem); /* -> 48px */ --t-h4:clamp(1.15rem,1.05rem + .42vw,1.5rem); /* -> 24px */ --t-body:1rem; /* 16px, flat, as theirs */ --t-sm:.875rem; --t-xs:.8125rem; --sp-sec:clamp(4.5rem,3rem + 7vw,9.5rem); --sp-gap:clamp(1.15rem,.85rem + 1.3vw,1.9rem); --wrap:1230px; --wrap-mid:960px; --wrap-narrow:760px; --r-xs:.375rem; --r-sm:.625rem; --r-md:1rem; --r-lg:1.5rem; --r-xl:2.25rem; --r-pill:999px; /* THE BUTTON RADIUS, MEASURED OFF CLAY. Every button on clay.com is 12px, flat: their 39px header button and their 47px hero button carry the same value, so the corner is a constant and not a fraction of the height. Ours were pills, which is a different family of object altogether. */ --r-btn:12px; /* the header bar: its inset from the window, and the radius it turns its two bottom corners on */ --hdr-gut:clamp(.5rem,2.4vw,2.25rem); --r-hdr:clamp(.9rem,.5rem + 1.2vw,1.5rem); --ring:0 0 0 1px var(--line); --sh-sm:0 1px 2px rgba(26,25,23,.05),0 2px 6px -2px rgba(26,25,23,.06); --sh-md:0 4px 10px -3px rgba(26,25,23,.09),0 14px 30px -12px rgba(26,25,23,.12); --sh-lg:0 10px 24px -6px rgba(26,25,23,.10),0 36px 70px -28px rgba(26,25,23,.20); --ease:cubic-bezier(.22,1,.36,1); --dur:.5s; } /* ── Brand accents on ONE shared cream foundation ──────── Both divisions sit on the same oat ground; only the accent changes, so the site reads as one company with two specialisms. */ :root, [data-brand="productions"], [data-brand="solutions"]{ --ink:var(--oat-950); --ink-2:var(--oat-800); --ink-3:var(--oat-750); /* white, as asked. The oat ground it replaces is still the fallback tint on --surface-2, which is what keeps cards and panels visible on it. */ --ground:#ffffff; --surface:var(--oat-50); --surface-2:var(--oat-100); --panel:var(--oat-950); --panel-ink:var(--oat-100); --line:var(--oat-400); --line-2:var(--oat-300); --focus:#d42b30; /* both division accents are always available */ --pro:#d42b30; --pro-2:#a81b20; --pro-tint:#ffeceb; --brand-text:#b8242a; /* 5.64:1 on the ground */ --sol:#088a53; --sol-2:#046a3f; --sol-tint:#dcfbe6; } /* The default accent, so a page that renders without a data-brand still has one. Before the cutover every page carried the attribute; the 404 does not, and without this its buttons render unpainted. */ :root{ --brand:var(--pro); --brand-2:var(--pro-2); --brand-tint:var(--pro-tint); --on-brand:var(--oat-50); } /* Productions pages lead with red */ [data-brand="productions"]{ --brand:var(--pro); --brand-2:var(--pro-2); --brand-tint:var(--pro-tint); --on-brand:var(--oat-50); --focus:var(--pro); } /* Solutions pages lead with matcha — same ground, different accent */ [data-brand="solutions"]{ --brand:var(--sol); --brand-2:var(--sol-2); --brand-tint:var(--sol-tint); --on-brand:#f2fbf5; --focus:var(--sol); } /* Opt-in dark panel for sections that need contrast rhythm */ .on-dark{ --ink:var(--oat-100); --ink-2:#b9b6ae; --ink-3:#8e8b84; --surface:#22201d; --surface-2:#2b2925; --line:#3d3a35; --line-2:#332f2b; color:var(--ink); } [data-brand="solutions"] .on-dark{--brand:var(--matcha-300);--brand-2:var(--matcha-200); --brand-tint:#12241b;--on-brand:#032414} [data-brand="productions"] .on-dark{--brand:#ff6b6f;--brand-2:#ff9b9e; --brand-tint:#2e1416;--on-brand:#2e0b0d} /* ── 2. Reset ───────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html:focus-within{scroll-behavior:smooth} body{ margin:0;background:var(--ground);color:var(--ink); font-family:var(--sans);font-size:var(--t-body);line-height:1.5; letter-spacing:-.011em;-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;overflow-x:hidden; } img,svg,video,canvas{display:block;max-width:100%;height:auto} /* 500 and a 1.0 line, which is how clay.com sets every heading. Both were unreachable until this week: the family shipped one real weight, so 600 and 400 drew the same shapes and the leading had to carry the difference. */ h1,h2,h3,h4,h5{margin:0;font-weight:500;line-height:1;letter-spacing:-.03em;text-wrap:balance} p{margin:0;text-wrap:pretty} a{color:inherit;text-decoration:none} ul,ol{margin:0;padding:0;list-style:none} button{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit} input,textarea,select{font:inherit;color:inherit} hr{border:0;border-top:1px solid var(--line-2);margin:0} :focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:var(--r-xs)} ::selection{background:var(--brand);color:var(--on-brand)} @media (prefers-reduced-motion:reduce){ html:focus-within{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ── 3. Layout ──────────────────────────────────────────── */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto; padding-inline:clamp(1.15rem,.5rem + 2.4vw,2.5rem)} .wrap.mid{max-width:var(--wrap-mid)} .wrap.narrow{max-width:var(--wrap-narrow)} .sec{padding-block:var(--sp-sec);position:relative} .sec.tight{padding-block:clamp(3rem,2rem + 4vw,5.5rem)} .sec.flush-top{padding-top:0} .grid{display:grid;gap:var(--sp-gap)} .g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))} .row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem} .stack{display:flex;flex-direction:column} .center{text-align:center} .sec-head{max-width:62ch;margin-bottom:clamp(2rem,1.4rem + 2.4vw,3.5rem)} .sec-head.center{margin-inline:auto;text-align:center} .sec-head .lead{margin-top:1rem} /* ── 4. Type ────────────────────────────────────────────── */ .display{font-size:var(--t-display);line-height:.95;letter-spacing:-.045em;font-weight:600} .h1{font-size:var(--t-h1);letter-spacing:-.04em;font-weight:575} .h2{font-size:var(--t-h2);letter-spacing:-.03em} .h3{font-size:var(--t-h3);letter-spacing:-.04em} .h4{font-size:var(--t-h4);letter-spacing:-.018em;font-weight:600} .lead{font-size:clamp(1.06rem,.98rem + .55vw,1.32rem);line-height:1.52;color:var(--ink-2); letter-spacing:-.016em} .small{font-size:var(--t-sm)} .xs{font-size:var(--t-xs)} .muted{color:var(--ink-3)} .measure{max-width:62ch} .measure-sm{max-width:46ch} /* ONE FAMILY PER SENTENCE. `.ser` set an italic serif inside a sans headline — two typefaces in one line, at a different size and a different optical weight. The class is left in place rather than stripped out of the copy, because it is written into seeded content in a dozen places and a neutral rule turns all of them off at once; there is now nothing to see. */ .ser,.ser-up{font-family:inherit;font-weight:inherit;font-style:normal; font-size:inherit;line-height:inherit;letter-spacing:inherit} .brand-txt{color:var(--brand)} /* THE EYEBROW IS A STACKED PILL, EVERYWHERE (2026-09-06). It was a rule-and-caps line: a 1.5rem hairline, a gap, then the words in brand red. It is now the motif the system cards introduced — a solid pill in the accent with two paler copies fanned out behind it to the right, each a step lighter and a step wider, like a card at the top of a deck. `--eyebrow-accent` is the knob. It falls back to the brand red, and any section that sets an accent of its own is picked up by the rules further down rather than by changing this one. The ghosts are pseudo-elements at z-index:-1. That paints them behind this element's own background but in front of whatever it sits on, which only works while `.eyebrow` creates no stacking context — so it is positioned with z-index:auto deliberately. Give this rule a z-index and they vanish. */ .eyebrow{ position:relative;isolation:auto; display:inline-block; padding:.45rem 1.05rem;border-radius:var(--r-pill); background:var(--eyebrow-accent,var(--brand));color:#fff; font-size:var(--t-xs);font-weight:700;letter-spacing:.11em; text-transform:uppercase;margin-bottom:1.05rem} .eyebrow::after{ content:"";position:absolute;z-index:-1;inset-block:0; inset-inline-start:0;inset-inline-end:-1.15rem; border-radius:var(--r-pill); background:var(--eyebrow-accent,var(--brand));opacity:.42} .eyebrow::before{ content:"";position:absolute;z-index:-1;inset-block:0; inset-inline-start:0;inset-inline-end:-2.2rem; border-radius:var(--r-pill); background:var(--eyebrow-accent,var(--brand));opacity:.18; /* was the hairline dash; it is the far ghost now */ inline-size:auto;block-size:auto;flex:none} .center .eyebrow::before{display:none} /* ── 5. Buttons ─────────────────────────────────────────── */ .btn{ --bg:var(--ink); --fg:var(--surface); --bd:var(--ink); display:inline-flex;align-items:center;justify-content:center;gap:.55rem; padding:.82rem 1.4rem;border-radius:var(--r-btn); background:var(--bg);color:var(--fg);border:1.5px solid var(--bd); font-size:var(--t-sm);font-weight:600;letter-spacing:-.012em;white-space:nowrap; transition:transform .18s var(--ease),box-shadow .25s var(--ease), background .2s ease,color .2s ease,border-color .2s ease; } .btn:hover{transform:translateY(-2px);box-shadow:var(--sh-md)} .btn:active{transform:translateY(0)} .btn .ico{inline-size:1.05em;block-size:1.05em;transition:transform .25s var(--ease)} .btn:hover .ico{transform:translateX(3px)} .btn-brand{--bg:var(--brand);--fg:var(--on-brand);--bd:var(--brand)} .btn-ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line)} .btn-ghost:hover{--bd:var(--ink)} .btn-light{--bg:var(--surface);--fg:var(--ink);--bd:var(--surface)} .btn-onpanel{--bg:transparent;--fg:var(--panel-ink);--bd:rgba(255,255,255,.28)} .btn-onpanel:hover{--bd:rgba(255,255,255,.6)} .btn-sm{padding:.58rem 1.05rem;font-size:var(--t-xs)} .btn-lg{padding:1rem 1.75rem;font-size:1rem} .btn-block{width:100%} .tlink{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:var(--t-sm); color:var(--brand);border-bottom:1.5px solid transparent;transition:border-color .2s,gap .2s} .tlink:hover{border-color:currentColor;gap:.7rem} /* ── 6. Chips & pills ───────────────────────────────────── */ .chips{display:flex;flex-wrap:wrap;gap:.55rem} .chip{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem; border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--surface); font-size:var(--t-sm);font-weight:500;color:var(--ink-2); transition:border-color .2s,color .2s,transform .2s var(--ease)} .chip:hover{border-color:var(--brand);color:var(--ink);transform:translateY(-2px)} .chip .ico{inline-size:1rem;block-size:1rem;color:var(--brand);flex:none} .tag{display:inline-block;padding:.3rem .7rem;border-radius:var(--r-xs); background:var(--brand-tint);color:var(--brand-2);font-size:var(--t-xs); font-weight:700;letter-spacing:.04em;text-transform:uppercase} /* ── 7. Cards ───────────────────────────────────────────── */ .card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg); padding:clamp(1.4rem,1.1rem + 1vw,2rem);position:relative; transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .25s} .card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--line)} .card .ico-badge{inline-size:2.9rem;block-size:2.9rem;border-radius:var(--r-md); display:grid;place-items:center;margin-bottom:1.15rem; background:var(--acc-tint,var(--brand-tint));color:var(--acc,var(--brand))} .card .ico-badge .ico{inline-size:1.4rem;block-size:1.4rem} .card h3{margin-bottom:.6rem} .card p{color:var(--ink-3);font-size:var(--t-sm);line-height:1.62} .card-tinted{background:var(--acc-tint,var(--brand-tint));border-color:transparent} .card-plain{background:transparent;border-color:transparent;padding-inline:0} .card-plain:hover{transform:none;box-shadow:none} .card-link::after{content:"";position:absolute;inset:0;border-radius:inherit} /* Accent utility — set per card */ .a-brand {--acc:var(--brand); --acc-tint:var(--brand-tint)} .a-matcha{--acc:var(--matcha-500); --acc-tint:var(--matcha-100)} .a-berry {--acc:var(--berry-500); --acc-tint:var(--berry-100)} .a-fruit {--acc:var(--fruit-700); --acc-tint:var(--fruit-100)} .a-lemon {--acc:var(--lemon-700); --acc-tint:var(--lemon-100)} .a-tang {--acc:var(--tang-700); --acc-tint:var(--tang-100)} .a-ube {--acc:var(--ube-700); --acc-tint:var(--ube-100)} .a-pom {--acc:var(--pom-700); --acc-tint:var(--pom-100)} .on-dark .a-matcha{--acc:var(--matcha-300);--acc-tint:#0f2419} .on-dark .a-berry{--acc:var(--berry-300); --acc-tint:#0c1c2e} .on-dark .a-fruit{--acc:var(--fruit-300); --acc-tint:#2b0f24} .on-dark .a-lemon{--acc:var(--lemon-300); --acc-tint:#2a2109} .on-dark .a-tang{--acc:var(--tang-300); --acc-tint:#2b1408} .on-dark .a-ube{--acc:var(--ube-300); --acc-tint:#1d1435} .on-dark .a-pom{--acc:var(--pom-300); --acc-tint:#2e1215} /* ── 8. Header / navigation ───────────────────────────── A white bar the width of the WINDOW, flush with the top of the screen and rounded off along its bottom edge only — a surface the page runs under, rather than a pill floating on top of it. Two things follow from that shape, and both are the point. It is not set to `.wrap`. That measure is what the COPY is set to; a navigation bar is furniture and belongs to the window, so it takes a small fixed inset instead and the page shows either side of it. And it needs no scrim. The old bar floated with a gap above it, so whatever was behind showed through at the top and a cream gradient had to be faded in on scroll to cover it — cream that then had to be re-tinted for every surface the header could sit over. Flush and opaque, there is nothing to cover. */ .hdr{position:sticky;top:0;z-index:100;padding-block:0} .hdr > .wrap{max-inline-size:none;padding-inline:var(--hdr-gut);margin-inline:auto} .hdr-in{display:flex;align-items:center;gap:.85rem; min-block-size:3.7rem; background:var(--surface);border:0; border-radius:0 0 var(--r-hdr) var(--r-hdr); padding:.45rem .45rem .45rem 1.25rem; box-shadow:none;position:relative; transition:background .3s var(--ease),box-shadow .3s var(--ease)} /* Once the page is moving under it, just enough shadow to say the bar is in front of something. At rest there is nothing to separate it from. */ .hdr.stuck .hdr-in{box-shadow:0 12px 28px -22px rgba(26,25,23,.5)} .logo{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:1.06rem; letter-spacing:-.04em;flex:none} .logo img{max-height:1.95rem;width:auto} .logo .mark{inline-size:1.7rem;block-size:1.7rem;border-radius:.55rem;flex:none; display:grid;place-items:center;background:var(--ink);position:relative;overflow:hidden} .logo .mark::before,.logo .mark::after{content:"";position:absolute; inline-size:.46rem;block-size:.46rem;border-radius:50%} .logo .mark::before{background:var(--pro);transform:translate(-.26rem,0)} .logo .mark::after{background:var(--sol);transform:translate(.26rem,0)} .logo b{font-weight:700} .logo small{display:block;font-size:.58rem;font-weight:600;letter-spacing:.15em; text-transform:uppercase;color:var(--ink-3);margin-top:-.12rem} .nav{display:flex;align-items:center;gap:.1rem;margin-left:.5rem;flex-wrap:nowrap} .nav-item{position:relative} .nav-link{display:inline-flex;align-items:center;gap:.3rem;padding:.6rem .75rem; white-space:nowrap; border-radius:.7rem;font-size:1rem;font-weight:500;color:var(--ink); letter-spacing:-.012em; transition:background .2s,color .2s} .nav-link:hover,.nav-item:hover>.nav-link,.nav-link[aria-current="page"], .nav-link[aria-expanded="true"]{color:var(--ink); background:color-mix(in srgb,var(--ink) 6%,transparent)} .nav-link .caret{inline-size:.68rem;block-size:.68rem;opacity:.5; transition:transform .25s var(--ease)} .nav-item:hover .caret,.nav-link[aria-expanded="true"] .caret{transform:rotate(180deg)} .hdr-cta{display:flex;align-items:center;gap:.5rem;flex:none;margin-left:auto} /* Between 1000 and 1240 the bar is carrying five capability names, a logo and an action in about seven hundred pixels. Rather than hand a 1024 laptop a hamburger — which is a phone's answer to a desktop's problem — the links give back a little padding and a little size. Below 1000 there genuinely is not room, and the drawer takes over. */ @media (min-width:1000px) and (max-width:1240px){ .nav{margin-left:.25rem} .nav-link{padding-inline:.5rem;font-size:.95rem} .hdr-in{gap:.5rem;padding-left:1rem} } /* The tightest stretch of all. At 1000px the five names, the logo and the action want every pixel the bar has; measured, they fitted with ten to spare, and ten pixels is not a margin — a different font rendering eats that. This buys about forty. */ @media (min-width:1000px) and (max-width:1099px){ .nav-link{padding-inline:.38rem;font-size:.92rem} .nav{gap:0} } /* Ultrawide. The bar is furniture belonging to the window, but a window 3440px across leaves two thousand pixels of nothing between the last link and the action. It stops at the same measure the hero film stops at, so the two line up rather than one spanning past the other. */ .hdr > .wrap{max-inline-size:2256px} /* Rounded rectangles inside the bar. The pill is still the page's button shape everywhere else; in a bar with square-ish corners of its own it read as a different family of object. */ .hdr .btn{border-radius:.75rem} /* Mega dropdown */ /* Five triggers now, and the last of them stand most of the way across the bar. A panel that opens left-aligned to its own trigger runs off the right of the screen from there, so the last two open the other way. */ .nav-item:nth-last-child(-n+2) .mega{inset-inline:auto 0} /* On a narrow desktop the bar is tighter and the third trigger is far enough across to overrun too — measured at 1024, by two pixels. One more panel turns around rather than letting the page scroll sideways. */ @media (max-width:1240px){ .nav-item:nth-last-child(-n+3) .mega{inset-inline:auto 0} } .mega{position:absolute;top:calc(100% + .65rem);left:0; /* Sized by its own columns, not by a blanket minimum. A flat min-width made the one-column About panel as wide as the four-column Capabilities panel, which pushed its right edge past the viewport on every common laptop width and left the page scrolling sideways even with the panel closed — a hidden panel still counts toward scrollWidth. */ inline-size:max-content;min-inline-size:0; max-inline-size:min(56rem,calc(100vw - 2rem)); background:var(--surface);border:1px solid var(--line-2); border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:.7rem; opacity:0;visibility:hidden;transform:translateY(-10px) scale(.985);transform-origin:top center; transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s} .nav-item:hover .mega,.mega.open{ opacity:1;visibility:visible;transform:none} .mega a{display:flex;gap:.7rem;padding:.65rem .75rem;border-radius:var(--r-md); transition:background .18s} .mega a:hover,.mega a:focus-visible{background:var(--surface-2)} .mega .ico{inline-size:1.1rem;block-size:1.1rem;flex:none;margin-top:.18rem} .mega strong{display:block;font-size:var(--t-sm);font-weight:600;letter-spacing:-.014em} .mega span{display:block;font-size:var(--t-xs);color:var(--ink-3);line-height:1.45; margin-top:.1rem} .mega-head{font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-3);padding:.7rem .75rem .35rem;grid-column:1/-1} .mega-head.pro{color:var(--pro-2)} .mega-head.sol{color:var(--sol-2)} /* Division selector */ /* Burger */ .burger{display:none;flex:none;inline-size:2.6rem;block-size:2.6rem;border-radius:.75rem; border:1.5px solid var(--line);align-items:center;justify-content:center; background:var(--surface);transition:border-color .2s} .burger:hover{border-color:var(--ink-3)} .burger span{display:block;inline-size:1rem;block-size:1.6px;background:var(--ink); position:relative;transition:background .2s;border-radius:2px} .burger span::before,.burger span::after{content:"";position:absolute;left:0; inline-size:100%;block-size:1.6px;background:var(--ink);border-radius:2px; transition:transform .3s var(--ease)} .burger span::before{top:-5px}.burger span::after{top:5px} .burger[aria-expanded="true"] span{background:transparent} .burger[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)} .burger[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)} /* Mobile drawer */ .mnav{position:fixed;inset:0;z-index:90;background:var(--ground); padding:5.5rem clamp(1.15rem,.5rem + 2.4vw,2.5rem) 3rem;overflow-y:auto; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s} /* visibility is left out of the open transition on purpose: at progress 0 it still computes as hidden, and focus() into a hidden panel is a silent no-op. Closing keeps it (rule above) so the fade-out stays on screen. */ .mnav.open{opacity:1;visibility:visible;transform:none; transition:opacity .28s var(--ease),transform .28s var(--ease)} .mnav .mnav .mnav details{border-bottom:1px solid var(--line-2)} .mnav summary{display:flex;align-items:center;justify-content:space-between; padding:1.05rem .2rem;font-size:1.1rem;font-weight:600;letter-spacing:-.025em; cursor:pointer;list-style:none} .mnav summary::-webkit-details-marker{display:none} .mnav summary .caret{transition:transform .25s var(--ease)} /* `>` on both steps: the family accordions nest inside the top-level one, and a descendant selector had an open parent rotating its closed children's carets as well. */ .mnav details[open] > summary > .caret{transform:rotate(180deg)} .mnav .sub{padding:0 .2rem 1rem} .mnav .sub a{display:block;padding:.58rem 0;font-size:var(--t-sm);color:var(--ink-2)} .mnav .sub a:hover{color:var(--brand)} .mnav>a.m-top{display:block;padding:1.05rem .2rem;font-size:1.1rem;font-weight:600; letter-spacing:-.025em;border-bottom:1px solid var(--line-2)} .mnav-cta{margin-top:1.75rem;display:grid;gap:.6rem} @media (max-width:999px){ .nav{display:none} .hdr-cta .hdr-in{padding-left:1rem} } @media (max-width:999px){.burger{display:inline-flex}} @media (max-width:520px){.hdr-cta .btn{display:none}} @media (min-width:1000px){.mnav{display:none}} /* ── 9. Hero ────────────────────────────────────────────── */ .hero{position:relative;padding-block:clamp(3.5rem,2rem + 8vw,7.5rem) clamp(3rem,2rem + 5vw,6rem); overflow:hidden} .hero-in{position:relative;z-index:2;max-width:22ch} .hero .display{margin-bottom:1.5rem} .hero .lead{max-width:52ch;margin-bottom:2.15rem} .hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2.5rem} .hero-wide .hero-in{max-width:min(100%,58rem)} .hero-note{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:var(--t-xs);color:var(--ink-3); font-weight:500} .hero-note span{display:inline-flex;align-items:center;gap:.4rem} .hero-note .ico{inline-size:.95rem;block-size:.95rem;color:var(--brand)} /* Ambient blobs */ .hero::before,.hero::after{content:"";position:absolute;border-radius:50%; filter:blur(70px);opacity:.5;pointer-events:none;z-index:0} .hero::before{inline-size:34rem;block-size:34rem;right:-8rem;top:-12rem; background:radial-gradient(circle,var(--brand-tint),transparent 68%)} .hero::after{inline-size:26rem;block-size:26rem;left:-10rem;bottom:-14rem; background:radial-gradient(circle,var(--lemon-100),transparent 68%)} [data-brand="solutions"] .hero::before{ background:radial-gradient(circle,var(--sol-tint),transparent 68%)} /* Page (non-home) hero */ .phero{padding-block:clamp(3rem,2rem + 4vw,5rem) clamp(2rem,1.5rem + 2vw,3rem)} .phero .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem; font-size:var(--t-xs);color:var(--ink-3);margin-bottom:1.4rem} .phero .crumbs a:hover{color:var(--ink)} .phero .crumbs .sep{opacity:.45} .phero .h1{max-width:18ch} .phero .lead{max-width:58ch;margin-top:1.25rem} /* ── 10. Marquees ───────────────────────────────────────── */ .marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marq-track{display:flex;gap:clamp(2rem,1rem + 3vw,4rem);width:max-content; animation:marq 42s linear infinite} .marq:hover .marq-track{animation-play-state:paused} @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}} .marq-logo{display:grid;place-items:center;height:2.6rem;flex:none;opacity:.62; transition:opacity .25s,filter .25s} .marq-logo img{max-height:2.6rem;width:auto;object-fit:contain} .marq-logo:hover{opacity:1} .on-dark .marq-logo img{filter:brightness(0) invert(1);opacity:.85} .marq-logo .name{font-size:var(--t-sm);font-weight:600;color:var(--ink-3);white-space:nowrap} /* Big word marquee */ .wmarq{border-block:1px solid var(--line-2);padding-block:clamp(1rem,.7rem + 1vw,1.6rem); overflow:hidden;background:var(--surface)} .wmarq .marq-track{gap:0;animation-duration:34s} .wmarq .w{display:inline-flex;align-items:center;gap:clamp(1.5rem,1rem + 2vw,3rem); padding-inline:clamp(.75rem,.5rem + 1vw,1.5rem);font-size:clamp(1.4rem,1rem + 2.2vw,2.6rem); font-weight:600;letter-spacing:-.035em;white-space:nowrap;color:var(--ink)} .wmarq .w .ico{inline-size:.9em;block-size:.9em;color:var(--acc,var(--brand));flex:none} .wmarq .w:nth-child(even){font-family:var(--serif);font-style:italic;font-weight:400; color:var(--acc,var(--brand))} /* ── 11. Stats ──────────────────────────────────────────── */ .stats{display:grid;gap:var(--sp-gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))} .stat .val{font-size:clamp(2.4rem,1.5rem + 3.4vw,4rem);font-weight:600;line-height:.95; letter-spacing:-.05em;color:var(--brand);font-variant-numeric:tabular-nums} .stat .lbl{font-size:var(--t-sm);font-weight:600;margin-top:.7rem;letter-spacing:-.015em} .stat .det{font-size:var(--t-xs);color:var(--ink-3);margin-top:.45rem;line-height:1.55; max-width:30ch} .stats-panel{background:var(--panel);color:var(--panel-ink);border-radius:var(--r-xl); padding:clamp(2rem,1.4rem + 3vw,3.75rem)} .stats-panel .stat .val{color:var(--brand)} .stats-panel .stat .det,.stats-panel .stat .lbl{color:color-mix(in srgb,var(--panel-ink) 72%,transparent)} .stats-cards .stat{background:var(--surface);border:1px solid var(--line-2); border-radius:var(--r-lg);padding:clamp(1.4rem,1.1rem + 1vw,2rem)} /* ── 12. Split ──────────────────────────────────────────── */ .split{display:grid;gap:clamp(2rem,1.4rem + 3.5vw,4.5rem);align-items:center; grid-template-columns:1fr} @media (min-width:900px){ .split{grid-template-columns:1fr 1fr} .split.flip .split-media{order:2} } .split-media img{border-radius:var(--r-lg);width:100%;object-fit:cover;box-shadow:var(--sh-md)} .split-media .ph{aspect-ratio:4/3;border-radius:var(--r-lg);background:var(--surface-2); border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink-3)} .split-body .rt{margin-top:1.15rem} .checks{display:grid;gap:.7rem;margin-top:1.6rem} .checks li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-sm);color:var(--ink-2)} .checks .ico{inline-size:1.15rem;block-size:1.15rem;color:var(--brand);flex:none;margin-top:.2rem} /* ── 13. Numbered service list ──────────────────────────── */ .numlist{border-top:1px solid var(--line-2)} .numlist li{border-bottom:1px solid var(--line-2)} .numlist a,.numlist .in{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,.6rem + 2vw,2.5rem); align-items:center;padding:clamp(1.3rem,1rem + 1.2vw,2.1rem) .35rem; transition:padding-inline .3s var(--ease),background .25s} .numlist a:hover{background:var(--surface);padding-inline:1.25rem .95rem} .numlist .n{font-size:var(--t-xs);font-weight:700;color:var(--brand); font-variant-numeric:tabular-nums;letter-spacing:.06em;padding-top:.3rem;align-self:start} .numlist h3{margin-bottom:.35rem} .numlist p{color:var(--ink-3);font-size:var(--t-sm);max-width:52ch} .numlist .go{inline-size:2.6rem;block-size:2.6rem;border-radius:50%;border:1.5px solid var(--line); display:grid;place-items:center;color:var(--ink-3);flex:none; transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)} .numlist a:hover .go{background:var(--brand);border-color:var(--brand);color:var(--on-brand); transform:rotate(-45deg)} @media (max-width:620px){ .numlist a,.numlist .in{grid-template-columns:auto 1fr;gap:1rem} .numlist .go{display:none} } /* ── 14. Testimonials ───────────────────────────────────── */ .quotes{display:grid;gap:var(--sp-gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr))} .quote{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg); padding:clamp(1.6rem,1.2rem + 1.2vw,2.25rem);display:flex;flex-direction:column;gap:1.3rem; transition:transform .32s var(--ease),box-shadow .32s var(--ease)} .quote:hover{transform:translateY(-4px);box-shadow:var(--sh-md)} .quote .mark{inline-size:1.9rem;block-size:1.9rem;color:var(--brand);opacity:.45} .quote blockquote{margin:0;font-size:1.075rem;line-height:1.58;letter-spacing:-.018em; color:var(--ink);flex:1} .quote figcaption{display:flex;align-items:center;gap:.85rem; padding-top:1.2rem;border-top:1px solid var(--line-2)} .quote .av{inline-size:2.7rem;block-size:2.7rem;border-radius:50%;object-fit:cover;flex:none; background:var(--brand-tint);display:grid;place-items:center;font-weight:700; color:var(--brand-2);font-size:var(--t-sm)} .quote .who{font-size:var(--t-sm);font-weight:600;letter-spacing:-.015em} .quote .role{font-size:var(--t-xs);color:var(--ink-3);margin-top:.1rem} /* ── 15. Portfolio ──────────────────────────────────────── */ .works{display:grid;gap:var(--sp-gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))} .work{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface); border:1px solid var(--line-2);transition:transform .35s var(--ease),box-shadow .35s var(--ease)} .work:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)} .work .shot{aspect-ratio:4/3;overflow:hidden;background:var(--acc-tint,var(--surface-2)); display:grid;place-items:center} .work .shot img{width:100%;height:100%;object-fit:cover; transition:transform .6s var(--ease)} .work:hover .shot img{transform:scale(1.045)} .work .shot .mono{font-family:var(--serif);font-size:clamp(1.8rem,1.2rem + 2.5vw,3rem); color:var(--acc,var(--brand));opacity:.65;font-style:italic;padding:1rem;text-align:center} .work .meta{padding:1.35rem 1.5rem 1.6rem} .work .cat{font-size:var(--t-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--acc,var(--brand));margin-bottom:.55rem} .work h3{margin-bottom:.4rem} .work p{font-size:var(--t-sm);color:var(--ink-3)} /* ── 16. Process ────────────────────────────────────────── */ .steps{counter-reset:s;display:grid;gap:var(--sp-gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))} .step{position:relative;padding-top:2.9rem} .step::before{counter-increment:s;content:counter(s,decimal-leading-zero); position:absolute;top:0;left:0;font-size:var(--t-xs);font-weight:700;letter-spacing:.1em; color:var(--brand)} .step::after{content:"";position:absolute;top:1.55rem;left:0;right:0;height:1px; background:var(--line-2)} .step h3{font-size:var(--t-h4);margin-bottom:.55rem} .step p{font-size:var(--t-sm);color:var(--ink-3)} /* ── 17. FAQ ────────────────────────────────────────────── */ .faq{border-top:1px solid var(--line-2);max-width:var(--wrap-mid);margin-inline:auto} .faq details{border-bottom:1px solid var(--line-2)} .faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem; padding:1.35rem .25rem;cursor:pointer;font-size:1.075rem;font-weight:600; letter-spacing:-.02em;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary .pm{inline-size:1.5rem;block-size:1.5rem;flex:none;position:relative;margin-top:.15rem} .faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute; background:var(--brand);border-radius:2px;transition:transform .3s var(--ease),opacity .2s} .faq summary .pm::before{top:50%;left:.15rem;right:.15rem;height:1.6px;translate:0 -50%} .faq summary .pm::after{left:50%;top:.15rem;bottom:.15rem;width:1.6px;translate:-50% 0} .faq details[open] summary .pm::after{transform:rotate(90deg);opacity:0} .faq .ans{padding:0 3rem 1.6rem .25rem;color:var(--ink-2);font-size:var(--t-sm); line-height:1.68;max-width:72ch} /* ── 18. CTA band ───────────────────────────────────────── */ .cta{border-radius:var(--r-xl);padding:clamp(2.25rem,1.6rem + 4vw,4.75rem); display:grid;gap:clamp(1.75rem,1.2rem + 2.5vw,3.5rem);align-items:center} @media (min-width:880px){.cta.has-side{grid-template-columns:1.35fr .85fr}} .cta-dark{background:var(--panel);color:var(--panel-ink)} .cta-dark .lead{color:color-mix(in srgb,var(--panel-ink) 72%,transparent)} .cta-dark .eyebrow{color:var(--brand)} .cta-brand{background:var(--brand);color:var(--on-brand)} .cta-brand .lead{color:color-mix(in srgb,var(--on-brand) 82%,transparent)} .cta-brand .eyebrow{color:var(--on-brand);opacity:.8} .cta-soft{background:var(--brand-tint);color:var(--ink)} .cta-buttons{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem} .cta-side{display:grid;gap:.85rem} .cta-side li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-sm)} .cta-side .ico{inline-size:1.15rem;block-size:1.15rem;flex:none;margin-top:.2rem;opacity:.85} .cta-dark .cta-side .ico{color:var(--brand)} .cta-brand .cta-side .ico{color:var(--on-brand)} /* ── 19. Forms ──────────────────────────────────────────── */ .form{display:grid;gap:1rem} .form .two{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))} .field label{display:block;font-size:var(--t-xs);font-weight:600;letter-spacing:.02em; margin-bottom:.42rem;color:var(--ink-2)} .field input,.field textarea,.field select{ width:100%;padding:.85rem 1rem;border-radius:var(--r-md); background:var(--surface);border:1.5px solid var(--line);color:var(--ink); font-size:var(--t-sm);transition:border-color .2s,box-shadow .2s} .field textarea{min-height:8.5rem;resize:vertical;line-height:1.6} .field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.75} .field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-color:var(--brand); box-shadow:0 0 0 3.5px color-mix(in srgb,var(--brand) 16%,transparent)} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-note{font-size:var(--t-xs);color:var(--ink-3)} .form-msg{padding:.85rem 1.1rem;border-radius:var(--r-md);font-size:var(--t-sm);font-weight:500} .form-msg.ok{background:var(--matcha-100);color:var(--matcha-700)} .form-msg.err{background:var(--pom-100);color:var(--pom-700)} .form-wrap{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg); padding:clamp(1.5rem,1.2rem + 1.4vw,2.5rem)} /* ── 20. Contact cards ──────────────────────────────────── */ .ccards{display:grid;gap:var(--sp-gap); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))} .ccard{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg); padding:clamp(1.4rem,1.1rem + 1vw,1.9rem);transition:border-color .25s,transform .3s var(--ease)} .ccard:hover{border-color:var(--brand);transform:translateY(-3px)} .ccard .ico{inline-size:1.35rem;block-size:1.35rem;color:var(--brand);margin-bottom:1rem} .ccard .lbl{font-size:var(--t-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--ink-3);margin-bottom:.4rem} .ccard .val{font-size:1.06rem;font-weight:600;letter-spacing:-.02em;word-break:break-word} /* ── 21. Column lists ───────────────────────────────────── */ .cols{display:grid;gap:clamp(1.75rem,1.2rem + 2vw,2.75rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))} .cols h3{font-size:var(--t-h4);margin-bottom:1rem;padding-bottom:.7rem; border-bottom:1px solid var(--line-2)} .cols li{padding:.42rem 0;font-size:var(--t-sm);color:var(--ink-2)} .cols li b{font-weight:600;color:var(--ink)} .cols li span{color:var(--ink-3)} /* ── 22. Rich text ──────────────────────────────────────── */ .rt{color:var(--ink-2);line-height:1.72} .rt>*+*{margin-top:1.15rem} .rt h2{font-size:var(--t-h3);color:var(--ink);margin-top:2.4rem} .rt h3{font-size:var(--t-h4);color:var(--ink);margin-top:2rem} /* --pro-2, not --brand. The brand red measures 4.48:1 on the page's cream and the floor for body-size text is 4.5 — it misses by two hundredths, which is still a miss, and these are the in-prose links on every document page. --pro-2 is the darker red the palette already carries for red that has to be read rather than seen. The underline is unchanged and still keyed to --brand, so the link's colour identity survives. */ .rt a{color:var(--pro-2);border-bottom:1.5px solid color-mix(in srgb,var(--brand) 35%,transparent)} .rt a:hover{border-bottom-color:currentColor} .rt ul,.rt ol{padding-left:1.3rem;display:grid;gap:.55rem} .rt ul li{list-style:disc}.rt ol li{list-style:decimal} .rt blockquote{border-left:2.5px solid var(--brand);padding-left:1.35rem;font-family:var(--serif); font-style:italic;font-size:1.25rem;color:var(--ink);line-height:1.45} .rt img{border-radius:var(--r-md);margin-block:1.75rem} .rt code{font-family:var(--mono);font-size:.88em;background:var(--surface-2); padding:.14em .38em;border-radius:var(--r-xs)} /* ── 23. Footer ─────────────────────────────────────────── */ .ftr{background:var(--panel);color:var(--panel-ink);padding-block:clamp(3.25rem,2.4rem + 4vw,5rem) 2rem; margin-top:clamp(3rem,2rem + 4vw,6rem)} .ftr-top{display:grid;min-width:0;gap:clamp(2rem,1.4rem + 3vw,3.5rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); padding-bottom:clamp(2.25rem,1.75rem + 2vw,3.25rem); border-bottom:1px solid rgba(255,255,255,.11)} .ftr-brand{grid-column:1/-1;min-width:0} @media (min-width:820px){.ftr-brand{grid-column:span 2;padding-right:2.5rem}} .ftr-brand .logo{color:var(--panel-ink);margin-bottom:1.05rem} .ftr-brand p{color:color-mix(in srgb,var(--panel-ink) 62%,transparent);font-size:var(--t-sm); max-width:36ch} .ftr h4{font-size:var(--t-xs);font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:color-mix(in srgb,var(--panel-ink) 52%,transparent);margin-bottom:1.15rem} .ftr-col li{margin-bottom:.62rem} .ftr-col a{font-size:var(--t-sm);color:color-mix(in srgb,var(--panel-ink) 74%,transparent); transition:color .2s} .ftr-col a:hover{color:var(--brand)} .ftr-sub{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.5rem;max-width:23rem} .ftr-sub input{flex:1 1 9rem;min-width:0;padding:.72rem .95rem;border-radius:var(--r-pill); background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.14); color:var(--panel-ink);font-size:var(--t-sm)} .ftr-sub input::placeholder{color:rgba(255,255,255,.42)} .ftr-sub input:focus{outline:none;border-color:var(--brand)} .ftr-sub button{flex:0 1 auto;padding:.72rem 1.15rem;border-radius:var(--r-pill);background:var(--brand); color:var(--on-brand);font-size:var(--t-sm);font-weight:600;white-space:nowrap; transition:transform .2s var(--ease)} .ftr-sub button:hover{transform:translateY(-2px)} .socials{display:flex;gap:.5rem;margin-top:1.5rem} .socials a{inline-size:2.45rem;block-size:2.45rem;border-radius:50%;display:grid;place-items:center; border:1.5px solid rgba(255,255,255,.16);color:color-mix(in srgb,var(--panel-ink) 76%,transparent); transition:background .22s,color .22s,border-color .22s,transform .22s var(--ease)} .socials a:hover{background:var(--brand);border-color:var(--brand);color:var(--on-brand); transform:translateY(-2px)} .socials .ico{inline-size:1.05rem;block-size:1.05rem} .ftr-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem; padding-top:1.75rem;font-size:var(--t-xs); color:color-mix(in srgb,var(--panel-ink) 52%,transparent)} .ftr-bot nav{display:flex;flex-wrap:wrap;gap:1.35rem} .ftr-bot a:hover{color:var(--brand)} /* Cross-brand strip */ /* ── 24. Motion ───────────────────────────────────────── Reveal state lives in motion.css, guarded by .js-on so content is visible by default and JS can only ever enhance it. ─────────── */ /* ── 25. Utilities ──────────────────────────────────────── */ .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:absolute;top:-100px;left:1rem;z-index:200;padding:.75rem 1.25rem; background:var(--brand);color:var(--on-brand);border-radius:var(--r-md);font-weight:600; font-size:var(--t-sm);transition:top .2s} .skip:focus{top:1rem} .bg-surface{background:var(--surface)} .bg-surface-2{background:var(--surface-2)} .bg-panel{background:var(--panel);color:var(--panel-ink)} .mt0{margin-top:0}.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem} .ico{inline-size:1.25rem;block-size:1.25rem;flex:none} .whatsapp{position:fixed;right:1.25rem;bottom:1.25rem;z-index:60;inline-size:3.4rem; block-size:3.4rem;border-radius:50%;background:#25d366;color:#fff;display:grid; place-items:center;box-shadow:var(--sh-lg);transition:transform .25s var(--ease)} .whatsapp:hover{transform:scale(1.08)} .whatsapp .ico{inline-size:1.6rem;block-size:1.6rem} .err-page{min-height:60vh;display:grid;place-items:center;text-align:center} /* ── 26. Source-document blocks ───────────────────────────── Components that carry material from the 2026 profile PDFs: numbered stage strips, workflow tables, scope notes, citations, people, offices and downloads. They share the editorial ground of the rest of the site but read closer to the printed documents they come from. ─────────── */ .sec-tight{padding-block:calc(var(--sp-sec) * .42)} /* ── Process strip / loop ──────────────────────────────── */ .pstrip{list-style:none;margin:0;padding:0;display:grid;gap:1px; background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r-md); overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} .pstep{background:var(--surface);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.2rem} .pnum{font-size:var(--t-xs);font-weight:700;color:var(--brand); font-variant-numeric:tabular-nums;letter-spacing:.08em} .ptitle{font-weight:650;font-size:var(--t-sm);line-height:1.3} .ptext{font-size:var(--t-xs);color:var(--ink-3);line-height:1.45} /* A loop returns to its start; the trailing mark says so without a caption. */ .pstrip-loop .pstep:last-child{position:relative} .pstrip-loop .pstep:last-child::after{content:"↻";position:absolute;top:.7rem;right:.85rem; color:var(--brand);font-size:var(--t-sm);opacity:.75} /* ── Workflow table ────────────────────────────────────── */ .wtable-wrap{overflow-x:auto;border:1px solid var(--line-2);border-radius:var(--r-md); background:var(--surface);box-shadow:var(--sh-sm)} .wtable-wrap:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .wtable{border-collapse:collapse;inline-size:100%;font-size:var(--t-sm);line-height:1.5} .wtable caption{text-align:left;padding:.85rem 1rem 0;font-size:var(--t-xs); color:var(--ink-3);letter-spacing:.02em} .wtable thead th{background:var(--panel);color:var(--panel-ink);text-align:left; font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase; padding:.65rem 1rem;white-space:nowrap} .wtable tbody th,.wtable tbody td{padding:.7rem 1rem;border-top:1px solid var(--line-2); vertical-align:top;text-align:left} .wtable tbody th{font-weight:650;inline-size:1%;white-space:nowrap} .wtable tbody tr:nth-child(even) th,.wtable tbody tr:nth-child(even) td{background:var(--surface-2)} /* Below 640px a row is unreadable as a row. Each becomes a card and the column heading is re-attached to its cell, so nothing is lost — including for a screen reader, which still gets the real th/scope structure above. */ @media (max-width:640px){ .wtable,.wtable caption,.wtable tbody,.wtable tr, .wtable tbody th,.wtable tbody td{display:block;width:100%} .wtable caption{padding:.85rem 1rem .4rem;text-align:left} .wtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .wtable tbody tr{border-top:1px solid var(--line);padding:.35rem 0} .wtable tbody tr:first-child{border-top:0} .wtable tbody th{white-space:normal;font-size:var(--t-body);padding-bottom:.2rem} .wtable tbody th,.wtable tbody td{border-top:0;background:none !important} .wtable tbody td[data-label]::before{content:attr(data-label);display:block; font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-3);margin-bottom:.15rem} .wtable tbody td:empty{display:none} } /* ── Scope / verification note ─────────────────────────── */ .snote{border-inline-start:3px solid var(--brand);background:var(--surface); padding:1.1rem 1.35rem;border-radius:0 var(--r-md) var(--r-md) 0;box-shadow:var(--sh-sm)} .snote p{margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--ink-2)} .snote-label{margin:0 0 .35rem;font-size:var(--t-xs);font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--ink)} .snote-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.6rem; font-size:var(--t-sm);font-weight:600;color:var(--brand)} .snote-scope{border-inline-start-color:var(--brand)} .snote-verification{border-inline-start-color:var(--berry-500)} .snote-design{border-inline-start-color:var(--tang-500)} .snote-result{border-inline-start-color:var(--matcha-600)} /* ── Research sources ──────────────────────────────────── */ .srclist{list-style:none;margin:0;padding:0;display:grid;gap:1px; background:var(--line-2);border-block:1px solid var(--line-2)} .src{background:var(--surface);display:grid;grid-template-columns:2.4rem 1fr; gap:.75rem;padding:.7rem .25rem} .src-num{font-size:var(--t-xs);font-weight:700;color:var(--ink-3); font-variant-numeric:tabular-nums} .src-body{display:flex;flex-direction:column;gap:.1rem} .src-title{font-size:var(--t-sm);font-weight:600;line-height:1.4} .src-host{font-size:var(--t-xs);color:var(--ink-3);word-break:break-word} .src-note{font-size:var(--t-xs);color:var(--ink-3);font-style:italic} .srclist-note{margin-top:1rem;font-size:var(--t-xs);color:var(--ink-3);line-height:1.6} /* ── People ────────────────────────────────────────────── */ .pcard{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg); padding:1.35rem 1.5rem;box-shadow:var(--sh-sm)} .pcard p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.6} .pphoto{inline-size:4rem;block-size:4rem;border-radius:50%;object-fit:cover; margin-bottom:.85rem;display:block} .prole{font-size:var(--t-xs) !important;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--brand) !important;margin-block:.15rem .6rem} .pfocus{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--line-2); font-size:var(--t-xs) !important} .pfocus .eyebrow{display:block;margin-bottom:.15rem} .plisted{list-style:none;margin:1.25rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem} .plisted li{padding:.4rem .85rem;border:1px solid var(--line);border-radius:var(--r-pill); font-size:var(--t-sm);font-weight:600;background:var(--surface)} .pnote{margin-top:1.1rem;font-size:var(--t-xs);color:var(--ink-3);line-height:1.6; max-inline-size:var(--wrap-narrow)} /* ── Offices ───────────────────────────────────────────── */ .ocard{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg); padding:1.35rem 1.5rem;box-shadow:var(--sh-sm)} .ocard p{font-size:var(--t-sm);color:var(--ink-2);line-height:1.6} .olabel{font-weight:650;color:var(--ink) !important;margin-block:.1rem .5rem} .olist{list-style:none;margin:.9rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--line-2); display:grid;gap:.45rem} .olist li{display:flex;align-items:flex-start;gap:.55rem;font-size:var(--t-sm)} .olist .ico{color:var(--ink-3);margin-top:.15rem} /* ── Downloads ─────────────────────────────────────────── */ .dlist{list-style:none;margin:0;padding:0;display:grid;gap:.6rem} .dl a{display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1rem 1.25rem;background:var(--surface);border:1px solid var(--line-2); border-radius:var(--r-md);box-shadow:var(--sh-sm);color:var(--ink); transition:border-color .2s var(--ease),transform .2s var(--ease)} .dl a:hover{border-color:var(--brand);transform:translateY(-1px)} .dl a .ico{color:var(--brand);flex:none} .dl-body{display:flex;flex-direction:column;gap:.12rem;min-inline-size:0} .dl-title{font-weight:650;font-size:var(--t-body)} .dl-sum{font-size:var(--t-sm);color:var(--ink-2)} .dl-meta{font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.02em} /* ── 27. Unified shell ────────────────────────────────────── One header, one footer, one brand. The mega-menu groups by capability family rather than by division. ─────────── */ /* The trigger is a