/* ==========================================================================
   Rebrand — design system
   Palette (exact): Transparent Yellow, Sceptre Red, Cerulean Blue, Potting Soil, Java Brown
   ========================================================================== */
:root{
  --yellow:#F5EFC6;      /* Transparent Yellow — signature surface */
  --red:#4D0E12;         /* Sceptre Red — accent, CTAs, statement sections */
  --blue:#A5BCD6;        /* Cerulean Blue — visual breaks, project colour */
  --soil:#4A2E27;        /* Potting Soil — secondary type, borders */
  --java:#231815;        /* Java Brown — primary type */
  --cream:#FBF8E4;       /* softer tint of Transparent Yellow */
  --white:#FFFDF6;       /* warm white surface */

  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif","Iowan Old Style","Times New Roman",serif;

  --gutter:clamp(1.25rem,4vw,3rem);
  --max:1360px;
  --section:clamp(4.5rem,10vw,9rem);
  --header-h:4.75rem;

  /* motion */
  --ease:cubic-bezier(.22,.7,.18,1);
  --ease-soft:cubic-bezier(.4,.1,.2,1);
  --t-micro:.2s; --t-link:.3s; --t-image:.6s; --t-reveal:.7s;
}

/* Surface themes: each sets its own foreground, button and focus colours */
.bg-yellow{--bg:var(--yellow);--fg:var(--java);--soft:var(--soil);--line:rgba(74,46,39,.28);--btn-bg:var(--java);--btn-fg:var(--yellow);--btn-hover:var(--red);--focus:var(--red)}
.bg-cream{--bg:var(--cream);--fg:var(--java);--soft:var(--soil);--line:rgba(74,46,39,.26);--btn-bg:var(--java);--btn-fg:var(--yellow);--btn-hover:var(--red);--focus:var(--red)}
.bg-white{--bg:var(--white);--fg:var(--java);--soft:var(--soil);--line:rgba(74,46,39,.22);--btn-bg:var(--java);--btn-fg:var(--yellow);--btn-hover:var(--red);--focus:var(--red)}
.bg-blue{--bg:var(--blue);--fg:var(--java);--soft:var(--soil);--line:rgba(35,24,21,.3);--btn-bg:var(--red);--btn-fg:var(--yellow);--btn-hover:var(--java);--focus:var(--red)}
.bg-red{--bg:var(--red);--fg:var(--yellow);--soft:rgba(245,239,198,.8);--line:rgba(245,239,198,.28);--btn-bg:var(--yellow);--btn-fg:var(--java);--btn-hover:var(--blue);--focus:var(--yellow)}
.bg-java{--bg:var(--java);--fg:var(--yellow);--soft:rgba(245,239,198,.78);--line:rgba(245,239,198,.24);--btn-bg:var(--yellow);--btn-fg:var(--java);--btn-hover:var(--blue);--focus:var(--yellow)}
.bg-yellow,.bg-cream,.bg-white,.bg-blue,.bg-red,.bg-java{background:var(--bg);color:var(--fg)}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{margin:0;background:var(--yellow);color:var(--java);font-family:var(--body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus,var(--red));outline-offset:3px;border-radius:1px}
::selection{background:var(--red);color:var(--yellow)}
.skip{position:absolute;left:var(--gutter);top:-4rem;background:var(--java);color:var(--yellow);padding:.75rem 1rem;z-index:100;transition:top var(--t-micro)}
.skip:focus{top:.75rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}

/* ---------- type ---------- */
.display,h1,h2{font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1.02;text-wrap:balance;font-variation-settings:"opsz" 72}
h1{font-size:clamp(2.9rem,7.6vw,7.25rem);letter-spacing:-.04em;line-height:.98}
h2{font-size:clamp(2rem,4.6vw,4.1rem)}
h3{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.15;font-size:clamp(1.3rem,2vw,1.7rem)}
.lede{font-family:var(--serif);font-size:clamp(1.55rem,2.8vw,2.45rem);line-height:1.22;letter-spacing:-.005em;text-wrap:pretty;max-width:34ch}
.prose{max-width:60ch;color:var(--soft)}
.prose p+p{margin-top:1.1em}
.small{font-size:.9rem;color:var(--soft)}
.meta{font-family:var(--serif);font-size:1.2rem;color:var(--soft);line-height:1.3}

