/* ==== FONTS (fonts/, OFL) ==== */
@font-face{font-family:'Cormorant Garamond';src:url('fonts/cormorant-garamond/CormorantGaramond[wght].ttf') format('truetype');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('fonts/cormorant-garamond/CormorantGaramond-Italic[wght].ttf') format('truetype');font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost/Jost[wght].ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost/Jost-Italic[wght].ttf') format('truetype');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Sacramento';src:url('fonts/sacramento/Sacramento-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}

/* ==== TOKENS (brand.md) ==== */
:root{
  --burgundy:#6E0A0C; --burgundy-deep:#4A0608;
  --cream:#F4EBE2; --plaster:#E8E1D6; --limestone:#D2C6B5; --oak:#9F8669; --umber:#6D5A45; --charcoal:#2E2825; --ink:#1B1512;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --max:1240px; --gutter:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-reveal:1s;--t-hover:.45s;--t-photo:1.8s
}

/* ==== RESET ==== */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:400;font-size:18px;line-height:1.6;color:var(--charcoal);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--limestone);color:var(--ink)}
section,footer{position:relative}
[id]{scroll-margin-top:92px}

/* ==== TYPE ==== */
.eyebrow{font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--oak)}
h1,.h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,6.2vw,88px);line-height:1.04;letter-spacing:-.01em;color:var(--charcoal)}
h2,.h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.8vw,52px);line-height:1.08;letter-spacing:-.005em;color:var(--charcoal)}
h3,.h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.2vw,32px);line-height:1.15;color:var(--charcoal)}
.statement{font-family:var(--serif);font-weight:400;font-size:clamp(27px,2.9vw,40px);line-height:1.2;color:var(--charcoal)}
h1 em,h2 em,h3 em,.statement em{font-style:italic;font-weight:400}
.sub{font-size:clamp(17px,1.35vw,20px);font-weight:300;line-height:1.55;color:var(--umber);max-width:34em}
p{max-width:62ch}
.small{font-size:14px;color:var(--umber)}
.dark,.dark h1,.dark h2,.dark h3,.dark .statement{color:var(--cream)}
.dark p,.dark .sub{color:var(--plaster)}
.dark .eyebrow{color:var(--limestone)}
.dark .small{color:var(--limestone)}

/* ==== LINKS + BUTTONS ==== */
.btn{display:inline-block;font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;padding:17px 30px;border-radius:2px;background:var(--burgundy);color:var(--cream);border:0;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:background .25s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--burgundy-deep);transform:translateX(-101%);transition:transform var(--t-hover) var(--ease);z-index:-1}
.btn:hover{background:var(--burgundy)}
.btn:hover::before{transform:none}
.btn--light{background:var(--cream);color:var(--ink)}
.btn--light::before{background:var(--limestone)}
.btn--light:hover{background:var(--cream)}
.link{display:inline-block;font-family:var(--sans);font-size:15px;font-weight:400;letter-spacing:.02em;color:var(--charcoal);padding-bottom:4px;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0% 1px;background-position:100% 100%;transition:background-size var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}
.link:hover{background-size:100% 1px;background-position:0 100%;color:var(--burgundy)}
.link--burgundy{color:var(--burgundy);background-size:100% 1px;background-position:0 100%}
.link--burgundy:hover{color:var(--burgundy-deep)}
.dark .link{color:var(--cream)}
.dark .link:hover{color:var(--cream)}
.link .arr{display:inline-block;width:18px;height:10px;margin-left:8px;vertical-align:middle;transition:transform var(--t-hover) var(--ease)}
.link:hover .arr{transform:translateX(4px)}

/* ==== LAYOUT ==== */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
section{padding:clamp(64px,7.5vw,108px) 0}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;row-gap:40px;align-items:center}
.rule{height:1px;background:var(--limestone);border:0}
.rule--burgundy{background:var(--burgundy)}
.dark .rule{background:rgba(244,235,226,.22)}
.head{max-width:760px}
.head h2{margin:18px 0 22px}
.head .sub{margin-top:0}

/* ==== NAV ==== */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;height:72px;display:flex;align-items:center;transition:background .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s;color:var(--cream)}
.nav .wrap{width:100%;display:flex;align-items:center;justify-content:space-between}
.nav .logo img{width:186px;transition:width .45s var(--ease)}
.nav.is-scrolled .logo img{width:156px}
.nav ul{display:flex;gap:36px;list-style:none;align-items:center}
.nav ul a{font-size:14px;letter-spacing:.05em;font-weight:400;position:relative;padding-bottom:4px}
.nav ul a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav ul a:not(.btn):hover::after{transform:scaleX(1)}
.nav .btn{padding:13px 22px;font-size:12.5px}
.nav:not(.is-scrolled) .btn{background:var(--cream);color:var(--ink)}
.nav:not(.is-scrolled) .btn::before{background:var(--limestone)}
.nav.is-tinted:not(.is-scrolled){background:rgba(27,21,18,.86);backdrop-filter:blur(12px)}
.nav.is-scrolled{background:rgba(244,235,226,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--limestone);color:var(--charcoal)}
.nav .cta{opacity:1;pointer-events:auto}
.nav .logo .on-light,.nav .mark .on-light{display:none}
.nav.is-scrolled .logo .on-dark,.nav.is-scrolled .mark .on-dark{display:none}
.nav.is-scrolled .logo .on-light,.nav.is-scrolled .mark .on-light{display:block}
.nav .mark{display:none}
.nav .mark img{height:34px;width:auto}
.nav .menu-btn{display:none;font-size:14px;letter-spacing:.08em;text-transform:uppercase;background:none;border:0;color:inherit;cursor:pointer;padding:8px 0}
.menu{position:fixed;inset:0;z-index:30;background:var(--cream);display:flex;align-items:center}
.menu[hidden]{display:none}
.menu .wrap{display:flex;flex-direction:column;gap:22px;width:100%}
.menu a:not(.btn){font-family:var(--serif);font-size:40px;line-height:1.1;color:var(--charcoal)}
.menu .btn{align-self:flex-start;margin-top:18px}
.menu .close{position:absolute;top:22px;right:var(--gutter);font-size:14px;letter-spacing:.08em;text-transform:uppercase;background:none;border:0;color:var(--charcoal);cursor:pointer}

