/* ==========================================================================
   Golden Ratio Advisory — main stylesheet
   Fonts: Cy Grotesk Key Light (display) · Manrope (text/UI)
   ========================================================================== */

@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/Manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/Manrope-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Cy Grotesk";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/CyGrotesk-KeyLight.woff2") format("woff2")}

:root{
  /* brand */
  --c-maroon:#4f0101;
  --c-navy:#142841;
  --c-gold:#a49b32;
  --c-orange:#bf5114;
  --c-ink:#1b0608;
  --c-sand:#e7d6c2;
  --c-sand-2:#f2e8d9;
  --c-white:#fff;
  /* semantic */
  --ink:var(--t-primary);
  --paper:var(--t-bg);
  --img-bg:var(--t-primary);
  --bg:var(--paper);
  --fg:var(--ink);
  --line:var(--ink);
  /* type */
  --f-display:"Cy Grotesk","Manrope",system-ui,sans-serif;
  --f-text:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-label:"Manrope",system-ui,sans-serif;   /* swap to a mono here if desired */
  /* layout */
  --pad:clamp(12px,1.05vw,22px);
  --gap:var(--pad);
  --hdr-top:var(--pad);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-text);font-size:1rem;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--ink);color:var(--t-bg)}
.th-maroon::selection,.th-maroon ::selection,.th-navy::selection,.th-navy ::selection,.sh ::selection,.si ::selection{background:var(--t-bg);color:#142841}
:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px}
address{font-style:normal}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;left:var(--pad);top:-100px;z-index:3000;background:var(--ink);color:var(--t-bg);padding:12px 16px;font-size:1rem}
.skip-link:focus{top:var(--pad)}

/* ---------- type ---------- */
.label{font-family:var(--f-label);font-size:1rem;line-height:1.5;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.label--sm{font-size:1rem}
.t-display{font-family:var(--f-display);font-weight:300;letter-spacing:-.03em;line-height:.86}
.t-h2{font-family:var(--f-display);font-weight:300;font-size:clamp(3.6rem,10.2vw,11rem);line-height:.9;letter-spacing:-.035em}
.t-h3{font-family:var(--f-display);font-weight:300;font-size:clamp(1.7rem,2.6vw,2.6rem);line-height:1.04;letter-spacing:-.02em}
.t-lead{font-family:var(--f-display);font-weight:300;font-size:clamp(1.75rem,3.35vw,3.55rem);line-height:1.08;letter-spacing:-.025em}
.t-body{font-size:clamp(1rem,1.05vw,1.0625rem);line-height:1.6}
.link{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease-out);padding-bottom:1px}
.link:hover{background-position:100% 100%;background-size:0 1px}
.mask{overflow:hidden;display:block}
.js [data-split]{visibility:hidden}
.js [data-split].is-split{visibility:visible}
.split-line{overflow:hidden}

/* initial hero states (only until JS takes over) */
.js:not(.is-ready) .hero__title .line>span{transform:translateY(118%)}
.js:not(.is-ready) [data-hero-tag],.js:not(.is-ready) [data-hero-meta]{opacity:0}

/* ---------- section themes (maroon is the lead colour, blue + white alternate) ---------- */
.th-white{--ink:var(--t-primary);--paper:var(--c-white);--img-bg:var(--t-primary);background:var(--paper);color:var(--ink)}
.th-white-navy{--ink:var(--t-primary);--paper:var(--c-white);--img-bg:var(--t-primary);background:var(--paper);color:var(--ink)}
.th-navy{--ink:var(--t-light);--paper:var(--t-primary);--img-bg:var(--t-primary);background:var(--paper);color:var(--ink)}
.th-maroon{--ink:var(--t-bg);--paper:var(--t-primary);--img-bg:var(--t-primary);background:var(--paper);color:var(--ink)}
.th-sand{--ink:var(--t-primary);--paper:var(--t-bg);--img-bg:var(--t-primary);background:var(--paper);color:var(--ink)}
.th-sand-navy{--ink:var(--t-primary);--paper:var(--t-bg);--img-bg:var(--t-primary);background:var(--paper);color:var(--ink)}

/* ---------- grid helpers ---------- */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-inline:var(--pad)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:55px;padding:0 var(--pad);
  background:var(--ink);color:var(--paper);font-family:var(--f-label);font-size:1rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--t-accent);transform:translateY(101%);transition:transform .55s var(--ease-out);z-index:-1}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn svg{width:16px;height:16px;flex:none;transition:transform .5s var(--ease-out)}
.btn:hover svg{transform:translateX(5px)}
.btn--block{display:flex;width:100%}
.btn--center{justify-content:center}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn--ghost:hover{color:var(--paper)}
.btn--ghost::before{background:var(--ink)}

/* ==========================================================================
   Header + menu
   ========================================================================== */
.site-header{position:fixed;inset:var(--hdr-top) 0 auto 0;z-index:1700;padding-inline:var(--pad);pointer-events:none}
.hdr{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.hdr{--lh:60px}
.hdr__brand{grid-column:1/7;grid-row:1;justify-self:start;pointer-events:auto;display:block;height:var(--lh);width:calc(var(--lh)*2.607);overflow:hidden;transition:width .9s var(--ease-out)}
.hdr__logo{display:block;height:var(--lh);width:auto;overflow:visible}
.hdr__logo .m1{fill:#4f0101}.hdr__logo .m2{fill:#142841}.hdr__logo .m3{fill:#a49b32}.hdr__logo .m4{fill:#bf5114}
.hdr__logo .m1,.hdr__logo .m2{transition:fill .45s var(--ease-out)}
.hdr__logo .wm{fill:#1b0608;transition:fill .45s var(--ease-out),opacity .5s}
.js.is-scrolled .hdr__brand{width:calc(var(--lh)*1.537)}
.js.is-scrolled .hdr__logo .wm{opacity:0}
.js.is-scrolled .logo-maroon .m1{fill:#fff}.js.is-scrolled .logo-navy .m2{fill:#fff}
.logo-maroon .wm,.logo-navy .wm{fill:#fff}
.hdr__links{display:none;grid-row:1;pointer-events:auto;padding:4px 0 0 22px}
.hdr__links--a{grid-column:7/10}.hdr__links--b{grid-column:10/12}
.hdr__links li{overflow:hidden}
.hdr__links a{display:block;font-family:var(--f-label);font-size:1rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;line-height:1.5;color:#fff;text-shadow:0 0 18px color-mix(in srgb,var(--t-primary) 60%,transparent);
  transform:translateY(0);transition:transform .8s var(--ease-out),opacity .5s,color .3s;transition-delay:calc(var(--i,0)*45ms)}
.hdr__links a:hover{color:#fff}
@media (min-width:900px){
  .js .hdr__links{display:block}
  .js.is-scrolled .hdr__links a{transform:translateY(-120%);opacity:0;text-shadow:none;pointer-events:none}
  .js.is-scrolled .hdr__links{pointer-events:none}
}
.hdr__right{grid-column:12/13;grid-row:1;justify-self:end;pointer-events:auto;display:flex}
.hdr__menu{display:flex;align-items:stretch;height:60px;background:var(--c-white);color:var(--t-primary)}
.hdr__menu-label{display:flex;align-items:center;max-width:140px;padding:0 20px;overflow:hidden;font-family:var(--f-label);font-size:1rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  transition:max-width .8s var(--ease-out),padding .8s var(--ease-out),opacity .5s}
@media (min-width:900px){
  .js:not(.is-scrolled) .hdr__menu-label{max-width:0;padding:0;opacity:0}
  .js .hdr__menu[aria-expanded="true"] .hdr__menu-label{max-width:140px;padding:0 20px;opacity:1}
}
.hdr__menu-icon{position:relative;width:60px;background:var(--t-primary);transition:background .4s}
.hdr__menu-icon i{position:absolute;left:19px;right:19px;height:1.5px;background:#fff;transition:transform .6s var(--ease-out),background .4s}
.hdr__menu-icon i:nth-child(1){top:23px}.hdr__menu-icon i:nth-child(2){top:34px}
/* default = on sand: maroon square, white icon */
.hdr__menu[data-bg="white"] .hdr__menu-icon{background:var(--t-primary)}
.hdr__menu[data-bg="maroon"] .hdr__menu-icon{background:#fff}
.hdr__menu[data-bg="maroon"] .hdr__menu-icon i{background:var(--t-primary)}
.hdr__menu[data-bg="navy"] .hdr__menu-icon{background:#fff}
.hdr__menu[data-bg="navy"] .hdr__menu-icon i{background:var(--t-primary)}
/* hover: orange on sand/maroon, gold on white/navy; icon always white */
.hdr__menu .hdr__menu-icon i{transition:transform .6s var(--ease-out),background .4s}
.hdr__menu:hover .hdr__menu-icon,.hdr__menu[data-bg="sand"]:hover .hdr__menu-icon,.hdr__menu[data-bg="maroon"]:hover .hdr__menu-icon{background:var(--t-accent)}
.hdr__menu[data-bg="white"]:hover .hdr__menu-icon,.hdr__menu[data-bg="navy"]:hover .hdr__menu-icon{background:var(--t-accent)}
.hdr__menu:hover .hdr__menu-icon i{background:#fff}
.hdr__menu[aria-expanded="true"] .hdr__menu-icon i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.hdr__menu[aria-expanded="true"] .hdr__menu-icon i:nth-child(2){transform:translateY(-5.5px) rotate(-45deg)}
.js .site-header{opacity:0}
.is-ready .site-header{opacity:1;transition:opacity .01s}

.menu-scrim{position:fixed;inset:0;z-index:1500;background:rgba(27,6,8,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0}
.menu-panel{position:fixed;z-index:1600;top:calc(var(--hdr-top) + 61px);right:var(--pad);width:min(calc(100vw - var(--pad)*2),560px);max-height:calc(100svh - var(--hdr-top) - 60px);overflow:auto;
  background:var(--c-white);color:var(--ink);padding:var(--pad) var(--pad) var(--pad);display:flex;flex-direction:column;gap:clamp(20px,3vh,36px);overscroll-behavior:contain;clip-path:inset(0 0 100% 0)}
.menu-panel[hidden],.menu-scrim[hidden]{display:none}
.menu-panel__links a{display:inline-block;font-family:var(--f-display);font-weight:300;font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:1.12;letter-spacing:-.025em}
.menu-panel__links a span{display:inline-block;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease-out)}
.menu-panel__links a:hover span{background-size:100% 1px}
.menu-panel__meta{display:grid;gap:0}
.menu-panel__meta>div{display:grid;grid-template-columns:1fr 1.6fr;gap:var(--gap);padding:14px 0;border-top:1px solid var(--ink)}
.menu-panel__meta dt{font-family:var(--f-label);font-size:1rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.menu-panel__meta dd{display:flex;flex-direction:column;gap:2px;font-size:1rem;line-height:1.5}
.menu-panel__meta dd a{width:fit-content;border-bottom:1px solid color-mix(in srgb,var(--t-primary) 35%,transparent)}
.menu-panel__meta address{margin-top:8px}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--bg);color:#fff}
.hero__media{position:absolute;inset:0;will-change:transform}
.hero__img,.hero__canvas{position:absolute;inset:-6% 0 -6% 0;width:100%;height:112%;object-fit:cover}
.hero__img{opacity:1}
.hero__canvas{z-index:1}
.hero__shade{position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,color-mix(in srgb,var(--t-primary) 55%,transparent),color-mix(in srgb,var(--t-primary) 0%,transparent) 30%),linear-gradient(to top,color-mix(in srgb,var(--t-primary) 55%,transparent),color-mix(in srgb,var(--t-primary) 0%,transparent) 55%)}
.hero__lines{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__lines i{position:absolute;width:1px;background:rgba(242,232,217,.75);transform-origin:top;display:block}
.hero__inner{position:absolute;z-index:3;inset:0;padding:0 var(--pad) clamp(18px,2.4vw,44px);display:flex;flex-direction:column;justify-content:flex-end}
.hero__block{position:relative;z-index:1}
.hero__tagline{position:absolute;bottom:100%;left:calc(75vw - var(--pad));width:calc(25vw - var(--pad));margin:0 0 .7vw;padding-left:22px;
  font-family:var(--f-display);font-weight:300;font-size:clamp(1.15rem,1.65vw,3.2rem);line-height:1.05;letter-spacing:-.012em;color:#fff;text-shadow:0 0 22px color-mix(in srgb,var(--t-primary) 55%,transparent)}
.hero__title{font-family:var(--f-display);font-weight:300;font-size:clamp(3.9rem,12.4vw,16.5rem);line-height:.84;letter-spacing:-.04em;color:#fff}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.hero__title .line>span{display:block;will-change:transform}
.hero__meta{display:flex;justify-content:space-between;gap:var(--gap);margin-top:clamp(14px,1.6vw,28px);padding-top:12px;border-top:1px solid rgba(255,255,255,.6);color:#fff}
.hero__scroll{display:inline-flex;align-items:center;gap:10px}
.hero__scroll svg{width:12px;height:12px;animation:nudge 2.4s var(--ease-io) infinite}
@keyframes nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}

/* ==========================================================================
   INTRO (maroon)
   ========================================================================== */
.intro{position:relative;background:var(--paper);color:var(--ink);padding:clamp(56px,7vw,120px) 0 clamp(70px,9vw,170px);overflow:hidden}
.intro__kicker{grid-column:1/-1;display:flex;justify-content:space-between;margin-bottom:clamp(28px,3vw,56px);color:var(--t-bg)}
.intro__lead{grid-column:1/-1;max-width:21ch;max-width:min(100%,19.5ch)}
.intro__lead.t-lead{font-size:clamp(1.9rem,5.35vw,6.1rem);line-height:1.02;letter-spacing:-.035em;max-width:none}
.intro__cols{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(40px,6vw,110px)}
.intro__col{grid-column:span 12;margin-top:20px;font-size:1rem;line-height:1.55;max-width:34ch;color:var(--t-bg)}
.intro__col .label{display:block;margin-bottom:8px;opacity:.7}
.intro__path{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:clamp(36px,5vw,90px);padding-top:16px;border-top:1px solid rgba(231,214,194,.35);color:var(--t-bg)}
.intro__path span{display:inline-flex;gap:14px;align-items:center}
.intro__path svg{width:14px;height:14px;opacity:.7}

/* stairs: maroon steps descending into sand */
.stairs{position:relative;height:clamp(110px,24vw,420px);background:var(--bg);margin-top:-1px}
.stairs__step{position:absolute;top:0;bottom:0;background:var(--t-primary);transform-origin:top;transform:scaleY(var(--s,1));will-change:transform}
.stairs__step:nth-child(1){--s:.25}.stairs__step:nth-child(2){--s:.5}.stairs__step:nth-child(3){--s:.75}.stairs__step:nth-child(4){--s:1}
.stairs__step:nth-child(1){left:0;width:25.1%}
.stairs__step:nth-child(2){left:25%;width:25.1%}
.stairs__step:nth-child(3){left:50%;width:25.1%}
.stairs__step:nth-child(4){left:75%;width:25%}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services{position:relative;padding:0 var(--pad) clamp(50px,6vw,110px)}
.services>.dims__rule{margin-inline:calc(var(--pad)*-1)}
.services__sr{position:absolute}
.services__head{position:relative;padding:clamp(60px,10vw,200px) 0 clamp(40px,7vw,130px)}
.services__title{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.services__title span{display:block;overflow:hidden;padding-bottom:.08em}
.services__title span>em{display:block;font-style:normal}
.services__t1{grid-column:1/7}
.services__t2{grid-column:7/13}
.services__body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);position:relative;margin-top:clamp(18px,2vw,34px)}
.services__vline{position:absolute;left:calc(50% - var(--gap)/2);top:calc(-1 * clamp(40px,8vw,140px));bottom:0;width:1px;background:var(--ink);transform-origin:top;pointer-events:none}
.services__media{grid-column:1/7;position:relative}
.services__figure{position:sticky;top:calc(var(--pad)*5.5);width:min(100%,clamp(260px,26vw,480px));aspect-ratio:3/2;overflow:hidden;background:var(--img-bg);margin-top:clamp(40px,8vw,150px)}
.services__figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity .7s var(--ease-out),transform 1.2s var(--ease-out)}
.services__figure img.is-active{opacity:1;transform:scale(1)}
.services__caption{display:flex;justify-content:space-between;margin-top:10px;width:min(100%,clamp(260px,26vw,480px))}
.services__list{grid-column:7/13;position:relative;padding-left:var(--pad)}
.acc{border-top:1px solid var(--ink)}
.acc__item{border-bottom:1px solid var(--ink)}
.acc__item:last-child{border-bottom-color:var(--ink)}
.acc__btn{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;text-align:left;padding:clamp(14px,1.45vw,22px) 0;font-family:var(--f-display);font-weight:300;font-size:clamp(1.3rem,1.9vw,1.9rem);line-height:1.15;letter-spacing:-.015em;transition:padding .5s var(--ease-out)}
.acc__no{font-family:var(--f-label);font-size:1rem;font-weight:700;letter-spacing:.05em;opacity:.65;min-width:2.2em}
.acc__icon{position:relative;width:14px;height:14px;flex:none}
.acc__icon::before,.acc__icon::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.2px;background:currentColor;transition:transform .55s var(--ease-out)}
.acc__icon::after{transform:rotate(90deg)}
.acc__btn[aria-expanded="true"] .acc__icon::after{transform:rotate(0)}
.acc__btn[aria-expanded="true"] .acc__icon::before{transform:rotate(45deg)}
.acc__btn[aria-expanded="true"] .acc__icon::after{transform:rotate(-45deg)}
.acc__btn:hover{padding-left:8px}
.acc__panel{overflow:hidden}
.js .acc__panel{height:0}
.js .acc__item.is-open>.acc__panel{height:auto}
.js .acc__item:not(.is-open)>.acc__panel{visibility:hidden}
.acc__inner{display:grid;grid-template-columns:1fr;gap:18px;padding:2px 0 clamp(18px,2vw,30px)}
.acc__q{font-family:var(--f-label);font-size:1rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;opacity:.75}
.acc__lead{font-size:1rem;line-height:1.6;max-width:56ch;font-weight:700}
.acc__text{font-size:1rem;line-height:1.6;max-width:56ch}
.acc__list{columns:2;column-gap:var(--gap);font-size:1rem;line-height:1.4;margin-top:4px}
.acc__list li{break-inside:avoid;padding:7px 0 7px 14px;border-top:1px solid color-mix(in srgb,var(--t-primary) 25%,transparent);position:relative}
.acc__list li::before{content:"";position:absolute;left:0;top:13px;width:5px;height:5px;background:var(--dot,var(--ink))}
.acc__cta{display:inline-flex;align-items:center;gap:10px;margin-top:8px}
.acc__cta svg{width:14px;height:14px;transition:transform .5s var(--ease-out)}
.acc__cta:hover svg{transform:translateX(5px)}
.services__all{margin-top:var(--pad)}

/* ==========================================================================
   APPROACH
   ========================================================================== */
.approach{position:relative;padding:clamp(30px,5vw,90px) 0 clamp(60px,8vw,150px)}
.approach__top{display:flex;justify-content:space-between;padding-inline:var(--pad);padding-bottom:12px;border-bottom:1px solid var(--ink)}
.approach__grid{margin-top:clamp(30px,5vw,90px);row-gap:clamp(30px,4vw,60px)}
.approach__title{grid-column:1/-1}
.approach__title .t-h2{font-size:clamp(3rem,8.6vw,9.4rem)}
.approach__fig{grid-column:1/-1;position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--img-bg)}
.approach__fig img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}
.approach__text{grid-column:1/-1;display:grid;gap:18px;align-content:start}
.approach__text p{max-width:58ch}
.approach__pull{font-family:var(--f-display);font-weight:300;font-size:clamp(1.6rem,2.5vw,2.6rem);line-height:1.08;letter-spacing:-.02em;max-width:22ch}
.approach__pillars{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--ink);margin-top:12px}
.approach__pillars li{padding:14px 12px 16px 0;border-bottom:1px solid var(--ink)}
.approach__pillars li:nth-child(odd){border-right:1px solid var(--ink);padding-left:0}
.approach__pillars li:nth-child(even){padding-left:14px}
.approach__pillars b{display:block;font-family:var(--f-display);font-weight:300;font-size:clamp(1.1rem,1.5vw,1.5rem);letter-spacing:-.01em;margin-bottom:4px}
.approach__pillars span{font-size:1rem;line-height:1.5;opacity:.85}

/* ==========================================================================
   PROCESS (method)
   ========================================================================== */
.process{position:relative;padding:clamp(24px,3vw,50px) var(--pad) clamp(60px,9vw,200px);overflow:clip}
.process__wrap{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.process__intro{grid-column:1/-1;align-self:start}
.process__sticky{position:relative}
.process__label{display:flex;justify-content:space-between;margin-bottom:clamp(20px,3vw,44px)}
.process__title{font-size:clamp(3.6rem,10vw,10.8rem)}
.process__lede{margin-top:clamp(22px,3vw,48px);font-size:1rem;line-height:1.55;max-width:56ch;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding-left:clamp(0px,4vw,70px)}
.process__lines{display:none}
.process__cards{grid-column:1/-1;position:relative;margin-top:clamp(40px,6vw,60px)}
.process__list{display:flex;flex-direction:column;gap:clamp(18px,3vw,36px)}
.pcard{position:relative;width:min(100%,360px);--ink:var(--t-primary);background:var(--c-white);color:var(--ink);padding:16px 16px 0;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 20px 40px -26px color-mix(in srgb,var(--t-primary) 45%,transparent);will-change:transform}
.pcard:nth-child(even){align-self:flex-end}
.pcard__head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--ink);padding-bottom:8px}
.pcard__title{font-family:var(--f-display);font-weight:300;font-size:clamp(1.4rem,1.8vw,1.9rem);letter-spacing:-.02em;line-height:1}
.pcard__no{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-label);font-size:1rem;font-weight:700;letter-spacing:.05em}
.pcard__no i{width:9px;height:9px;background:var(--sq,var(--ink));display:block}
.pcard__text{font-size:1rem;line-height:1.5;font-weight:500;padding:12px 0 16px}

/* ==========================================================================
   DIMENSIONS
   ========================================================================== */
.dims{position:relative;padding:0 0 clamp(40px,5vw,90px)}
.dims__rule{border-top:1px solid var(--ink)}
.dims__head{padding:clamp(60px,10vw,200px) var(--pad) clamp(40px,7vw,130px);text-align:center}
.dims__head .t-h2{font-size:clamp(3.2rem,8.6vw,9.8rem);max-width:12ch;margin-inline:auto}
.dims__sub{max-width:54ch;margin:clamp(18px,2vw,34px) auto 0;font-size:1rem}
.dims__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:0;padding-inline:var(--pad)}
.dim{position:relative;display:flex;flex-direction:column;gap:14px;padding:0 var(--pad) clamp(40px,5vw,80px) 0;border-left:1px solid var(--ink);padding-left:var(--pad);min-height:100%}
.dim__top{display:flex;justify-content:space-between;margin-bottom:clamp(14px,2.6vw,40px);margin-left:calc(var(--pad)*-1);padding-left:var(--pad);position:relative}
.dim__top::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink)}
.dim__title{font-family:var(--f-display);font-weight:300;font-size:clamp(1.55rem,2.35vw,2.5rem);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.dim__fig{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--img-bg);margin-top:6px}
.dim__fig img{position:absolute;inset:-7% 0;width:100%;height:114%;object-fit:cover}
.dim__text{font-size:1rem;line-height:1.55;max-width:34ch}
.dim__areas{margin-top:6px;border-top:1px solid color-mix(in srgb,var(--t-primary) 30%,transparent)}
.dim__areas li{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--t-primary) 30%,transparent);font-size:1rem;line-height:1.35;font-weight:500}
.dim__areas li b{font-family:var(--f-label);font-size:1rem;font-weight:700;letter-spacing:.05em;opacity:.65;min-width:2em;padding-top:2px}
.dims__foot{padding:clamp(24px,3vw,50px) var(--pad) 0;display:flex;flex-direction:column;gap:20px}
.dims__claim{font-family:var(--f-display);font-weight:300;font-size:clamp(1.35rem,2.1vw,2.2rem);line-height:1.1;letter-spacing:-.02em;max-width:36ch}

