@font-face{font-family:"Jost";src:url("fonts/jost-latin-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
[hidden]{display:none!important}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-garamond-latin-var.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-garamond-italic-latin-var.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
:root{
  --bx:#6B1E2E;--bx-deep:#4A1420;--cr:#F5EFE3;--cr-2:#EFE7D8;--ink:#2B1A1D;--ink-soft:#4C3A3D;--noir:#141012;
  --gold:#B08D57;--gold-text:#7A5C30;--gold-light:#CDB083;
  --hair:rgba(107,30,46,.18);--hair-gold:rgba(176,141,87,.55);
  --pad:clamp(24px,6vw,88px);--max:1280px;
  --serif:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sec:clamp(96px,14vw,200px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-weight:350;font-size:clamp(16px,.5vw + 14px,18px);line-height:1.8;color:var(--ink-soft);background:var(--cr);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:300;color:var(--bx);margin:0;line-height:1.08;letter-spacing:-.005em}
p{margin:0}
a{color:var(--bx)}
a:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:960px}
.skip{position:absolute;left:-999px;top:8px;background:var(--bx);color:var(--cr);padding:8px 14px;z-index:20}
.skip:focus{left:8px}
.label{font-family:var(--sans);font-size:.7rem;font-weight:400;letter-spacing:.38em;text-transform:uppercase;color:var(--bx);margin-bottom:1.6rem}
.label-gold{color:var(--gold-light)}
.hero .label-gold{color:#E0CEAB;font-weight:450}
.how .label-gold{color:var(--gold-light)}
.rule{display:block;width:56px;height:1px;background:var(--gold);margin:2.2rem 0}
.num{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--gold-text);letter-spacing:.06em;margin-bottom:.4rem}

/* header over hero */
.site-header{position:absolute;top:0;left:0;right:0;z-index:5}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:104px;border-bottom:1px solid rgba(205,176,131,.28)}
.brand img{width:clamp(128px,12vw,164px)}
nav ul{list-style:none;display:flex;gap:clamp(18px,3.4vw,48px);margin:0;padding:0}
nav a{color:var(--cr);text-decoration:none;font-size:.7rem;font-weight:400;letter-spacing:.32em;text-transform:uppercase;padding:8px 0;border-bottom:1px solid transparent;transition:border-color .3s}
nav a:hover{border-bottom-color:var(--gold)}

/* hero */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--noir);color:var(--cr);min-height:max(640px,100vh);min-height:max(640px,100svh);display:flex;align-items:flex-end;padding:180px 0 clamp(80px,11vh,140px)}
.hero-bg,.hero-bg img{position:absolute;inset:0;width:100%;height:100%}
.hero-bg{z-index:-2}
.hero-bg img{object-fit:cover;object-position:62% 50%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(20,8,12,.86) 0%,rgba(52,14,24,.70) 34%,rgba(74,20,32,.22) 62%,rgba(74,20,32,0) 82%),
  linear-gradient(0deg,rgba(20,8,12,.55) 0%,rgba(20,8,12,0) 45%),
  linear-gradient(180deg,rgba(20,8,12,.55) 0%,rgba(20,8,12,0) 22%)}
.hero-content{width:100%}
.hero h1{color:var(--cr);font-size:clamp(2.7rem,5.8vw,5.6rem);font-weight:300;line-height:1.04}
.hero .tagline{display:block;font-style:italic;color:var(--gold-light);font-weight:300}
.hero-lead{max-width:34rem;margin-top:2.2rem;color:rgba(245,239,227,.92);font-size:clamp(1rem,.4vw + .9rem,1.15rem)}
.btn{display:inline-block;margin-top:2.8rem;text-decoration:none;font-size:.7rem;font-weight:400;letter-spacing:.34em;text-transform:uppercase;padding:18px 34px;transition:background .35s,color .35s}
.btn-gold{color:var(--cr);border:1px solid var(--gold)}
.btn-gold:hover{background:var(--gold);color:var(--noir)}

/* about: tall image bleeding to the left edge, text panel overlapping it */
.about{padding:var(--sec) 0}
.about-grid{display:grid;grid-template-columns:minmax(0,46vw) minmax(0,1fr);align-items:center}
.about-img img{width:100%;aspect-ratio:2/3;max-height:960px;object-fit:cover}
.about-text{position:relative;z-index:1;background:var(--cr);margin-left:-7vw;padding:clamp(40px,5vw,80px) var(--pad) clamp(40px,5vw,80px) clamp(40px,5vw,80px);max-width:44rem}
.about-text h2,.section-head h2{font-size:clamp(2.2rem,4.2vw,3.8rem)}
.about-text p+p{margin-top:1.2rem}