/* ==== 2 HERO ==== */
.hero{position:relative;min-height:100vh;min-height:100svh;background:var(--ink);color:var(--cream);display:flex;align-items:flex-end;padding:0 0 92px;overflow:hidden}
.hero .bg{position:absolute;inset:0;overflow:hidden}
.hero .bg img{width:100%;height:114%;object-fit:cover;object-position:50% 100%}
.hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,21,18,.72) 0%,rgba(27,21,18,.5) 34%,rgba(27,21,18,.08) 64%),linear-gradient(180deg,rgba(27,21,18,.44) 0%,rgba(27,21,18,0) 18%,rgba(27,21,18,0) 40%,rgba(27,21,18,.74) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero .copy{max-width:600px}
.hero .eyebrow{color:var(--limestone)}
.hero h1{color:var(--cream);margin:22px 0 24px}
.hero .sub{color:var(--plaster);opacity:.94;max-width:33em;text-wrap:pretty}
.hero .actions{display:flex;align-items:center;gap:34px;margin-top:38px;flex-wrap:wrap}
.hero .btn{background:var(--cream);color:var(--ink)}
.hero .btn::before{background:var(--limestone)}
.hero .link{color:var(--cream)}
.hero .link:hover{color:var(--cream)}
.hero .credit{position:absolute;right:var(--gutter);bottom:36px;z-index:2;color:var(--limestone);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}

/* ==== 3 SIGNPOST ==== */
.signpost{background:var(--cream);padding:44px 0 46px;border-bottom:1px solid var(--limestone)}
.signpost .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.signpost .lead{font-family:var(--serif);font-size:24px;color:var(--charcoal)}
.signpost ul{display:flex;gap:44px;list-style:none;flex-wrap:wrap}
.signpost .link{font-size:15.5px}

/* ==== 4 FEATURED ==== */
.featured{background:var(--plaster);padding:0}
.featured .stage{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;height:min(60vw,88vh);min-height:520px}
.featured .frame{height:100%;overflow:hidden;display:block}
.featured .frame img{height:100%;width:auto;max-width:none;object-fit:cover;display:block}
.featured .side{display:flex;flex-direction:column;justify-content:center;padding:40px var(--gutter)}
.featured .side.lead h2{margin-top:14px}
.featured .side.tail{align-items:flex-start;justify-content:flex-end;padding-bottom:64px}
.featured .side.tail .sub{max-width:16em;margin-bottom:26px}

/* ==== 5 WHY ==== */
.why{background:var(--cream);padding-top:clamp(48px,5.5vw,72px);padding-bottom:clamp(40px,4.5vw,60px)}
.why .rule{margin-bottom:22px}
.why .grid{align-items:start}
.why .lead{grid-column:1/span 7;align-self:center}
.why .lead h2{margin:14px 0 18px}
.why .lead .statement{font-size:clamp(21px,1.75vw,25px);line-height:1.35;max-width:28em}
.why .aside{grid-column:8/span 5}
.why .aside .ph{overflow:hidden}
.why .aside img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 50%}
.why .nums{display:flex;gap:32px;margin-top:16px;padding-top:14px;border-top:1px solid var(--limestone)}
.why .nums b{font-family:var(--serif);font-weight:400;font-size:clamp(48px,4vw,56px);line-height:1;display:block;color:var(--burgundy)}
.why .nums span{display:block;margin-top:8px;font-size:11.5px}
.why .reasons{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);column-gap:24px;margin-top:8px}
.why .reason{position:relative;padding:22px 22px 20px;background:var(--plaster);border:1px solid var(--limestone);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.why .reason:hover{box-shadow:0 24px 40px -30px rgba(27,21,18,.35)}
.why .reason::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--burgundy);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.why .reason:hover::before{transform:none}
.why .reason:hover{transform:translateY(-4px)}
.why .ico{width:36px;height:36px;color:var(--umber);margin-bottom:12px;transition:color .5s var(--ease)}
.why .ico *{stroke-dasharray:1;stroke-dashoffset:0}
@keyframes icodraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.why .reason:hover .ico{color:var(--burgundy)}
.why .reason:hover .ico *{animation:icodraw 1.2s var(--ease) both}
.why .reason:hover .ico *:nth-child(2){animation-delay:.15s}
.why .reason:hover .ico *:nth-child(3){animation-delay:.3s}
.why .reasons h3{margin-bottom:8px;font-size:clamp(24px,1.7vw,26px)}
.why .reasons p{font-size:16px;color:var(--umber);line-height:1.5}
.why .lot{grid-column:1/span 8;margin-top:8px;padding-top:28px;border-top:1px solid var(--limestone)}
.why .lot p{font-size:17px;color:var(--umber);max-width:56ch}
.why .lot .link{margin-top:18px}

/* ==== 6 SERVICES ==== */
.services{background:var(--plaster);padding-top:clamp(48px,5.5vw,80px)}
.services .head h2 em{white-space:nowrap}
.services .cols{display:grid;grid-template-columns:repeat(3,1fr);column-gap:32px;row-gap:48px;margin-top:52px}
.services .col{transition:opacity .6s var(--ease)}
.services .cols:hover .col:not(:hover){opacity:.5}
.services .frame{overflow:hidden;position:relative}
.services .frame img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;transition:transform 1.4s var(--ease)}
.services .col:hover .frame img{transform:scale(1.06)}
.services .frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--burgundy);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.services .col:hover .frame::after,.services .col.flash .frame::after{transform:none}
.services .col h3{margin:26px 0 12px;display:inline-block;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0% 1px;background-position:100% 100%;padding-bottom:3px;transition:background-size .6s var(--ease),transform .6s var(--ease),color .6s var(--ease)}
.services .col:hover h3,.services .col.flash h3{background-size:100% 1px;background-position:0 100%;transform:translateX(6px)}
.services .col.flash h3{color:var(--burgundy)}
.services .cols.flashing .col:not(.flash){opacity:.5}
.services .col p{font-size:17px;color:var(--umber)}
.services .col .typ{margin-top:16px;font-size:15px;color:var(--umber);line-height:1.5}
.services .col .typ b{font-weight:500;color:var(--umber)}
.services .after{display:flex;gap:44px;margin-top:36px;flex-wrap:wrap;align-items:center}