/* ==========================================================================
   CLIENTS
   ========================================================================== */
.clients{position:relative;padding:clamp(50px,7vw,130px) 0 clamp(60px,8vw,150px);border-top:1px solid var(--ink)}
.clients__top{display:flex;justify-content:space-between;padding-inline:var(--pad);margin-bottom:clamp(26px,4vw,70px)}
.clients__grid{row-gap:clamp(30px,4vw,60px)}
.clients__left{grid-column:1/-1}
.clients__left .t-h2{font-size:clamp(3.2rem,7.8vw,8.8rem)}
.clients__fig{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--img-bg);margin-top:clamp(24px,3vw,50px);max-width:640px}
.clients__fig img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}
.clients__right{grid-column:1/-1}
.clients__intro{display:grid;gap:14px;max-width:58ch;margin-bottom:clamp(20px,2.4vw,40px)}
.clients__list{border-top:1px solid var(--ink)}
.clients__list li{position:relative;display:grid;grid-template-columns:3em 1fr auto;gap:12px;align-items:center;padding:clamp(12px,1.2vw,18px) 0;border-bottom:1px solid var(--ink);font-family:var(--f-display);font-weight:300;font-size:clamp(1.15rem,1.65vw,1.7rem);line-height:1.12;letter-spacing:-.015em;overflow:hidden;isolation:isolate;transition:padding .5s var(--ease-out),color .4s}
.clients__list li::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease-out);z-index:-1}
.clients__list li:hover{padding-left:14px;color:var(--paper)}
.clients__list li:hover::before{transform:scaleY(1)}
.clients__list .n{font-family:var(--f-label);font-size:1rem;font-weight:700;letter-spacing:.05em;opacity:.7}
.clients__list svg{width:14px;height:14px;opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .5s var(--ease-out);margin-right:8px}
.clients__list li:hover svg{opacity:1;transform:none}
.clients__note{margin-top:clamp(20px,2.4vw,40px);max-width:58ch;font-size:1rem}

/* ==========================================================================
   PRINCIPLES (slider)
   ========================================================================== */