/* ---------- arrows, links, buttons ---------- */
.arr{width:1.05em;height:1.05em;flex:none;transition:transform var(--t-link) var(--ease)}
.link{display:inline-flex;align-items:center;gap:.6rem;font-weight:500;position:relative;padding-bottom:.2rem}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform var(--t-link) var(--ease)}
.link:hover::after{transform:scaleX(.0001)}
.link:hover .arr{transform:translateX(5px)}

.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.8rem;
  padding:1rem 1.6rem;background:var(--btn-bg,var(--java));color:var(--btn-fg,var(--yellow));
  font-weight:500;font-size:.98rem;letter-spacing:.005em;border:0;cursor:pointer;border-radius:0;
  transition:transform var(--t-link) var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-hover,var(--red));transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .arr{transform:translateX(5px)}
.btn[disabled]{opacity:.6;cursor:progress}
.btn--ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px currentColor}
.btn--ghost::before{background:var(--fg)}
.btn--ghost:hover{color:var(--bg)}

/* ---------- header ---------- */
#top-bar{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);background:transparent;color:var(--java);
  transition:background-color var(--t-link) var(--ease-soft),box-shadow var(--t-link) var(--ease-soft);view-transition-name:site-header}
#top-bar.scrolled{background:var(--yellow);box-shadow:0 1px 0 rgba(74,46,39,.22)}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.logo{display:inline-flex;line-height:0;position:relative;z-index:61}
.logo img{height:2.9rem;width:auto}
#menu{display:flex;align-items:center;gap:clamp(1.4rem,3vw,2.6rem)}
#menu a:not(.btn){position:relative;font-weight:500;font-size:.98rem;padding:.4rem 0;transition:color var(--t-link) var(--ease-soft)}
#menu a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:.1rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t-link) var(--ease)}
#menu a:not(.btn):hover{color:var(--red)}
#menu a:not(.btn):hover::after,#menu a[aria-current="page"]::after{transform:scaleX(1)}
#menu a[aria-current="page"]{color:var(--red)}
#menu .btn{--btn-bg:var(--red);--btn-fg:var(--yellow);--btn-hover:var(--java);padding:.7rem 1.25rem}
.menu-btn{display:none}

@media (max-width:860px){
  :root{--header-h:4.25rem}
  .logo img{height:2.4rem}
  .menu-btn{display:inline-flex;position:relative;z-index:61;background:none;border:0;padding:.6rem 0;font-weight:500;cursor:pointer;color:var(--java)}
  #menu{position:fixed;inset:0;z-index:60;flex-direction:column;align-items:flex-start;justify-content:center;gap:.4rem;
    padding:var(--header-h) var(--gutter) 3rem;background:var(--yellow);
    clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .6s var(--ease),visibility 0s linear .6s}
  #menu.open{clip-path:inset(0);visibility:visible;transition:clip-path .6s var(--ease),visibility 0s}
  #menu li{overflow:hidden}
  #menu a:not(.btn){font-family:var(--display);font-size:clamp(2.2rem,10vw,3.4rem);letter-spacing:-.03em;font-weight:500;display:inline-block;transform:translateY(110%);transition:transform .7s var(--ease),color var(--t-link)}
  #menu.open a:not(.btn){transform:none}
  #menu.open li:nth-child(2) a{transition-delay:.05s}#menu.open li:nth-child(3) a{transition-delay:.1s}#menu.open li:nth-child(4) a{transition-delay:.15s}#menu.open li:nth-child(5) a{transition-delay:.2s}
  #menu li:last-child{margin-top:1.6rem}
  #menu .btn{padding:1rem 1.6rem}
}