/* ==== 7 PROCESS (the burgundy section) ==== */
.process{background:var(--burgundy);color:var(--cream)}
.process .eyebrow{color:var(--limestone)}
.process h2{color:var(--cream)}
.process .sub{color:var(--plaster)}
.process .steps{display:grid;grid-template-columns:repeat(5,1fr);column-gap:28px;margin-top:52px;position:relative}
.process .steps::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(244,235,226,.3);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease)}
.process .steps.in::before{transform:none}
.process .step{padding-top:34px;position:relative;transition:transform .6s var(--ease)}
.process .step::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--cream);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.process .step:hover::before{transform:none}
.process .step:hover{transform:translateY(-6px)}
.process .step b{font-family:var(--serif);font-weight:400;font-size:54px;line-height:1;display:block;color:var(--cream);opacity:.72;transition:opacity .6s var(--ease)}
.process .step:hover b{opacity:1}
.process .step h3{color:var(--cream);margin:16px 0 10px;font-size:clamp(28px,1.9vw,28px)}
.process .step p{font-size:16.5px;color:var(--plaster);opacity:.92}
.process .after{margin-top:52px;display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.process .link{color:var(--cream)}
.process .link:hover{color:var(--cream)}
.process .small{color:var(--limestone)}

/* ==== 8 GALLERY PREVIEW ==== */
.gallery{background:var(--cream);padding-bottom:clamp(48px,5vw,72px)}
.gallery .tiles.masonry{display:flex;grid-template-columns:none;gap:32px;margin-top:40px;align-items:flex-start}
.gallery .masonry .shot{grid-column:auto}
.gallery .masonry .shot .ph{overflow:hidden}
.gallery .masonry .shot img{width:100%;height:auto;display:block}
.gallery .after{justify-content:center}
.gallery .tiles{display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;row-gap:48px;margin-top:52px;align-items:end}
.gallery .tile{display:block}
.gallery .tile .ph{overflow:hidden}
.gallery .tile img{width:100%;height:auto;display:block}
.gallery .tile .name{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;gap:20px}
.gallery .tile .name .small{white-space:nowrap}
.gallery .tile .name span{font-family:var(--serif);font-size:22px;color:var(--charcoal);background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0% 1px;background-position:100% 100%;transition:background-size var(--t-hover) var(--ease);padding-bottom:2px}
.gallery .tile:hover .name span{background-size:100% 1px;background-position:0 100%}
.gallery .t1{grid-column:1/span 7}
.gallery .t2{grid-column:8/span 5}
.gallery .t3{grid-column:1/span 7}
.gallery .t4{grid-column:9/span 4}
.gallery .after{margin-top:40px;display:flex;align-items:center;gap:40px;flex-wrap:wrap}

/* ==== 9 FAQ ==== */
.faq{background:var(--plaster)}
.faq-page{background:var(--cream)}
.faq-page .list{border-top-color:var(--burgundy)}
.faq-page .head .sub{margin-top:12px}
.faq .grid{align-items:start}
.faq .head{grid-column:1/span 4}
.faq .list{grid-column:6/span 7;border-top:1px solid var(--limestone)}
.faq .q{border-bottom:1px solid var(--limestone)}
.faq .q button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:28px;text-align:left;background:none;border:0;cursor:pointer;padding:24px 0;font-family:var(--serif);font-size:clamp(24px,1.8vw,27px);line-height:1.25;color:var(--charcoal);transition:color var(--t-hover) var(--ease)}
.faq .q button:hover{color:var(--burgundy)}
.faq .q .pm{position:relative;width:18px;height:18px;flex:none}
.faq .q .pm::before,.faq .q .pm::after{content:"";position:absolute;background:currentColor;transition:transform .45s var(--ease)}
.faq .q .pm::before{left:0;right:0;top:8px;height:1px}
.faq .q .pm::after{top:0;bottom:0;left:8px;width:1px}
.faq .q.open .pm::after{transform:scaleY(0)}
.faq .q .a{height:0;overflow:hidden;transition:height .5s var(--ease)}
.faq .q .a p{padding:0 48px 26px 0;font-size:17px;color:var(--umber)}
.faq .after{grid-column:6/span 7;margin-top:8px}

/* ==== 10 REVIEWS ==== */
.reviews{background:var(--cream)}
.reviews{background:var(--plaster);padding:clamp(56px,6vw,80px) 0}
.reviews .quotes{position:relative;margin:36px 0 0}
.reviews .quotes .pair{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;align-items:stretch;position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reviews .quotes .pair.on{position:relative;opacity:1;transform:none;pointer-events:auto}
.reviews .quotes .pair blockquote{display:flex;flex-direction:column}
.reviews .quotes .pair blockquote footer{margin-top:auto;padding-top:18px}
.reviews .qbar{height:1px;background:var(--limestone);margin-top:18px;position:relative;overflow:hidden}
.reviews .qfill{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--burgundy);transform:scaleX(0);transform-origin:left}
.reviews .qfill.run{transition:transform 10s linear;transform:none}
.reviews .qdots{display:flex;gap:10px;margin-top:14px}
.reviews .qdots button{width:8px;height:8px;border-radius:50%;border:1px solid var(--umber);background:none;padding:0;cursor:pointer;transition:background .4s var(--ease)}
.reviews .qdots button.on{background:var(--burgundy);border-color:var(--burgundy)}
.reviews blockquote{position:relative;background:var(--cream);border:1px solid var(--limestone);padding:44px 34px 30px 34px;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.reviews blockquote::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--burgundy);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.reviews blockquote:hover{transform:translateY(-4px);box-shadow:0 24px 40px -30px rgba(27,21,18,.4)}
.reviews blockquote:hover::before{transform:none}
.reviews .qm{position:absolute;left:28px;top:6px;font-family:var(--serif);font-size:88px;line-height:1;color:var(--burgundy);opacity:.9}
.reviews blockquote p{font-family:var(--serif);font-size:clamp(18px,1.4vw,20px);line-height:1.45;color:var(--charcoal);max-width:none;padding-top:10px}
.reviews blockquote footer{margin-top:18px;display:flex;align-items:baseline;gap:14px}
.reviews blockquote footer .small{font-size:13px;color:var(--oak)}
.reviews .after{margin-top:32px}