.principles{position:relative;background:var(--paper);color:var(--ink);padding:var(--pad) var(--pad) clamp(30px,4vw,60px);overflow:hidden}
.principles__top{display:flex;justify-content:space-between;padding-bottom:clamp(20px,3vw,50px)}
.principles__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:28px;position:relative}
.principles__brand{grid-column:1/-1;position:relative;display:flex;align-items:center;min-height:5.2em}
.principles__big{position:relative;font-family:var(--f-display);font-weight:300;font-size:clamp(3rem,9vw,8.4rem);line-height:.9;letter-spacing:-.04em;display:block;height:1em;overflow:hidden;width:100%}
.principles__big span{position:absolute;left:0;top:0;display:block;will-change:transform}
.principles__stage{grid-column:1/-1;position:relative;display:grid}
.quote{grid-area:1/1;visibility:hidden}
.quote.is-active{visibility:visible}
.quote__text{font-family:var(--f-display);font-weight:300;font-size:clamp(1.65rem,3.1vw,3.3rem);line-height:normal;letter-spacing:-.025em;max-width:24ch;text-wrap:pretty}
.quote__meta{display:flex;gap:clamp(20px,4vw,60px);margin-top:clamp(24px,3.4vw,54px);font-family:var(--f-label);font-size:1rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.principles__ctrl{grid-column:1/-1;display:flex;gap:12px;align-items:center;margin-top:8px}
.ctrl{position:relative;width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ink);display:grid;place-items:center;overflow:hidden;isolation:isolate;color:var(--ink);transition:color .4s}
.ctrl::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease-out);z-index:-1;border-radius:50%}
.ctrl:hover{color:var(--paper)}.ctrl:hover::before{transform:none}
.ctrl svg{width:15px;height:15px}
.principles__count{margin-left:12px}
.principles__progress{flex:1;height:1px;background:color-mix(in srgb,var(--t-primary) 20%,transparent);position:relative;max-width:240px}
.principles__progress i{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{position:relative;padding:clamp(50px,7vw,130px) var(--pad) clamp(50px,7vw,130px)}
.faq__top{display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.faq__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:clamp(30px,5vw,90px);row-gap:30px}
.faq__title{grid-column:1/-1}
.faq__title .t-h2{font-size:clamp(3rem,7.4vw,8.2rem)}
.faq__list{grid-column:1/-1}
.faq .acc__btn{font-size:clamp(1.15rem,1.55vw,1.6rem)}
.faq .acc__text{font-size:1rem;max-width:62ch}

/* ==========================================================================
   NEWS
   ========================================================================== */
.news{position:relative;padding:12px var(--pad) clamp(50px,6vw,100px);border-top:1px solid var(--ink)}
.news__top{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px}
.news__all{display:inline-flex;gap:10px;align-items:center}
.news__all svg{width:12px;height:12px;transition:transform .5s var(--ease-out)}
.news__all:hover svg{transform:translateX(5px)}
.news__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--gap)}
.news__feature{grid-column:1/-1;position:relative;overflow:hidden;background:var(--img-bg);aspect-ratio:4/3.2;min-height:260px}
.news__feature img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}
.news__list{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:var(--gap);align-content:stretch}
.ncard{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:34px;min-height:clamp(210px,24vw,340px);padding:var(--pad);border-top:1px solid var(--ink);overflow:hidden;isolation:isolate;transition:color .5s var(--ease-out)}
.ncard:nth-child(even){border-left:1px solid var(--ink)}
.ncard::before{content:"";position:absolute;inset:0;background:var(--t-primary);opacity:0;transition:opacity .5s var(--ease-out);z-index:-2}
.ncard[data-tone="navy"]::before{background:var(--t-primary)}
.ncard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:0;transform:scale(1.08);filter:brightness(.6) contrast(1.08);transition:opacity .6s var(--ease-out),transform 1.2s var(--ease-out)}
.ncard:hover,.ncard:focus-within{color:#fff}
.ncard:hover::before,.ncard:focus-within::before{opacity:1}
.ncard:hover .ncard__img,.ncard:focus-within .ncard__img{opacity:1;transform:none}
.ncard--first{background:var(--t-primary);color:var(--t-bg);border-top-color:var(--t-primary)}
.ncard__date{font-family:var(--f-label);font-size:1rem;font-weight:600;letter-spacing:.04em}
.ncard__foot{display:flex;flex-direction:column;gap:10px}
.ncard__cat{opacity:.75}
.ncard__title{font-family:var(--f-display);font-weight:300;font-size:clamp(1.15rem,1.55vw,1.6rem);line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
.ncard a::after{content:"";position:absolute;inset:0}

/* ==========================================================================
   CONTACT / CTA
   ========================================================================== */
.cta{position:relative;overflow:hidden;color:var(--t-light);background:var(--paper)}
.cta__bg{position:absolute;inset:0}
.cta__bg img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;opacity:.85}
.cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--t-primary) 88%,transparent),color-mix(in srgb,var(--t-primary) 22%,transparent) 62%)}
.cta__inner{position:relative;z-index:2;padding:clamp(60px,9vw,170px) var(--pad) var(--pad)}
.cta__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:34px;align-items:end}
.cta__title{grid-column:1/-1;font-size:clamp(3rem,8.4vw,9.6rem);line-height:.9}
.cta__title span{display:block}
.cta__side{grid-column:1/-1;display:grid;gap:18px;max-width:46ch}
.cta__side p{font-size:1rem}
.cform{--ink:var(--t-primary);--paper:var(--c-white);grid-column:1/-1;background:var(--c-white);color:var(--ink);padding:var(--pad);display:grid;gap:14px}
.cform__head{display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.field{display:grid;gap:6px}
.field label{font-family:var(--f-label);font-size:1rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.field input,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:8px 0;border-radius:0;outline:0;transition:border-color .3s,box-shadow .3s}
.field textarea{resize:vertical;min-height:90px}
.field input:focus,.field textarea:focus{box-shadow:0 1px 0 0 var(--t-accent);border-color:var(--t-accent)}
.field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.check{display:flex;gap:10px;align-items:flex-start;font-size:1rem;line-height:1.45}
.check input{margin-top:3px;accent-color:var(--ink);width:15px;height:15px;flex:none}
.cform__status{min-height:1.4em;font-size:1rem;font-weight:600}
.cform__status.is-ok{color:#1c5b2e}.cform__status.is-err{color:#a1130f}
.cta__info{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-top:clamp(20px,3vw,50px);padding-top:14px;border-top:1px solid rgba(242,232,217,.5);font-size:1rem}
.cta__info .label{display:block;margin-bottom:6px;opacity:.75}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{position:relative;background:var(--paper);color:var(--ink);padding:clamp(36px,6vw,50px) var(--pad) clamp(18px,1.8vw,26px);overflow:hidden}
.site-footer .link{display:inline}

/* ==========================================================================
   Subpages (news, article, privacy, 404)
   ========================================================================== */
.page{padding-top:0}
.page__hero{padding:clamp(120px,13vw,210px) var(--pad) clamp(40px,5.5vw,90px)}
.page__hero .label{display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--ink);margin-bottom:clamp(30px,5vw,80px)}
.page__title{font-family:var(--f-display);font-weight:300;font-size:clamp(3rem,9vw,9.6rem);line-height:.9;letter-spacing:-.035em;text-wrap:balance}
.page__lede{margin-top:clamp(18px,2.4vw,36px);max-width:56ch;font-size:clamp(1rem,1.25vw,1.2rem)}
.prose{padding:0 var(--pad) clamp(60px,8vw,140px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.prose__inner{grid-column:1/-1;max-width:72ch;font-size:1.0625rem;line-height:1.7}
.prose h2{font-family:var(--f-display);font-weight:300;font-size:clamp(1.7rem,2.6vw,2.6rem);line-height:1.08;letter-spacing:-.02em;margin:2.2em 0 .6em}
.prose h3{font-family:var(--f-display);font-weight:300;font-size:clamp(1.3rem,1.8vw,1.8rem);margin:1.8em 0 .5em}
.prose p,.prose ul,.prose ol{margin:0 0 1.1em}
.prose ul{list-style:square;padding-left:1.2em}.prose ol{list-style:decimal;padding-left:1.4em}
.prose a{border-bottom:1px solid currentColor}
.prose blockquote{border-left:2px solid var(--ink);padding-left:1em;font-family:var(--f-display);font-weight:300;font-size:1.5rem;line-height:1.2;margin:1.4em 0}
.prose img{margin:1.6em 0}
.article__cover{position:relative;overflow:hidden;aspect-ratio:16/8;background:var(--img-bg);margin:clamp(24px,3vw,50px) var(--pad) clamp(30px,4vw,60px)}
.article__cover img{width:100%;height:100%;object-fit:cover}
.newsgrid{padding:clamp(40px,5vw,90px) var(--pad) clamp(60px,8vw,140px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.newsgrid .ncard{min-height:clamp(260px,30vw,420px);border:1px solid var(--ink)}
.pager{display:flex;gap:12px;padding:0 var(--pad) clamp(50px,6vw,100px)}
.pager a,.pager span{min-width:46px;height:46px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--ink);font-family:var(--f-label);font-size:1rem;font-weight:700;padding:0 14px}
.pager .is-current{background:var(--ink);color:var(--t-bg)}
.pager a:hover{background:var(--ink);color:var(--t-bg)}
.backlink{display:inline-flex;gap:10px;align-items:center;margin:0 var(--pad) clamp(40px,5vw,80px)}
.backlink svg{width:12px;height:12px;transform:rotate(180deg)}

/* ==========================================================================
   Desktop layout
   ========================================================================== */
@media (min-width:900px){
  .intro__col{grid-column:span 3}
  .intro__col:nth-child(1){grid-column:7/10}
  .intro__col:nth-child(2){grid-column:10/13}
  .approach__title{grid-column:1/10}
  .approach__fig{grid-column:1/8;aspect-ratio:4/3}
  .approach__text{grid-column:8/13;padding-top:clamp(0px,6vw,110px);padding-left:clamp(20px,3.4vw,64px)}
  .process__wrap{min-height:260vh}
  .process__intro{grid-column:1/7;position:sticky;top:calc(var(--pad)*5);height:fit-content}
  .process__cards{grid-column:7/13;margin-top:0;min-height:230vh}
  .process__list{display:block}
  .process__lines{display:block;position:absolute;inset:0;pointer-events:none;z-index:0}
  .process__lines i{position:absolute;top:0;bottom:0;width:1px;background:var(--ink);transform-origin:top}
  .process__lines i:nth-child(1){left:calc(50% - var(--gap)/2)}
  .process__lines i:nth-child(2){left:calc(75%)}
  .pcard{position:absolute;width:min(78%,360px);z-index:2}
  .pcard:nth-child(1){top:2%;left:12%}
  .pcard:nth-child(2){top:18%;left:2%}
  .pcard:nth-child(3){top:34%;left:30%}
  .pcard:nth-child(4){top:50%;left:6%}
  .pcard:nth-child(5){top:66%;left:34%}
  .pcard:nth-child(6){top:82%;left:12%}
  .dims__cols{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dim:nth-child(2){margin-top:clamp(40px,8vw,150px)}
  .dim:nth-child(4){margin-top:clamp(70px,13vw,250px)}
  .dim:nth-child(3){margin-top:clamp(20px,4vw,80px)}
  .clients__left{grid-column:1/7}
  .clients__right{grid-column:7/13}
  .principles__brand{grid-column:1/5;align-items:flex-start}
  .principles__stage{grid-column:5/13}
  .principles__ctrl{grid-column:1/5;grid-row:1;align-self:end;position:relative}
  .principles__grid{grid-template-areas:"brand stage" "ctrl stage"}
  .principles__brand{grid-area:brand;grid-column:auto}
  .principles__stage{grid-area:stage;grid-column:auto}
  .principles__ctrl{grid-area:ctrl;grid-column:auto;grid-row:auto}
  .principles__grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .faq__title{grid-column:1/6}
  .faq__list{grid-column:6/13}
  .news__feature{grid-column:1/7;aspect-ratio:auto;min-height:clamp(420px,46vw,760px)}
  .news__list{grid-column:7/13}
  .cta__title{grid-column:1/8}
  .cta__side{grid-column:1/6}
  .cform{grid-column:8/13;grid-row:1/3;align-self:end}
  .cta__info{grid-column:1/8;display:flex;flex-wrap:wrap;gap:16px clamp(30px,5vw,80px)}
  .cta__info address{min-width:190px}
  .newsgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1500px){
  .acc__list{columns:2}
}

/* ==========================================================================
   Mobile tweaks
   ========================================================================== */
@media (max-width:899px){
  .hero__tagline{left:34vw;width:calc(66vw - var(--pad)*2);padding-left:0;margin-bottom:3vw;font-size:clamp(1.15rem,5.2vw,2rem)}
  .hero__title{font-size:clamp(2.9rem,12.4vw,9rem)}
  .services__title{display:block}
  .services__t1,.services__t2{grid-column:auto}
  .services__vline{display:none}
  .services__body{display:block}
  .services__figure{position:relative;top:0;margin-top:20px;width:100%}
  .services__caption{width:100%}
  .services__media{order:2;margin-top:24px}
  .services__list{padding-left:0;margin-top:30px}
  .acc__list{columns:1}
  .process__title{font-size:clamp(3.2rem,17vw,8rem)}
  .pcard:nth-child(odd){transform:rotate(-1.2deg)}
  .pcard:nth-child(even){transform:rotate(1.6deg)}
  .dims__cols{grid-template-columns:1fr}
  .dim{border-left:0;border-top:0;padding-left:0;margin-bottom:12px}
  .dim__top{margin-left:0;padding-left:0;padding-top:12px;border-top:1px solid var(--ink)}
  .dim__top::before{display:none}
  .approach__pillars{grid-template-columns:1fr}
  .approach__pillars li:nth-child(odd){border-right:0}
  .approach__pillars li:nth-child(even){padding-left:0}
  .newsgrid{grid-template-columns:1fr}
  .news__list{grid-template-columns:1fr}
  .ncard:nth-child(even){border-left:0}
  .cta__info{grid-template-columns:1fr}
  .menu-panel__meta>div{grid-template-columns:1fr}
}
@media (max-width:520px){
  .hdr{--lh:48px}
  .hdr__menu{height:56px}
  .hdr__menu-icon{width:56px}
  .menu-panel{left:var(--pad);width:auto}
  .intro__path{font-size:1rem}
  .hero__meta{flex-direction:column;gap:4px}
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js [data-split]{visibility:visible}
  .js .site-header{opacity:1}
}
@media print{
  .site-header,.menu-panel,.menu-scrim,.hero__lines,.skip-link{display:none!important}
  body{background:#fff}
}

/* ---------- article hero with duotone photo ---------- */
.page__hero--photo{position:relative;overflow:hidden;isolation:isolate;min-height:min(80vh,760px);display:flex;flex-direction:column;justify-content:flex-end}
.page__bg{position:absolute;inset:0;z-index:-1}
.page__bg img{width:100%;height:100%;object-fit:cover}
.page__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--t-primary) 82%,transparent),color-mix(in srgb,var(--t-primary) 28%,transparent) 55%,color-mix(in srgb,var(--t-primary) 45%,transparent))}
.th-navy .page__bg::after{background:linear-gradient(to top,color-mix(in srgb,var(--t-primary) 85%,transparent),color-mix(in srgb,var(--t-primary) 28%,transparent) 55%,color-mix(in srgb,var(--t-primary) 45%,transparent))}
.page__hero--photo .page__title{color:#fff}

/* ---------- consent banner (minimal) ---------- */
.consent{position:fixed;left:var(--pad);bottom:var(--pad);z-index:1500;width:min(380px,calc(100vw - var(--pad)*2));background:var(--c-white);color:var(--t-primary);padding:16px;display:grid;gap:12px;
  box-shadow:0 18px 40px -20px rgba(27,6,8,.55);opacity:0;transform:translateY(16px);pointer-events:none;visibility:hidden;transition:opacity .6s var(--ease-out),transform .8s var(--ease-out),visibility 0s .8s}
.consent.is-on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.consent p{margin:0;font-size:1rem;line-height:1.4}
.consent a{border-bottom:1px solid currentColor}
.consent__btn{justify-self:start;min-height:44px;padding:0 20px;background:var(--t-primary);color:var(--t-light);font-family:var(--f-label);font-size:1rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;transition:background .3s}
.consent__btn:hover{background:var(--t-accent)}

/* ==========================================================================
   v2 — inner pages (about, areas, method, perspectives, clients, news, contact, faq, careers)
   ========================================================================== */
.stairs{--stair:var(--t-primary)}
.stairs__step{background:var(--stair)}
.stairs--maroon{--stair:var(--t-primary)}

/* ---------- page heroes ---------- */
.ph{position:relative;isolation:isolate}
.ph--photo{min-height:min(100svh,900px);display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--pad)*7) var(--pad) clamp(34px,5vw,80px);overflow:hidden}
.ph__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.ph__bg img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}
.ph__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--t-primary) 72%,transparent),color-mix(in srgb,var(--t-primary) 8%,transparent) 58%),linear-gradient(to bottom,color-mix(in srgb,var(--t-primary) 50%,transparent),color-mix(in srgb,var(--t-primary) 0%,transparent) 28%)}
.th-navy .ph__bg::after,.ph--navy .ph__bg::after{background:linear-gradient(to top,color-mix(in srgb,var(--t-primary) 74%,transparent),color-mix(in srgb,var(--t-primary) 8%,transparent) 58%),linear-gradient(to bottom,color-mix(in srgb,var(--t-primary) 50%,transparent),color-mix(in srgb,var(--t-primary) 0%,transparent) 28%)}
.ph__title{font-family:var(--f-display);font-weight:300;font-size:clamp(3.4rem,10.4vw,12.5rem);line-height:.9;letter-spacing:-.04em;color:#fff;text-wrap:balance}
.ph__title .ln{display:block}.ph__title .ln--r{text-align:right}
.ph__meta{display:flex;justify-content:space-between;gap:var(--gap);margin-bottom:clamp(14px,2vw,30px);color:#fff}
.ph--plain{padding:calc(var(--pad)*9) var(--pad) clamp(40px,6vw,110px);text-align:center}
.ph--plain .ph__title{color:var(--ink);font-size:clamp(3.2rem,9vw,10.5rem);text-wrap:balance}
.ph__lede{max-width:34ch;margin:clamp(26px,3.4vw,60px) 0 0 auto;font-family:var(--f-display);font-weight:300;font-size:clamp(1.3rem,1.95vw,2.1rem);line-height:1.14;letter-spacing:-.015em;text-align:left}
.ph--plain .ph__lede{margin-inline:auto 0}
.ph--left{text-align:left;padding-top:calc(var(--pad)*10)}
.ph--left .ph__title{font-size:clamp(3.4rem,9.4vw,11rem)}
.ph--left .ph__lede{margin-left:calc(50% - var(--pad)*.5)}

/* ---------- generic blocks ---------- */
.sec{position:relative;padding:clamp(50px,7vw,130px) 0}
.sec__top{display:flex;justify-content:space-between;padding:0 var(--pad) 12px;border-bottom:1px solid var(--ink);margin-bottom:clamp(30px,5vw,90px)}
.sec__top--plain{border-bottom:0;margin-bottom:clamp(20px,3vw,50px)}
.tx{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-inline:var(--pad);row-gap:24px}
.tx__a{grid-column:1/-1}.tx__b{grid-column:1/-1;max-width:62ch}
.tx__b p+p{margin-top:1em}
.lead{font-family:var(--f-display);font-weight:300;font-size:clamp(1.8rem,3.5vw,3.9rem);line-height:1.06;letter-spacing:-.03em}
.btn--w{width:min(100%,360px)}
.hr{border-top:1px solid var(--ink)}
.t-fig{position:relative;overflow:hidden;background:var(--img-bg);aspect-ratio:16/9}
.t-fig img{position:absolute;inset:-7% 0;width:100%;height:114%;object-fit:cover}

/* mission band over image (about) */
.mission{position:relative;isolation:isolate;overflow:hidden;color:var(--t-light);padding:clamp(60px,9vw,160px) var(--pad)}
.mission__bg{position:absolute;inset:0;z-index:-1}
.mission__bg img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}
.mission__bg::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--t-primary) 62%,transparent)}
.mission .lead{max-width:22ch;margin-left:auto;font-size:clamp(1.7rem,3vw,3.3rem)}