/* ---------- reveals (progressive: content is visible without JS) ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease);transition-delay:calc(var(--d,0)*80ms)}
.js .reveal.in{opacity:1;transform:none}

.mask{position:relative;overflow:hidden;background:rgba(74,46,39,.08);aspect-ratio:var(--ar,4/5)}
.mask>a,.mask>img,.mask>picture{display:block;width:100%;height:100%}
.mask img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:clip-path .95s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0)*80ms),0s}
.js .mask img{clip-path:inset(0 0 100% 0);transform:scale(1.08)}
.js .mask.in img{clip-path:inset(0);transform:scale(1)}
.js .mask.in:hover img,.js .mask.in a:focus-visible img{transform:scale(1.035);transition-delay:0s;transition-duration:.95s,var(--t-image)}
.mask:not(.in):hover img{transform:none}
html:not(.js) .mask:hover img{transform:scale(1.035)}

/* ---------- hero (home) ---------- */
.hero{padding-top:calc(var(--header-h) + clamp(2.5rem,7vw,6rem));padding-bottom:clamp(2rem,4vw,3.5rem)}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);gap:2.5rem 4rem;align-items:end}
.hero h1{max-width:none;font-size:clamp(2.25rem,7vw,6.4rem)}
.line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.line>span{display:block;animation:rise .95s var(--ease) both;animation-delay:calc(.12s + var(--i,0)*.11s)}
@keyframes rise{from{transform:translateY(108%)}to{transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-side{display:grid;gap:1.8rem;justify-items:start;animation:fadeup .8s var(--ease) .55s both}
.hero-side p{font-size:1.15rem;color:var(--soft);max-width:30ch}
.hero-media{position:relative;margin-top:clamp(2.5rem,5vw,4.5rem)}
.hero-media .frame{position:relative;overflow:hidden;aspect-ratio:21/9;background:rgba(74,46,39,.1);animation:unmask 1.2s var(--ease) .35s both}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;animation:settle 1.6s var(--ease) .35s both}
@keyframes unmask{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes settle{from{transform:scale(1.1)}to{transform:none}}
.hero-foot{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;font-size:.9rem;color:var(--soft)}
.scroll-cue{display:inline-flex;align-items:center;gap:.8rem}
.scroll-cue::after{content:"";width:3.5rem;height:1px;background:currentColor;transform-origin:left;animation:grow 1.2s var(--ease) 1.4s both}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
@media (max-width:860px){
  .hero-top{grid-template-columns:1fr}
  .hero .hero-media .frame{aspect-ratio:4/5}
  .hero-media img{object-position:50% 50%}
  .scroll-cue{display:none}
}

/* ---------- statement ---------- */
.statement{padding-block:var(--section) calc(var(--section)*.6)}
.statement .wrap{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:2rem 4rem;align-items:end}
.statement .lede{max-width:28ch;font-size:clamp(1.9rem,4vw,3.4rem)}
@media (max-width:860px){.statement .wrap{grid-template-columns:1fr}}

/* ---------- project features (home) ---------- */
.feature{padding-block:var(--section);overflow:hidden}
.feature .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem);row-gap:2.5rem;align-items:start}
.proj-head{display:grid;gap:.7rem;align-content:start}
.proj-head .idx{font-family:var(--serif);font-size:1.2rem;color:var(--soft)}
.proj-head h2 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 .06em no-repeat;transition:background-size .5s var(--ease)}
.proj-head h2 a:hover{background-size:100% .06em}
.proj-head .link{margin-top:1.2rem;justify-self:start}
/* The Pad */
.f-pad .proj-head{grid-column:8/-1;grid-row:1;padding-top:1rem}
.f-pad .m1{grid-column:1/7;grid-row:1/3}
.f-pad .m2{grid-column:9/12;grid-row:2;margin-top:clamp(0rem,4vw,3rem)}
/* Meette */
.f-meette .proj-head{grid-column:1/6;grid-row:1;padding-top:1rem}
.f-meette .m1{grid-column:6/-1;grid-row:1/3}
.f-meette .m2{grid-column:2/5;grid-row:2;align-self:end}
/* Better Diamonds */
.f-bd .proj-head{grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:2rem}
.f-bd .proj-head .idx{grid-column:1/-1}
.f-bd .proj-head .link{margin:0;grid-column:2;grid-row:2}
.f-bd .m1{grid-column:1/5}
.f-bd .m2{grid-column:5/9;margin-top:clamp(2rem,8vw,7rem)}
.f-bd .m3{grid-column:9/-1;margin-top:clamp(1rem,4vw,3.5rem)}
@media (max-width:860px){
  .feature .wrap{row-gap:1.4rem}
  .f-pad .proj-head,.f-meette .proj-head{grid-column:1/-1;grid-row:auto;order:-1;padding:0}
  .f-pad .m1,.f-meette .m1{grid-column:1/-1;grid-row:auto}
  .f-pad .m2{grid-column:5/-1;grid-row:auto;margin-top:0}
  .f-meette .m2{grid-column:1/8;grid-row:auto}
  .f-bd .proj-head{grid-template-columns:1fr}
  .f-bd .proj-head .link{grid-column:1;grid-row:auto;margin-top:1rem}
  .f-bd .m1{grid-column:1/8}.f-bd .m2{grid-column:6/-1;margin-top:0}.f-bd .m3{grid-column:1/8;margin-top:0}
}

