/* Jireh Swan Property Services
   One palette: navy, gold, cream, ink. All the colour comes from the photographs.
   The UI is the mount, never the artwork. Squared edges, 3px only on small controls. */
:root{
  --navy:#071b2c; --navy-2:#0b2439; --ink:#102536; --cream:#f4efe5; --paper:#fbf8f2;
  --gold:#d7a94d; --gold-ink:#8b6423; --line:#e2d9c6;
  --dim:#9fb0bd; --muted:#5d6a74;
  --serif:"Fraunces",Georgia,serif;
  --sans:"DM Sans",system-ui,-apple-system,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --ease:cubic-bezier(.2,.75,.2,1);
  --swing:cubic-bezier(.62,0,.15,1);
  --gut:clamp(20px,5vw,84px);
  --head:74px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--head) + 16px)}
body{margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.7 var(--sans); font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3{margin:0; font-family:var(--serif); font-weight:600; font-optical-sizing:none; font-variation-settings:"opsz" 144; letter-spacing:-.028em; line-height:1; text-wrap:balance}
h1 em,h2 em{font-weight:400; font-style:italic; color:var(--gold-ink)}
p{margin:0}
:focus-visible{outline:2px solid var(--gold-ink); outline-offset:3px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.skip{position:absolute; left:16px; top:-64px; z-index:60; background:var(--ink); color:#fff; padding:12px 16px}
.skip:focus{top:12px}
.inner{max-width:1280px; margin-inline:auto; padding-inline:var(--gut)}
section{padding-block:clamp(80px,11vw,170px)}

/* mono is the utility voice: labels, numbers, controls */
.eyebrow{font:400 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); display:flex; align-items:center; gap:14px}
.eyebrow::before{content:""; width:30px; height:1px; background:currentColor}
.say{margin-top:22px; color:var(--muted); max-width:52ch; font-size:18px}
.prose{display:grid; gap:18px; color:var(--muted); max-width:60ch}
.btn{display:inline-flex; align-items:center; min-height:54px; padding:0 26px; border-radius:3px; background:var(--gold); color:var(--navy); font:500 11.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; transition:background .3s, transform .3s var(--ease)}
.btn:hover{background:#e6bd63; transform:translateY(-1px)}
.quiet{display:inline-flex; align-items:center; gap:10px; min-height:54px; font:400 11.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--line); padding-inline:2px}
.quiet span{color:var(--gold-ink); transition:transform .3s var(--ease)}
.quiet:hover span{transform:translate(3px,3px)}
.acts{margin-top:36px; display:flex; align-items:center; gap:22px; flex-wrap:wrap}

/* ---------- header ---------- */
.nav{position:sticky; top:0; z-index:40; height:var(--head); display:flex; align-items:center; gap:22px; padding-inline:var(--gut); background:rgba(251,248,242,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:11px; font:500 13px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase}
.brand small{display:block; font:400 8px/1.9 var(--mono); letter-spacing:.24em; color:var(--muted)}
.nav nav{margin-left:auto; display:flex; gap:28px; font:400 11.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.nav nav a{position:relative; padding-block:8px}
.nav nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold-ink); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.nav nav a:hover::after,.nav nav a[aria-current]::after{transform:scaleX(1)}
.cta{border:1px solid var(--gold-ink); border-radius:3px; padding:13px 18px; font:400 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; transition:background .3s,color .3s}
.cta:hover{background:var(--gold-ink); color:var(--paper)}
.burger{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:3px; position:relative}
.burger span:not(.sr){position:absolute; left:12px; right:12px; height:1.5px; background:var(--ink); transition:transform .3s var(--ease)}
.burger span:nth-child(1){top:17px} .burger span:nth-child(2){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--navy); color:var(--cream); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(32px,5vw,80px); align-items:center; padding:clamp(60px,8vw,124px) var(--gut) clamp(68px,9vw,134px); overflow:hidden}
.hero .eyebrow{color:var(--gold)}
.hero h1{margin-top:30px; font-size:clamp(48px,6.6vw,112px); letter-spacing:-.04em}
.hero h1 em{color:var(--gold)}
.hero .lead{margin-top:32px; font-size:clamp(17px,1.4vw,20px); line-height:1.9; color:#c6d0d8}
.hero .quiet{color:var(--cream); border-color:rgba(244,239,229,.3)}
.hero .quiet span{color:var(--gold)}
.principles{list-style:none; margin:clamp(36px,5vw,56px) 0 0; padding:26px 0 0; border-top:1px solid rgba(244,239,229,.2); display:flex; flex-wrap:wrap; gap:14px 30px; font:400 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}

/* the keyhole */
.hero-art{position:relative; margin:0; justify-self:center; width:min(100%,470px); aspect-ratio:583/799}
.hero-art .kh{width:100%; height:100%; object-fit:cover; object-position:center 52%; clip-path:url(#keyhole); -webkit-clip-path:url(#keyhole)}
.js .hero-art .kh{animation:khin 1.4s var(--ease) both .1s}
@keyframes khin{from{opacity:0; transform:scale(1.05)} to{opacity:1; transform:none}}
.khline{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.khline path{fill:none; stroke:var(--gold); stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1}
.js .khline path{animation:draw 2.4s var(--ease) forwards .4s}
@keyframes draw{to{stroke-dashoffset:0}}
.plate{position:absolute; left:0; bottom:0; z-index:4; background:var(--cream); color:var(--ink); padding:15px 20px; max-width:250px; display:grid; gap:5px}
.plate span{font:400 9.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink)}
.plate b{font:500 italic 20px/1.25 var(--serif); font-variation-settings:"opsz" 144}
.js .plate{animation:plate 1s var(--ease) both .9s}
@keyframes plate{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.edge{position:absolute; right:14px; top:50%; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; margin:0; font:400 9.5px/1 var(--mono); letter-spacing:.28em; text-transform:uppercase; color:rgba(159,176,189,.5)}

/* ---------- story ---------- */
.story{background:var(--paper)}
.story-grid{margin-top:clamp(28px,4vw,48px); display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(32px,5vw,80px); align-items:start}
.story h2{font-size:clamp(38px,4.8vw,78px)}
.sub{margin-top:18px; font:400 italic 21px/1.4 var(--serif); color:var(--muted)}
.story .prose{margin-top:30px}
.mission{margin:44px 0; padding:32px 0 0; border-top:1px solid var(--line); font:400 italic clamp(26px,3vw,42px)/1.15 var(--serif); font-variation-settings:"opsz" 144; color:var(--ink); max-width:22ch}
.mission span{display:block; font:400 11px/1 var(--mono); font-style:normal; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:18px}
.sign{margin-top:36px; font:400 italic 22px/1.2 var(--serif)}
.sign small{display:block; margin-top:9px; font:400 10.5px/1 var(--mono); font-style:normal; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.story-side{display:grid; gap:26px; position:sticky; top:calc(var(--head) + 28px)}
.story-photo{margin:0; position:relative}
.story-photo img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 18%}
.story-photo.small img{aspect-ratio:4/3}
.story-photo figcaption{position:absolute; left:0; bottom:0; background:var(--cream); padding:10px 14px; font:400 italic 16px/1.2 var(--serif)}
.stat{display:flex; align-items:baseline; gap:18px; padding:24px 0; border-block:1px solid var(--line)}
.stat b{font:500 clamp(56px,6vw,86px)/.78 var(--serif); font-variation-settings:"opsz" 144; color:var(--gold-ink); letter-spacing:-.04em}
.stat span{font:400 10.5px/1.75 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); max-width:28ch}

/* ---------- genesis + viewer ---------- */
.genesis{background:var(--navy); color:var(--cream); padding-bottom:clamp(64px,8vw,116px)}
.genesis .eyebrow{color:var(--gold)}
.genesis h2{margin-top:26px; font-size:clamp(38px,4.8vw,78px)}
.genesis h2 em{color:var(--gold)}
.genesis .prose{color:#c2ccd4}
.naming{margin-top:26px; padding-left:16px; border-left:1px solid rgba(215,169,77,.5); font:400 11px/1.8 var(--mono); letter-spacing:.06em; color:var(--dim); max-width:34ch}
.genesis-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:end; padding-bottom:clamp(40px,5vw,72px)}
.viewer{display:grid; grid-template-columns:210px minmax(0,1fr); gap:clamp(24px,3vw,52px); align-items:start}
.rooms{list-style:none; margin:0; padding:0}
.rooms button{display:grid; grid-template-columns:26px minmax(0,1fr); align-items:baseline; gap:10px; width:100%; text-align:left; padding:15px 0 15px 18px; border-left:1px solid rgba(244,239,229,.18); font:400 11.5px/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); transition:color .3s, border-color .3s}
.rooms button i{font-style:normal; font-size:10px; opacity:.6}
.rooms button:hover{color:var(--cream)}
.rooms li.on button{color:var(--cream); border-left-color:var(--gold)}
.rooms li.on button i{color:var(--gold); opacity:1}
.rooms .meta{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease)}
.rooms li.on .meta{grid-template-rows:1fr}
.rooms .meta span{overflow:hidden; display:block; padding-left:46px; font:400 10.5px/1.6 var(--mono); letter-spacing:.04em; color:rgba(215,169,77,.85)}

/* the comparison: photography edge to edge, every label lives outside the picture */
.frame{min-width:0; --pos:100%; --p:1}
.compare{position:relative; aspect-ratio:16/11; max-height:620px; overflow:hidden; background:var(--navy-2); touch-action:pan-y; cursor:ew-resize}
.compare img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.compare .top{position:absolute; inset:0; clip-path:inset(0 0 0 var(--pos)); will-change:clip-path}
.compare.swap img{animation:swapin .7s var(--ease) both}
@keyframes swapin{from{opacity:0; transform:scale(1.025)} to{opacity:1; transform:none}}
.handle{position:absolute; top:0; bottom:0; left:var(--pos); width:1px; background:rgba(244,239,229,.85); z-index:4; pointer-events:none; opacity:calc(1 - max(0, (var(--p) - .94)) * 16)}
.handle i{position:absolute; top:50%; left:50%; width:36px; height:36px; margin:-18px 0 0 -18px; background:var(--cream); border-radius:3px; display:grid; place-items:center}
.handle i::before{content:"\2039 \203A"; font:500 13px/1 var(--mono); color:var(--ink)}
#slider{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize}
.compare:has(#slider:focus-visible) .handle i{outline:2px solid var(--gold); outline-offset:3px}
.under{margin-top:0}
.readout{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:start; gap:20px; padding-top:18px; border-top:1px solid rgba(244,239,229,.2)}
.ro{display:grid; gap:7px; transition:opacity .4s linear}
.ro i{font:500 10px/1 var(--mono); font-style:normal; letter-spacing:.18em; text-transform:uppercase; color:var(--cream)}
.ro span{font:400 13px/1.5 var(--sans); color:var(--dim)}
.ro-a{opacity:calc(.28 + .72 * (1 - var(--p)))}
.ro-b{text-align:right; opacity:calc(.28 + .72 * var(--p))}
.chap{font:400 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--gold); padding-top:2px; white-space:nowrap}
.stages{margin-top:24px; display:flex; gap:8px; flex-wrap:wrap}
.stages button{padding:10px 18px; border:1px solid rgba(244,239,229,.24); border-radius:3px; font:400 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); transition:all .3s}
.stages button:hover{color:var(--cream); border-color:rgba(244,239,229,.55)}
.stages button[aria-pressed="true"]{background:var(--cream); color:var(--ink); border-color:var(--cream)}

/* ---------- blueprint ---------- */
.blueprint{background:var(--cream)}
.blueprint h2{margin-top:26px; font-size:clamp(38px,4.8vw,78px)}
.bp{margin-top:clamp(36px,5vw,64px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(24px,3vw,56px); align-items:start}
.tabs{display:grid; gap:0; border-top:1px solid var(--line)}
.tabs button{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:18px; align-items:baseline; text-align:left; padding:26px 0; border-bottom:1px solid var(--line); font:600 clamp(24px,2.4vw,33px)/1.05 var(--serif); font-variation-settings:"opsz" 144; letter-spacing:-.02em; transition:padding .4s var(--ease), color .3s}
.tabs button b{font:400 10.5px/1 var(--mono); letter-spacing:.14em; color:var(--gold-ink)}
.tabs button small{grid-column:2; font:400 15px/1.5 var(--sans); color:var(--muted); margin-top:9px}
.tabs button:hover{padding-left:12px}
.tabs button[aria-selected="true"]{padding-left:12px; box-shadow:inset 3px 0 0 var(--gold)}
.panel{background:var(--paper); border:1px solid var(--line); padding:clamp(26px,3vw,46px); min-height:320px}
.panel .n{font:400 10.5px/1 var(--mono); letter-spacing:.16em; color:var(--gold-ink)}
.panel h3{margin-top:18px; font-size:clamp(28px,3vw,42px)}
.panel p{margin-top:16px; color:var(--muted); max-width:44ch}
.panel ul{margin:28px 0 0; padding:0; list-style:none; display:grid; gap:0; border-top:1px solid var(--line)}
.panel li{padding:14px 0; border-bottom:1px solid var(--line); display:flex; gap:14px; align-items:center; font-size:16px}
.panel li::before{content:""; width:5px; height:5px; background:var(--gold); flex:none}

/* ---------- standards ---------- */
.standards{background:var(--paper)}
.standards h2{margin-top:26px; font-size:clamp(36px,4.4vw,70px)}
.grid4{list-style:none; margin:clamp(36px,5vw,64px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line)}
.grid4 li{padding:30px 26px 34px 0; border-right:1px solid var(--line)}
.grid4 li+li{padding-left:26px}
.grid4 li:last-child{border-right:0}
.grid4 i{font:400 10.5px/1 var(--mono); font-style:normal; letter-spacing:.16em; color:var(--gold-ink)}
.grid4 h3{margin-top:22px; font-size:25px}
.grid4 p{margin-top:11px; color:var(--muted); font-size:16px}

/* ---------- work ---------- */
.work{background:var(--navy); color:var(--cream)}
.work .eyebrow{color:var(--gold)}
.work h2{margin-top:26px; font-size:clamp(38px,4.8vw,74px)}
.work h2 em{color:var(--gold)}
.work .say{color:#c2ccd4}
.work .quiet{color:var(--cream); border-color:rgba(244,239,229,.3)}
.work-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center}
.who{list-style:none; margin:0; padding:0; border-top:1px solid rgba(244,239,229,.2)}
.who a{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:5px 20px; padding:24px 4px; border-bottom:1px solid rgba(244,239,229,.2); transition:padding .4s var(--ease), background .4s}
.who b{font:600 clamp(22px,2.2vw,31px)/1.1 var(--serif); font-variation-settings:"opsz" 144; letter-spacing:-.02em}
.who span{grid-column:1; font:400 10.5px/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim)}
.who i{grid-row:1 / span 2; font-style:normal; font-size:22px; color:var(--gold)}
.who a:hover{padding-left:16px; background:linear-gradient(90deg,rgba(215,169,77,.12),transparent)}

/* ---------- follow: the arches ---------- */
.journey{background:var(--cream)}
.journey h2{margin-top:24px; font-size:clamp(32px,3.6vw,54px)}
.journey-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,5vw,76px); align-items:center}
.ig{margin-top:34px; display:inline-flex; align-items:center; gap:13px; padding:18px 26px; border-radius:3px; background:var(--navy); color:var(--cream); font:400 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; transition:background .3s, transform .3s var(--ease)}
.ig:hover{background:var(--navy-2); transform:translateY(-2px)}
.ig svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6}
.ig .dot{fill:currentColor; stroke:none}
.arches{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,22px)}
.chapter{position:relative; display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio:4/5.6; padding:20px 18px; overflow:hidden; color:#fff; background:var(--navy); border-radius:999px 999px 0 0}
.chapter img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.chapter::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(7,27,44,.88) 0%,rgba(7,27,44,.25) 45%,transparent 72%)}
.chapter span,.chapter b{position:relative; z-index:2}
.chapter span{font:400 9.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
.chapter b{margin-top:8px; font:500 clamp(17px,1.5vw,21px)/1.15 var(--serif); font-variation-settings:"opsz" 144; letter-spacing:-.01em}
.chapter:hover img{transform:scale(1.05)}

/* ---------- footer ---------- */
.foot{background:var(--paper); border-top:1px solid var(--line); padding-block:60px calc(52px + env(safe-area-inset-bottom,0px))}
.foot-in{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center}
.foot img{width:128px}
.foot-line{font:400 italic 24px/1.3 var(--serif)}
.foot-nav{margin-top:20px; display:flex; flex-wrap:wrap; gap:10px 26px; font:400 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase}
.foot-nav a:hover,.foot-meta a:hover{color:var(--gold-ink)}
.foot-meta{margin-top:22px; padding-top:18px; border-top:1px solid var(--line); display:flex; gap:10px 26px; flex-wrap:wrap; font:400 10.5px/1.6 var(--mono); letter-spacing:.08em; color:var(--muted)}
.foot-meta .ig{color:var(--ink)}

/* a quiet rise as things come into view */
.js .rv{opacity:0; transform:translateY(20px); transition:opacity .85s var(--ease), transform .85s var(--ease)}
.js .rv.in{opacity:1; transform:none}

/* mobile call bar */
.callbar{display:none}

@media (max-width:1040px){
  .nav nav{position:fixed; left:0; right:0; top:var(--head); flex-direction:column; gap:0; padding:8px var(--gut) 22px; background:var(--paper); border-bottom:1px solid var(--line); transform:translateY(-10px); opacity:0; visibility:hidden; transition:all .3s var(--ease)}
  .nav nav.open{transform:none; opacity:1; visibility:visible}
  .nav nav a{padding-block:17px; border-bottom:1px solid var(--line); font:400 13px/1 var(--mono); letter-spacing:.14em}
  .nav nav a::after{display:none}
  .cta{display:none}
  .burger{display:block; margin-left:auto}
  .hero,.story-grid,.genesis-head,.bp,.work-grid,.foot-in,.journey-grid{grid-template-columns:minmax(0,1fr)}
  .story-side{position:static; max-width:460px}
  .viewer{grid-template-columns:minmax(0,1fr)}
  .rooms{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px}
  .rooms li{flex:none}
  .rooms button{border-left:0; border-top:1px solid rgba(244,239,229,.18); grid-template-columns:auto auto; padding:14px 16px 12px 0}
  .rooms li.on button{border-left:0; border-top-color:var(--gold)}
  .rooms .meta{display:none}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid4 li:nth-child(2n){border-right:0}
  .edge{display:none}
  .callbar{display:flex; align-items:center; justify-content:center; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:45; padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px)); background:var(--gold); color:var(--navy); font:500 11.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase}
  .callbar svg{width:18px; height:18px; fill:currentColor}
  body{padding-bottom:64px}
}
@media (max-width:620px){
  .grid4{grid-template-columns:minmax(0,1fr)}
  .grid4 li,.grid4 li+li{padding:26px 0; border-right:0; border-bottom:1px solid var(--line)}
  .compare{aspect-ratio:4/3.4; max-height:none}
  .readout{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px}
  .chap{grid-row:2; grid-column:1 / -1}
  .hero-art{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .khline path{stroke-dashoffset:0}
  .js .rv{opacity:1; transform:none}
}