/* two-column vision */
.vis{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-inline:var(--pad);position:relative}
.vis__t{grid-column:1/-1;font-family:var(--f-display);font-weight:300;font-size:clamp(3.6rem,10vw,11rem);line-height:.9;letter-spacing:-.04em;margin-bottom:clamp(24px,4vw,70px)}
.vis__a,.vis__b{grid-column:1/-1;padding:18px 0 clamp(30px,5vw,80px);border-top:1px solid var(--ink);max-width:52ch}
.vis__a{font-size:1.0625rem}.vis__b{font-size:1rem}

/* timeline (percorso) */
.tl{display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,60px);padding:0 var(--pad)}
.tl__i{position:relative;padding-top:18px;border-top:1px solid var(--ink)}
.tl__i figure{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--img-bg);margin-bottom:14px}
.tl__i figure img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover}
.tl__y{font-family:var(--f-display);font-weight:300;font-size:clamp(2.4rem,4.5vw,5.4rem);line-height:.9;letter-spacing:-.04em;display:block}
.tl__c{display:block;margin-top:8px}

/* competence cards (leadership board analog) */
.pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap) var(--gap);padding:0 var(--pad)}
.pc{display:block;position:relative}
.pc figure{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--img-bg);margin-bottom:12px}
.pc figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.pc:hover figure img{transform:scale(1.07)}
.pc__n{display:block;opacity:.7}
.pc__t{display:block;font-family:var(--f-display);font-weight:300;font-size:clamp(1.25rem,1.6vw,1.7rem);line-height:1.08;letter-spacing:-.015em}

/* rows list (services / areas) */
.rows{border-top:1px solid var(--ink);margin:0 var(--pad)}
.row{position:relative;display:grid;grid-template-columns:3em minmax(0,1fr) auto;gap:8px var(--gap);align-items:start;padding:clamp(18px,2.2vw,34px) 0;border-bottom:1px solid var(--ink);overflow:hidden;isolation:isolate;transition:color .5s var(--ease-out),padding .6s var(--ease-out)}
.row::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .6s var(--ease-out);z-index:-1}
.row:hover{color:var(--paper);padding-inline:14px}
.row:hover::before{transform:none}
.row__n{padding-top:.4em}
.row__t{font-family:var(--f-display);font-weight:300;font-size:clamp(1.6rem,2.8vw,3rem);line-height:1.04;letter-spacing:-.025em}
.row__d{grid-column:2/3;max-width:56ch;font-size:1rem;line-height:1.5}
.row__a{grid-row:1;grid-column:3;align-self:center}
.row__a svg{width:18px;height:18px;transition:transform .5s var(--ease-out)}
.row:hover .row__a svg{transform:translateX(6px)}
.row a.row__l::after{content:"";position:absolute;inset:0}

/* big split title (a versatile range of services) */
.big2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-inline:var(--pad);position:relative}
.big2 h2{grid-column:1/-1;font-family:var(--f-display);font-weight:300;font-size:clamp(3.4rem,10.4vw,12rem);line-height:.9;letter-spacing:-.04em}
.big2 h2 span{display:block}.big2 h2 .r{text-align:right}
.big2 figure{grid-column:1/-1;position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--img-bg);margin:clamp(14px,2vw,30px) 0}
.big2 figure img{position:absolute;inset:-7% 0;width:100%;height:114%;object-fit:cover}
.big2 p{grid-column:1/-1;max-width:34ch;font-size:1rem;line-height:1.5}

/* masonry + filters (projects analog) */
.mp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:0 var(--pad) clamp(60px,8vw,140px)}
.filters{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:28px}
.filters button{font-family:var(--f-display);font-weight:300;font-size:clamp(1.15rem,1.5vw,1.6rem);line-height:1.15;letter-spacing:-.01em;text-align:left;opacity:.55;transition:opacity .3s}
.filters button:hover,.filters button[aria-pressed="true"]{opacity:1}
.filters button[aria-pressed="true"]{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.mason{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,4vw,60px) var(--gap);align-items:start}
.mi{display:block;position:relative}
.mi figure{position:relative;overflow:hidden;background:var(--img-bg);aspect-ratio:4/3;margin-top:10px}
.mi figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.mi:hover figure img{transform:scale(1.06)}
.mi__t{display:block;font-family:var(--f-display);font-weight:300;font-size:clamp(1.5rem,2.3vw,2.5rem);line-height:1.05;letter-spacing:-.025em}
.mi__c{display:block;margin-top:4px;opacity:.8}
.mi.is-out{display:none}

/* big number */
.num{padding:0 var(--pad);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);text-align:center}
.num__v{grid-column:1/-1;font-family:var(--f-display);font-weight:300;font-size:clamp(9rem,32vw,38rem);line-height:.8;letter-spacing:-.06em}
.num__c{grid-column:1/-1;max-width:30ch;margin:clamp(18px,2.4vw,40px) auto 0}

/* outlined boxes (clients) */
.boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 var(--pad);padding:1px 0 0 1px}
.box{position:relative;margin:-1px 0 0 -1px;border:1px solid var(--ink);min-height:clamp(120px,14vw,200px);padding:clamp(14px,1.6vw,24px);display:flex;flex-direction:column;justify-content:space-between;isolation:isolate;overflow:hidden;transition:color .5s}
@media (max-width:640px){.boxes--3{grid-template-columns:minmax(0,1fr)}}
.box::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease-out);z-index:-1}
.box:hover{color:var(--paper)}.box:hover::before{transform:scaleY(1)}
.box__t{font-family:var(--f-display);font-weight:300;font-size:clamp(1.15rem,1.6vw,1.7rem);line-height:1.08;letter-spacing:-.015em}
.cgrp{text-align:center;font-family:var(--f-display);font-weight:300;font-size:clamp(2rem,3.4vw,3.6rem);letter-spacing:-.03em;margin:clamp(50px,8vw,130px) 0 clamp(24px,3vw,50px)}

/* band / CTA */
.band{position:relative;padding:clamp(70px,10vw,190px) var(--pad);text-align:center;overflow:hidden}
.band h2{font-family:var(--f-display);font-weight:300;font-size:clamp(2.4rem,6.4vw,7.6rem);line-height:.94;letter-spacing:-.04em;max-width:16ch;margin:0 auto clamp(26px,3.4vw,56px);text-wrap:balance}
.band .btn{width:min(100%,320px);justify-content:center}

/* news list (blog analog) */
.nlist{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:0 var(--pad) clamp(60px,8vw,140px)}
.nrows{grid-column:1/-1;border-top:1px solid var(--ink)}
.nr{position:relative;display:grid;grid-template-columns:1fr;gap:10px;padding:clamp(18px,2vw,30px) 0;border-bottom:1px solid var(--ink);isolation:isolate;overflow:hidden;transition:color .5s,padding .6s var(--ease-out)}
.nr::before{content:"";position:absolute;inset:0;background:var(--t-primary);transform:translateY(101%);transition:transform .6s var(--ease-out);z-index:-1}
.nr[data-tone="navy"]::before{background:var(--t-primary)}
.nr:hover{color:#fff;padding-inline:14px}.nr:hover::before{transform:none}
.nr__d{display:flex;gap:18px;font-family:var(--f-label);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.nr__t{font-family:var(--f-display);font-weight:300;font-size:clamp(1.4rem,2.1vw,2.3rem);line-height:1.08;letter-spacing:-.02em;max-width:34ch}
.nr__x{max-width:52ch}
.nr__i{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--img-bg);max-width:260px;width:100%}
.nr__i img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nr a::after{content:"";position:absolute;inset:0}
.nr.is-out{display:none}

/* contact page */
.cp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:clamp(40px,6vw,100px) var(--pad) clamp(60px,8vw,140px);row-gap:36px}
.cp__a{grid-column:1/-1}.cp__b{grid-column:1/-1}
.cp__a .lead{font-size:clamp(1.6rem,2.4vw,2.6rem);max-width:20ch;margin-bottom:28px}
.cp__a address,.cp__a p{margin-top:12px}
.tabs{display:flex;gap:24px;margin-bottom:24px}
.tabs button{font-family:var(--f-display);font-weight:300;font-size:clamp(1.8rem,2.6vw,2.8rem);letter-spacing:-.02em;opacity:.45;transition:opacity .3s}
.tabs button[aria-selected="true"]{opacity:1}
.cpf{display:grid;gap:22px}
.cpf .field input,.cpf .field textarea{font-size:1.125rem}
.cpf .row2{display:grid;gap:22px}
.cpf[hidden]{display:none}

/* faq page */
.fp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:0 var(--pad) clamp(60px,8vw,140px);row-gap:40px}
.fp__a{grid-column:1/-1}.fp__b{grid-column:1/-1}
.fp__card{border:1px solid var(--ink);padding:18px;margin-top:28px;max-width:420px;display:grid;gap:10px}
.fp .acc__btn{grid-template-columns:auto 1fr auto}
.fp .acc__cat{display:block;opacity:.65;margin-bottom:2px}

/* careers */
.scatter{position:relative;height:clamp(520px,70vw,980px)}
.scatter figure{position:absolute;overflow:hidden;background:var(--img-bg);box-shadow:0 24px 50px -30px rgba(27,6,8,.5)}
.scatter figure img{width:100%;height:100%;object-fit:cover}
.scatter .s1{left:6%;top:10%;width:34%;aspect-ratio:3/2;transform:rotate(-3deg)}
.scatter .s2{right:6%;top:0;width:24%;aspect-ratio:4/5;transform:rotate(4deg)}
.scatter .s3{left:34%;top:46%;width:30%;aspect-ratio:4/3;transform:rotate(2deg)}
.scatter .s4{right:10%;top:52%;width:26%;aspect-ratio:3/2;transform:rotate(-4deg)}
.scatter .s5{left:2%;top:64%;width:22%;aspect-ratio:1;transform:rotate(5deg)}
.cult-t{font-family:var(--f-display);font-weight:300;font-size:clamp(5rem,22vw,26rem);line-height:.8;letter-spacing:-.06em;text-align:center}