/* ---------- clients ---------- */
.clients h2{max-width:14ch}
.client-list{display:flex;flex-wrap:wrap;gap:.15em clamp(1.2rem,3vw,2.8rem);margin-top:clamp(2.5rem,6vw,5rem);font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1.12;font-size:clamp(2rem,5.2vw,4.6rem)}
.client-list li{transition:color var(--t-link) var(--ease-soft)}
.client-list li:hover{color:var(--blue)}

/* ---------- frames (masonry columns) ---------- */
.frames-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:clamp(2rem,5vw,4rem)}
.masonry{columns:3;column-gap:clamp(.8rem,2vw,1.6rem)}
.masonry .mask{break-inside:avoid;margin-bottom:clamp(.8rem,2vw,1.6rem)}
@media (max-width:700px){.masonry{columns:2}}

/* ---------- list rows (services) ---------- */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;gap:1rem 3rem;align-items:baseline;padding-block:clamp(1.4rem,2.6vw,2.2rem);border-bottom:1px solid var(--line);transition:padding-left var(--t-link) var(--ease)}
.row h3{font-size:clamp(1.5rem,2.8vw,2.4rem);letter-spacing:-.03em}
.row p{color:var(--soft);max-width:44ch}
.row .link{font-size:.95rem;opacity:.0;transform:translateX(-6px);transition:opacity var(--t-link),transform var(--t-link) var(--ease)}
.row:hover,.row:focus-within{padding-left:.9rem}
.row:hover .link,.row:focus-within .link{opacity:1;transform:none}
@media (hover:none){.row .link{opacity:1;transform:none}}
@media (max-width:760px){.row{grid-template-columns:1fr}.row .link{opacity:1;transform:none}.row:hover{padding-left:0}}
.rows--compact .row{grid-template-columns:1fr auto;padding-block:1.1rem}
.rows--compact .row h3{font-size:clamp(1.25rem,2vw,1.6rem)}

.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem clamp(2rem,6vw,6rem);align-items:start}
.split .sticky{position:sticky;top:calc(var(--header-h) + 2rem)}
.split h2+p{margin-top:1.4rem}
.split .link{margin-top:2rem}
@media (max-width:860px){.split{grid-template-columns:1fr}.split .sticky{position:static}}

/* ---------- about teaser / about page ---------- */
.about-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem);row-gap:2.5rem;align-items:center}
.about-grid .a-img{grid-column:1/6}
.about-grid .a-copy{grid-column:7/-1}
.a-copy h2{margin-bottom:1.6rem}
.a-copy .link{margin-top:2rem}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.pills li{padding:.45rem .95rem;border:1px solid var(--line);border-radius:999px;font-size:.92rem;transition:background-color var(--t-link),color var(--t-link),border-color var(--t-link)}
.pills li:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
@media (max-width:860px){.about-grid .a-img,.about-grid .a-copy{grid-column:1/-1}}
.duo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem);align-items:end}
.duo .d1{grid-column:1/8}.duo .d2{grid-column:9/-1}
@media (max-width:700px){.duo .d1{grid-column:1/9}.duo .d2{grid-column:6/-1;margin-top:-18%;position:relative}}

