/* ==========================================================================
   Diaz Industries, core stylesheet
   Aesthetic brief: "old-school Ferrari". Proportion over decoration.
   No gradients. No glass. No glow. Warmth, restraint, craft.
   ========================================================================== */

/* ----- Metropolis ------------------------------------------------------- */
@font-face{font-family:Metropolis;src:url(../fonts/Metropolis-Thin.woff2)format("woff2");font-weight:100;font-display:swap}
@font-face{font-family:Metropolis;src:url(../fonts/Metropolis-ExtraLight.woff2)format("woff2");font-weight:200;font-display:swap}
@font-face{font-family:Metropolis;src:url(../fonts/Metropolis-Light.woff2)format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Metropolis;src:url(../fonts/Metropolis-Regular.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Metropolis;src:url(../fonts/Metropolis-Medium.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Metropolis;src:url(../fonts/Metropolis-SemiBold.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Metropolis;src:url(../fonts/Metropolis-Bold.woff2)format("woff2");font-weight:700;font-display:swap}

/* ----- System ----------------------------------------------------------- */
:root{
  --paper:#F2EFE9;          /* warm printed paper, never #fff */
  --paper-lift:#F7F5F1;
  --paper-deep:#E7E2D9;
  --ink:#171613;            /* warm near-black, never #000 */
  --ink-mid:#5C5A54;
  --ink-soft:#8E8B83;
  --blue:#5B91A0;           /* brand */
  --blue-deep:#3B6572;
  --blue-pale:#C4D7DC;
  --clay:#A75F3F;           /* secondary, oxblood/terracotta, the leather */
  --clay-deep:#7E4630;
  --sand:#D8C9AE;           /* tertiary, warm sand */
  --rule:rgba(23,22,19,.15);
  --rule-soft:rgba(23,22,19,.08);

  --serif:"Instrument Serif",'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:Metropolis,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --gut:clamp(1.5rem,5vw,6rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:1.1s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Paper grain. The difference between "printed" and "screen". */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.32;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

::selection{background:var(--blue);color:var(--paper)}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ----- Type primitives -------------------------------------------------- */
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.012em}

/* Chassis-plate label: the small stamped caps used throughout */
.plate{
  font-family:var(--sans);
  font-size:clamp(9.5px,.28vw + 8.6px,11px);
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-soft);
  line-height:1;
}
.plate--blue{color:var(--blue-deep)}

.lede{
  font-family:var(--serif);
  font-size:clamp(1.5rem,2.4vw + .7rem,3rem);
  line-height:1.24;
  letter-spacing:-.014em;
  font-weight:400;
  max-width:20ch;
}

.body-lg{
  font-size:clamp(1rem,.5vw + .88rem,1.2rem);
  line-height:1.72;
  color:var(--ink-mid);
  max-width:62ch;
  font-weight:300;
}

/* ----- Layout ----------------------------------------------------------- */
.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gut)}
.rule{height:1px;background:var(--rule);border:0;margin:0}

section{position:relative}

/* Reveal-on-scroll: slow and weighted. Nothing bounces. */
.rise{opacity:0;transform:translateY(22px);transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ==========================================================================
   MASTHEAD. Hidden at rest, appears once you have left the entry screen
   ========================================================================== */
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;padding:1.1rem var(--gut);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transform:translateY(-101%);
  transition:transform .7s var(--ease),border-color .7s var(--ease);
}
.masthead.show{transform:none;border-bottom-color:var(--rule-soft)}
.masthead__mark{display:flex;align-items:center;gap:.7rem}
.masthead__mark svg{width:auto;height:21px}
.masthead__mark span{
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
}
.masthead nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2.2rem)}
.masthead nav a{
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mid);position:relative;padding-block:.35rem;
  transition:color .4s var(--ease);
}
.masthead nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.masthead nav a:hover{color:var(--ink)}
.masthead nav a:hover::after{transform:scaleX(1)}
@media(max-width:820px){.masthead nav a:not(.is-cta){display:none}}
.is-cta{color:var(--ink)!important}
.is-cta::after{transform:scaleX(1)!important;background:var(--rule)!important}

