/* ============================================================
   Kaló Haus — buyers agency
   Mahogany ground. Cream type. Coral for the pop.
   Soft, editorial, quiet.
   ============================================================ */

/* ---------- Fonts ----------
   Headings and sub-headings   Black Mango
   Body and italics            Metropolis, the open-licensed geometric
                               sans standing in for Gotham. Same bones,
                               and it ships with the site under the OFL.
   Cursive                     Petit Formal Script, loaded in each page head
   ------------------------------------------------------------ */
@font-face{font-family:'Black Mango';src:url('fonts/BlackMango-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Black Mango';src:url('fonts/BlackMango-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

@font-face{font-family:'Metropolis';src:url('fonts/Metropolis-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Metropolis';src:url('fonts/Metropolis-LightItalic.otf') format('opentype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Metropolis';src:url('fonts/Metropolis-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Metropolis';src:url('fonts/Metropolis-RegularItalic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Metropolis';src:url('fonts/Metropolis-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Metropolis';src:url('fonts/Metropolis-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Metropolis';src:url('fonts/Metropolis-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --mahogany:#560216;
  --mahogany-soft:#5d0a1c;
  --cream:#f3eee6;
  --coral:#d84d4d;
  --coral-soft:#e8836f;
  --coral-deep:#c74343;   /* hover fill, a hair deeper so cream type stays legible */

  --line:rgba(243,238,230,0.14);
  --line-dark:rgba(86,2,22,0.14);

  --display:'Black Mango', serif;
  --sans:'Metropolis', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif:var(--sans);
  --italic:var(--sans);                        /* italics are the sans, set in italic */
  --cursive:'Petit Formal Script', 'Lora', cursive;
  --greek:'Lora', serif;                       /* the kaló mark only, for the Greek glyphs */

  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-weight:400;
  font-size:16.5px;
  color:var(--cream);
  background:var(--mahogany);
  line-height:1.78;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Paper grain — keeps flat colour from feeling synthetic */
body::before{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(22px,5vw,60px);position:relative;z-index:2}
.section{padding:clamp(64px,9vw,124px) 0;position:relative}
.section-tight{padding:clamp(44px,6vw,80px) 0}
.center{text-align:center}
.band{background:var(--mahogany-soft)}
.cream-bg{background:var(--cream);color:var(--mahogany)}
.cream-bg .eyebrow{color:var(--coral)}
.cream-bg .muted{opacity:.72}

/* Everything that assumes a mahogany ground, flipped for cream sections */
.cream-bg .rule,
.cream-bg .steps,.cream-bg .step,
.cream-bg .faq,.cream-bg .faq details,
.cream-bg .place,.cream-bg .who-tile,
.cream-bg .pillars,.cream-bg .pillar{border-color:var(--line-dark)}
.cream-bg .kalo-mark{color:var(--mahogany)}
.cream-bg .note{border-left-color:var(--line-dark)}
.cream-bg .suburbs span{background:var(--coral-deep);color:var(--cream);border-color:transparent}
.cream-bg .caption{color:var(--mahogany)}
.cream-bg .footer-base{border-color:var(--line-dark)}
.cream-bg .watermark::before,
.cream-bg.watermark::before{color:var(--mahogany);opacity:.05}
/* the voyage, sailing across a pale ground */
.cream-bg .voyage-line{
  background:linear-gradient(180deg,transparent,rgba(86,2,22,.22) 6%,rgba(86,2,22,.22) 92%,transparent);
}
.cream-bg .voyage-wake{background:linear-gradient(180deg,transparent,rgba(216,77,77,.6))}

/* ---------- Type ----------
   Two tiers, straight off the brand board.
   Heading      Black Mango regular, for the big statement lines
   Sub heading  Black Mango bold, for everything smaller set in the display face
   ------------------------------------------------------------ */
h1,h2,h3,h4,h5,h6,.display{
  font-family:var(--display);
  font-weight:400;
  line-height:1.14;
  letter-spacing:-.005em;
}
.display{font-size:clamp(2.1rem,4.4vw,3.35rem);line-height:1.1}
h1{font-size:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.6rem,2.9vw,2.35rem)}
/* sub-heading tier, set in the bold cut */
h3,h4,h5,h6{font-weight:700;letter-spacing:.004em}
h3{font-size:clamp(1.1rem,1.5vw,1.32rem);line-height:1.3}

/* Section labels, back to the small quiet cap so the script stays rare */
.eyebrow{
  font-family:var(--sans);font-weight:400;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--coral);margin-bottom:1.5em;
}
/* set as written, not shouted */
.eyebrow-lc{
  text-transform:none;letter-spacing:.02em;
  font-size:clamp(1.2rem,2.1vw,1.65rem);
  font-family:var(--cursive);font-style:normal;
  margin-bottom:.5em;opacity:.95;
}
/* The definition line under the kaló mark. The one place the script
   earns its keep, so it reads like a hand-written gloss in a dictionary. */
.definition{
  font-family:var(--cursive);font-weight:400;font-style:normal;
  font-size:clamp(1.05rem,1.5vw,1.26rem);line-height:1.5;letter-spacing:.015em;
  color:var(--coral);
}
/* Intro paragraphs. Set in the sans, because Black Mango is a display
   face and gets hard to read once a line runs longer than a few words. */
.lead{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  line-height:1.65;letter-spacing:.002em;
}
/* the short brand line in the footer, set in the script */
.footer .lead{
  font-family:var(--cursive);font-style:normal;font-weight:400;
  font-size:clamp(.98rem,1.4vw,1.16rem);line-height:1.5;letter-spacing:.012em;
}
/* Greek runs stay on the one face that carries the glyphs, so κ α λ and ó
   all come from the same alphabet rather than falling back character by character */
.greek{font-family:var(--greek);font-style:italic;font-weight:300}
p{max-width:60ch}
.muted{opacity:.76}
.coral{color:var(--coral)}
.small{font-size:.86rem}

/* The ó, everywhere it can go.
   It always takes the font of the word it sits in — it only carries colour. */
.o{font-family:inherit;font-style:inherit;font-weight:inherit;color:var(--cream)}
.cream-bg .o{color:var(--mahogany)}
/* haus, wherever it turns up in the writing rather than in the logo */
.haus{color:var(--coral)}
.cream-bg .haus{color:var(--coral-deep)}
/* except in the closing lines, where kaló haus is the name itself and
   splitting it across two colours breaks the wordmark */
.cta-band .haus{color:inherit}
/* in the closing band at the foot of each page the ó picks up the coral */
.cta-band .o{color:var(--coral)}
.cream-bg .cta-band .o{color:var(--coral-deep)}
.dot-o{
  display:block;text-align:center;font-family:var(--italic);font-style:italic;
  color:var(--coral);opacity:1;font-size:1.7rem;line-height:1;
  margin:clamp(30px,5vw,52px) auto;
}
.cream-bg .dot-o{color:var(--coral-deep)}
.dot-o::before{content:'ó'}
/* Giant faint watermark, borrowed from the proposal */
.watermark{position:relative;overflow:hidden}
.watermark::before{
  /* all four characters Greek, so they come from one glyph set rather than
     falling back per character. Same face as the mark and the gloss. */
  content:'\03ba\03b1\03bb\03cc';
  position:absolute;right:-4%;bottom:-22%;z-index:0;
  font-family:var(--greek);font-style:italic;font-weight:300;line-height:1;
  font-size:clamp(200px,30vw,420px);color:var(--cream);opacity:.035;
  pointer-events:none;white-space:nowrap;
}
.watermark-l::before{left:-6%;right:auto}
.cream-bg.watermark::before{color:var(--mahogany);opacity:.05}

/* Hand-written margin note */
.note{
  font-family:var(--italic);font-style:italic;
  font-size:.94rem;line-height:1.6;opacity:.72;
  border-left:1px solid var(--line);padding-left:16px;max-width:34ch;
}
.note-r{transform:rotate(-.5deg)}
/* an opening line set in the script, in coral */
.script-lede{
  font-family:var(--cursive);font-weight:400;font-style:normal;
  font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.45;letter-spacing:.012em;
  color:var(--coral);
}
.cream-bg .script-lede{color:var(--coral-deep)}

/* a note set in the script rather than the sans italic */
.note-script{
  font-family:var(--cursive);font-style:normal;
  font-size:clamp(1.08rem,1.7vw,1.3rem);line-height:1.5;letter-spacing:.012em;
  opacity:.9;
}
/* signed off by hand, so it sits in the script */
.signature{
  font-family:var(--cursive);font-weight:400;font-style:normal;
  font-size:clamp(.98rem,1.7vw,1.42rem);line-height:1.45;letter-spacing:.015em;
  color:var(--coral);max-width:none;white-space:nowrap;
}
.cream-bg .signature{color:var(--coral-deep)}

/* ---------- Nav ---------- */
/* Sits clear over the cover, then settles into a solid bar once you move.
   The height and the wordmark ease down at the same time. */
.nav{
  position:sticky;top:0;z-index:60;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .55s var(--ease),border-color .55s var(--ease),backdrop-filter .55s var(--ease);
}
.nav-solid{
  background:rgba(86,2,22,.9);backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:clamp(76px,8vw,96px);transition:height .55s var(--ease);
}
.nav-solid .wrap{height:66px}
/* Set as live type rather than a raster. The wordmark is Black Mango, so
   this is the same letterform, and it stays sharp at any size or density. */
.brand{display:flex;align-items:baseline;gap:clamp(9px,1vw,14px)}
.brand-word{
  font-family:var(--display);font-weight:400;color:var(--cream);
  font-size:1.62rem;letter-spacing:.012em;line-height:1;white-space:nowrap;
  transition:font-size .55s var(--ease);
}
.nav-solid .brand-word{font-size:1.36rem}
.brand-sub{
  font-family:var(--display);font-weight:700;color:var(--coral);
  font-size:.84rem;letter-spacing:.05em;line-height:1;white-space:nowrap;
  padding-left:clamp(9px,1vw,14px);border-left:1px solid rgba(216,77,77,.4);
  transition:font-size .55s var(--ease);
}
.nav-solid .brand-sub{font-size:.75rem}
@media(max-width:640px){
  .brand-sub{display:none}
  .brand-word{font-size:1.34rem}
  .nav-solid .brand-word{font-size:1.18rem}
  .nav .wrap{height:68px}
  .nav-solid .wrap{height:58px}
}
.nav-links{display:flex;gap:clamp(16px,2.2vw,32px);align-items:center}
.nav-links a{font-size:.79rem;letter-spacing:.05em;font-weight:400;position:relative;padding:4px 0}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--coral);transition:width .4s var(--ease)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{border:1px solid rgba(243,238,230,.5);border-radius:100px;padding:8px 18px !important;transition:background .4s,color .4s,border-color .4s}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--coral-deep);color:var(--cream);border-color:var(--coral-deep)}
.nav-toggle{display:none;background:none;border:0;color:var(--cream);font-size:1.4rem;cursor:pointer}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-weight:400;font-size:.85rem;letter-spacing:.03em;
  padding:13px 27px;border-radius:100px;cursor:pointer;
  transition:transform .4s var(--ease),background .4s,color .4s,border-color .4s;
}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--cream);color:var(--mahogany)}
.btn-outline{border:1px solid rgba(243,238,230,.45);color:var(--cream)}
.cream-bg .btn-solid{background:var(--mahogany);color:var(--cream)}
.cream-bg .btn-outline{border-color:rgba(86,2,22,.4);color:var(--mahogany)}

/* every button turns coral on hover, whatever ground it sits on */
.btn-solid:hover,
.btn-outline:hover,
.cream-bg .btn-solid:hover,
.cream-bg .btn-outline:hover{
  background:var(--coral-deep);
  border-color:var(--coral-deep);
  color:var(--cream);
}
.arrow{transition:transform .4s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------- Hero ---------- */
.hero{padding:clamp(50px,7vw,88px) 0 clamp(26px,4vw,48px)}
.hero .display{max-width:16ch}
/* the line under every page title, set in the bold display cut, in coral */
.hero-sub{
  margin-top:1.5rem;max-width:40ch;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.12rem,1.7vw,1.38rem);line-height:1.42;letter-spacing:.004em;
  color:var(--coral);
}
.cream-bg .hero-sub{color:var(--coral-deep)}

/* Black Mango bold, where a line needs the display cut on its own */
.mango-bold{font-family:var(--display);font-weight:700;letter-spacing:.004em}
.hero-actions{margin-top:2.2rem;display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ============================================================
   THE COVER — full screen, content anchored low, drawing behind
   ============================================================ */
.cover{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(34px,6vw,74px) 0 0;
  overflow:hidden;
  background:var(--mahogany);
}
/* the footage fills the frame; the type sits over the top of it */
.cover-media{position:absolute;inset:0;z-index:0}
.cover-media video,.cover-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;
}
.cover::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(86,2,22,.92) 0%, rgba(86,2,22,.80) 34%, rgba(86,2,22,.30) 68%, rgba(86,2,22,.55) 100%),
    linear-gradient(90deg, rgba(86,2,22,.78) 0%, rgba(86,2,22,.30) 46%, transparent 78%);
}
.cover .wrap{position:relative;z-index:3;width:100%}

/* The line drawing along the foot of the cover. It is masked at the top
   so the roofline dissolves into the mahogany rather than sitting in a box. */
.cover-art{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  height:min(50svh,440px);overflow:hidden;pointer-events:none;
}
.cover-art img{
  width:100%;height:100%;object-fit:cover;object-position:center 38%;
  display:block;opacity:.62;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 26%,#000 62%);
          mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 26%,#000 62%);
}
@media(max-width:760px){
  .cover-art{height:min(38svh,300px)}
  .cover-art img{opacity:.5}
}

/* Marker for the footage that is not shot yet — delete once the file is in */
.slot-marker{
  position:absolute;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:3;
  border:1px dashed rgba(243,238,230,.4);border-radius:3px;
  padding:10px 14px;max-width:250px;background:rgba(86,2,22,.55);
  font-size:.72rem;line-height:1.5;opacity:.8;
}
.slot-marker b{
  display:block;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  font-size:.6rem;color:var(--coral);margin-bottom:.35rem;
}

.cover-eyebrow{
  font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;
  opacity:.7;margin:0 0 clamp(20px,3.5vw,34px);
}
/* the real artwork, so the wordmark is always the true logo */
.cover-logo{
  width:clamp(250px,44vw,560px);height:auto;margin:0;
}
.cover-word{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.9rem,8.4vw,6.2rem);line-height:.94;letter-spacing:.005em;
  margin:0;max-width:none;
}
/* the board's sub heading, exactly as drawn — bold, coral, under the wordmark */
.cover-sub{
  font-family:var(--display);font-weight:700;color:var(--coral);
  font-size:clamp(1.05rem,2.4vw,1.8rem);line-height:1.2;letter-spacing:.008em;
  margin:.28rem 0 0 .1em;max-width:none;
}
/* The cover runs the board's two tiers back to back.
   Statement in Black Mango regular, the line under it in the bold cut. */