.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem clamp(1rem,2.4vw,2.4rem);margin-top:clamp(2.5rem,5vw,4.5rem);counter-reset:s}
.step{border-top:1px solid var(--line);padding-top:1.4rem;counter-increment:s}
.step::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--serif);font-size:1.3rem;margin-bottom:2.2rem;color:var(--soft)}
.step h3{margin-bottom:.8rem}
.step p{color:var(--soft)}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.step::before{margin-bottom:1rem}}

/* ---------- inner page hero ---------- */
.page-hero{padding-top:calc(var(--header-h) + clamp(3rem,8vw,7rem));padding-bottom:clamp(3rem,7vw,6rem)}
.page-hero h1{max-width:14ch}
.page-hero .lede{margin-top:clamp(1.6rem,3vw,2.6rem)}
.page-hero .crumb{display:inline-flex;align-items:center;gap:.6rem;font-size:.95rem;font-weight:500;margin-bottom:clamp(2rem,4vw,3.5rem)}
.page-hero .crumb .arr{transform:rotate(180deg)}
.page-hero .crumb:hover .arr{transform:rotate(180deg) translateX(5px)}
.page-hero .anim>*{animation:fadeup .8s var(--ease) both}
.page-hero .anim>*:nth-child(2){animation-delay:.1s}.page-hero .anim>*:nth-child(3){animation-delay:.2s}

/* ---------- work index ---------- */
.work-row{padding-block:clamp(3.5rem,8vw,7rem)}
.work-row .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2vw,2rem);row-gap:2rem;align-items:end}
.work-row .proj-head{grid-column:1/5}
.work-row .strip{grid-column:5/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.7rem,1.6vw,1.4rem);align-items:end}
.work-row .strip .mask:nth-child(2){margin-bottom:clamp(1rem,4vw,3.5rem)}
.work-row .strip .mask:nth-child(3){margin-bottom:clamp(.5rem,2vw,1.5rem)}
.work-row:nth-of-type(even) .proj-head{grid-column:9/-1;grid-row:1}
.work-row:nth-of-type(even) .strip{grid-column:1/9;grid-row:1}
@media (max-width:860px){
  .work-row .proj-head,.work-row:nth-of-type(even) .proj-head{grid-column:1/-1;grid-row:auto}
  .work-row .strip,.work-row:nth-of-type(even) .strip{grid-column:1/-1;grid-row:auto}
  .work-row .strip{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:520px){.work-row .strip{grid-template-columns:repeat(2,minmax(0,1fr))}.work-row .strip .mask:nth-child(3){display:none}}

/* ---------- project page ---------- */
.proj-meta{display:flex;flex-wrap:wrap;gap:1.2rem clamp(2rem,6vw,5rem);margin-top:clamp(2rem,4vw,3.2rem)}
.proj-meta dt{font-size:.9rem;color:var(--soft)}
.proj-meta dd{font-family:var(--display);font-weight:500;font-size:1.25rem;letter-spacing:-.02em}
.cover{padding-bottom:var(--section)}
.cover .mask{aspect-ratio:var(--ar,16/9)}
.gallery-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.8rem,2vw,1.6rem);align-items:start}
.gallery-grid .g{grid-column:span 6}
.gallery-grid .g12{grid-column:span 12}.gallery-grid .g4{grid-column:span 4}.gallery-grid .g5{grid-column:span 5}.gallery-grid .g7{grid-column:span 7}.gallery-grid .g8{grid-column:span 8}
.gallery-grid .off{margin-top:clamp(2rem,8vw,7rem)}
@media (max-width:700px){.gallery-grid .g,.gallery-grid .g12,.gallery-grid .g4,.gallery-grid .g5,.gallery-grid .g7,.gallery-grid .g8{grid-column:span 12}.gallery-grid .off{margin-top:0}}
.next{display:block;padding-block:clamp(4rem,9vw,8rem)}
.next .wrap{display:grid;gap:1rem}
.next small{font-family:var(--serif);font-size:1.25rem;color:var(--soft)}
.next .big{display:flex;align-items:center;justify-content:space-between;gap:2rem;font-family:var(--display);font-weight:500;letter-spacing:-.04em;line-height:1;font-size:clamp(2.4rem,8vw,7rem)}
.next .big .arr{width:.7em;height:.7em;transition:transform .5s var(--ease)}
.next:hover .big .arr{transform:translateX(.18em)}