/* ==========================================================================
   ENTRY. Logo, silence, one hairline
   ========================================================================== */
.entry{
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto 1fr;
  align-items:center;
  text-align:center;
  padding-inline:var(--gut);
}
.entry__core{
  grid-row:2;
  display:flex;flex-direction:column;align-items:center;
  animation:settle 1.9s var(--ease) both;
}
@keyframes settle{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.entry__logo{width:min(820px,86vw);height:auto}
.entry__rule{
  width:min(820px,86vw);height:1px;background:var(--rule);
  margin:clamp(2rem,4.6vw,3.6rem) 0 clamp(1.4rem,2.6vw,2rem);
  transform-origin:center;
  animation:draw 2.4s var(--ease) .5s both;
}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.entry__meta{
  display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem);
  animation:settle 1.9s var(--ease) .9s both;
}
.entry__meta .dot{width:4px;height:4px;border-radius:50%;background:var(--blue);opacity:.8}
.entry__meta .plate{font-size:clamp(13px,.38vw + 11.8px,15px);letter-spacing:.28em}

.entry__foot{
  grid-row:3;align-self:end;
  padding-bottom:clamp(1.6rem,3vw,2.6rem);
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  animation:settle 1.9s var(--ease) 1.4s both;
}
.scroll-line{
  width:1px;height:clamp(38px,5vw,62px);
  background:linear-gradient(var(--rule),transparent);
  position:relative;overflow:hidden;
}
.scroll-line::after{
  content:"";position:absolute;top:0;left:0;width:1px;height:40%;
  background:var(--blue);
  animation:fall 2.8s var(--ease) infinite;
}
@keyframes fall{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(260%)}
}

/* ==========================================================================
   STATEMENT
   ========================================================================== */
.statement{padding-block:clamp(6rem,14vw,13rem)}
.statement__grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2.4rem,5vw,5rem);
}
@media(min-width:900px){
  .statement__grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:start}
}
.statement h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,4.4vw + .4rem,4.6rem);
  line-height:1.1;letter-spacing:-.02em;
  margin:0;max-width:16ch;
}
.statement h1 em{font-style:italic;color:var(--blue-deep)}
.statement__side{display:flex;flex-direction:column;gap:clamp(1.4rem,2.6vw,2.2rem)}

/* ==========================================================================
   FIGURES. The instrument-panel row
   ========================================================================== */
.figures{padding-block:clamp(3rem,6vw,5rem);border-block:1px solid var(--rule)}
.figures__row{
  display:grid;gap:clamp(2rem,3.5vw,3rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:760px){.figures__row{grid-template-columns:repeat(4,minmax(0,1fr))}}
.figure{display:flex;flex-direction:column;gap:.75rem}
.figure__n{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.6rem,4.4vw,4.1rem);
  line-height:.9;letter-spacing:-.03em;
  display:flex;align-items:baseline;gap:.12em;
}
.figure__n sup{
  font-family:var(--sans);font-size:.26em;font-weight:500;line-height:1;
  letter-spacing:.06em;color:var(--blue);
  align-self:flex-start;position:static;margin-top:.08em;
}
.figure__t{color:var(--ink-mid);font-size:.86rem;line-height:1.5;max-width:22ch}

/* ==========================================================================
   DIVISIONS. The index. Numbered like a chassis plate.
   ========================================================================== */
.divisions{padding-block:clamp(5rem,11vw,10rem)}
.sec-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2.4rem,5vw,4rem);
}
.sec-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,2.6vw + .5rem,3rem);
  line-height:1.12;letter-spacing:-.018em;margin:0;max-width:18ch;
}

.index{border-top:1px solid var(--rule)}
.index__item{
  display:block;border-bottom:1px solid var(--rule);
  position:relative;isolation:isolate;
}
.index__item::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--paper-lift);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .6s var(--ease);
}
.index__item:hover::before,.index__item:focus-visible::before{transform:scaleY(1);transform-origin:top}