/* what we do: numbered list + overlapping portrait pair */
.what{padding:var(--sec) 0;border-top:1px solid var(--hair)}
.what-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(40px,7vw,120px);align-items:start}
.section-head{max-width:40rem;margin-bottom:clamp(48px,6vw,88px)}
.cats{list-style:none;margin:0;padding:0;counter-reset:none}
.cats li{display:grid;grid-template-columns:72px 1fr;gap:8px;padding:clamp(24px,2.6vw,36px) 0;border-top:1px solid var(--hair)}
.cats li:last-child{border-bottom:1px solid var(--hair)}
.cats .num{font-size:1.4rem;line-height:1.5;margin:0}
.cats h3{font-size:clamp(1.9rem,2.6vw,2.4rem);margin-bottom:.35rem;line-height:1.1}
.what-media{position:relative;padding-bottom:18%}
.what-main{width:78%;margin-left:auto;background:var(--noir)}
.what-main img{width:100%;aspect-ratio:3/4;object-fit:cover}
.what-small{position:absolute;left:0;bottom:0;width:40%;border:12px solid var(--cr);background:var(--noir)}
.what-small img{width:100%;aspect-ratio:2/3;object-fit:cover}

/* full-bleed band, image only */
.band{position:relative;overflow:hidden;background:var(--noir);aspect-ratio:21/9;min-height:320px;max-height:820px;width:100%}
.band picture,.band img{position:absolute;inset:0;width:100%;height:100%}
.band img{object-fit:cover}

/* how */
.how{background:var(--bx);color:rgba(245,239,227,.92);padding:var(--sec) 0}
.how h2,.how h3{color:var(--cr)}
.how .num{color:var(--gold-light)}
.points{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(40px,8vw,128px)}
.points>div{padding:2.4rem 0 2.6rem;border-top:1px solid rgba(205,176,131,.35)}
.points h3{font-size:clamp(1.5rem,2vw,1.9rem);margin-bottom:.7rem}

/* contact */
.contact{padding:var(--sec) 0}
address{font-style:normal;margin-top:2rem;font-size:.7rem;font-weight:400;letter-spacing:.38em;text-transform:uppercase;color:var(--ink-soft)}

/* contact form */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,120px);align-items:start}
.contact-intro h2{font-size:clamp(2.2rem,4.2vw,3.8rem)}
.contact-intro>p{max-width:30rem}
.contact-img{margin:clamp(48px,6vw,88px) 0 0 calc(-1 * var(--pad));max-width:440px}
.contact-img img{width:100%;aspect-ratio:2/3;object-fit:cover}
.form-wrap{margin-top:clamp(0px,9vw,140px);background:#FBF8F2;border:1px solid rgba(176,141,87,.38);padding:clamp(32px,5vw,72px) clamp(24px,5vw,72px)}
.contact-form{display:grid;gap:clamp(28px,3vw,40px)}
.form-note{font-size:.72rem;letter-spacing:.06em;color:var(--ink-soft);margin:0}
.req{color:var(--gold-text);margin-left:2px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3vw,40px)}
.field{display:flex;flex-direction:column;min-width:0}
.field label,.intent legend{font-size:.68rem;font-weight:450;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);margin-bottom:.7rem}
.field input,.field select,.field textarea{font:inherit;font-weight:400;font-size:1.02rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid rgba(43,26,29,.32);border-radius:0;padding:.55rem 0 .65rem;width:100%;transition:border-color .3s,box-shadow .3s;-webkit-appearance:none;appearance:none}
.field textarea{resize:vertical;min-height:8.5rem;line-height:1.7;border:1px solid rgba(43,26,29,.32);padding:.9rem 1rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--bx);box-shadow:0 1px 0 0 var(--bx)}
.field textarea:focus{box-shadow:inset 0 0 0 1px var(--bx)}
.select{position:relative}
.select::after{content:"";position:absolute;right:4px;top:50%;width:7px;height:7px;border-right:1px solid var(--gold-text);border-bottom:1px solid var(--gold-text);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.select select{padding-right:28px;cursor:pointer}
.select select:invalid{color:rgba(43,26,29,.6)}
.hint{font-size:.8rem;color:var(--ink-soft);margin-top:.6rem}
.err{font-size:.82rem;color:var(--bx);margin-top:.55rem;font-weight:450}
.err::before{content:"\2014\00a0"}
[aria-invalid="true"]{border-color:var(--bx)!important}
.intent{border:0;margin:0;padding:0;min-width:0}
.intent legend{padding:0;margin-bottom:1rem}
.choice{display:flex;gap:12px}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice label{flex:0 1 180px;text-align:center;cursor:pointer;font-family:var(--serif);font-size:1.45rem;font-weight:400;color:var(--bx);border:1px solid rgba(176,141,87,.55);padding:.55rem 1.6rem;transition:background .3s,color .3s,border-color .3s}
.choice label:hover{border-color:var(--bx)}
.choice input:checked+label{background:var(--bx);border-color:var(--bx);color:var(--cr)}
.choice input:focus-visible+label{outline:2px solid var(--gold-text);outline-offset:3px}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:.4rem}
.btn-solid{margin:0;font:inherit;font-size:.7rem;font-weight:450;letter-spacing:.34em;text-transform:uppercase;cursor:pointer;background:var(--bx);color:var(--cr);border:1px solid var(--bx);padding:20px 44px;border-radius:0}
.btn-solid:hover{background:var(--noir);border-color:var(--noir)}
.btn-solid:focus-visible{outline:2px solid var(--gold-text);outline-offset:4px}
.form-status{font-size:.85rem;color:var(--bx);margin:0}
.form-success{text-align:center;padding:clamp(24px,4vw,64px) 0}
.form-success:focus{outline:none}
.form-success .ornament{display:block;width:1px;height:64px;background:var(--gold);margin:0 auto 2.4rem}
.form-success h3{font-size:clamp(2.4rem,4.4vw,3.6rem);color:var(--bx);margin-bottom:1.2rem}
.form-success p{max-width:28rem;margin-left:auto;margin-right:auto}
.form-success .label{margin-bottom:1.2rem;color:var(--gold-text)}
.preview-note{margin-top:2.4rem!important;padding-top:1.4rem;border-top:1px solid rgba(176,141,87,.38);font-size:.78rem;letter-spacing:.04em;color:var(--ink-soft)}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr}.contact-img{display:none}}
@media (max-width:700px){.row{grid-template-columns:1fr}.choice label{flex:1 1 0}.btn-solid{width:100%}.form-wrap{padding:36px 22px 40px}}