/* ---------- CTA band ---------- */
.cta{padding-block:clamp(4rem,9vw,8rem)}
.cta .wrap{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:2.5rem 4rem;align-items:end}
.cta h2{font-size:clamp(2.2rem,6vw,5.2rem);max-width:14ch}
.cta .acts{display:grid;gap:1.2rem;justify-items:start}
@media (max-width:860px){.cta .wrap{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem clamp(2rem,7vw,7rem);align-items:start}
.contact-links{display:grid;gap:1rem;margin-top:2.2rem}
.contact-links a{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-.02em;font-weight:500;width:fit-content;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease),color var(--t-link)}
.contact-links a:hover{background-size:0 1px;background-position:100% 100%;color:var(--red)}
form{display:grid;gap:1.7rem}
.field{display:grid;gap:.45rem}
.field label{font-weight:500;font-size:.95rem}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--soil);border-radius:0;padding:.7rem 0;font-size:1.1rem;outline:0;transition:border-color var(--t-link),box-shadow var(--t-link) var(--ease)}
.field textarea{min-height:9rem;resize:vertical;line-height:1.5}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23231815' stroke-width='1.4'/%3E%3C/svg%3E") right .2rem center no-repeat;padding-right:2rem}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--red);box-shadow:0 1px 0 0 var(--red)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:0}
.field .err{display:none;color:var(--red);font-size:.9rem;font-weight:500}
.field[data-invalid] .err{display:block}
.field[data-invalid] input,.field[data-invalid] textarea{border-bottom-color:var(--red)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{min-height:1.5em;font-weight:500}
.form-status.err{color:var(--red)}
.form-status a{text-decoration:underline}
.sent{display:none;padding:clamp(1.5rem,3vw,2.4rem);background:var(--blue)}
.sent h3{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:.6rem}
.form-wrap.is-sent form{display:none}
.form-wrap.is-sent .sent{display:block;animation:fadeup .7s var(--ease) both}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{padding-block:clamp(3.5rem,7vw,6rem) 2rem}
.foot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:3rem}
.foot .logo img{height:3rem}
.foot h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:0;line-height:1.2;margin-top:1.6rem;max-width:20ch}
.foot ul{display:grid;gap:.5rem}
.foot a:not(.logo){width:fit-content;position:relative;transition:color var(--t-link)}
.foot a:not(.logo)::after{content:"";position:absolute;left:0;right:0;bottom:-.1rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t-link) var(--ease)}
.foot a:not(.logo):hover::after{transform:scaleX(1)}
.foot .col-title{font-size:.9rem;color:var(--soft);margin-bottom:1rem}
.legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:clamp(3rem,6vw,5rem);padding-top:1.4rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--soft)}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}.foot>:first-child{grid-column:1/-1}}

/* ---------- 404 ---------- */
.notfound{min-height:100svh;display:grid;align-content:center;padding-top:var(--header-h)}
.notfound h1{max-width:12ch}
.notfound .lede{margin-block:1.6rem 2.4rem}

/* ---------- page transitions (cross-document, progressive enhancement) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s var(--ease-soft) both}
::view-transition-new(root){animation:vt-in .35s var(--ease-soft) .05s both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .js .mask img{clip-path:none;transform:none}
  .btn:hover,.row:hover{transform:none;padding-left:0}
  @view-transition{navigation:none}
}