.index__row{
  display:grid;align-items:center;gap:clamp(.9rem,2.4vw,2.4rem);
  grid-template-columns:auto auto 1fr auto;
  padding:clamp(1.5rem,3.1vw,2.5rem) clamp(.5rem,1.4vw,1.4rem);
  transition:padding-left .6s var(--ease);
}
.index__item:hover .index__row{padding-left:clamp(1rem,2.6vw,2.4rem)}
.index__num{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.2em;color:var(--ink-soft);
  transition:color .5s var(--ease);
}
.index__item:hover .index__num{color:var(--blue)}
.index__body{min-width:0}
.index__name{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.35rem,2.1vw + .45rem,2.4rem);
  line-height:1.14;letter-spacing:-.016em;
  display:flex;align-items:center;gap:.55em;flex-wrap:wrap;
}
.index__name .ext{
  font-family:var(--sans);font-size:9.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue-deep);
  border:1px solid color-mix(in srgb,var(--blue) 42%,transparent);
  border-radius:2px;padding:.28em .55em .24em;white-space:nowrap;
}
.index__desc{
  color:var(--ink-mid);font-size:.92rem;line-height:1.6;
  margin-top:.5rem;max-width:52ch;
}
.index__arrow{
  width:34px;height:34px;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--rule);border-radius:50%;
  transition:transform .6s var(--ease),border-color .6s var(--ease),background .6s var(--ease);
}
.index__arrow svg{width:12px;height:12px;stroke:var(--ink);stroke-width:1.4;fill:none;transition:stroke .6s var(--ease)}
.index__item:hover .index__arrow{transform:translateX(5px);border-color:var(--blue);background:var(--blue)}
.index__item:hover .index__arrow svg{stroke:var(--paper)}
@media(max-width:640px){
  .index__row{grid-template-columns:auto auto 1fr;row-gap:.4rem}
  .index__arrow{display:none}
}

/* ==========================================================================
   METHOD
   ========================================================================== */
.method{padding-block:clamp(5rem,11vw,10rem);background:var(--paper-lift);border-block:1px solid var(--rule)}
.steps{display:grid;gap:clamp(1.8rem,3.4vw,2.6rem);grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{padding-top:1.4rem;border-top:1px solid var(--ink);position:relative}
.step:nth-child(n+2){border-top-color:var(--rule)}
.step__n{
  font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.2em;
  color:var(--blue);margin-bottom:1.1rem;display:block;
}
.step h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.2rem,1.1vw + .85rem,1.55rem);
  line-height:1.2;letter-spacing:-.012em;margin:0 0 .7rem;
}
.step p{margin:0;color:var(--ink-mid);font-size:.9rem;line-height:1.62}

/* ==========================================================================
   CASE. The proof block
   ========================================================================== */
.case{padding-block:clamp(5rem,11vw,10rem);overflow:hidden}
.case__grid{display:grid;gap:clamp(2.4rem,5vw,5rem);grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.case__grid{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);align-items:start}}

.case__quote{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.45rem,2.1vw + .6rem,2.5rem);
  line-height:1.26;letter-spacing:-.015em;margin:0 0 1.6rem;max-width:24ch;
}
.case__quote em{font-style:italic;color:var(--blue-deep)}

.ledger{border-top:1px solid var(--ink)}
.ledger__row{
  display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:baseline;
  padding:1.05rem 0;border-bottom:1px solid var(--rule);
}
.ledger__k{
  font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;min-width:5.5rem;
}
.ledger__v{font-size:.92rem;line-height:1.55;color:var(--ink)}
.ledger__v strong{font-weight:500}

.disclosure{
  margin-top:1.6rem;font-size:.75rem;line-height:1.6;color:var(--ink-soft);
  max-width:46ch;
}

/* ==========================================================================
   REACH. The two-country line
   ========================================================================== */
