/* ============================================================
   My Billboard — Landowner pitch
   Aesthetic: institutional prospectus. Fraunces display, Archivo
   body, navy + gold on warm paper. Hairlines, not shadows.
   ============================================================ */
:root{
  --navy-900:#0B1B2D;
  --navy-800:#102439;
  --navy-700:#16304F;
  --navy-500:#2A4A72;
  --navy-300:#8FA6C2;
  --gold:#B8912F;
  --gold-300:#D9B75C;
  --gold-100:#EEDFB4;
  --paper:#F5F2EB;
  --paper-2:#EBE6DA;
  --ink:#14202E;
  --muted:#5C6673;
  --muted-on-navy:#A9B8CB;
  --line:rgba(20,32,46,.15);
  --line-navy:rgba(255,255,255,.16);

  /* Fraunces, not a Didone: keeps the prospectus feel without hairlines
     that disappear at anything under display size. SOFT/WONK dialled to 0
     so it reads sober rather than quirky. */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Archivo","Helvetica Neue",sans-serif;

  --gut:clamp(20px,5vw,64px);
  --maxw:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16.5px,1.08vw,18.5px);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Paper grain — atmosphere without imagery */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
/* height:auto so the width/height attributes (which reserve layout space and
   stop the page jumping as photos load) don't defeat the aspect-ratio crops. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

/* ---------- type ---------- */
h1,h2,h3,h4,.d{font-family:var(--display);font-weight:600;margin:0;font-variation-settings:"SOFT" 0,"WONK" 0}

/* The large figures — $678,906, 18 months, 50/50 — carry the argument, so
   keep them sober: SOFT/WONK at 0 and a solid 600 weight. */
.band-item b,.steps li::before{
  font-variation-settings:"SOFT" 0,"WONK" 0;
  font-weight:600;
}
h1{font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:1.02;letter-spacing:-.022em}
h2{font-size:clamp(2rem,3.9vw,3.45rem);line-height:1.06;letter-spacing:-.018em}
h3{font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:1.2;letter-spacing:-.01em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--body);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin:0 0 1.4rem;display:flex;align-items:center;gap:.85rem;
}
.eyebrow::after{content:"";height:1px;flex:1;max-width:88px;background:currentColor;opacity:.45}
.on-navy .eyebrow{color:var(--gold-300)}

.lede{font-size:clamp(1.1rem,1.55vw,1.35rem);line-height:1.55;color:var(--muted);max-width:60ch}
.on-navy .lede{color:var(--muted-on-navy)}

/* ---------- sections ---------- */
section{position:relative;z-index:2;padding-block:clamp(68px,8.5vw,140px)}
.on-navy{background:var(--navy-900);color:#F2F5F8}
.on-navy h1,.on-navy h2,.on-navy h3{color:#fff}
.on-paper2{background:var(--paper-2)}

/* ---------- nav ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s;
}
header.stuck{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;gap:2rem;height:70px}
.brand{font-family:var(--display);font-size:1.32rem;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.brand b{font-weight:600}
.brand i{font-style:italic;color:var(--gold)}
.nav ul{list-style:none;display:flex;gap:1.9rem;margin:0 0 0 auto;padding:0}
.nav a{
  text-decoration:none;font-size:.845rem;font-weight:500;letter-spacing:.01em;color:var(--muted);
  padding:.3rem 0;position:relative;white-space:nowrap;transition:color .2s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--gold);transition:right .32s var(--ease-out);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
@media(max-width:940px){.nav ul{display:none}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--body);font-size:.875rem;font-weight:600;letter-spacing:.02em;
  padding:14px 26px;min-height:48px;border-radius:2px;text-decoration:none;
  border:1px solid var(--navy-900);background:var(--navy-900);color:#fff;cursor:pointer;
  transition:background .24s,color .24s,border-color .24s,transform .24s var(--ease-out);
}
.btn:hover{background:var(--gold);border-color:var(--gold);color:var(--navy-900);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--navy-900)}
.btn--ghost:hover{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.on-navy .btn{background:var(--gold);border-color:var(--gold);color:var(--navy-900)}
.on-navy .btn:hover{background:#fff;border-color:#fff}
.on-navy .btn--ghost{background:transparent;color:#fff;border-color:var(--line-navy)}
.on-navy .btn--ghost:hover{background:#fff;color:var(--navy-900);border-color:#fff}
.nav .btn{margin-left:0;padding:11px 20px;min-height:42px;font-size:.82rem}
@media(max-width:520px){.nav .btn{display:none}}

/* ---------- hero ---------- */
.hero{
  background:var(--navy-900);color:#fff;
  padding-block:clamp(72px,11vw,152px) clamp(52px,6vw,88px);
  overflow:hidden;
}
.hero .wrap{position:relative}
/* faint engraved rules, like a certificate */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 118px,rgba(255,255,255,.028) 118px 119px);
}
.hero h1{color:#fff;max-width:20ch}
.hero h1 em{font-style:italic;color:var(--gold-300)}
.hero .lede{margin-top:1.9rem;font-size:clamp(1.12rem,1.7vw,1.45rem);color:#C6D3E2;max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.6rem}

/* three-part promise */
.promise{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--line-navy);
}
.promise div{padding:1.9rem 1.6rem 0;border-left:1px solid var(--line-navy)}
.promise div:first-child{border-left:0;padding-left:0}
.promise span{
  display:block;font-family:var(--body);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-300);margin-bottom:.7rem;
}
.promise strong{font-family:var(--display);font-size:clamp(1.25rem,2.1vw,1.7rem);font-weight:400;line-height:1.15;display:block}
@media(max-width:760px){
  .promise{grid-template-columns:1fr}
  .promise div{border-left:0;border-top:1px solid var(--line-navy);padding:1.35rem 0 0}
  .promise div:first-child{border-top:0}
}