/* ==== 11 ABOUT ==== */
.about{background:var(--cream);padding:clamp(48px,5vw,72px) 0}
.about .grid{align-items:center}
.about .portrait{grid-column:1/span 4;background:var(--cream);padding:18px;border:1px solid var(--limestone);position:relative}
.about .portrait::after{content:"";position:absolute;inset:7px;border:1px solid var(--limestone);pointer-events:none}
.about .portrait .ph{overflow:hidden;border:1px solid var(--oak)}
.about .portrait img{width:100%;aspect-ratio:4/5;object-fit:cover}
.about .copy{grid-column:6/span 7}
.about .copy h2{margin:18px 0 26px}
.about .copy p{font-size:17.5px;color:var(--umber)}
.about .copy p+p{margin-top:18px}
.about .letter{grid-column:1/-1;max-width:760px;margin:32px auto 0;padding:40px 52px 36px;background:var(--plaster);border:1px solid var(--limestone);position:relative;box-shadow:0 24px 50px -32px rgba(27,21,18,.4)}
.about .letter p{font-family:var(--serif);font-size:clamp(18px,1.35vw,20px);line-height:1.45;color:var(--charcoal);max-width:none}
.about .letter p+p{margin-top:14px}
.about .letter .salute{font-size:clamp(24px,1.8vw,28px);margin-bottom:16px}
.about .letter .sig{margin-top:6px;font-family:'Sacramento',cursive;font-size:46px;line-height:1;color:var(--charcoal);padding-left:2px}
.letter .lh{display:flex;align-items:center;gap:14px;padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--limestone)}
.letter .lh .mono{width:26px;height:auto}
.letter .lh-name{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--umber)}
.letter .close{margin-top:26px}
.letter .typed{font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:var(--umber);margin-top:6px}

/* ==== 12 WHERE ==== */
.where{position:relative;background:var(--ink);color:var(--cream);min-height:68vh;display:flex;align-items:flex-end;padding:140px 0 72px;overflow:hidden}
.where .bg{position:absolute;inset:0;overflow:hidden}
.where .bg img{width:100%;height:114%;object-fit:cover;object-position:50% 55%}
.where .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,21,18,.62) 0%,rgba(27,21,18,.34) 40%,rgba(27,21,18,0) 62%),linear-gradient(180deg,rgba(27,21,18,.22) 0%,rgba(27,21,18,.05) 30%,rgba(27,21,18,.62) 65%,rgba(27,21,18,.88) 100%)}
.where .wrap{position:relative;z-index:2;width:100%}
.where .statement{margin:16px 0 30px;max-width:22em;font-size:clamp(26px,2.6vw,36px);color:var(--cream)}
.where .eyebrow{color:var(--limestone)}
.where ul{display:block;list-style:none;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--plaster);text-wrap:balance;max-width:980px;line-height:2.4}
.where li{display:inline;white-space:nowrap}
.where li:not(:last-child)::after{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--limestone);margin:0 16px 0 20px;vertical-align:middle}
.where li.eol::after{display:none}