.reach{
  padding-block:clamp(4rem,9vw,8rem);
  border-block:1px solid var(--rule);
  background:var(--ink);color:var(--paper);
}
.reach .plate{color:color-mix(in srgb,var(--paper) 52%,transparent)}
.reach h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.8rem,3vw + .5rem,3.4rem);
  line-height:1.14;letter-spacing:-.02em;margin:1.6rem 0 0;max-width:19ch;
}
.reach h2 em{font-style:italic;color:var(--blue)}
.reach__cols{
  display:grid;gap:clamp(2rem,4vw,3.4rem);margin-top:clamp(2.6rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:820px){.reach__cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
.reach__col{border-top:1px solid rgba(242,239,233,.22);padding-top:1.3rem}
.reach__col h3{
  font-size:.82rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 .8rem;color:var(--paper);
}
.reach__col p{margin:0;font-size:.88rem;line-height:1.62;color:rgba(242,239,233,.66)}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{padding-block:clamp(5rem,12vw,11rem)}
.contact__grid{display:grid;gap:clamp(2.4rem,5vw,5rem);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.contact__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}}
.contact h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,3.6vw + .5rem,4rem);
  line-height:1.1;letter-spacing:-.02em;margin:1.4rem 0 0;max-width:14ch;
}

.field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}
.field label{
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:.95rem;font-weight:300;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:.6rem 0;outline:none;border-radius:0;
  transition:border-color .5s var(--ease);
}
.field textarea{resize:vertical;min-height:5.5rem;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--blue)}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238E8B83' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .1rem center;background-size:11px;
}

.btn{
  display:inline-flex;align-items:center;gap:.85rem;
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);border:1px solid var(--ink);
  padding:1.05rem 1.9rem;cursor:pointer;border-radius:0;
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
}
.btn:hover{background:var(--blue);border-color:var(--blue)}
.btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.4;fill:none}