/* Both cover lines hold to a single line at every width, so the type
   scales with the viewport rather than wrapping. */
.cover-tagline{
  font-family:var(--display);font-weight:400;
  font-size:clamp(.92rem,3.9vw,1.9rem);line-height:1.26;
  margin:clamp(30px,5vw,52px) 0 0;max-width:none;white-space:nowrap;
}
.cover-warm{
  font-family:var(--display);font-weight:700;
  font-size:clamp(.62rem,2.6vw,1.24rem);line-height:1.4;letter-spacing:.006em;
  opacity:.86;margin:clamp(12px,1.8vw,18px) 0 0;max-width:none;white-space:nowrap;
}
.cover-warm.coral{opacity:1}  /* coral needs no dimming */
.cover-actions{margin-top:clamp(26px,4vw,40px);display:flex;gap:12px;flex-wrap:wrap}
.scroll-cue{
  position:absolute;left:clamp(22px,5vw,60px);bottom:clamp(26px,4vw,44px);z-index:2;
  font-family:var(--italic);font-style:italic;font-size:.82rem;opacity:.5;
}
.scroll-cue::after{
  content:'';display:block;width:1px;height:32px;margin:9px 0 0 2px;
  background:linear-gradient(var(--coral),transparent);
  animation:drop 2.8s var(--ease) infinite;
}
@keyframes drop{0%{transform:scaleY(.25);opacity:0}45%{opacity:1}100%{transform:scaleY(1);opacity:0}}
@media(max-width:700px){.cover{min-height:92svh}}