/* headline stat band */
.band{
  background:var(--navy-800);border-top:1px solid var(--line-navy);
  padding-block:clamp(30px,3.4vw,44px);position:relative;z-index:2;
}
.band .wrap{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);align-items:baseline;justify-content:space-between}
.band-item{display:flex;align-items:baseline;gap:.85rem}
.band-item b{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.5rem);font-weight:500;color:var(--gold-300);line-height:1}
.band-item span{font-size:.83rem;color:var(--muted-on-navy);max-width:19ch;line-height:1.35}

/* ---------- generic grids ---------- */
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,6vw,88px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:2.2rem}}

/* numbered list */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{
  counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:1.5rem;
  padding:1.5rem 0;border-top:1px solid var(--line);align-items:baseline;
}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--display);font-size:1.32rem;color:var(--gold);min-width:2.1ch;font-variant-numeric:tabular-nums;
}
.on-navy .steps li{border-color:var(--line-navy)}
.on-navy .steps li:last-child{border-bottom-color:var(--line-navy)}

/* tick list */
.ticks{list-style:none;margin:0;padding:0}
.ticks li{position:relative;padding:.62rem 0 .62rem 2rem;color:var(--muted)}
.on-navy .ticks li{color:#D2DCE8}
.ticks li::before{
  content:"";position:absolute;left:0;top:1.12em;width:11px;height:6px;
  border-left:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);
  transform:rotate(-45deg);
}

/* ---------- static vs digital ---------- */