/* ==== 13 CONTACT ==== */
.contact{background:var(--ink);color:var(--cream);padding:clamp(56px,6.5vw,88px) 0}
.contact .rule{margin-bottom:36px;background:rgba(244,235,226,.22)}
.contact .grid{align-items:start}
.contact .lead{grid-column:1/span 5}
.contact .lead h2{margin:14px 0 18px}
.contact .lead .sub{max-width:24em}
.contact .side{margin-top:30px;display:flex;flex-direction:column;gap:14px}
.contact .chip{display:inline-flex;align-items:center;gap:14px;background:none;border:1px solid rgba(244,235,226,.28);border-radius:2px;padding:12px 16px;color:var(--cream);cursor:pointer;font-size:15.5px;letter-spacing:.02em;transition:border-color var(--t-hover) var(--ease),background var(--t-hover) var(--ease);align-self:flex-start;text-align:left}
.contact .chip:hover{border-color:var(--cream);background:rgba(244,235,226,.06)}
.contact .chip .lab{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--limestone)}
.contact .chip.ph{cursor:default;color:var(--limestone);border-style:dashed}
.contact .chip.ph:hover{border-color:rgba(244,235,226,.28);background:none}
.contact .proof{margin-top:16px;padding-top:20px;border-top:1px solid rgba(244,235,226,.22)}
.contact .proof p{font-family:var(--serif);font-size:22px;line-height:1.35;color:var(--cream)}
.contact .proof .eyebrow{margin-top:14px;color:var(--limestone)}
.contact form{grid-column:7/span 6;display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:22px}
.contact .field{position:relative;padding-top:20px}
.contact .field.full{grid-column:1/-1}
.contact .field label{position:absolute;left:0;top:30px;font-size:15.5px;color:var(--limestone);letter-spacing:.02em;transition:transform .35s var(--ease),font-size .35s var(--ease),color .35s var(--ease);pointer-events:none;transform-origin:left top}
.contact .field input,.contact .field select,.contact .field textarea{width:100%;background:none;border:0;border-bottom:1px solid rgba(244,235,226,.3);padding:10px 0 12px;color:var(--cream);outline:none;border-radius:0;-webkit-appearance:none;appearance:none}
.contact .field select{color:var(--cream)}
.contact .field select option{color:var(--charcoal);background:var(--cream)}
.contact .field textarea{min-height:92px;resize:none;display:block}
.contact .field :-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--ink) inset;-webkit-text-fill-color:var(--cream);caret-color:var(--cream)}
.contact .field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cream);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.contact .field.on::after{transform:none}
.contact .field.on label,.contact .field.filled label{transform:translateY(-24px);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--limestone)}
.contact .field .caret{position:absolute;right:2px;bottom:18px;width:10px;height:10px;border-right:1px solid var(--limestone);border-bottom:1px solid var(--limestone);transform:rotate(45deg);pointer-events:none}
.contact .send{grid-column:1/-1;display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:2px}
.contact .send .btn{background:var(--cream);color:var(--ink)}
.contact .send .btn::before{background:var(--limestone)}
.contact .send .small{color:var(--limestone)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ==== 14 FOOTER ==== */
.footer{background:var(--ink);color:var(--limestone);padding:0 0 28px}
.footer .rule{background:rgba(244,235,226,.18);margin-bottom:34px}
.footer .row{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.footer .fbrand{display:flex;align-items:center;gap:14px}
.footer .fbrand .fs{width:26px;height:auto}
.footer .fbrand .fw{width:150px;height:auto}
.footer .links{display:flex;gap:28px;list-style:none;font-size:14px;letter-spacing:.04em}
.footer .links a{color:var(--cream);background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0% 1px;background-position:100% 100%;transition:background-size var(--t-hover) var(--ease);padding-bottom:2px}
.footer .links a:hover{background-size:100% 1px;background-position:0 100%}
.footer .reach{font-size:14px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.footer .reach button{background:none;border:0;color:var(--cream);cursor:pointer;padding:0 0 2px;letter-spacing:.03em;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0% 1px;background-position:100% 100%;transition:background-size var(--t-hover) var(--ease)}
.footer .reach button:hover{background-size:100% 1px;background-position:0 100%}
.footer .bottom{margin-top:26px;padding-top:18px;border-top:1px solid rgba(244,235,226,.14);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12.5px;letter-spacing:.03em;color:var(--oak)}
.footer .bottom p{max-width:none}

/* ==== copy toast + mobile CTA ==== */
#copytoast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,8px);z-index:40;background:var(--cream);color:var(--ink);font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:12px 20px;border-radius:2px;opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
#copytoast.on{opacity:1;transform:translate(-50%,0)}
#mobilecta{display:none}

/* ==== MOTION KIT (motion.md) ==== */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
html.js .stagger>*{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .stagger.in>*{opacity:1;transform:none}
html.js .stagger.in>*:nth-child(2){transition-delay:.09s}
html.js .stagger.in>*:nth-child(3){transition-delay:.18s}
html.js .stagger.in>*:nth-child(4){transition-delay:.27s}
html.js .stagger.in>*:nth-child(5){transition-delay:.36s}
html.js .stagger.in>*:nth-child(6){transition-delay:.45s}
html.js .stagger.in>*:nth-child(7){transition-delay:.54s}
html.js .stagger.in>*:nth-child(8){transition-delay:.63s}
html.js .stagger.in>*:nth-child(9){transition-delay:.72s}
.rise-l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.rise-i{display:block}
html.js .rise .rise-i{transform:translateY(110%);transition:transform 1.1s var(--ease)}
html.js .rise.in .rise-i{transform:none}
html.js .rise.in .rise-l:nth-child(2) .rise-i{transition-delay:.09s}
html.js .rise.in .rise-l:nth-child(3) .rise-i{transition-delay:.18s}
html.js .rise.in .rise-l:nth-child(4) .rise-i{transition-delay:.27s}
html.js .wipe{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--ease)}
html.js .wipe--left{clip-path:inset(0 100% 0 0)}
html.js .wipe--right{clip-path:inset(0 0 0 100%)}
html.js .wipe.in{clip-path:inset(0 0 0 0)}
html.js .wipe img{transform:scale(1.08);transition:transform var(--t-photo) var(--ease)}
html.js .wipe.in img{transform:none}
html.js .settle img{transform:scale(1.06);transition:transform 2s var(--ease)}
html.js .settle.in img{transform:none}
[data-parallax]{overflow:hidden}
[data-parallax] img{height:114%;top:-7%;position:relative;will-change:transform}
html.js .draw{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
html.js .draw.in{transform:none}
.brighten .w{transition:opacity .25s linear}
html.js .brighten .w{opacity:.22}
.tile{display:block;overflow:hidden}
.tile img{transition:transform 1.2s var(--ease)}
.tile:hover img{transform:scale(1.03)}
.tiles:hover .tile:not(:hover){opacity:.72}
.tiles .tile{transition:opacity .6s var(--ease)}
.cursor{position:fixed;left:0;top:0;width:14px;height:14px;border:1px solid var(--cream);border-radius:50%;pointer-events:none;z-index:50;transform:translate(-50%,-50%);transition:width .45s var(--ease),height .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease),opacity .3s;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:0;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:0}
.cursor.on{opacity:1}
.cursor.big{width:72px;height:72px;background:rgba(244,235,226,.95);border-color:transparent;font-size:11px}
.cursor.dark{border-color:var(--charcoal)}
@media(hover:none){.cursor{display:none}}
html.js .menu .wrap>a{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .menu.open .wrap>a{opacity:1;transform:none}
html.js .menu.open .wrap>a:nth-child(2){transition-delay:.08s}
html.js .menu.open .wrap>a:nth-child(3){transition-delay:.16s}
html.js .menu.open .wrap>a:nth-child(4){transition-delay:.24s}
html.js .menu.open .wrap>a:nth-child(5){transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  html.js .rv,html.js .stagger>*,html.js .settle img,html.js .wipe,html.js .wipe img,html.js .rise .rise-i,html.js .draw,html.js .brighten .w,html.js .menu .wrap>a{opacity:1;transform:none;clip-path:none;transition:none}
  .process .steps::before{transform:none;transition:none}
  .cursor{display:none}
  html{scroll-behavior:auto}
}

/* ==== RESPONSIVE ==== */
@media(max-width:1200px) and (min-width:1101px){
  .why .reasons h3{font-size:25px}
  .reviews blockquote{padding:40px 26px 26px}
}
@media(max-width:1100px){
  .why .reasons{grid-template-columns:1fr;row-gap:16px}
  .next .steps{grid-template-columns:1fr;row-gap:0}
  .next .step{padding:24px 0;border-bottom:1px solid var(--limestone)}
  .next .step:last-child{border-bottom:0}
}
@media(max-width:1100px) and (min-width:901px){
  .services .col h3{font-size:25px}
  .services .col .typ{font-size:14.5px}
}
@media(max-width:1100px){
  .process .steps{grid-template-columns:1fr;row-gap:0}
  .process .step{padding:22px 0;border-bottom:1px solid rgba(244,235,226,.22)}
  .process .step:last-child{border-bottom:0}
  .process .step::before{display:none}
  .process .step b{font-size:40px}
  .where li:not(:last-child)::after{margin:0 11px 0 14px}
  .where ul{max-width:none}
  .why .lead{grid-column:1/span 7}
  .why .aside{grid-column:8/span 5}
  .faq .head{grid-column:1/-1}
  .faq .list,.faq .after{grid-column:1/-1}
  .about .portrait{grid-column:1/span 5}
  .about .copy{grid-column:6/span 7}
}
@media(max-width:900px){
  .nav ul{display:none}
  .nav .logo{display:none}
  .nav .mark{display:block}
  .nav .menu-btn{display:block}
  .grid{grid-template-columns:1fr;row-gap:28px}
  .hero{padding-bottom:104px}
  .hero .bg img{object-position:66% 100%}
  .hero .sub{max-width:19em}
  .hero .shade{background:linear-gradient(180deg,rgba(27,21,18,.4) 0%,rgba(27,21,18,.12) 22%,rgba(27,21,18,.46) 45%,rgba(27,21,18,.88) 100%)}
  .hero .credit{bottom:44px}
  .signpost .wrap{flex-direction:column;align-items:flex-start;gap:18px}
  .signpost ul{gap:24px 32px}
  .where li:not(:last-child)::after{margin:0 11px 0 14px}
  .where ul{max-width:none}
  .where{min-height:0;display:block;padding:0}
  .where .bg{position:relative;height:64vw;inset:auto}
  .where .bg img{height:100%}
  .where .shade{display:none}
  .where .wrap{padding:40px var(--gutter) 56px}
  .featured .stage{display:block;height:auto;min-height:0}
  .featured .frame{height:auto}
  .featured .frame img{width:100%;height:auto}
  .featured .side{padding:40px var(--gutter) 32px}
  .featured .side.tail{padding:28px var(--gutter) 56px}
  .why .lead,.why .aside,.why .lot{grid-column:auto}
  .why .reasons{grid-template-columns:1fr;row-gap:0}
  .why .reasons{grid-template-columns:1fr;row-gap:16px}
  .why .reason{padding:26px 22px 24px}
  .why .reasons p{font-size:17px}
  .services .cols{grid-template-columns:1fr;row-gap:56px}
  .gallery .tiles{grid-template-columns:1fr;row-gap:44px}
  .gallery .t1,.gallery .t2,.gallery .t3,.gallery .t4{grid-column:auto}
  .faq .head,.faq .list,.faq .after{grid-column:auto}
  .faq .q .a p{padding-right:0}
  .about .portrait,.about .copy{grid-column:auto}
  .about .letter{padding:32px 24px 30px;grid-column:auto}
  .about .letter .sig{font-size:38px}
  .contact .lead{display:contents}
  .contact .lead>.stagger:not(.side){order:0}
  .contact form{order:1;grid-column:auto}
  .contact .lead>.side{order:2;margin-top:8px;padding-top:32px;border-top:1px solid rgba(244,235,226,.22)}
  .contact form{grid-template-columns:1fr}
  .contact .field.full{grid-column:auto}
  .footer .row{flex-direction:column;align-items:flex-start;gap:22px}
  .footer .links{flex-wrap:wrap;gap:16px 22px}
  .footer .reach{flex-direction:column;align-items:flex-start;gap:8px}
  #mobilecta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:25;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));background:rgba(27,21,18,.92);backdrop-filter:blur(12px);transform:translateY(110%);transition:transform .45s var(--ease)}
  #mobilecta.on{transform:none}
  #mobilecta .btn{display:block;text-align:center;width:100%}
  body{padding-bottom:0}
}
@media(max-width:900px){
  /* mobile gate 2026-09-19: text links and the S mark were 28-34px tall on touch screens */
  .link{padding-top:6px;padding-bottom:8px}
  .nav .mark{padding:6px 8px;margin-left:-8px}
  .nav .logo{padding:4px 0}
  .reviews .qdots{gap:4px;margin-top:6px}
  .reviews .qdots button{width:36px;height:36px;border:0;background:none;position:relative;margin:0 -6px}
  .reviews .qdots button::before{content:"";position:absolute;inset:14px;border-radius:50%;border:1px solid var(--umber);transition:background .4s var(--ease)}
  .reviews .qdots button.on{background:none}
  .reviews .qdots button.on::before{background:var(--burgundy);border-color:var(--burgundy)}
  .footer.dark .reach button,.footer.dark .reach a{display:inline-block;padding-top:7px;padding-bottom:9px}
  a[aria-label="The Silverado Group, home"]{display:inline-block;padding:4px 0}
}
@media(max-width:600px){
  .where .statement br{display:none}
  .where .statement{text-wrap:balance}
  .where{min-height:0;display:block;padding:0}
  .where .bg{position:relative;height:64vw;inset:auto}
  .where .bg img{height:100%}
  .where .shade{display:none}
  .where .wrap{padding:40px var(--gutter) 56px}
  .why .nums{flex-direction:column;gap:22px;text-align:center;max-width:340px;margin:22px auto 0;padding:22px 0 8px;border-top:1px solid var(--limestone)}
  .why .nums span{text-align:center}
  .process .steps{grid-template-columns:1fr}
  .where ul{text-wrap:balance;line-height:2.3}
  .where li:not(:last-child)::after{margin:0 8px 0 10px}
  .where .statement{max-width:none}
  .signpost ul{flex-direction:column;gap:14px}
}

/* ==== SUB-PAGES (generated by tools/build_subpages.py) ==== */
body.page .nav{color:var(--charcoal)}
.phead{background:var(--cream);padding:calc(72px + clamp(64px,8vw,110px)) 0 clamp(40px,4vw,56px);border-bottom:1px solid var(--limestone)}
br.m{display:none}
.phead h1{margin:18px 0 22px;font-size:clamp(44px,5.6vw,80px)}
.phead .sub{max-width:36em}
.cta-block{background:var(--ink);color:var(--cream)}
.cta-block .rule{margin-bottom:48px;background:rgba(244,235,226,.22)}
.cta-block .grid{align-items:start}
.cta-block .lead{grid-column:1/span 6}
.cta-block .lead h2{margin:18px 0 22px}
.cta-block .lead .sub{max-width:26em;text-wrap:pretty}
.cta-block .side{grid-column:8/span 5;display:flex;flex-direction:column;gap:22px;align-items:flex-start;padding-top:44px}
.cta-block .chip{display:inline-flex;align-items:center;gap:14px;background:none;border:1px solid rgba(244,235,226,.28);border-radius:2px;padding:14px 18px;color:var(--cream);cursor:pointer;font-size:15.5px;letter-spacing:.02em;transition:border-color var(--t-hover) var(--ease),background var(--t-hover) var(--ease);text-align:left}
.cta-block .chip:hover{border-color:var(--cream);background:rgba(244,235,226,.06)}
.cta-block .chip .lab{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--limestone)}
.cta-block .proof{margin-top:10px;padding-top:26px;border-top:1px solid rgba(244,235,226,.22)}
.cta-block .proof p{font-family:var(--serif);font-size:22px;line-height:1.35;color:var(--cream);max-width:22em}
.cta-block .proof .eyebrow{margin-top:14px;color:var(--limestone)}
/* gallery page */
.gallery-page{background:var(--cream);padding-top:48px}
.masonry{display:flex;gap:32px;align-items:flex-start}
.masonry .mcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:32px}
.masonry .shot{display:block}
.masonry .shot .ph{overflow:hidden}
.masonry .shot img{width:100%;height:auto;display:block}
.lb{position:fixed;inset:0;z-index:60;background:rgba(27,21,18,.99);display:flex;align-items:center;justify-content:center;color:var(--cream)}
.lb[hidden]{display:none}
.lb figure{max-width:min(92vw,1400px);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:16px}
.lb figure img{max-width:100%;max-height:82vh;width:auto;height:auto;object-fit:contain;opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.lb.on figure img{opacity:1;transform:none}
.lb button{position:absolute;background:none;border:0;color:var(--cream);cursor:pointer;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:14px}
.lb .lb-close{top:22px;right:var(--gutter)}
.lb .lb-prev,.lb .lb-next{top:50%;transform:translateY(-50%);width:64px;height:64px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(244,235,226,.28);border-radius:50%;transition:border-color .45s var(--ease),background .45s var(--ease)}
.lb .lb-prev{left:var(--gutter)}.lb .lb-next{right:var(--gutter)}
.lb .lb-prev:hover,.lb .lb-next:hover{border-color:var(--cream);background:rgba(244,235,226,.08)}
.lb .lb-prev svg,.lb .lb-next svg{width:22px;height:12px}
/* services page */
.svc{background:var(--plaster)}
.svc:nth-of-type(even){background:var(--cream)}
.svc .grid{align-items:center}
.svc .frame{grid-column:1/span 5;overflow:hidden;position:relative}
.svc .frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--burgundy);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.svc .frame:hover::after{transform:none}
.svc:nth-of-type(even) .frame{grid-column:8/span 5;order:2}
.svc .frame img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 0}
.svc .copy{grid-column:7/span 6}
.svc:nth-of-type(even) .copy{grid-column:1/span 6}
.svc .copy h2{margin:18px 0 22px;font-size:clamp(30px,3vw,42px)}
.svc .copy p{color:var(--umber);font-size:17.5px}
.svc .copy p+p{margin-top:16px}
.svc .typ{margin:26px 0 28px;padding-top:22px;border-top:1px solid var(--limestone)}
.svc .typ ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:6px;font-size:16.5px;color:var(--charcoal)}
.svc .typ li{padding-left:18px;position:relative;text-wrap:pretty}
.svc .typ li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--oak)}
.svc-close{background:var(--cream);border-top:1px solid var(--limestone)}
.svc-close .rule{margin-bottom:40px}
.svc-close .grid{align-items:start}
.svc-close .lead{grid-column:1/span 7}
.svc-close .statement{text-wrap:balance;margin-top:16px;max-width:20em;font-size:clamp(26px,2.6vw,36px)}
.svc-close .side{grid-column:9/span 4;padding-top:40px}
.svc-close .side p{color:var(--umber);font-size:17px;margin-bottom:18px}
/* about page */
.story{background:var(--plaster)}
.story .grid{align-items:start}
.story .portrait{grid-column:1/span 5;background:var(--cream);padding:18px;border:1px solid var(--limestone);position:relative}
.story .portrait::after{content:"";position:absolute;inset:7px;border:1px solid var(--limestone);pointer-events:none}
.story .portrait .ph{overflow:hidden;border:1px solid var(--oak)}
.story .portrait img{width:100%;aspect-ratio:4/5;object-fit:cover}
.story .copy{grid-column:7/span 6}
.story .copy h2{margin:14px 0 16px}
.story .copy p{color:var(--umber);font-size:17px}
.story .copy p+p{margin-top:14px}
.story .nums{display:flex;gap:56px;margin-top:6px;padding-top:12px;border-top:1px solid var(--limestone)}
.story .nums b{font-family:var(--serif);font-weight:400;font-size:clamp(56px,5vw,76px);line-height:1;display:block;color:var(--charcoal)}
.story .nums span{display:block;margin-top:8px}
.note-page{background:var(--cream)}  /* cream after the plaster story once How-we-work went (2026-09-20) */
.note-page .letter{max-width:760px;margin:0 auto;padding:40px 52px 36px;background:var(--plaster);border:1px solid var(--limestone);position:relative;box-shadow:0 18px 40px -30px rgba(27,21,18,.35)}
.note-page .letter p{font-family:var(--serif);font-size:clamp(18px,1.35vw,20px);line-height:1.45;color:var(--charcoal);max-width:none}
.note-page .letter p+p{margin-top:18px}
.note-page .letter .salute{font-size:clamp(24px,1.8vw,28px);margin-bottom:16px}
.note-page .letter .sig{margin-top:6px;font-family:'Sacramento',cursive;font-size:46px;line-height:1;color:var(--charcoal);padding-left:2px}
/* contact page */
.next{background:var(--cream)}
.next .steps{display:grid;grid-template-columns:repeat(3,1fr);column-gap:32px;margin-top:44px;border-top:1px solid var(--limestone)}
.next .step{padding-top:30px;position:relative;transition:transform .6s var(--ease)}
.next .step::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--burgundy);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.next .step:hover::before{transform:none}
.next .step:hover{transform:translateY(-4px)}
.next .step b{font-family:var(--serif);font-weight:400;font-size:56px;line-height:1;display:block;color:var(--burgundy)}
.next .step h3{margin:16px 0 10px;font-size:clamp(26px,1.8vw,28px)}
.next .step p{font-size:17px;color:var(--umber)}
body.page .where{border-top:0}
@media(max-width:1100px){
  .masonry{gap:24px}
  .masonry .mcol{gap:24px}
  .cta-block .lead,.cta-block .side{grid-column:auto}
  .cta-block .side{padding-top:0}
}
@media(max-width:900px){
  .phead{padding-top:calc(72px + 56px)}
  .svc .frame,.svc .copy,.svc:nth-of-type(even) .frame,.svc:nth-of-type(even) .copy{grid-column:auto;order:0}
  .svc-close .lead,.svc-close .side{grid-column:auto}
  .svc-close .side{padding-top:0}
  .story .portrait,.story .copy{grid-column:auto}
  .note-page .letter{padding:32px 24px 30px}
  .note-page .letter .sig{font-size:38px}
  .next .steps{grid-template-columns:1fr;row-gap:0}
  .next .step{padding:24px 0;border-bottom:1px solid var(--limestone)}
  .next .step:last-child{border-bottom:0}
  .lb .lb-prev,.lb .lb-next{width:48px;height:48px;top:auto;bottom:24px;transform:none}
  .lb figure{max-height:none}
  .lb figure img{max-height:70vh}
}
@media(max-width:600px){
  .masonry{gap:16px}
  .masonry .mcol{gap:16px}
  .story .nums{flex-direction:column;gap:24px;text-align:center;max-width:340px;margin:36px auto 0}
  .story .nums span{text-align:center}
  br.m{display:inline}
}