/* ============================================================
   PILLARS — full-width rows, alternating, cream sweeps across
   ============================================================ */
.pillars{border-top:1px solid var(--line)}
.pillar{
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:clamp(20px,3vw,30px) clamp(18px,2.4vw,28px);
  border-bottom:1px solid var(--line);overflow:hidden;cursor:default;
}
.pillar::before{
  content:'';position:absolute;inset:0;background:var(--cream);
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);z-index:0;
}
.pillar:hover::before{transform:scaleX(1)}
.pillar > *{position:relative;z-index:1}
.pillar h3{
  font-size:clamp(1.5rem,3.6vw,2.6rem);margin:0;
  transition:color .45s var(--ease),transform .45s var(--ease);
}
.pillar p{
  font-size:.92rem;max-width:46ch;margin:0;color:var(--coral);opacity:.92;
  transition:color .45s var(--ease),opacity .45s var(--ease);
}
.pillar:hover h3{color:var(--mahogany);transform:translateX(6px)}
.pillar:hover p{color:var(--mahogany);opacity:.85}
.pillar:nth-child(even){align-items:flex-end;text-align:right}
.pillar:nth-child(even)::before{transform-origin:right}
.pillar:nth-child(even):hover h3{transform:translateX(-6px)}
@media(max-width:640px){
  .pillar:nth-child(even){align-items:flex-start;text-align:left}
  .pillar:nth-child(even)::before{transform-origin:left}
  .pillar:nth-child(even):hover h3{transform:translateX(6px)}
}