.arrow{display:grid;place-items:center;color:var(--gold);font-size:1.5rem}
.same{margin-top:1px;background:var(--navy-900);color:#fff;text-align:center;padding:1.05rem;
  font-size:.82rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
@media(max-width:820px){
  
  .arrow{transform:rotate(90deg);padding:.2rem 0}
}

/* ---------- case study ---------- */

/* ---------- deal timeline ---------- */

/* ---------- phases / donuts ---------- */

/* ---------- table ---------- */

.callout{
  margin-top:2.2rem;padding:clamp(20px,2.4vw,30px);
  border-left:2px solid var(--gold);background:rgba(184,145,47,.07);
}
p.callout{margin-bottom:0;font-size:.97rem}
.callout strong{font-weight:600}

/* ---------- faq ---------- */

@keyframes slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- closing ---------- */
.closer{text-align:center}
.closer h2{max-width:24ch;margin-inline:auto}
.closer .lede{margin-inline:auto;margin-top:1.5rem;text-align:center}
.closer .hero-cta{justify-content:center}
.sig{margin-top:clamp(48px,6vw,76px);padding-top:2.2rem;border-top:1px solid var(--line-navy);
  display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:baseline;justify-content:center;font-size:.92rem}
.sig b{font-family:var(--display);font-size:1.28rem;font-weight:500;color:#fff}
.sig span{color:var(--muted-on-navy)}
.sig a{color:var(--gold-300);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .2s;padding-block:.5rem;display:inline-block}
.sig a:hover{border-bottom-color:currentColor}

footer{background:var(--navy-900);color:var(--muted-on-navy);
  border-top:1px solid var(--line-navy);padding-block:2.2rem;position:relative;z-index:2}
footer .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.8rem}
footer a{color:inherit;text-decoration:none;padding-block:.5rem;display:inline-block}
footer a:hover{color:#fff}

/* ---------------------------------------------------------
   LEGIBILITY PASS
   The serif is reserved for the big moments — h1, h2 and the
   large figures — and everything smaller is set in Archivo,
   which is built for reading. Placed last so it wins the cascade.
   --------------------------------------------------------- */
h3,
.promise strong,
.sig b{
  font-family:var(--body);
  font-weight:600;
  letter-spacing:-.005em;
  font-variation-settings:normal;
}
h3{font-size:clamp(1.1rem,1.45vw,1.3rem);line-height:1.32}

.promise strong{font-size:clamp(1rem,1.3vw,1.14rem);line-height:1.45}

.sig b{font-size:1.04rem;line-height:1.35}

/* The headline figures win their weight back — these later rules would
   otherwise pull them to 500. */
.band-item b{font-weight:600}

/* Body copy carries more of the page now, so give it a little more room.
   Raised on the root so the fluid scale is preserved rather than pinned. */
.ticks li{line-height:1.6}

/* ---------- options (sell / stay / convert) ---------- */

/* ---------- hero aside: route for sites with no billboard ---------- */

/* ---------- enquiry form ---------- */
.enquiry{margin-top:clamp(48px,6vw,80px);border:1px solid var(--line);background:rgba(255,255,255,.45);padding:clamp(24px,3.4vw,48px)}
.enquiry h3{margin-bottom:.4rem}
.enquiry .intro{color:var(--muted);margin-bottom:2rem;max-width:62ch}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem 2.2rem}
.field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.field.full{grid-column:1/-1}
.field label,.field legend{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.field label small,.field legend small{font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--muted)}
.field input{
  font:inherit;font-size:1rem;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid rgba(20,32,46,.35);border-radius:0;padding:.55rem 0;min-height:44px;width:100%;
}
.field input:focus{outline:none;border-bottom-color:var(--gold);box-shadow:0 1px 0 var(--gold)}
.field .hint{font-size:.82rem;color:var(--muted);margin:0;line-height:1.5}
fieldset.field{border:0;margin:0;padding:0}
.choice{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.25rem}
.choice label{
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;
  font-size:.92rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);
  border:1px solid var(--line);padding:.7rem 1rem;min-height:44px;border-radius:2px;background:var(--paper);
}
.choice label:has(input:checked){border-color:var(--navy-900);background:var(--gold-100)}
.field .choice input{accent-color:var(--navy-900);margin:0;width:1.05rem;height:1.05rem;min-height:0;padding:0;border:0;flex:none}
.enquiry .submit{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:2.2rem}
.enquiry .submit p{margin:0;font-size:.84rem;color:var(--muted);max-width:52ch}
.enquiry .err{color:#9B2C1F;font-size:.88rem;font-weight:600;margin:1rem 0 0}

/* ---------- audience chooser (home) ----------
   Four doors, one per kind of landowner. 1 → 2 → 4 columns so the
   grid never leaves an orphan tile. */
.chooser{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-navy);border:1px solid var(--line-navy);margin-top:clamp(44px,5.5vw,72px)}
@media(min-width:640px){.chooser{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.chooser{grid-template-columns:repeat(4,1fr)}}
.chooser a{
  display:flex;flex-direction:column;gap:.7rem;min-height:100%;
  background:var(--navy-900);color:#fff;text-decoration:none;
  padding:clamp(24px,2.6vw,36px);transition:background .25s;
}
.chooser a:hover{background:var(--navy-700)}
.chooser .n{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-300)}
.chooser h3{color:#fff}
.chooser p{margin:0;font-size:.94rem;color:var(--muted-on-navy);line-height:1.55}
.chooser .go{margin-top:auto;padding-top:1rem;font-size:.88rem;font-weight:600;color:var(--gold-300)}
.chooser a:hover .go{color:#fff}

/* current page in the cross-page nav */
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{right:0}

/* ---------- reveal ---------- */
.r{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.r.in{opacity:1;transform:none}
.r.d1{transition-delay:.08s}.r.d2{transition-delay:.16s}.r.d3{transition-delay:.24s}.r.d4{transition-delay:.32s}

:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:2px}
.on-navy :focus-visible,.hero :focus-visible{outline-color:var(--gold-300)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:.6rem;z-index:99;background:var(--navy-900);color:#fff;padding:.7rem 1.1rem;border-radius:2px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .r{opacity:1;transform:none}
}
@media print{
  header,.hero-cta,.btn{display:none}
  body::before{display:none}
  .on-navy,.hero,.band,footer{background:#fff!important;color:#000!important}
  .on-navy h1,.on-navy h2,.on-navy h3,.hero h1{color:#000!important}
  section{padding-block:24px;break-inside:avoid}
}

/* ============================================================
   PHOTOGRAPHY PASS
   The site leads with real photography of our own boards
   (Stirling Hwy, Hay St). Pictures carry the argument now, so
   copy stays short and every page ends at the enquiry form.
   ============================================================ */

/* full-bleed photographic hero */
.hero--img{overflow:hidden;padding-block:clamp(108px,15vw,208px) clamp(48px,6vw,84px)}
.hero--img>.bg{position:absolute;inset:0;z-index:0;line-height:0}
.hero--img>.bg img{width:100%;height:100%;object-fit:cover}
.hero--img>.bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(175deg,rgba(11,27,45,.84) 0%,rgba(11,27,45,.58) 42%,rgba(11,27,45,.94) 100%);
}
.hero--img .wrap{position:relative;z-index:2}
.hero--img::after{display:none}          /* no engraved rules over a photograph */
.hero--img .lede{color:#D6E0EC}

figure{margin:0}

/* edge-to-edge photographic band between sections */
.band-img{position:relative;z-index:2;line-height:0}
.band-img img{width:100%;height:clamp(200px,32vw,440px);object-fit:cover}

/* before / after: a static face, then the same idea as a screen */
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,2.2vw,30px);align-items:center;margin-top:clamp(28px,4vw,48px)}
.ba figure{position:relative;line-height:0}
.ba img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ba figcaption{
  position:absolute;left:0;bottom:0;background:var(--navy-900);color:#fff;
  font-family:var(--body);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;padding:.6rem 1rem;line-height:1;
}
.ba .was figcaption{background:#6E7783}
@media(max-width:760px){
  .ba{grid-template-columns:1fr}
  .ba .arrow{transform:rotate(90deg);padding:.3rem 0}
}

/* three-up photographic strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-navy);margin-top:clamp(32px,4.5vw,56px)}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media(max-width:700px){
  .strip{grid-template-columns:1fr 1fr}
  .strip figure:last-child{display:none}
}

/* chooser reduced to four doors and an arrow — no explanatory copy */
.chooser a{gap:.45rem}
.chooser h3{font-size:clamp(1.05rem,1.5vw,1.22rem)}

/* short list of site criteria, set tight */
.crit{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.2rem 2.4rem}
.crit li{position:relative;padding:.6rem 0 .6rem 2rem;color:var(--muted);border-top:1px solid var(--line)}
.on-navy .crit li{color:#D2DCE8;border-top-color:var(--line-navy)}
.crit li::before{
  content:"";position:absolute;left:0;top:1.15em;width:11px;height:6px;
  border-left:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);transform:rotate(-45deg);
}

/* channels: titles only, no descriptions */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin:clamp(24px,3vw,38px) 0 0;padding:0}
.chips li{list-style:none;border:1px solid var(--line-navy);padding:.7rem 1.1rem;font-size:.9rem;color:#D2DCE8}

/* the form is the destination on every page */
.enquiry{background:rgba(255,255,255,.6)}
.enquiry h3{font-size:clamp(1.25rem,2vw,1.6rem)}

/* ghost buttons need a firmer edge when they sit over a photograph */
.hero--img .btn--ghost{border-color:rgba(255,255,255,.5);background:rgba(11,27,45,.28)}
.hero--img .btn--ghost:hover{background:#fff;border-color:#fff;color:var(--navy-900)}

/* visually hidden: keeps the heading order intact for screen readers
   without putting a label on a section the tiles already explain */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}