.direct{border-top:1px solid var(--ink)}
.direct__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding:1.05rem 0;border-bottom:1px solid var(--rule);
}
.direct__row span:first-child{
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
.direct__row a,.direct__row span:last-child{font-size:.92rem;transition:color .4s var(--ease)}
.direct__row a:hover{color:var(--blue)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{background:var(--paper-deep);border-top:1px solid var(--rule);padding-block:clamp(3rem,6vw,5rem)}
.foot__top{
  display:grid;gap:clamp(2rem,4vw,3rem);
  grid-template-columns:minmax(0,1fr);
  padding-bottom:clamp(2.4rem,4vw,3.4rem);
}
@media(min-width:820px){.foot__top{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}}
.foot__logo{width:190px;height:auto;margin-bottom:1.3rem}
.foot__col h4{
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 1.1rem;
}
.foot__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.foot__col a{font-size:.88rem;color:var(--ink-mid);transition:color .4s var(--ease)}
.foot__col a:hover{color:var(--blue)}

.foot__legal{
  padding-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;
  font-size:.72rem;line-height:1.7;color:var(--ink-soft);
}
.foot__legal p{margin:0;max-width:72ch}

/* ==========================================================================
   PLATES. Original artwork, generated. Owned, brand-locked, weightless.
   ========================================================================== */
.plate-band{
  position:relative;overflow:hidden;
  border-block:1px solid var(--rule);
  background:var(--paper-lift);
}
.plate-band svg{display:block;width:100%;height:auto}

/* Oversized monogram used as architecture, not decoration */
.monogram{
  position:absolute;pointer-events:none;user-select:none;
  opacity:.055;z-index:0;
}
.monogram--case{right:-4%;top:-6%;width:min(38vw,540px);max-width:44vw}
.case__grid,.divisions .wrap{position:relative;z-index:1}

/* Corridor diagram */
.corridor{margin-top:clamp(2.6rem,5vw,4rem)}
.corridor svg{width:100%;height:auto;overflow:visible}
.corridor .cline{fill:none;stroke:var(--blue);stroke-width:1;opacity:.85;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 2.6s var(--ease)}
.corridor.in .cline{stroke-dashoffset:0}
.corridor .cgrid{stroke:rgba(242,239,233,.13);stroke-width:.5}
.corridor .cnode{fill:var(--paper)}
.corridor .cnode-ring{fill:none;stroke:var(--blue);stroke-width:1;opacity:.6}
.corridor .clabel{
  font-family:var(--sans);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;fill:rgba(242,239,233,.82);
}
.corridor .csub{
  font-family:var(--sans);font-size:8px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;fill:rgba(242,239,233,.4);
}
@media(prefers-reduced-motion:reduce){.corridor .cline{stroke-dashoffset:0;transition:none}}

/* Division colour keying. Each row carries its own accent */
.index__item{--accent:var(--blue)}
/* Keyed to the running order: Consulting, Trade, Commercial Real Estate,
   Quiet AI, Cross-Border. Reorder the cards and these move with them, so check
   the colours still suit the photographs afterwards. */
.index__item:nth-child(2){--accent:var(--clay)}       /* trade, warm */
.index__item:nth-child(3){--accent:var(--blue-deep)}  /* brokerage, navy */
.index__item:nth-child(4){--accent:var(--ink-mid)}    /* Quiet AI, austere */
.index__item:nth-child(5){--accent:#8E7B4F}           /* Baja, sand and gold */
.index__item:hover .index__num{color:var(--accent)}
.index__item:hover .index__arrow{border-color:var(--accent);background:var(--accent)}
.index__item::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease);
}
.index__item:hover::after{transform:scaleX(1)}

/* Swatch: a small painted chip that gives each division a colour identity */
.index__chip{
  width:clamp(52px,7vw,86px);aspect-ratio:4/5;flex:none;
  background:var(--accent);position:relative;overflow:hidden;
  filter:saturate(.85);
  transition:transform .8s var(--ease),filter .8s var(--ease);
}
.index__item:hover .index__chip{transform:scale(1.04);filter:saturate(1.05)}
.index__chip svg{position:absolute;inset:0;width:100%;height:100%;opacity:.42}
@media(max-width:640px){.index__chip{width:44px}}

/* Figures get warm colour */
.figure:nth-child(2) .figure__n sup{color:var(--clay)}
.figure:nth-child(3) .figure__n sup{color:#8E7B4F}

/* Method steps: colour-keyed numerals */
.step:nth-child(2) .step__n{color:var(--clay)}
.step:nth-child(3) .step__n{color:#8E7B4F}
.step:nth-child(4) .step__n{color:var(--clay-deep)}

/* Case: result row lifted in clay */
.ledger__row:nth-last-child(2) .ledger__v strong{color:var(--clay-deep)}

/* ==========================================================================
   INTERIOR PAGES
   ========================================================================== */
.masthead.is-static{position:sticky;transform:none;border-bottom-color:var(--rule-soft)}

.phero{
  position:relative;overflow:hidden;
  padding-block:clamp(4.5rem,11vw,9rem) clamp(3rem,6vw,5rem);
  border-bottom:1px solid var(--rule);
}
.monogram--hero{position:absolute;right:-8%;top:-22%;width:min(52vw,660px);opacity:.06}
.phero .wrap{position:relative;z-index:1}
.phero__plate{color:var(--accent);margin:0 0 clamp(1.6rem,3vw,2.4rem)}
.phero__h{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.4rem,5.4vw + .3rem,5.6rem);
  line-height:1.06;letter-spacing:-.022em;margin:0;max-width:15ch;
}
.phero__h em{font-style:italic;color:var(--accent)}
.phero__lede{
  font-family:var(--serif);font-size:clamp(1.15rem,1.3vw + .8rem,1.8rem);
  line-height:1.38;letter-spacing:-.01em;color:var(--ink-mid);
  max-width:44ch;margin:clamp(1.8rem,3.4vw,2.8rem) 0 0;
}
.phero__rule{height:1px;background:var(--accent);width:clamp(80px,12vw,160px);margin-top:clamp(2rem,4vw,3rem);opacity:.7}

.pblock{padding-block:clamp(3.5rem,8vw,7rem)}
.pblock--lift{background:var(--paper-lift);border-block:1px solid var(--rule)}
.pblock__grid{display:grid;gap:clamp(1.8rem,4vw,4rem);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.pblock__grid{grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);align-items:start}}
.pblock__h{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.6rem,2.2vw + .55rem,2.7rem);
  line-height:1.14;letter-spacing:-.016em;margin:1rem 0 0;max-width:16ch;
}
.pblock__body{display:flex;flex-direction:column;gap:1.3rem}
.pblock__body .body-lg{margin:0}