/* the line that closes the pillars */
.after-pillars{
  font-family:var(--italic);font-style:italic;
  font-size:clamp(1.02rem,1.6vw,1.24rem);line-height:1.6;
  color:var(--coral);max-width:56ch;
  margin:clamp(28px,4vw,44px) 0 0;
}

/* ============================================================
   PHILOSOPHY — lifted from the proposal, unchanged
   ============================================================ */
.philosophy{text-align:center;padding:clamp(70px,11vw,140px) 0}
.philosophy .narrow{max-width:940px;margin:0 auto}
/* the global paragraph width would otherwise pin these left */
.philosophy p{max-width:none;margin-left:auto;margin-right:auto}
.center p{margin-left:auto;margin-right:auto}
.kalo-mark{
  font-family:var(--greek);
  font-size:clamp(90px,18vw,220px);
  font-weight:300;font-style:italic;
  line-height:.8;margin:0 0 10px;
  color:var(--cream);
}
/* each letter rises into place, then the ó keeps breathing */
.kalo-mark .kl{
  display:inline-block;
  /* every letter, ó included, takes the mark's own face */
  font-family:inherit;font-style:inherit;font-weight:inherit;color:inherit;
  opacity:0;transform:translateY(.22em);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
}
.kalo-mark.in .kl{opacity:1;transform:none}
.kalo-mark.in .kl:nth-child(1){transition-delay:0ms}
.kalo-mark.in .kl:nth-child(2){transition-delay:130ms}
.kalo-mark.in .kl:nth-child(3){transition-delay:260ms}
.kalo-mark.in .kl:nth-child(4){transition-delay:420ms}
.kalo-mark.in .kl:nth-child(4){animation:breathe 6s ease-in-out 1.6s infinite}
@keyframes breathe{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-.055em)}
}
@media(prefers-reduced-motion:reduce){
  .kalo-mark .kl{opacity:1;transform:none;transition:none;animation:none}
}
.philosophy .gloss{
  font-family:var(--cursive);font-style:normal;font-weight:400;
  font-size:17px;letter-spacing:.03em;line-height:1.5;
  color:var(--coral);margin:0 0 34px;
}
.philosophy .gloss b{
  font-family:inherit;font-style:inherit;font-weight:400;
  font-size:.82em;letter-spacing:.01em;opacity:.8;
}
.philosophy .big{
  font-family:var(--display);font-style:normal;font-weight:400;
  font-size:clamp(15px,2.5vw,36px);letter-spacing:-.004em;
  max-width:none;white-space:nowrap;margin:0 auto;
}