/* footer */
.site-footer{background:var(--noir);color:rgba(245,239,227,.78);padding:56px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid rgba(176,141,87,.35);padding-top:40px}
.footer-logo{width:128px}
.site-footer p{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase}

/* reveal: only hidden when JS is running */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.6,.2,1)}
.js .reveal.in,.reveal-all .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}}

/* tablet */
@media (max-width:980px){
  .about-grid{grid-template-columns:1fr}
  .about-img{width:88%}
  .about-img img{aspect-ratio:3/4;max-height:none}
  .about-text{margin:-18vw 0 0 auto;width:88%;padding:40px var(--pad) 0 40px}
  .what-grid{grid-template-columns:1fr}
  .what-media{max-width:640px;margin-left:auto;width:100%}
  .points{grid-template-columns:1fr 1fr;gap:0 48px}
  .hero-bg img{object-position:58% 50%}
}
/* phone */
@media (max-width:700px){
  .about-img{width:92%}
  .about-text{width:92%;margin-top:-64px;padding:32px var(--pad) 0 28px}
  .cats li{grid-template-columns:52px 1fr}
  .what-small{border-width:8px;width:44%}
  .band{aspect-ratio:4/3;min-height:0}
  .header-inner{min-height:84px}
  nav ul{gap:14px}
  nav a{font-size:.6rem;letter-spacing:.16em;white-space:nowrap}
  .hero .label{letter-spacing:.24em}
  .brand img{width:112px}
  .hero{padding:150px 0 72px}
  .hero::before{background:linear-gradient(0deg,rgba(20,8,12,.92) 0%,rgba(36,10,18,.80) 40%,rgba(40,12,20,.66) 66%,rgba(40,12,20,.30) 82%,rgba(20,8,12,.62) 100%)}
  .hero-bg img{object-position:24% 50%}
  .btn{display:block;text-align:center}
  .points{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .site-footer p{letter-spacing:.2em}
}
@media (max-width:380px){nav a{letter-spacing:.12em}nav ul{gap:12px}.brand img{width:100px}}

/* 1.0.3 soft photo edges: a ~1.5 mm feather (1.0.4, was ~3 mm) on all four sides (mask only: no blur, no layout change) */
:root{--nds-feather:6px}
@media (max-width:700px){:root{--nds-feather:5px}}
.about-img img,.what-main,.contact-img img{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--nds-feather),#000 calc(100% - var(--nds-feather)),transparent 100%),linear-gradient(to bottom,transparent 0,#000 var(--nds-feather),#000 calc(100% - var(--nds-feather)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 var(--nds-feather),#000 calc(100% - var(--nds-feather)),transparent 100%),linear-gradient(to bottom,transparent 0,#000 var(--nds-feather),#000 calc(100% - var(--nds-feather)),transparent 100%);
  mask-composite:intersect}
.what-small{background:var(--cr)}
.what-small img{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--nds-feather),#000 calc(100% - var(--nds-feather)),transparent 100%),linear-gradient(to bottom,transparent 0,#000 var(--nds-feather),#000 calc(100% - var(--nds-feather)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 var(--nds-feather),#000 calc(100% - var(--nds-feather)),transparent 100%),linear-gradient(to bottom,transparent 0,#000 var(--nds-feather),#000 calc(100% - var(--nds-feather)),transparent 100%);
  mask-composite:intersect}
.hero{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--nds-feather)),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - var(--nds-feather)),transparent 100%)}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,var(--cr) 0,rgba(245,239,227,0) var(--nds-feather),rgba(107,30,46,0) calc(100% - var(--nds-feather)),var(--bx) 100%)}