.offers{padding-block:clamp(4rem,9vw,8rem)}
.offers__grid{display:grid;gap:clamp(1.8rem,3.4vw,2.8rem);grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.offers__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.offers__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.offer{border-top:1px solid var(--rule);padding-top:1.4rem}
.offer__n{font-size:10.5px;font-weight:500;letter-spacing:.2em;display:block;margin-bottom:1rem}
.offer h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,1vw + .85rem,1.5rem);
  line-height:1.2;letter-spacing:-.012em;margin:0 0 .7rem}
.offer p{margin:0;color:var(--ink-mid);font-size:.9rem;line-height:1.62}

.pclose{background:var(--ink);color:var(--paper);padding-block:clamp(4rem,10vw,8rem);border-top:1px solid var(--rule)}
.pclose__q{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,3.2vw + .5rem,3.4rem);
  line-height:1.16;letter-spacing:-.02em;margin:0 0 1.6rem;max-width:20ch;color:var(--paper);
}
.btn--light{background:var(--accent);border-color:var(--accent);color:var(--paper);margin-top:2.4rem}
.btn--light:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* Entry logo is the door */
.entry__link{display:block;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.entry__link:hover{opacity:.72;transform:translateY(-2px)}

/* ==========================================================================
   PHOTOGRAPHY. Three tiers. Colour is a hierarchy, not a filter.
   ph--full  hero moments        · full colour, the thing people feel
   ph--rich  supporting images   · 42% desaturated + light tint, unified
   ph        backgrounds only    · full duotone, recedes behind type
   ========================================================================== */
.ph{position:relative;overflow:hidden;background:var(--ink);isolation:isolate}
/* Two separate properties on purpose. `scale` carries the slow settle when the
   photograph first arrives, `translate` carries the scroll drift and is rewritten
   every frame. Putting both in one `transform` would make the drift inherit the
   settle's two-second transition and lag behind the page. */
.ph img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.12) brightness(.88);
  scale:1.06;transition:scale 2.2s cubic-bezier(.16,.84,.34,1)}
.ph.is-seen img{scale:1}
.ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--tint,var(--blue));mix-blend-mode:color;opacity:.5}
.ph::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--paper);mix-blend-mode:soft-light;opacity:.28}

.ph--rich img{filter:grayscale(.42) contrast(1.1) saturate(1.16)}
.ph--rich::after{opacity:.2}
.ph--rich::before{opacity:.14}

.ph--full img{filter:contrast(1.07) saturate(1.1)}
.ph--full::after{opacity:0}
.ph--full::before{opacity:.08}

a:hover .ph img,.ph:hover img{transform:scale(1.035)}

/* Full-bleed band */
.band{position:relative;border-block:1px solid var(--rule)}
.band .ph{height:clamp(280px,44vh,520px)}
.band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:2;
  pointer-events:none;background:linear-gradient(transparent,rgba(23,22,19,.8))}
.band__cap{z-index:3;
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:clamp(1.2rem,3vw,2.2rem) var(--gut);
  display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;
}
.band__cap p{margin:0;color:rgba(242,239,233,.92);font-family:var(--serif);
  font-size:clamp(1.1rem,1.7vw + .5rem,2rem);line-height:1.2;letter-spacing:-.014em;max-width:26ch}
.band__cap .plate{color:rgba(242,239,233,.55)}

/* Division thumbnails replace the flat chips */
.index__chip{width:clamp(64px,9vw,116px);aspect-ratio:4/5;flex:none;
  position:relative;overflow:hidden;background:var(--accent);
  transition:transform .8s var(--ease)}
.index__item:hover .index__chip{transform:scale(1.03)}
.index__chip img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.4) contrast(1.1) saturate(1.16);transition:transform 1.4s var(--ease)}
.index__item:hover .index__chip img{transform:scale(1.07)}
.index__chip::after{content:"";position:absolute;inset:0;
  background:var(--accent);mix-blend-mode:color;opacity:.18}