/* ============================================================
   EDITORIAL SPREAD — asymmetric, numbered, magazine-like
   ============================================================ */
.spread{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(20px,4vw,64px);align-items:start;
}
.spread-num{
  font-family:var(--italic);font-style:italic;color:var(--coral);
  font-size:1rem;padding-top:.5rem;white-space:nowrap;opacity:.8;
}
.spread-body{max-width:none}
.spread-lede{
  font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.22;
  max-width:none;
}
.columns{column-count:2;column-gap:clamp(24px,3vw,44px);margin-top:1.4rem}
.columns p{max-width:none;margin-bottom:1rem;font-size:.95rem;opacity:.78}
@media(max-width:820px){
  .spread{grid-template-columns:1fr}
  .spread-num{padding-top:0}
  .columns{column-count:1}
}

/* ---------- Media ---------- */
.art{width:100%;display:block}
.art-full{width:100vw;margin-left:calc(50% - 50vw)}
.art-video{width:100%;display:block;background:var(--mahogany)}
.media-frame{position:relative;overflow:hidden}
.caption{
  font-family:var(--italic);font-style:italic;font-size:.86rem;opacity:.6;
  margin-top:12px;text-align:center;
}

/* ---------- Photo slots ---------- */
.photo{
  position:relative;border:1px dashed rgba(243,238,230,.28);border-radius:3px;
  background:rgba(243,238,230,.035);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:26px;min-height:280px;overflow:hidden;
}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo .ph{max-width:26ch}
.photo .ph b{
  display:block;font-family:var(--sans);font-weight:500;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--coral);margin-bottom:.6rem;
}
.photo .ph span{font-family:var(--display);font-size:.9rem;opacity:.66;line-height:1.55}
.photo-tall{min-height:420px}
.photo-wide{min-height:340px}
.cream-bg .photo{border-color:rgba(86,2,22,.25);background:rgba(86,2,22,.03)}