/* thanks page */
.thanks{background:var(--cream);min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:140px 0 100px}
.thanks .grid{align-items:start}
.thanks .copy{grid-column:1/span 6}
.thanks .copy h1{font-size:clamp(40px,5vw,68px);margin:18px 0 24px}
.thanks .copy p{color:var(--umber)}
.thanks .side{grid-column:8/span 5;display:flex;flex-direction:column;gap:18px;padding-top:0}
.thanks .chip{display:inline-flex;align-items:center;gap:14px;background:var(--plaster);border:1px solid var(--limestone);border-radius:2px;padding:14px 18px;color:var(--charcoal);cursor:pointer;font-size:15.5px;letter-spacing:.02em;transition:border-color var(--t-hover) var(--ease);align-self:flex-start;text-align:left}
.thanks .chip:hover{border-color:var(--umber)}
.thanks .chip .lab{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--oak)}
.thanks .chip.ph{cursor:default;color:var(--umber);border-style:dashed;background:none}
.thanks .chip.ph:hover{border-color:var(--limestone)}
.thanks .back{margin-top:36px}
@media(max-width:900px){.thanks .copy,.thanks .side{grid-column:auto}.thanks .side{padding-top:0}}

/* ==== OVERRIDES that must outrank the motion kit (reviewer, 2026-09-07) ==== */
html.js .tile:hover .wipe.in img,html.js .tile.wipe.in:hover img,html.js .col:hover .frame.wipe.in img{transform:scale(1.06)}
html.js .stagger.in>.reason:hover{transform:translateY(-4px)}
html.js .stagger.in>.step:hover{transform:translateY(-6px)}
.link--burgundy:hover{background-size:100% 2px}
:focus-visible{outline:1px solid var(--charcoal);outline-offset:4px}
.dark :focus-visible,.lb :focus-visible{outline-color:var(--cream)}
body.lb-open #mobilecta{display:none}
body.lb-open .nav{visibility:hidden}
@media(max-width:900px){#copytoast{bottom:96px}}
.about .letter p.typed,.note-page .letter p.typed{font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:var(--umber);margin-top:6px;line-height:1.5}
.about .letter p.close,.note-page .letter p.close{margin-top:18px}

/* ==== HERO OPENING (every load): the S on ink, a hairline, then the curtain lifts ==== */
.intro{position:fixed;inset:0;z-index:90;background:var(--ink);display:flex;align-items:center;justify-content:center;transition:clip-path 1.1s var(--ease);clip-path:inset(0 0 0 0)}
.intro.lift{clip-path:inset(0 0 100% 0)}
.intro.gone{display:none}
.intro-in{display:flex;flex-direction:column;align-items:center;gap:26px}
.intro-in img{width:72px;height:auto;opacity:0;transform:translateY(14px) scale(1.04);transition:opacity 1.1s var(--ease),transform 1.4s var(--ease)}
.intro-rule{width:120px;height:1px;border:0;background:rgba(244,235,226,.55);transform:scaleX(0);transition:transform 1s var(--ease) .5s}
.intro.on .intro-in img{opacity:1;transform:none}
.intro.on .intro-rule{transform:none}
html.intro-hold .hero .stagger>*,html.intro-hold .hero .rise .rise-i{transition-delay:1.6s}
html.intro-hold .nav{opacity:0;transition:opacity .8s var(--ease) 1.9s}
html.intro-hold.intro-done .nav{opacity:1}
@media(prefers-reduced-motion:reduce){.intro{display:none}html.intro-hold .nav{opacity:1}}
/* ==== GALLERY PREVIEW: cursor-following enlargement + scroll drift ==== */
.peek{position:fixed;left:0;top:0;width:340px;aspect-ratio:4/5;z-index:45;pointer-events:none;overflow:hidden;opacity:0;transform:translate(-50%,-50%) scale(.96);transition:opacity .45s var(--ease),transform .6s var(--ease);box-shadow:0 30px 60px -30px rgba(27,21,18,.55);border:1px solid rgba(244,235,226,.6)}
.peek img{width:100%;height:100%;object-fit:cover}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(hover:none){.peek{display:none}}

.footer .reach a{color:var(--cream);background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0% 1px;background-position:100% 100%;transition:background-size var(--t-hover) var(--ease);padding-bottom:2px}
.footer .reach a:hover{background-size:100% 1px;background-position:0 100%}
.contact a.chip,.cta-block a.chip{text-decoration:none}
.contact a.chip:hover,.cta-block a.chip:hover{border-color:var(--cream)}
.chip--ext{background:none}
.chip--ext .ext{width:11px;height:11px;margin-left:2px;transition:transform var(--t-hover) var(--ease)}
.chip--ext:hover{background:none}
.chip--ext:hover .ext{transform:translate(2px,-2px)}
.chip--ext:hover span:last-of-type{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
body.page .where{border-top:0}

/* portrait frame I in burgundy (Eric's pick, 2026-09-07): 6px burgundy, cream mat, name plate in the mat */
.about .portrait--plate,.story .portrait--plate{background:var(--plaster);border:5px solid var(--burgundy);padding:16px 16px 14px;box-shadow:0 30px 50px -34px rgba(27,21,18,.5)}
.about .portrait--plate::after,.story .portrait--plate::after{display:none}
.about .portrait--plate .ph,.story .portrait--plate .ph{border:0}
.story .portrait--plate{background:var(--cream);padding:30px 30px 18px}
.portrait--plate .plate{margin-top:12px;text-align:center;font-family:var(--serif);font-size:20px;letter-spacing:.06em;color:var(--charcoal)}
.portrait--plate .plate small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--umber);margin-top:2px}

/* reviews two at a time (Eric, 2026-09-20): a pair per slide, stacked on phones */
@media(max-width:700px){
  .reviews .quotes .pair{grid-template-columns:1fr;row-gap:14px}
}