/* page transition wipe */
.wipe{position:fixed;inset:0;z-index:4000;background:var(--t-primary);display:grid;place-items:center;transform:translateY(100%);pointer-events:none;visibility:hidden}
.wipe svg{width:clamp(70px,9vw,120px);height:auto}
.wipe rect{fill:#fff}.wipe .w2{fill:var(--t-accent)}.wipe .w3{fill:var(--t-accent)}.wipe .w1{fill:none;stroke:#fff;stroke-width:6}

@media (min-width:900px){
  .tx__a{grid-column:1/6}.tx__b{grid-column:7/13}
  .vis__a{grid-column:7/10;margin-top:0}.vis__b{grid-column:10/13}
  .tl{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(40px,8vw,140px)}
  .tl__i:nth-child(3n+2){margin-top:clamp(40px,10vw,180px)}.tl__i:nth-child(3n+3){margin-top:clamp(20px,5vw,90px)}
  .pcards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .row{grid-template-columns:4em minmax(0,1.2fr) minmax(0,1.4fr) auto}
  .row__d{grid-column:3;grid-row:1}.row__a{grid-column:4}
  .big2 h2 .r{text-align:right}
  .big2 figure{grid-column:4/9;margin:-.4em 0 .6em;aspect-ratio:3/4}
  .big2 p{grid-column:9/13;align-self:end}
  .filters{grid-column:1/3;flex-direction:column;position:sticky;top:calc(var(--pad)*6);align-self:start;margin-bottom:0}
  .mason{grid-column:3/-1;grid-template-columns:repeat(12,minmax(0,1fr))}
  .mi:nth-child(6n+1){grid-column:1/8}.mi:nth-child(6n+2){grid-column:8/13;margin-top:clamp(40px,6vw,110px)}
  .mi:nth-child(6n+3){grid-column:1/6}.mi:nth-child(6n+4){grid-column:6/13;margin-top:clamp(30px,5vw,90px)}
  .mi:nth-child(6n+5){grid-column:2/8}.mi:nth-child(6n+6){grid-column:8/13;margin-top:clamp(40px,7vw,130px)}
  .boxes{grid-template-columns:repeat(5,minmax(0,1fr))}
  .boxes--4{grid-template-columns:repeat(4,minmax(0,1fr))}.boxes--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .nlist .filters{grid-column:1/3}
  .nrows{grid-column:3/-1}
  .nr{grid-template-columns:minmax(0,1.1fr) minmax(0,2.4fr) 220px;align-items:start;column-gap:var(--gap)}
  .nr__d{flex-direction:column;gap:4px}
  .cp__a{grid-column:1/6}.cp__b{grid-column:7/13}
  .fp__a{grid-column:1/6;position:sticky;top:calc(var(--pad)*6);align-self:start}.fp__b{grid-column:6/13}
}
@media (max-width:899px){
  .ph__title .ln--r{text-align:left}
  .scatter{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .scatter figure{position:relative;inset:auto;width:100%!important;transform:none!important}
  .scatter .s1,.scatter .s3{grid-column:1/-1}
  .row__d{grid-column:2/-1}.row__a{grid-column:3;grid-row:1}
  .ph--left .ph__lede{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.wipe{display:none}}

/* v2 helpers */
.ph__title--sm{font-size:clamp(2.6rem,6.8vw,8rem)}
.mp--nofilter .mason{grid-column:1/-1}
.more{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--f-label);font-size:1rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.more svg{width:16px;height:16px;transition:transform .5s var(--ease-out)}.more:hover svg{transform:translateX(6px)}
.rows .row[role]{}
.nlist .nr__i{display:none}
@media (min-width:900px){.nlist .nr__i{display:block}.mp--nofilter .mi:nth-child(3n+1){grid-column:1/6}.mp--nofilter .mi:nth-child(3n+2){grid-column:6/10;margin-top:clamp(30px,5vw,90px)}.mp--nofilter .mi:nth-child(3n+3){grid-column:10/13;margin-top:clamp(10px,2vw,40px)}}

/* news list: hover shows the news photo in its duotone */
.nr__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:0;transform:scale(1.06);filter:brightness(.58) contrast(1.06);transition:opacity .6s var(--ease-out),transform 1.2s var(--ease-out)}
.nr:hover .nr__bg,.nr:focus-within .nr__bg{opacity:1;transform:none}
.nr:hover .nr__x{color:#fff}
@media (min-width:900px){.nr{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}}

/* header links over light backgrounds (inner pages with a sand/white top) */
.hdr-light .hdr__links a{color:var(--t-primary);text-shadow:none}
.hdr-light .hdr__links a:hover{color:var(--t-accent)}

/* ---------- area icons (outline, 4 logo colours) ---------- */
.ic{display:block;width:100%;height:100%;overflow:visible}
.ic *{fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.ic .k1,.ic .k2,.ic .k3,.ic .k4{stroke:var(--ic-color,var(--t-primary))}
.ic .f{fill:var(--ic-bg,#fff)}
.ic .needle,.ic .ring,.ic .fcoin,.ic .flag,.ic .cart,.ic .drop,.ic .liq{transform-origin:100px 100px}
.ic .node,.ic .core,.ic .spark,.ic .b,.ic .sp,.ic .bar,.ic .rb,.ic .bx{transform-box:fill-box;transform-origin:center}
.ic .needle{animation:icSwing 6s ease-in-out infinite}
.ic .ring{animation:icSpin 60s linear infinite}
.ic .node{animation:icPulse 2.6s ease-in-out infinite}
.ic .nodes .node:nth-child(3n+2){animation-delay:.45s}.ic .nodes .node:nth-child(3n){animation-delay:.9s}.ic .nodes .node:nth-child(4n){animation-delay:1.3s}
.ic .core{animation:icBeat 2.6s ease-in-out infinite}
.ic .spark{animation:icSpinSlow 9s linear infinite}
.ic .liq{animation:icBob 3s ease-in-out infinite}
.ic .b{animation:icRise 3.2s ease-in infinite}.ic .b2{animation-duration:2.6s;animation-delay:1s}.ic .b3{animation-duration:3.6s;animation-delay:2s}
.ic .sp{animation:icBlink 2.6s ease-in-out infinite}.ic .sp2{animation-delay:.8s}.ic .sp3{animation-delay:1.6s}
.ic .chk{stroke-dasharray:1;animation:icDraw 4.4s ease-in-out infinite}
.ic .din{animation:icMarch 3s linear infinite}
.ic .fcoin{animation:icFloat 3.2s ease-in-out infinite}
.ic .bar{transform-origin:left center;animation:icGrow 5.2s ease-in-out infinite}.ic .b2.bar{animation-delay:.35s}.ic .b3.bar{animation-delay:.7s}
.ic .flag{transform-origin:158px 36px;animation:icWave 2.4s ease-in-out infinite}
.ic .rb{transform-origin:center bottom;animation:icRiseBar 5.6s ease-in-out infinite}.ic .r2{animation-delay:.3s}.ic .r3{animation-delay:.6s}
.ic .arr{stroke-dasharray:1;animation:icDraw2 5.6s ease-in-out infinite}.ic .arh{animation:icFade 5.6s ease-in-out infinite}
.ic .cart{animation:icRoll 4s ease-in-out infinite}
.ic .drop{animation:icDrop 2.2s ease-in-out infinite}
.ic .bx{animation:icBob 2.8s ease-in-out infinite}.ic .bx2{animation-delay:1.4s}
@keyframes icSwing{0%,100%{transform:rotate(-20deg)}25%{transform:rotate(24deg)}50%{transform:rotate(-8deg)}75%{transform:rotate(14deg)}}
@keyframes icSpin{to{transform:rotate(360deg)}}
@keyframes icSpinSlow{to{transform:rotate(360deg)}}
@keyframes icPulse{0%,100%{transform:scale(.6);opacity:.55}50%{transform:scale(1.25);opacity:1}}
@keyframes icBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes icBob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
@keyframes icRise{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(-34px);opacity:0}}
@keyframes icBlink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes icDraw{0%{stroke-dashoffset:1}30%,78%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:1}}
@keyframes icMarch{to{stroke-dashoffset:-8.1}}
@keyframes icFloat{0%,100%{transform:translateY(2px)}50%{transform:translateY(-9px)}}
@keyframes icGrow{0%{transform:scaleX(0)}28%,82%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes icWave{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.8)}}
@keyframes icRiseBar{0%{transform:scaleY(0)}28%,82%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes icDraw2{0%,12%{stroke-dashoffset:1}50%,84%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes icFade{0%,45%{opacity:0}55%,84%{opacity:1}100%{opacity:0}}
@keyframes icRoll{0%,100%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
@keyframes icDrop{0%,100%{transform:translateY(-4px);opacity:.6}50%{transform:translateY(8px);opacity:1}}
@media (prefers-reduced-motion:reduce){.ic *{animation:none!important}}
/* contexts */
.services__figure{aspect-ratio:1/1;width:min(100%,clamp(260px,34vw,560px),62vh);background:transparent;overflow:visible;--ic-bg:var(--paper,var(--t-bg));--ic-color:var(--t-primary)}
.services__figure .ic{position:absolute;inset:0;padding:2%;box-sizing:border-box;opacity:0;scale:.9;transform:translate(calc(var(--mx,0)*26px),calc(var(--my,0)*20px)) rotate(calc(var(--rot,0deg) + var(--mx,0)*3.5deg));transition:opacity .6s var(--ease-out),scale 1s var(--ease-out)}
.services__figure .ic.is-active{opacity:1;scale:1}
.services__figure .ic--01{--rot:-6deg}.services__figure .ic--02{--rot:5deg}.services__figure .ic--03{--rot:-4deg}.services__figure .ic--04{--rot:6deg}.services__figure .ic--05{--rot:-7deg}.services__figure .ic--06{--rot:4deg}.services__figure .ic--07{--rot:-5deg}.services__figure .ic--08{--rot:6deg}
.services__figure .ic:not(.is-active) *{animation-play-state:paused}
.ic-fig,.mi .ic-fig,.pc .ic-fig{position:relative;overflow:hidden;background:var(--ic-bg)}
.ic-fig--white{--ic-bg:var(--c-white)}.ic-fig--sand{--ic-bg:var(--t-bg)}
.mi .ic-fig .ic,.pc .ic-fig .ic{position:absolute;inset:0;padding:13%;box-sizing:border-box;transition:transform 1s var(--ease-out)}
.mi:hover .ic-fig .ic,.pc:hover .ic-fig .ic{transform:scale(1.05)}
.ph__ic{align-self:flex-end;width:clamp(180px,25vw,420px);aspect-ratio:1/1;margin-bottom:clamp(22px,3vw,46px);padding:clamp(6px,1vw,18px);box-sizing:border-box;background:var(--t-bg);--ic-bg:var(--t-bg)}
.ph--icon{min-height:min(88svh,820px);padding-top:calc(var(--pad)*6)}
@media (max-width:899px){.services__figure{width:min(100%,320px)}}
/* ---------- /faq/ grouped by theme ---------- */
.fp__n{margin-top:10px;opacity:.75}
.fnav{margin-top:clamp(18px,2vw,32px)}
.fnav ul{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.fnav__t{margin-top:14px;opacity:.7}
.fnav a{display:block;padding:4px 0;font-size:1rem;line-height:1.35;color:var(--ink);text-decoration:none;transition:color .3s}
.fnav a:hover{color:var(--t-accent)}
.fth{margin-bottom:clamp(56px,7vw,120px)}
.fth__t{font-family:var(--f-display);font-weight:300;font-size:clamp(2.2rem,4vw,4.4rem);line-height:.98;letter-spacing:-.03em;margin:0 0 clamp(24px,3vw,48px);padding-top:clamp(10px,1.4vw,24px);border-top:1px solid var(--ink)}
.fg{margin-bottom:clamp(36px,4.6vw,76px);scroll-margin-top:calc(var(--pad)*6)}
.fg__h{margin-bottom:clamp(10px,1.2vw,18px)}
.fg__t{font-family:var(--f-display);font-weight:300;font-size:clamp(1.5rem,2.1vw,2.2rem);line-height:1.08;letter-spacing:-.02em;margin:0}
.fg__i{margin:6px 0 0;font-size:1rem;opacity:.75}
.fg__m{display:inline-flex;align-items:center;gap:8px;margin-top:14px}
.fg__m svg{width:12px;height:12px}
@media (min-width:900px){.fp__a .fnav{max-height:calc(100svh - var(--pad)*14);overflow:auto;padding-right:8px}}

/* =====================================================================
   OCI-faithful page kit (about / services / contact / projects / culture)
   ===================================================================== */
:root{--big:clamp(3.2rem,11.1vw,10.4rem);--h36:clamp(1.9rem,3.6vw,4rem);--h30:clamp(1.2rem,2.08vw,2rem)}
.dsp{font-family:var(--f-display);font-weight:300;letter-spacing:-.04em}
.big{font-family:var(--f-display);font-weight:300;font-size:var(--big);line-height:.94;letter-spacing:-.04em}
.h36{font-family:var(--f-display);font-weight:300;font-size:var(--h36);line-height:1.05;letter-spacing:-.025em}
.h30{font-family:var(--f-display);font-weight:300;font-size:var(--h30);line-height:1.04;letter-spacing:-.02em}
.mono{font-family:var(--f-label);font-weight:600;font-size:1rem;line-height:1.35;letter-spacing:.04em;text-transform:uppercase}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-inline:var(--pad)}

/* ---- stairs (3 steps growing from the left, in the colour of the next section) */
.ostairs{position:absolute;left:0;bottom:-1px;width:100%;pointer-events:none;z-index:1}
.ostairs i{display:block;height:clamp(60px,9.7vw,140px);width:40%;background:var(--stair-bg,var(--t-bg));transform-origin:left center;transform:scaleX(var(--sx,1));will-change:transform}
/* always a staircase: three steps of different final width (top shortest, bottom longest) */
.ostairs i:nth-child(1){--sx:.34}.ostairs i:nth-child(2){--sx:.67}.ostairs i:nth-child(3){--sx:1}

/* ---- hero "oh" : right-aligned first line, photo/icon band with second line + text + stairs */
.oh{display:grid;grid-template-columns:minmax(0,1fr);position:relative;isolation:isolate}
.oh__h1{display:contents}
.oh__t1,.oh__t2{display:block;font-family:var(--f-display);font-weight:300;font-size:var(--big);line-height:.94;letter-spacing:-.04em}
.oh__t1{grid-row:1;padding:clamp(120px,15.6vw,225px) var(--pad) 0;text-align:right;color:var(--ink)}
.oh__media{grid-row:2;grid-column:1;position:relative;overflow:hidden;min-height:clamp(560px,52.4vw,790px);margin-top:clamp(8px,1.2vw,18px);z-index:0;background:var(--t-primary)}
.oh__bg{position:absolute;inset:0}
.oh__bg img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}
.oh__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--t-primary) 18%,transparent),color-mix(in srgb,var(--t-primary) 0%,transparent) 38%,color-mix(in srgb,var(--t-primary) 42%,transparent))}
.oh__t2{grid-row:2;grid-column:1;align-self:start;position:relative;z-index:2;padding:clamp(22px,7.6vw,110px) var(--pad) 0;color:#fff;text-wrap:balance}
.oh__text{grid-row:2;grid-column:1;align-self:end;justify-self:end;position:relative;z-index:2;width:min(calc(100% - var(--pad)*2),41.6%);margin:0 var(--pad) clamp(40px,10.4vw,150px) 0;font-size:var(--h30);line-height:1.08;color:#fff}
.oh--navy .oh__media{background:var(--t-primary)}
.oh--navy .oh__bg::after{background:linear-gradient(to bottom,color-mix(in srgb,var(--t-primary) 25%,transparent),color-mix(in srgb,var(--t-primary) 0%,transparent) 38%,color-mix(in srgb,var(--t-primary) 50%,transparent))}
/* icon variant: big single-colour outline icon on the band (watermark-like, under the text) */
.oh--area{--big:clamp(2.6rem,7.2vw,7.4rem)}
.oh__ic{position:absolute;right:clamp(10px,4vw,70px);top:50%;transform:translateY(-46%);width:min(46vw,640px);aspect-ratio:1/1;--ic-color:#fff;--ic-bg:transparent;opacity:.55;pointer-events:none}
.oh__ic .ic{width:100%;height:100%}
@media (max-width:899px){
  .oh__t1{padding-top:110px}.oh__media{min-height:130vw}.oh__text{width:calc(100% - var(--pad)*2);font-size:1.2rem}
  .oh__ic{width:86vw;right:-10vw;top:56%}
}

/* ---- statement block with vertical column lines (mission / vision) */
.ov{position:relative;padding-inline:var(--pad);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.ov__ln{display:none;position:absolute;inset:0 var(--pad);pointer-events:none;grid-template-columns:repeat(3,minmax(0,1fr));z-index:0}
.ov__ln i{border-left:1px solid var(--ink)}
.ov > *:not(.ov__ln){position:relative;z-index:1}
.ov__big{grid-column:1/-1;margin-top:clamp(30px,6vw,90px);display:grid;grid-template-columns:subgrid}
.ov__big span{display:block;font-family:var(--f-display);font-weight:300;font-size:clamp(3rem,9.2vw,8.6rem);line-height:1.02;letter-spacing:-.04em}
.ov__tx{grid-column:1/-1;font-size:clamp(1.05rem,1.2vw,1.2rem);line-height:1.5;margin-top:clamp(24px,3vw,50px)}
.ov__tx + .ov__tx{margin-bottom:clamp(40px,5vw,80px)}
@media (min-width:900px){
  .ov__ln{display:grid}
  .ov__big span:nth-child(1){grid-column:1/7}.ov__big span:nth-child(2){grid-column:7/-1}
  .ov__tx{grid-column:5/9;padding-left:clamp(8px,1vw,16px)}
  .ov__tx--l{grid-column:1/5}
  .ov__big{margin-top:clamp(70px,11vw,170px)}
}

/* ---- milestones / path: 3 lines, tilted photos, giant index */
.om{position:relative;padding:clamp(20px,3vw,50px) var(--pad) clamp(60px,8vw,140px);display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(40px,8vw,90px)}
.om__ln{display:none;position:absolute;inset:0 var(--pad);pointer-events:none;grid-template-columns:repeat(3,minmax(0,1fr))}
.om__ln i{border-left:1px solid var(--ink)}
.om__i{position:relative;z-index:1;padding-left:clamp(0px,1vw,16px)}
.om__i figure{position:relative;overflow:hidden;aspect-ratio:3/2;width:min(100%,380px);background:var(--img-bg);transform:rotate(var(--rot,-3deg))}
.om__i figure img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}
.om__y{display:block;margin-top:-.3em;position:relative;font-family:var(--f-display);font-weight:300;font-size:var(--big);line-height:1;letter-spacing:-.05em}
.om__t{display:block;margin-top:8px;font-family:var(--f-display);font-weight:300;font-size:var(--h36);line-height:1.05;letter-spacing:-.02em}
.om__c{display:block;margin-top:8px;max-width:30ch;font-size:1rem;line-height:1.45}
@media (min-width:900px){
  .om{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(30px,4vw,60px)}
  .om__ln{display:grid}
  .om__i:nth-child(3n+2){margin-top:clamp(30px,5vw,72px)}.om__i:nth-child(3n+3){margin-top:clamp(60px,13.4vw,193px)}
  .om__i:nth-child(1){--rot:-3deg}.om__i:nth-child(2){--rot:2deg}.om__i:nth-child(3){--rot:-2deg}.om__i:nth-child(4){--rot:3deg}.om__i:nth-child(5){--rot:-2.5deg}.om__i:nth-child(6){--rot:2deg}
}

/* ---- giant two-line title block used on white sections (leadership-like) */
.gt{padding-inline:var(--pad)}
.gt h2{font-family:var(--f-display);font-weight:300;font-size:var(--big);line-height:.94;letter-spacing:-.04em;margin:0}
.gt h2 span{display:block}

/* ---- services (aree index): hero, intro, range, list */
.sh{position:relative;min-height:100svh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-content:end;padding:clamp(130px,15vw,218px) var(--pad) clamp(18px,2.9vw,42px);isolation:isolate;overflow:hidden;color:#fff}
.sh__bg{position:absolute;inset:0;z-index:-1}
.sh__bg img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}
.sh__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--t-primary) 55%,transparent),color-mix(in srgb,var(--t-primary) 5%,transparent) 55%),linear-gradient(to bottom,color-mix(in srgb,var(--t-primary) 40%,transparent),color-mix(in srgb,var(--t-primary) 0%,transparent) 30%)}
.sh h1{display:contents}
.sh__a,.sh__b{display:block;font-family:var(--f-display);font-weight:300;font-size:var(--big);line-height:.94;letter-spacing:-.04em}
.sh__a{grid-column:1/-1}
.sh__b{grid-column:1/-1}
@media (min-width:900px){.sh__a{grid-column:3/-1}.sh__b{grid-column:1/-1}}
.si{position:relative;padding:clamp(14px,1.6vw,22px) var(--pad) 240px;overflow:hidden}
.si .sec__top{padding-inline:0;margin-bottom:clamp(50px,9vw,130px)}
@media (min-width:900px){.si{min-height:clamp(440px,36vw,600px);padding-bottom:clamp(60px,6vw,90px)}}
.si__p{position:relative;z-index:2;font-family:var(--f-display);font-weight:300;font-size:var(--h36);line-height:1.1;letter-spacing:-.02em;text-indent:clamp(40px,6.25vw,90px)}
@media (min-width:900px){.si__p{margin-left:41.66%;width:calc(58.34% - var(--pad))}}
.sr{position:relative;padding:clamp(20px,3vw,50px) 0 clamp(60px,9vw,140px)}
.sr__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:0 var(--pad);margin-bottom:clamp(20px,3vw,40px)}
.sr__top p{grid-column:1/-1;font-size:1.05rem;line-height:1.5;max-width:46ch}
@media (min-width:900px){.sr__top p{grid-column:5/11}}
.sr__stage{position:relative;padding:0 var(--pad);min-height:clamp(420px,52vw,760px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.sr__fig{grid-column:1/-1;position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--t-primary);margin:0 auto;width:min(100%,520px)}
.sr__fig img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}
.sr__w{position:absolute;font-family:var(--f-display);font-weight:300;font-size:var(--big);line-height:.94;letter-spacing:-.04em;pointer-events:none}
.sr__w--1{left:var(--pad);top:6%}.sr__w--2{right:var(--pad);bottom:8%;text-align:right}
.sr__list{position:absolute;right:var(--pad);top:14%;font-size:1rem;line-height:1.4;text-align:left}
@media (min-width:900px){.sr__fig{grid-column:4/9;aspect-ratio:3/4;width:auto}.sr__list{right:calc(var(--pad) + 8%);top:22%}}
.sl{border-top:1px solid var(--ink);margin:0 var(--pad);display:grid}
.sl__r{position:relative;display:grid;grid-template-columns:2.4em minmax(0,1fr);gap:6px var(--gap);align-items:start;padding:clamp(18px,2.4vw,34px) 0;border-bottom:1px solid var(--ink);transition:opacity .4s,color .4s}
.sl__n{font-family:var(--f-display);font-weight:300;font-size:var(--h36);line-height:1}
.sl__tt{font-family:var(--f-display);font-weight:300;font-size:var(--h36);line-height:1.04;letter-spacing:-.02em}
.sl__more{display:block;margin-top:10px;font-size:1rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.sl__d{grid-column:2/-1;font-size:1rem;line-height:1.45;max-width:46ch}
.sl__ic{display:none}
.sl__r a.sl__l::after{content:"";position:absolute;inset:0}
@media (min-width:900px){
  .sl:hover .sl__r:not(:hover){opacity:.4}
  .sl__ic{display:block;position:relative;overflow:hidden;width:0;opacity:0;transition:width .6s var(--ease-out),opacity .5s;height:clamp(110px,11vw,158px);background:transparent;--ic-bg:var(--paper,var(--t-bg));--ic-color:var(--t-primary)}
  .sl__ic .ic{position:absolute;inset:0;width:100%;height:100%;padding:12%;box-sizing:border-box}
  .sl__r:hover .sl__ic,.sl__r:focus-within .sl__ic{width:clamp(150px,14.6vw,210px);opacity:1}
}
.sl__body{grid-column:2/-1;display:grid;gap:8px}
@media (min-width:900px){
  .sl__r{grid-template-columns:3.6em minmax(0,1.3fr) minmax(0,1.2fr)}
  .sl__body{grid-column:2;display:grid;grid-template-columns:auto 1fr;gap:var(--gap);align-items:center}
  .sl__body .sl__ic{grid-column:1}.sl__body .sl__txt{grid-column:2}
  .sl__r > .sl__d{grid-column:3;grid-row:1}
}

/* ---- area detail ---- */
.ad{position:relative;padding:clamp(40px,6vw,90px) var(--pad) clamp(40px,6vw,100px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(18px,2vw,30px)}
.ad__h{grid-column:1/-1;font-family:var(--f-display);font-weight:300;font-size:var(--h36);line-height:1.06;letter-spacing:-.025em;max-width:22ch}
.ad__m{grid-column:1/-1;font-size:1.05rem;line-height:1.5;max-width:52ch}
.ad__car{grid-column:1/-1;position:relative;overflow:hidden;min-height:clamp(240px,40vw,606px);border-top:1px solid var(--ink)}
.ad__track{display:block;animation:adUp 40s linear infinite}
.ad__car:hover .ad__track{animation-play-state:paused}
.ad__chip{font-family:var(--f-display);font-weight:300;font-size:var(--h30);line-height:1.08;letter-spacing:-.02em;padding:clamp(14px,1.6vw,22px) 0;border-bottom:1px solid var(--ink)}
.ad__chip small{display:block;font-family:var(--f-label);font-weight:600;font-size:1rem;letter-spacing:.05em;opacity:.7;margin-bottom:4px}
@keyframes adUp{to{transform:translateY(-50%)}}
@media (min-width:900px){
  .ad{align-items:start;min-height:clamp(520px,42vw,606px);border-left:0}
  .ad__h{grid-column:3/8;grid-row:1;padding-top:clamp(60px,9vw,130px)}
  .ad__m{grid-column:5/9;grid-row:2}
  .ad__car{grid-column:9/-1;grid-row:1/4;align-self:stretch;border-top:0;border-left:1px solid var(--ink);padding-left:clamp(10px,1.4vw,22px);height:clamp(420px,42vw,606px);overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.ad__track{animation:none}}
.adn{padding:clamp(40px,6vw,100px) var(--pad);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.adn__v{grid-column:1/-1;font-family:var(--f-display);font-weight:300;font-size:clamp(8rem,26vw,25rem);line-height:.82;letter-spacing:-.06em;text-align:center}
.adn__c{grid-column:1/-1;max-width:34ch;margin:clamp(16px,2vw,30px) auto 0;text-align:center;font-size:1.05rem;line-height:1.45}
@media (min-width:900px){.adn__v{grid-column:4/11}.adn__c{grid-column:4/9;text-align:left;margin:0;padding-left:clamp(8px,1vw,16px);border-left:1px solid var(--ink)}}
.adf{padding:clamp(50px,7vw,120px) var(--pad)}
.adf > h2{font-family:var(--f-display);font-weight:300;font-size:var(--big);line-height:.94;letter-spacing:-.04em;text-align:center;margin:0 0 clamp(30px,5vw,80px)}
.adf > h2 span{display:block}
.adf__g{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3vw,40px)}
@media (min-width:700px){.adf__g{grid-template-columns:repeat(3,minmax(0,1fr))}}
.adf__btn{display:flex;justify-content:center;margin-top:clamp(30px,4vw,60px)}
.btn2{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:64px;padding:0 clamp(26px,3.2vw,46px);overflow:hidden;background:var(--ink);color:var(--paper);font-family:var(--f-label);font-size:1rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;isolation:isolate}
.btn2::before{content:"";position:absolute;inset:0;background:var(--c-white);transform:translateY(101%);transition:transform .5s var(--ease-out);z-index:-1}
.btn2:hover{color:var(--ink)}.btn2:hover::before{transform:none}
.btn2--line{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn2--line::before{background:var(--ink)}.btn2--line:hover{color:var(--paper)}
.alinks{padding:0 var(--pad) clamp(40px,5vw,80px);display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline}
.alinks a{font-size:1rem}

/* ---- news "projects" page */
.np{position:relative;padding:clamp(120px,10.3vw,148px) var(--pad) clamp(60px,8vw,140px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.np__t{grid-column:1/-1;font-family:var(--f-display);font-weight:300;font-size:var(--big);line-height:.94;letter-spacing:-.04em;margin-bottom:clamp(24px,3vw,50px);color:var(--ink)}
.np__t sup{font-size:.3em;vertical-align:top;letter-spacing:0;margin-left:.2em}
.np__f{grid-column:1/-1;margin-bottom:clamp(20px,3vw,40px)}
.np__f ul{display:flex;flex-wrap:wrap;gap:4px 22px}
.np__f button{font-family:var(--f-display);font-weight:300;font-size:var(--h30);line-height:1.1;letter-spacing:-.02em;opacity:.5;transition:opacity .3s;text-align:left}
.np__f button:hover,.np__f button[aria-pressed="true"]{opacity:1}
.np__g{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,60px) var(--gap);align-items:start}
.nc{position:relative;display:block}
.nc__img{position:relative;overflow:hidden;aspect-ratio:3/2;background:var(--img-bg)}
.nc__img img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}
.nc__btn{position:absolute;right:0;bottom:0;width:3.75rem;height:3.75rem;background:var(--c-white);border:1px solid var(--ink);display:grid;place-items:center;transform:scale(0);transform-origin:bottom right;transition:transform .5s var(--ease-out);color:var(--ink)}
.nc__btn svg{width:46%;height:46%}
.nc:hover .nc__btn,.nc:focus-within .nc__btn{transform:scale(1)}
.nc__t{margin:clamp(12px,1.4vw,20px) 0 0;font-family:var(--f-display);font-weight:300;font-size:clamp(1.5rem,2.5vw,2.4rem);line-height:.98;letter-spacing:-.025em}
.nc__k{display:flex;gap:14px;margin-top:8px;font-family:var(--f-label);font-weight:600;font-size:1rem;letter-spacing:.05em;text-transform:uppercase}
.nc a.nc__l::after{content:"";position:absolute;inset:0;z-index:2}
.nc.is-out{display:none}
@media (min-width:900px){
  .np__f{grid-column:1/3;position:sticky;top:clamp(80px,7vw,100px);align-self:start;grid-row:2/4}
  .np__f ul{display:grid;gap:2px}
  .np__g{grid-column:3/-1;grid-template-columns:repeat(8,minmax(0,1fr))}
  .np__g .nc{grid-column:span 4}
  .np__g .nc:nth-child(4n+1){grid-column:1/6}.np__g .nc:nth-child(4n+2){grid-column:6/9;margin-top:clamp(60px,9vw,130px)}
  .np__g .nc:nth-child(4n+3){grid-column:1/4;margin-top:clamp(0px,1vw,20px)}.np__g .nc:nth-child(4n+4){grid-column:4/9;margin-top:clamp(40px,6vw,90px)}
}
.np__more{grid-column:1/-1;margin-top:clamp(40px,5vw,80px)}

/* ---- contact */
.ch{padding:clamp(130px,17vw,240px) var(--pad) clamp(60px,8vw,120px);text-align:center;min-height:clamp(320px,35.5vw,512px);display:grid;align-content:center}
.ch h1{font-family:var(--f-display);font-weight:300;font-size:var(--big);line-height:.94;letter-spacing:-.04em;color:var(--t-light)}
.cs{position:relative;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--ink)}
.cs__top{grid-column:1/-1;display:flex;justify-content:space-between;padding:8px var(--pad) 0}
.cs__a{padding:clamp(20px,4vw,60px) var(--pad)}
.cs__a .h36{max-width:14ch}
.cs__a address{font-style:normal;margin-top:clamp(24px,4vw,60px);font-size:1.05rem;line-height:1.55}
.cs__a address p{margin:0 0 20px}
.cs__fig{position:relative;overflow:hidden;aspect-ratio:382/238;width:min(100%,382px);margin-top:clamp(20px,3vw,44px);background:var(--t-primary)}
.cs__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs__b{padding:clamp(20px,4vw,60px) var(--pad) clamp(60px,8vw,120px)}
.cs .tabs{display:flex;gap:clamp(14px,2vw,32px);margin-bottom:clamp(24px,4vw,60px)}
.cs .tabs button{font-family:var(--f-display);font-weight:300;font-size:var(--h36);line-height:1.1;letter-spacing:-.025em;opacity:.45;border-bottom:1px solid transparent;transition:opacity .3s}
.cs .tabs button[aria-selected="true"]{opacity:1;border-bottom-color:currentColor}
@media (min-width:900px){
  .cs{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .cs__a{border-right:1px solid var(--ink);padding-top:clamp(70px,10vw,150px)}
  .cs__b{padding-top:clamp(70px,10vw,150px);padding-left:clamp(30px,5vw,80px)}
}

/* ---- culture & careers (clienti) */
.cu1{padding:clamp(130px,14vw,200px) var(--pad) 0;display:flex;justify-content:center}
.cu1 h1{font-family:var(--f-display);font-weight:300;font-size:clamp(1.8rem,3.2vw,3.1rem);line-height:1.04;letter-spacing:-.03em;text-align:center;max-width:26ch;text-wrap:balance}
.cu2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:clamp(60px,7vw,100px) var(--pad) 0;row-gap:clamp(20px,3vw,40px)}
.cu2__h{grid-column:1/-1;font-family:var(--f-display);font-weight:300;font-size:clamp(4rem,11.1vw,10.4rem);line-height:.94;letter-spacing:-.04em}
.cu2__f{position:relative;overflow:hidden;background:var(--t-primary);grid-column:1/-1;aspect-ratio:3/2}
.cu2__f img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}
.cu2__p{grid-column:1/-1;font-size:var(--h30);line-height:1.1;font-family:var(--f-display);font-weight:300;letter-spacing:-.02em;max-width:26ch}
@media (min-width:900px){
  .cu2__f--a{grid-column:1/-1;aspect-ratio:3.2/1}
  .cu2__f--b{grid-column:9/-1;aspect-ratio:1.6/1}.cu2__f--c{grid-column:1/8;aspect-ratio:1.3/1}.cu2__f--d{grid-column:9/-1;aspect-ratio:1.7/1}
  .cu2__f--e{grid-column:1/-1;aspect-ratio:2/1;margin-top:clamp(40px,6.9vw,100px)}
  .cu2__p--a{grid-column:1/8}.cu2__p--b{grid-column:1/8}
}
.cu3{padding:clamp(60px,9vw,170px) var(--pad) 0;display:flex;justify-content:center}
.cu3 p{font-family:var(--f-display);font-weight:300;font-size:clamp(1.8rem,3.2vw,3.1rem);line-height:1.04;letter-spacing:-.03em;text-align:center;max-width:26ch;text-wrap:balance}
.cu4{padding:clamp(60px,7vw,100px) var(--pad) 0}
.cu4__h{font-family:var(--f-display);font-weight:300;font-size:clamp(4rem,11.1vw,10.4rem);line-height:.94;letter-spacing:-.04em;margin-bottom:clamp(20px,3vw,50px)}
.cu4__r{position:relative;display:grid;grid-template-columns:3em minmax(0,1fr) auto;gap:var(--gap);align-items:center;padding:clamp(24px,4vw,60px) 0 10px;border-bottom:1px solid var(--ink);transition:color .4s,padding .5s var(--ease-out)}
.cu4__r::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .55s var(--ease-out);z-index:-1}
.cu4__r{isolation:isolate;overflow:hidden}
.cu4__r:hover{color:var(--paper);padding-inline:14px}.cu4__r:hover::before{transform:none}
.cu4__r h3{font-family:var(--f-display);font-weight:300;font-size:var(--h36);line-height:1.04;letter-spacing:-.02em}
.cu4__a{font-size:1rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.cu4__r a.cu4__l::after{content:"";position:absolute;inset:0}
.cu4__btn{display:flex;justify-content:center;margin-top:clamp(30px,4vw,70px)}
.cu5{padding:clamp(60px,7vw,100px) var(--pad) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(18px,2.4vw,34px)}
.cu5__h{grid-column:1/-1;font-family:var(--f-display);font-weight:300;font-size:clamp(4rem,11.1vw,10.4rem);line-height:.94;letter-spacing:-.04em}
.cu5__f{position:relative;overflow:hidden;background:var(--t-primary);grid-column:1/-1;aspect-ratio:4/3}
.cu5__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cu5__l{grid-column:1/-1;display:grid}
.cu5__l p{padding:clamp(16px,2vw,30px) 0;border-bottom:1px solid var(--ink);font-size:1.1rem;line-height:1.5}
.cu5__l p:first-child{border-top:1px solid var(--ink)}
@media (min-width:900px){
  .cu5__f{grid-column:1/6;border-right:0;aspect-ratio:auto;min-height:clamp(260px,23.6vw,340px);align-self:start}
  .cu5__l{grid-column:7/-1}.cu5__l p{border-top:0}.cu5__l p:first-child{border-top:0}
}

.cta2{padding:clamp(60px,8vw,130px) var(--pad) clamp(60px,8vw,120px);display:flex;flex-direction:column;align-items:center;border-top:1px solid var(--ink)}
.cta2 h2{font-family:var(--f-display);font-weight:300;font-size:clamp(1.8rem,3.2vw,3.1rem);line-height:1.04;letter-spacing:-.03em;text-align:center;max-width:22ch;text-wrap:balance}
.cta2 .btn2{margin-top:clamp(24px,3.5vw,50px)}

/* ---- article: related area box */
.relarea{margin-top:2.2em;padding:1.2em 1.4em;border:1px solid var(--ink);display:grid;gap:.4em}
.relarea p{margin:0}.relarea .label{opacity:.7}
.relarea a:not(.link){font-family:var(--f-display);font-weight:300;font-size:1.4rem;line-height:1.1;border-bottom:0}
@media (max-width:899px){.ad__list[aria-hidden="true"]{display:none}.ad__track{animation:none}.ad__car{min-height:0}}

/* ---- footer (OCI layout: big mark left, ruled link columns right) */
.ftr__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.ftr__mark{grid-column:1/-1;display:flex;justify-content:center;align-items:center}
.ftr__mark svg{width:min(78%,360px);height:auto;overflow:visible}
.ftr__mark .fm1{fill:var(--c-maroon)}.ftr__mark .fm2{fill:var(--c-navy)}.ftr__mark .fm3{fill:var(--c-gold)}.ftr__mark .fm4{fill:var(--c-orange)}
.ftr__hr{grid-column:1/-1;margin:clamp(30px,8vw,50px) 0 0;border:0;border-top:1px solid var(--ink)}
.ftr__nav{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(24px,6vw,30px);margin-top:clamp(30px,8vw,50px)}
.ftr__list a,.ftr__cl,.ftr__box,.ftr__pec,.ftr__copy,.ftr__tag{font-family:var(--f-label);font-size:1rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;line-height:1.35}
.ftr__list li{padding:1px 0;overflow:hidden}
.ftr__list a{display:inline-block;transition:color .3s}
.ftr__list a:hover{color:var(--t-accent)}
.ftr__tag{opacity:.7;margin-top:clamp(14px,1.4vw,20px)}
.ftr__cb{grid-column:1/-1}
.ftr__cl{display:flex;flex-wrap:wrap;gap:4px 12px}
.ftr__cl .link{text-transform:none;letter-spacing:.02em}
.ftr__box{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding:12px 16px;border:1px solid var(--ink);transition:background .35s var(--ease-out),color .35s}
.ftr__box svg{width:22px;height:12px}
.ftr__box:hover{background:var(--ink);color:var(--paper)}
.ftr__pec{margin-top:10px;text-transform:none;letter-spacing:.02em;font-weight:500}
.ftr__copy{grid-column:1/-1;margin-top:clamp(28px,7vw,40px);opacity:.8}
.ftr__copy p{margin:0}.ftr__copy address{font-style:normal;margin-top:4px;text-transform:none;letter-spacing:.02em;font-weight:500}
@media (max-width:899px){.ftr__list--c,.ftr__list--s,.ftr__cb,.ftr__list--l{}.ftr__cb{grid-column:1/-1;order:5}.ftr__list--l{order:4}.ftr__list--s{order:3}}
@media (min-width:900px){
  .ftr__grid{grid-template-rows:clamp(220px,19.8vw,285px) auto clamp(140px,12.8vw,185px)}
  .ftr__mark{grid-column:1/7;grid-row:1/4;align-self:stretch}
  .ftr__mark svg{width:min(70%,clamp(320px,31vw,520px))}
  .ftr__hr{display:none}
  .ftr__nav{display:contents}
  .ftr__list{border-left:1px solid var(--ink);padding-left:12px}
  .ftr__list--a{grid-column:7/10;grid-row:1;padding-top:15px}
  .ftr__list--b{grid-column:10/13;grid-row:1;padding-top:15px}
  .ftr__list--c{grid-column:7/10;grid-row:2;border-left:0;margin-top:clamp(18px,2.2vw,32px)}
  .ftr__cb{grid-column:10/13;grid-row:2;margin:clamp(18px,2.2vw,32px) 0 clamp(18px,2.4vw,34px) 12px}
  .ftr__list--s{grid-column:7/10;grid-row:3;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end}
  .ftr__list--l{grid-column:10/13;grid-row:3;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end}
  .ftr__copy{grid-column:1/7;grid-row:3;align-self:end;margin-top:0}
}

.page__hero--photo,.page__hero--photo .label{color:#fff}

/* ---- areas list: "Scopri l'area" becomes a solid button on hover (OCI careers-link style) */
.sl__btn{display:none}
@media (min-width:900px){
  .sl__r{grid-template-columns:3.6em minmax(0,1.3fr) minmax(0,1.2fr) 26%}
  .sl__more{display:none}
  .sl__btn{display:grid;place-items:center;position:absolute;right:0;top:clamp(10px,1.2vw,18px);bottom:clamp(10px,1.2vw,18px);width:26%;background:var(--ink);color:var(--c-white);clip-path:inset(0 0 0 100%);transition:clip-path .6s var(--ease-out);pointer-events:none}
  .sl__r:hover .sl__btn,.sl__r:focus-within .sl__btn{clip-path:inset(0 0 0 0)}
  .sl__bl{font-family:var(--f-label);font-weight:600;font-size:clamp(1.1rem,1.7vw,1.7rem);letter-spacing:.02em;text-transform:uppercase}
  .sl__ba{position:absolute;top:0;right:0;width:clamp(48px,4.2vw,60px);aspect-ratio:1/1;background:var(--paper);color:var(--ink);display:grid;place-items:center;border:1px solid var(--ink)}
  .sl__ba svg{width:46%;height:46%;transition:transform .5s var(--ease-out)}
  .sl__r:hover .sl__ba svg{transform:translate(3px,-3px)}
  .sl__d{padding-right:clamp(10px,1.4vw,20px)}
}

.ftr__mark .fm1{fill:#4f0101}.ftr__mark .fm2{fill:#142841}.ftr__mark .fm3{fill:#a49b32}.ftr__mark .fm4{fill:#bf5114}

/* =====================================================================
   THEMES — two palettes, chosen from the header and kept in the gr_theme cookie
   mattone: primary maroon · background sand · accent gold
   blu:     primary navy   · background very light grey · accent orange
   ===================================================================== */
:root{--t-primary:#4f0101;--t-bg:#e7d6c2;--t-accent:#a49b32;--t-light:#f4ebdd;--t-duo-hi:#f2e8d9}
html[data-theme="blu"]{--t-primary:#142841;--t-bg:#f3f4f6;--t-accent:#bf5114;--t-light:#f3f4f6;--t-duo-hi:#eef0f4}
html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{transition:background-color .5s,color .5s,border-color .5s,fill .5s,stroke .5s!important}
.th-white,.th-white-navy,.th-sand,.th-sand-navy{--ink:var(--t-primary);--paper:var(--t-bg);--img-bg:var(--t-primary);background:var(--paper);color:var(--ink)}
.th-navy,.th-maroon{--ink:var(--t-light);--paper:var(--t-primary);--img-bg:var(--t-primary);background:var(--paper);color:var(--ink)}
/* header: theme button next to the menu; menu square colours follow the section underneath (data-bg = dark | light) */
.hdr__right{gap:6px}
.hdr__theme{display:grid;place-items:center;width:60px;height:60px;background:var(--c-white);color:var(--t-primary);transition:background .4s,color .4s}
.hdr__theme svg{width:26px;height:26px;transition:transform .7s var(--ease-out)}
.hdr__theme:hover{background:var(--t-accent);color:#fff}
.hdr__theme:hover svg{transform:rotate(180deg)}
html[data-theme="blu"] .hdr__theme svg{transform:rotate(180deg)}
html[data-theme="blu"] .hdr__theme:hover svg{transform:rotate(360deg)}
.hdr__menu[data-bg] .hdr__menu-icon{background:var(--t-primary)}
.hdr__menu[data-bg="dark"] .hdr__menu-icon{background:#fff}
.hdr__menu[data-bg="dark"] .hdr__menu-icon i{background:var(--t-primary)}
.hdr__menu[data-bg]:hover .hdr__menu-icon{background:var(--t-accent)}
.hdr__menu[data-bg]:hover .hdr__menu-icon i{background:#fff}
@media (max-width:560px){.hdr__theme{width:48px;height:48px}.hdr__menu{height:48px}.hdr__menu-icon{width:48px}.hdr__menu-icon i{left:14px;right:14px}.hdr__menu-icon i:nth-child(1){top:18px}.hdr__menu-icon i:nth-child(2){top:28px}.hdr__menu-label{display:none}.hdr__right{gap:4px}}

/* ---- photo duotone follows the theme: grayscale photo × highlight colour, then "lighten" with the primary colour */
.oh__bg,.sh__bg,.ph__bg,.page__bg,.mission__bg,.cta__bg,.approach__fig,.om__i figure,.sr__fig,.nc__img,.cu2__f,.cu5__f,.cs__map,.news__feature,.dim__fig,.clients__fig,.tl__i figure,.hero__media,.pf__ph,.sl__ph{position:absolute;isolation:isolate;background:var(--t-duo-hi)}
.approach__fig,.om__i figure,.sr__fig,.nc__img,.cu2__f,.cu5__f,.news__feature,.dim__fig,.clients__fig,.tl__i figure,.cs__map,.pf__ph,.sl__ph{position:relative}
.oh__bg,.sh__bg,.ph__bg,.page__bg,.mission__bg,.cta__bg,.hero__media{position:absolute}
.oh__bg img,.sh__bg img,.ph__bg img,.page__bg img,.mission__bg img,.cta__bg img,.approach__fig img,.om__i figure img,.sr__fig img,.nc__img img,.cu2__f img,.cu5__f img,.news__feature img,.dim__fig img,.clients__fig img,.tl__i figure img,.hero__media img,.hero__canvas,.pf__ph img,.sl__ph img{filter:grayscale(1) contrast(1.08) brightness(1.04);mix-blend-mode:multiply}
.oh__bg::after,.sh__bg::after,.ph__bg::after,.page__bg::after,.mission__bg::after,.cta__bg::after,.approach__fig::after,.om__i figure::after,.sr__fig::after,.nc__img::after,.cu2__f::after,.cu5__f::after,.news__feature::after,.dim__fig::after,.clients__fig::after,.tl__i figure::after,.hero__media::after,.pf__ph::after,.sl__ph::after,.cs__map::after{content:"";position:absolute;inset:0;background:var(--t-primary);mix-blend-mode:lighten;pointer-events:none;z-index:2}
/* readability veil on hero-like photos (white text sits on them) */
.oh__bg::before,.sh__bg::before,.ph__bg::before,.page__bg::before,.mission__bg::before,.cta__bg::before,.hero__media::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to bottom,color-mix(in srgb,var(--t-primary) 38%,transparent),transparent 38%,color-mix(in srgb,var(--t-primary) 52%,transparent))}
.hero__shade{z-index:4}
.cs__map{overflow:hidden}

.js .hero__media .hero__img{opacity:0;mix-blend-mode:normal;filter:none}
/* page wipe covers the screen from the very first paint when arriving from another page of the site */
html.wipe-in .wipe{visibility:visible;transform:none}

/* ---- hero titles of detail pages are longer: smaller type */
.sh--area{--big:clamp(2.6rem,7.2vw,7.4rem)}
.page__title{line-height:normal}

/* ---- process cards (method) bigger */
@media (min-width:900px){
  .pcard{width:min(90%,540px);padding:22px 22px 0;min-height:230px}
  .pcard__title{font-size:clamp(1.9rem,2.7vw,2.9rem)}
  .pcard__text{font-size:clamp(1.05rem,1.25vw,1.25rem);line-height:1.5;padding:16px 0 22px}
  .pcard:nth-child(1){top:1%;left:8%}.pcard:nth-child(2){top:17%;left:0}.pcard:nth-child(3){top:33%;left:10%}
  .pcard:nth-child(4){top:49%;left:1%}.pcard:nth-child(5){top:65%;left:9%}.pcard:nth-child(6){top:81%;left:2%}
}

/* ---- contact: full-width map, duotone with the theme */
.cmap{position:relative}
.cs__map{display:block;width:100%;height:clamp(380px,48vw,680px)}
.cs__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05);mix-blend-mode:multiply}
.cmap__a{position:absolute;left:var(--pad);bottom:var(--pad);z-index:5;background:var(--t-bg);color:var(--t-primary);padding:clamp(14px,1.6vw,24px);display:grid;gap:8px;font-style:normal;max-width:min(92%,360px)}
.cmap__a .label{opacity:.7}

/* ---- goals carousel (OCI testimonials style) */
.tm__wrap{position:relative;padding:0 var(--pad) clamp(40px,6vw,90px);min-height:clamp(480px,46vw,640px)}
.tm__i{display:none;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.tm__i.is-active{display:grid;animation:tmIn .8s var(--ease-out)}
@keyframes tmIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tm__t{grid-column:1/-1;font-family:var(--f-display);font-weight:300;font-size:clamp(2rem,4.4vw,4.2rem);line-height:1;letter-spacing:-.03em;margin:0 0 clamp(18px,3vw,36px)}
.tm__x{grid-column:1/-1}
.tm__q{font-family:var(--f-display);font-weight:300;font-size:clamp(1.5rem,3.4vw,3.5rem);line-height:1.02;letter-spacing:-.03em;max-width:24ch}
.tm__m{display:flex;gap:clamp(30px,6vw,120px);margin-top:clamp(30px,6vw,110px)}
.tm__m b{font-weight:600}
.tm__nav{display:flex;gap:14px;margin-top:clamp(30px,5vw,50px)}
.tm__b{width:64px;height:64px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;background:var(--paper);color:var(--ink);transition:background .35s,color .35s}
.tm__b svg{width:22px;height:22px}
.tm__b:hover,.tm__b:focus-visible{background:var(--ink);color:var(--paper)}
@media (min-width:900px){
  .tm__wrap::before{content:"";position:absolute;left:calc(var(--pad) + (100% - var(--pad)*2)*.1667);top:0;bottom:0;border-left:1px solid var(--ink)}
  .tm__t{grid-column:1/5;text-align:center;align-self:start;margin:clamp(70px,9vw,140px) 0 0;position:relative;background:var(--paper);padding:14px 10px;z-index:1}
  .tm__x{grid-column:6/-1;padding-top:clamp(70px,9vw,130px)}
  .tm__nav{position:absolute;left:calc(var(--pad) + (100% - var(--pad)*2)*.1667);transform:translateX(-50%);bottom:clamp(20px,3vw,50px);flex-direction:column;margin:0;background:var(--paper);padding:14px 0;z-index:2}
  .tm__b{width:80px;height:80px}
}

/* ---- article: wide body + sticky sidebar (TOC, areas, share, more news) */
.art{padding:clamp(30px,4vw,70px) var(--pad) clamp(50px,7vw,120px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,5vw,70px)}
.art__body{font-size:clamp(1.05rem,1.2vw,1.2rem);line-height:1.75;min-width:0}
.art__body h2{font-family:var(--f-display);font-weight:300;font-size:clamp(1.8rem,2.8vw,2.9rem);line-height:1.08;letter-spacing:-.025em;margin:2em 0 .55em;scroll-margin-top:110px}
.art__body h2:first-child{margin-top:0}
.art__body h3{font-family:var(--f-display);font-weight:300;font-size:clamp(1.4rem,2vw,2rem);margin:1.8em 0 .5em}
.art__body p,.art__body ul,.art__body ol{margin:0 0 1.15em}
.art__body ul{list-style:square;padding-left:1.3em}.art__body ol{list-style:decimal;padding-left:1.5em}
.art__body li{margin-bottom:.35em}
.art__body a{border-bottom:1px solid currentColor}
.art__body blockquote{border-left:2px solid var(--ink);padding-left:1em;font-family:var(--f-display);font-weight:300;font-size:1.6rem;line-height:1.2;margin:1.4em 0}
.art__side{display:grid;gap:clamp(22px,2.4vw,34px);align-content:start}
.side__b{border-top:1px solid var(--ink);padding-top:14px}
.side__h{opacity:.7;margin:0 0 12px}
.side__b ul,.side__b ol{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.side__toc{counter-reset:t}
.side__toc li{counter-increment:t;display:grid;grid-template-columns:2em 1fr;gap:8px;line-height:1.35}
.side__toc li::before{content:counter(t,decimal-leading-zero);font-weight:600;opacity:.7}
.side__toc a,.side__more a,.side__areas a,.side__share a{transition:color .3s}
.side__toc a:hover,.side__more a:hover,.side__areas a:hover,.side__share a:hover{color:var(--t-accent)}
.side__areas a{display:grid;grid-template-columns:2em 1fr;gap:8px;font-family:var(--f-display);font-weight:300;font-size:1.25rem;line-height:1.12}
.side__areas .label{opacity:.7;font-family:var(--f-label)}
.side__share{display:flex!important;flex-wrap:wrap;gap:8px!important}
.side__share a{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid var(--ink);font-family:var(--f-label);font-weight:600;font-size:1rem;letter-spacing:.04em;transition:background .3s,color .3s}
.side__share a:hover{background:var(--ink);color:var(--paper)}
.side__more a{display:grid;gap:2px;line-height:1.2}
.side__more time{opacity:.7}
@media (min-width:1000px){
  .art{grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,110px)}
  .art__side{position:sticky;top:calc(var(--pad)*5);align-self:start;max-height:calc(100svh - var(--pad)*6);overflow:auto;scrollbar-width:thin}
}

.js .hero__media .hero__img{transition:opacity .5s}
.js .hero__media.is-done .hero__img{opacity:1;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.08) brightness(1.04)}

.clients[hidden]{display:none!important}

/* h1 inside <header>: line-height 1 */
header h1,header h1 span,.sh__a,.sh__b,.ch h1,.ph__title,.page__title{line-height:1}

/* ---- /prospettive/: the home "dims" cards in two staggered columns, each card links to its page */
.dim__l::after{content:"";position:absolute;inset:0;z-index:3}
.dim__title a{transition:color .3s}
.dim:hover .dim__title a{color:var(--t-accent)}
@media (min-width:900px){
  .dims--two .dims__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dims--two .dim:nth-child(n){margin-top:0}
  .dims--two .dim:nth-child(even){margin-top:clamp(80px,12vw,200px)}
  .dims--two .dim__title{font-size:clamp(1.9rem,3vw,3.2rem)}
  .dims--two .dim__text{max-width:44ch}
}
.dim__more{position:relative;z-index:4;align-self:flex-start;margin-top:auto;padding-top:14px}
.sl--nb .sl__r:last-child{border-bottom:0}
/* square boxes with generous inner padding (prospettive: competenze coinvolte) */
.boxes--sq .box{aspect-ratio:1/1;min-height:0;padding:clamp(22px,3vw,52px)}
@media (max-width:640px){.boxes--sq{grid-template-columns:minmax(0,1fr)}}
section[aria-label="Numeri"]{margin-bottom:clamp(40px,6vw,100px)}
/* goals carousel: the arrows live in their own band under the title, so long titles never overlap them */
@media (min-width:900px){
  .tm__wrap{padding-bottom:clamp(250px,18vw,290px)}
  .tm__nav{bottom:clamp(14px,1.6vw,26px)}
  .tm__t{font-size:clamp(2rem,3.5vw,3.7rem)}
}
/* hover on the orange accent (blue theme): white label and arrow */
html[data-theme="blu"] .btn:hover,html[data-theme="blu"] .btn:focus-visible,
html[data-theme="blu"] .btn:hover .btn__label,html[data-theme="blu"] .btn:focus-visible .btn__label{color:#fff}
/* news cards: on hover the duotone photo darkens toward the primary colour */
.nc__img::before{content:"";position:absolute;inset:0;z-index:3;background:var(--t-primary);mix-blend-mode:multiply;opacity:0;transition:opacity .6s var(--ease-out);pointer-events:none}
.nc__img img{transition:filter .6s var(--ease-out)}
.nc:hover .nc__img::before,.nc:focus-within .nc__img::before{opacity:.55}
.nc:hover .nc__img img,.nc:focus-within .nc__img img{filter:grayscale(1) contrast(1.2) brightness(.8)}
/* approach pillars: square cells with generous inner padding */
.approach__pillars li,.approach__pillars li:nth-child(odd),.approach__pillars li:nth-child(even){aspect-ratio:1/1;padding:clamp(16px,2.2vw,32px);display:flex;flex-direction:column;justify-content:space-between}
.approach__pillars li:nth-child(even){border-left:0}
.approach__pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
.approach__pillars li{padding:clamp(14px,1.6vw,28px);overflow:hidden}
.approach__pillars b{font-size:clamp(1.1rem,1.4vw,1.5rem)}
@media (max-width:640px){.approach__pillars{grid-template-columns:minmax(0,1fr)}}
/* approach: the photo follows the scroll next to the (taller) text + pillars column */
@media (min-width:900px){
  .approach__fig{position:sticky;top:calc(var(--pad)*5.5);align-self:start}
}
/* "Approfondimenti" title must fit narrow screens */
.adf > h2{font-size:clamp(2.1rem,9.2vw,10.4rem);overflow-wrap:anywhere}
/* narrow screens: big headings and news grid */
.cu2__h,.cu4__h,.cu5__h{font-size:clamp(2.6rem,11.1vw,10.4rem);overflow-wrap:anywhere}
.nc__t{overflow-wrap:anywhere}
@media (max-width:639px){.np__g{grid-template-columns:minmax(0,1fr)}}
.news__grid,.news__list{min-width:0}.news__grid > *{min-width:0;max-width:100%}.ncard__title{overflow-wrap:anywhere}
.sl__tt,.si__p,.sr__top p{overflow-wrap:anywhere}
.sr__stage,.sl{min-width:0;max-width:100%}
.sr__w{font-size:clamp(2.4rem,11.1vw,10.4rem)}

@media (max-width:899px){
  .js .dim{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
  .js .dim.is-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.js .dim{opacity:1;transform:none;transition:none}}