/* ---------- Grids ---------- */
.grid{display:grid;gap:clamp(18px,2.4vw,32px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
/* deliberately uneven, so nothing reads as a template */
.grid-offset{grid-template-columns:1.15fr .85fr;align-items:start}
.grid-offset > *:nth-child(2){margin-top:clamp(20px,5vw,64px)}

/* ---------- Cards ---------- */
.card{
  border:1px solid var(--line);border-radius:3px;
  padding:clamp(20px,2.4vw,30px);
  background:rgba(243,238,230,.035);
  transition:transform .5s var(--ease),border-color .5s,background .5s;
}
.card:hover{transform:translateY(-3px);border-color:rgba(216,77,77,.55);background:rgba(243,238,230,.06)}
/* Numerals in the script. Set larger than they would be otherwise and
   with a little tracking, so ii and iii still read as separate strokes. */
.card .num{font-family:var(--cursive);font-weight:400;font-style:normal;letter-spacing:.09em;font-size:1.5rem;line-height:1;color:var(--coral);display:block;margin-bottom:.6rem}
.card h3{margin-bottom:.45rem}
.card p{font-size:.93rem}
.cream-bg .card{border-color:var(--line-dark);background:rgba(86,2,22,.025)}

/* a solid cream card, for sitting on the mahogany */
.card-cream{
  background:var(--cream);color:var(--mahogany);
  border-color:transparent;
}
.card-cream .num{color:var(--coral-deep)}
.card-cream .muted{opacity:.74}
.card-cream:hover{
  background:#fffdf9;border-color:transparent;
  transform:translateY(-3px);
}
/* the coral one, for the line that closes a set */
.card-coral{
  background:var(--coral-deep);color:var(--cream);border-color:transparent;
}
.card-coral .num{color:var(--cream);opacity:.8}
.card-coral .muted{opacity:.92}
.card-coral:hover{
  background:var(--coral);border-color:transparent;transform:translateY(-3px);
}

/* ---------- Audience tiles ---------- */
.who-tile{
  border-top:1px solid var(--line);padding:26px 0 0;
  transition:border-color .5s;
}
.who-tile:hover{border-color:var(--coral)}
.who-tile .k{font-family:var(--italic);font-style:italic;color:var(--coral);font-size:.95rem;display:block;margin-bottom:.5rem}
.who-tile h3{margin-bottom:.5rem}
.who-tile p{font-size:.93rem}

/* ============================================================
   THE VOYAGE — the boat sails down the page, weaving
   between the stages as you scroll
   ============================================================ */
.voyage{position:relative;padding:clamp(56px,8vw,100px) 0;overflow:hidden}
.voyage-track{
  position:relative;
  margin-top:clamp(30px,5vw,58px);
  padding:clamp(30px,5vw,60px) 0 clamp(40px,6vw,80px);
}
.voyage-short{margin-bottom:clamp(18px,3vw,34px)}

/* ============================================================
   THE SKYLINE — drawn, exactly as the proposal does it.
   207 paths fade in in sequence while a coral pen sweeps across.
   ============================================================ */
.banner-break{position:relative;overflow:hidden}
.banner-break-outer{
  width:100vw;margin-left:calc(50% - 50vw);
  display:flex;justify-content:center;
}
.banner-break-frame{
  position:relative;width:100%;
  height:clamp(300px,42vw,700px);
  overflow:hidden; /* so the ferry vanishes at the near bank instead of spilling out */
}
.skyline-svg{display:block;width:100%;height:100%;overflow:visible}
.skyline-svg path{
  fill:none;stroke:var(--cream);stroke-width:2.6;
  opacity:0;transition:opacity .45s ease-out;
}
.banner-break-outer.in .skyline-svg path{opacity:1}
.skyline-pen{
  fill:var(--coral);opacity:0;cx:0px;
  transition:opacity .3s ease, cx 2.6s cubic-bezier(.3,.1,.25,1);
}
.banner-break-outer.in .skyline-pen{opacity:1;cx:2281px}
/* The CityCat runs upriver on the line of the water, 33 degrees up and to
   the right, shrinking into the distance under the bridge before it fades.
   All 18 ferry paths share one origin so the hull stays rigid. */
.skyline-svg .ferry{
  transform-box:view-box;
  transform-origin:924px 858px;
  will-change:transform,opacity;
}
.banner-break-outer.in .skyline-svg .ferry{
  animation:ferry-upriver 15s linear 2.9s infinite;
}
/* Starts and ends exactly where the ferry is drawn, so it simply
   sets off rather than snapping into position when the loop begins. */
@keyframes ferry-upriver{
  0%   {transform:translate(0,0)          scale(1);   opacity:1}
  54%  {transform:translate(202px,-131px) scale(0.87);opacity:1}
  70%  {transform:translate(269px,-174px) scale(0.79);opacity:0}
  71%  {transform:translate(-125px, 81px) scale(1.19);opacity:0}
  84%  {transform:translate(-71px,  46px) scale(1.11);opacity:1}
  100% {transform:translate(0,0)          scale(1);   opacity:1}
}
.banner-break-frame:hover .skyline-svg{transform:scale(1.015);transition:transform .6s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .skyline-svg path{opacity:1;transition:none}
  .skyline-pen{display:none}
  .banner-break-outer.in .skyline-svg .ferry{animation:none;opacity:1}
}

/* ---------- A row of drawings ---------- */
.art-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,26px);margin-top:clamp(28px,4vw,48px);
}
.art-row figure{margin:0}
.art-row img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:3px;background:var(--mahogany);display:block;
}
.art-row .caption{margin-top:10px;text-align:left}
@media(max-width:760px){
  .art-row{grid-template-columns:1fr;gap:22px}
  .art-row img{aspect-ratio:16/10}
}

/* ---------- Bayside, drawn from above ---------- */
.bayside-art{
  margin:clamp(28px,4vw,52px) auto 0;
  max-width:min(760px,88%);
}
.bayside-art img{width:100%;display:block;border-radius:3px}
.bayside-art .caption{margin-top:14px}

/* ---------- Recent finds — coral panels, mahogany line work ---------- */
.finds{align-items:start}
.find{margin:0}
.find-img{
  overflow:hidden;border-radius:3px;background:var(--mahogany);
  aspect-ratio:3/4;
}
.find-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease);
}
.find:hover .find-img img{transform:scale(1.035)}
.find figcaption{padding:1.1rem 0 0}
.find figcaption .tag{
  display:inline-block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--coral);margin-bottom:.5rem;
}
.find figcaption h3{margin-bottom:.35rem}
.find figcaption p{font-size:.9rem;max-width:34ch}
@media(max-width:560px){.find-img{aspect-ratio:4/3}}

/* ---------- Editorial feature: one column of type, one image ---------- */
.feature{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,5vw,80px);align-items:center;
}
.feature-flip .photo{order:-1}
.feature-text{max-width:44ch}
@media(max-width:860px){
  .feature{grid-template-columns:1fr;gap:clamp(22px,4vw,36px)}
  .feature-flip .photo{order:0}
}
/* the course it sails */
.voyage-line{
  position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;
  background:linear-gradient(180deg,transparent,rgba(243,238,230,.20) 6%,rgba(243,238,230,.20) 92%,transparent);
}
.voyage-boat{
  position:absolute;left:50%;top:0;z-index:4;
  width:clamp(64px,7.5vw,104px);margin-left:calc(clamp(64px,7.5vw,104px) / -2);
  will-change:transform;
}
.voyage-boat img{width:100%}
/* the wake it leaves behind */
.voyage-wake{
  position:absolute;left:50%;top:0;width:1px;margin-left:-.5px;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(232,131,111,.55));
  transform-origin:top;height:0;
}