.index__chip::before{content:"";position:absolute;inset:0;z-index:2;
  background:var(--paper);mix-blend-mode:soft-light;opacity:.12}
@media(max-width:640px){.index__chip{width:54px}}

/* Case image */
.case__ph{margin-top:clamp(1.8rem,3vw,2.6rem)}
.case__ph .ph{aspect-ratio:16/10}
.case__credit{font-size:.68rem;color:var(--ink-soft);margin:.6rem 0 0;letter-spacing:.04em}

/* Reach section background image */
.reach{isolation:isolate}
.reach__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.reach__bg img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.1);opacity:.17}

/* Interior page hero image */
.phero__ph{margin-top:clamp(2.4rem,5vw,4rem)}
.phero__ph .ph{aspect-ratio:21/8}

/* The Cabo thumbnail earns full colour. Turquoise is the product. It sits fifth
   now that Commercial Real Estate moved up the order. */
.index__item:nth-child(5) .index__chip img{filter:contrast(1.07) saturate(1.12)}
.index__item:nth-child(5) .index__chip::after{opacity:0}
.index__item:nth-child(5) .index__chip::before{opacity:.06}

/* ---------- form: honeypot, consent, sending state ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:.7rem;align-items:flex-start;margin:.4rem 0 1.8rem;cursor:pointer}
.consent input{
  appearance:none;width:15px;height:15px;flex:none;margin-top:.25rem;border-radius:0;
  border:1px solid var(--rule);background:transparent;cursor:pointer;
  transition:background .4s var(--ease),border-color .4s var(--ease)}
.consent input:checked{background:var(--blue);border-color:var(--blue)}
.consent input:checked::after{content:"";display:block;width:4px;height:8px;margin:1px auto 0;
  border:solid var(--paper);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.consent input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.consent span{font-size:.78rem;line-height:1.55;color:var(--ink-soft);max-width:46ch}
.btn:disabled{opacity:.55;cursor:default}
.btn:disabled:hover{background:var(--ink);border-color:var(--ink)}
#form-note{transition:color .4s var(--ease)}

/* ==========================================================================
   MOTION. Restraint, not spectacle. A 250 GTO moves beautifully because the
   proportions are right, not because anything flashes.

   Two effects only, and both are gated on prefers-reduced-motion:
     · a slow settle from 1.06 to 1.0 the first time a photograph is seen
     · a parallax drift on the three full-bleed images while you scroll
   ========================================================================== */

/* Drift needs headroom, otherwise translating the image reveals the box behind
   it. The image is taller than its frame and starts pulled up by half of that. */
.ph--drift{overflow:hidden}
.ph--drift img{height:118%;position:relative;top:-9%;
  translate:0 var(--drift, 0px);will-change:translate}

.reach__bg img{height:118%;position:relative;top:-9%;
  translate:0 var(--drift, 0px);will-change:translate}

/* The division thumbnails get the same two-part treatment, at a smaller scale:
   a settle the first time each one is seen, and a drift inside its own frame
   while you scroll. Same --drift property, same animation frame loop, so this
   page has one motion system rather than two that can disagree.

   `scale` carries the settle and `transform` carries the hover, which is why
   they are kept as separate properties here too. They compose: a chip that has
   settled to 1 still lifts to 1.07 under the cursor. */
.index__chip img{height:118%;position:relative;top:-9%;
  translate:0 var(--drift, 0px);will-change:translate;
  scale:1.05;transition:transform 1.4s var(--ease),scale 1.8s cubic-bezier(.16,.84,.34,1)}
.index__chip.is-seen img{scale:1}

@media (prefers-reduced-motion: reduce){
  .ph img{scale:1;transition:none}
  .ph--drift img{height:100%;top:0;translate:none}
  .reach__bg img{translate:none}
  .index__chip img{height:100%;top:0;translate:none;scale:1;transition:none}
  .index__item:hover .index__chip,
  .index__item:hover .index__chip img{transform:none}
}