.leg{
  position:relative;z-index:3;
  width:calc(50% - clamp(34px,5vw,64px));
  padding:clamp(14px,2vw,22px) 0;
}
.leg + .leg{margin-top:clamp(10px,2vw,26px)}
.leg-l{margin-right:auto;text-align:right}
.leg-r{margin-left:auto;text-align:left}
/* the little mark where each stage meets the course */
.leg::after{
  content:'';position:absolute;top:calc(clamp(14px,2vw,22px) + .6em);
  width:6px;height:6px;border-radius:50%;background:var(--coral);opacity:.75;
}
.leg-l::after{right:calc(clamp(34px,5vw,64px) * -1 - 3px)}
.leg-r::after{left:calc(clamp(34px,5vw,64px) * -1 - 3px)}
.leg-i{
  display:block;font-family:var(--cursive);font-weight:400;font-style:normal;letter-spacing:.09em;
  color:var(--coral);font-size:1.38rem;line-height:1;margin-bottom:.3rem;opacity:1;
}
.leg h3{margin-bottom:.3rem}
.leg p{font-size:.92rem;opacity:.76;max-width:38ch}
.leg-l p{margin-left:auto}

@media(max-width:760px){
  .voyage-line,.voyage-wake{left:16px;margin-left:0}
  .voyage-boat{left:16px;margin-left:calc(clamp(52px,14vw,72px) / -2);width:clamp(52px,14vw,72px)}
  .leg{width:auto;margin:0 0 0 52px;text-align:left}
  .leg-l{text-align:left;margin-right:0}
  .leg-l p,.leg-r p{margin-left:0}
  .leg-l::after,.leg-r::after{left:-39px;right:auto}
}

/* ---------- Process ---------- */
.steps{border-top:1px solid var(--line)}
.step{
  display:grid;grid-template-columns:56px 1fr;gap:22px;align-items:start;
  padding:clamp(17px,2vw,24px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .45s var(--ease),border-color .45s;
}
.step:hover{padding-left:10px;border-color:rgba(216,77,77,.4)}
.step .idx{font-family:var(--cursive);font-weight:400;font-style:normal;letter-spacing:.09em;font-size:1.55rem;line-height:1;color:var(--coral);padding-top:0}
.step h3{margin-bottom:.2rem}
.step p{font-size:.93rem;opacity:.76}

/* ---------- Places ---------- */
.place{border-top:1px solid var(--line);padding:clamp(22px,3vw,34px) 0;transition:border-color .5s}
.place:hover{border-color:rgba(216,77,77,.45)}
.place .tag{display:inline-block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--coral);margin-bottom:.7rem}
.place h3{margin-bottom:.5rem}
.suburbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.1rem}
/* solid coral pills, cream type, on both grounds */
.suburbs span{
  font-family:var(--display);font-weight:700;font-size:.88rem;letter-spacing:.05em;
  padding:6px 15px;border-radius:100px;
  background:var(--coral-deep);color:var(--cream);border:1px solid transparent;opacity:1;
}
.suburbs-cream span{background:var(--coral-deep);color:var(--cream);border-color:transparent}
.metrics{display:flex;gap:clamp(26px,4vw,44px);margin-top:1.2rem;flex-wrap:wrap}
.metrics div{min-width:132px}
.metrics .n{font-family:var(--display);font-weight:700;font-size:1.36rem;display:block;line-height:1;color:var(--coral)}
.metrics .l{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6;display:block;margin-top:.45rem}
.placeholder{color:var(--coral)}

/* dated attribution under each market, quiet on either ground */
.source-note{
  font-size:.7rem;letter-spacing:.02em;line-height:1.6;
  margin-top:clamp(22px,3vw,34px);max-width:58ch;opacity:.5;
}

/* ---------- The numbers ---------- */
.stats-band{
  position:relative;overflow:hidden;
  background:var(--mahogany-soft);
}
/* a slow coral light drifting behind the figures */
.stats-glow{
  position:absolute;top:50%;left:50%;z-index:0;pointer-events:none;
  width:min(120vw,1100px);aspect-ratio:2/1;
  margin:-25% 0 0 -50%;
  background:radial-gradient(ellipse at center, rgba(216,77,77,.30), rgba(216,77,77,.10) 42%, transparent 70%);
  filter:blur(46px);opacity:.85;
  animation:glow-drift 22s ease-in-out infinite;
}
@keyframes glow-drift{
  0%,100%{transform:translate3d(-6%,-4%,0) scale(1)}
  50%    {transform:translate3d(6%,4%,0)  scale(1.12)}
}

.stats{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(18px,2.4vw,30px);text-align:center;
}
/* each column arrives a beat after the one before it */
.stats .stat{
  opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease) var(--d,0ms),
             transform .9s var(--ease) var(--d,0ms);
}
.stats .stat.in{opacity:1;transform:none}

/* The figure runs up out of focus and sharpens as it settles, rather than
   snapping to a bounce. min-width is set in script from the final value so
   the digits never shift the column while they climb. */
.stat b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1;letter-spacing:.004em;
  font-variant-numeric:tabular-nums;
  transition:filter .75s var(--ease),opacity .75s var(--ease),transform .45s var(--ease);
}
.stat b.counting{filter:blur(5px);opacity:.5}
.stat b.landed{filter:blur(0);opacity:1}

/* the rule draws out from the middle once the figure has come to rest */
.stat-rule{
  display:block;width:44px;height:1px;background:var(--coral);
  margin:17px auto;transform:scaleX(0);transform-origin:center;
  transition:transform 1s var(--ease) calc(var(--d,0ms) + 1500ms);
}
.stat.in .stat-rule{transform:scaleX(1)}

.stat-label{
  display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--coral);margin-bottom:.5rem;
}
.stat-note{
  display:block;font-size:.84rem;line-height:1.5;opacity:.68;
  max-width:20ch;margin-inline:auto;
}
.stat:hover b{transform:translateY(-3px)}

@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr);gap:40px 20px}}
@media(max-width:460px){.stats{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .stats-glow{animation:none}
  .stats .stat{opacity:1;transform:none;transition:none}
  .stat-rule{transform:scaleX(1);transition:none}
  .stat b.landed{animation:none}
}

/* ---------- Pull quote ---------- */
.pull{
  font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.85rem);line-height:1.42;
  max-width:24ch;
}
.pull-by{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-top:1.2rem}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 0;
  font-family:var(--sans);font-weight:500;font-size:clamp(1.1rem,1.7vw,1.32rem);
  line-height:1.35;letter-spacing:.004em;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{color:var(--coral);font-weight:300;transition:transform .4s;flex:none}
.faq details[open] summary .plus{transform:rotate(45deg)}
/* the answer under a question always sits in coral */
.faq .answer{padding:0 0 24px;max-width:64ch;font-size:1rem;line-height:1.65;color:var(--coral);opacity:1}
.cream-bg .faq .answer{color:var(--coral-deep)}

/* Calendly sits in a framed panel so it reads as part of the page
   rather than a widget dropped on top of it */
.calendly-inline-widget{
  border:1px solid var(--line);border-radius:4px;overflow:hidden;
  background:rgba(243,238,230,.03);
}
@media(max-width:860px){
  .calendly-inline-widget{height:640px !important}
}

/* what the new client form asks for, on the Begin page */
.start-list{list-style:none;margin:0 0 1.7rem;padding:0;display:grid;gap:11px}
.start-list li{
  position:relative;padding-left:24px;font-size:.95rem;line-height:1.55;opacity:.82;
}
.start-list li::before{
  content:'ó';position:absolute;left:0;top:-1px;
  font-family:var(--greek);font-style:italic;color:var(--coral);opacity:.9;
}

/* ---------- Form ---------- */
.form{display:grid;gap:17px;max-width:620px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:.95rem;font-weight:400;color:var(--cream);
  background:rgba(243,238,230,.05);
  border:1px solid var(--line);border-radius:3px;padding:13px 15px;
  transition:border-color .4s,background .4s;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(243,238,230,.38)}
.field select option{background:var(--mahogany);color:var(--cream)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--coral);background:rgba(243,238,230,.08)}
.field textarea{min-height:120px;resize:vertical}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:17px}

/* ---------- Embed slot ---------- */
.embed-slot{
  border:1px dashed rgba(243,238,230,.28);border-radius:4px;
  min-height:480px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:36px;background:rgba(243,238,230,.035);
}
.embed-slot .inner{max-width:400px}
.embed-slot .badge{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--coral);margin-bottom:.9rem}

/* ---------- CTA ---------- */
/* The closing band reads as one block: title, then the line under it,
   then the button, each given its own breathing room. */
.cta-band{text-align:center;padding:clamp(6px,1.5vw,18px) 0}
.cta-band .display,
.cta-band h2{max-width:20ch;margin:0 auto;line-height:1.16}
.cta-band > p{margin-top:clamp(18px,2.4vw,28px) !important;margin-bottom:0 !important}
.cta-band > div{margin-top:clamp(28px,3.6vw,44px) !important}

/* ---------- Footer ---------- */
.footer{background:var(--mahogany-soft);padding:clamp(50px,7vw,80px) 0 34px;border-top:1px solid var(--line);position:relative;z-index:2}
.footer .logo{width:240px;max-width:64%;margin-bottom:2rem}
.footer-grid{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;align-items:flex-start}
.footer-links{display:flex;gap:52px;flex-wrap:wrap}
.footer-col h4{font-family:var(--sans);font-weight:500;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin-bottom:.9rem}
.footer-col a{display:block;font-size:.9rem;padding:4px 0;opacity:.85;transition:color .4s,opacity .4s}
.footer-col a:hover{opacity:1;color:var(--coral)}
.footer-base{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.74rem;opacity:.55}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-offset{grid-template-columns:1fr}
  .grid-offset > *:nth-child(2){margin-top:0}
  .nav-links{
    position:fixed;inset:72px 0 auto 0;background:var(--mahogany);
    flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--line);
    transform:translateY(-140%);transition:transform .45s var(--ease);
  }
  .nav-links.open{transform:none}
  .nav-links a{padding:13px 28px;width:100%}
  .nav-toggle{display:block}
  .two-col{grid-template-columns:1fr}
  .watermark::before{font-size:200px;opacity:.028}
}
@media(max-width:560px){
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr}
  .footer-links{gap:32px}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .ripple span{animation:none}
  html{scroll-behavior:auto}
}