/* =========================================================================
   Seven Rivers — v2
   Colour: "signature" = oxblood Our work gallery + midnight navy About.
   ========================================================================= */
:root{
  --ivory:#f7f3ec;--gold:#98713a;--champagne:#d7bd88;--stone:#e9e2d7;--red:#6a272d;--muted:#655f58;--line:#d4c8b8;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:92px;
  /* default = signature: oxblood gallery, navy About */
  --deep:#161e33;--deep-line:#44506a;--ink:#1f2130;
  --work-bg:#3a1d21;--work-line:#6d474c;--about-bg:#161e33;--about-line:#44506a;
}
[data-palette="signature"]{--deep:#161e33;--ink:#1f2130;--work-bg:#3a1d21;--work-line:#6d474c;--about-bg:#161e33;--about-line:#44506a}
.work{--deep:var(--work-bg);--deep-line:var(--work-line)}
.about{--deep:var(--about-bg);--deep-line:var(--about-line)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) - 10px)}
body{margin:0;background:var(--ivory);color:var(--ink);font:16px/1.75 var(--sans);-webkit-font-smoothing:antialiased;transition:color .4s}
a{color:inherit;text-decoration:none}
button{font:inherit}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid #9b573f;outline-offset:6px}
img{max-width:100%}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.15}
h2{font-size:clamp(34px,3.5vw,49px);letter-spacing:-1.3px;margin-bottom:25px}
h3{font-size:27px;letter-spacing:-.4px;margin-bottom:15px}
em{color:#90703f;font-weight:400}
.wrap{width:min(1240px,88%);margin:auto}
.section{padding:clamp(64px,9vw,120px) 0}
.eyebrow{font-size:11px;letter-spacing:2.2px;font-weight:600;line-height:1.7;margin-bottom:20px;color:#705942}
.body-large{font:22px/1.6 Georgia,serif}
.skip{position:absolute;top:-100px;left:20px;background:var(--ink);color:#fff;padding:12px;z-index:200}
.skip:focus{top:12px}

/* ---------- Header: always visible, frosted glass, compacts on scroll ---------- */
.masthead{position:sticky;top:0;z-index:100}
.masthead::before{content:'';position:absolute;inset:0;background:rgba(247,243,236,.9);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid transparent;transition:border-color .35s,box-shadow .35s;z-index:-1}
.masthead.is-scrolled::before{border-color:var(--line);box-shadow:0 10px 30px -22px rgba(40,25,15,.45)}
.masthead-inner{display:flex;align-items:center;gap:24px;width:min(1320px,90%);margin:auto;border-bottom:1px solid var(--line);padding:22px 0;transition:padding .35s var(--ease),border-color .35s}
.masthead.is-scrolled .masthead-inner{padding:10px 0;border-color:transparent}
.brand{flex-shrink:0;display:block}
.brand-symbol{display:block;width:200px;aspect-ratio:1785/881;background:linear-gradient(115deg,#59421f 8%,#bd934f 22%,#f1d8a4 30%,#9b7236 40%,#715025 57%,#dcc08a 69%,#997035 84%);background-size:200% 100%;-webkit-mask:url('assets/seven-rivers-mark.webp') center/contain no-repeat;mask:url('assets/seven-rivers-mark.webp') center/contain no-repeat;transition:width .35s var(--ease),background-position 1.2s var(--ease)}
.brand:hover .brand-symbol{background-position:100% 0}
.masthead .brand-symbol{width:200px}
.masthead.is-scrolled .brand-symbol{width:128px}
.masthead-descriptor{font:11px/1.9 Georgia,serif;letter-spacing:2px;color:#6b583e;margin:0;padding-left:24px;border-left:1px solid var(--line);transition:opacity .3s}
.masthead.is-scrolled .masthead-descriptor{opacity:.0;pointer-events:none}
nav{display:flex;align-items:center;margin-left:auto;gap:28px;font-size:14px}
nav a{position:relative;padding:8px 0;transition:color .2s}
nav a::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
nav a:hover::after,nav a.is-active::after{transform:scaleX(1);transform-origin:left}
nav a.is-active{color:var(--red)}
.nav-cta{color:#fff6e9;background:var(--red);padding:9px 18px!important;margin-left:6px;border-radius:999px;transition:background .2s,transform .2s}
.nav-cta::after{display:none}
.nav-cta:hover{background:#4d1d23}
.nav-cta.is-active{color:#fff6e9}
.scroll-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,var(--gold),var(--champagne));transform-origin:left;transform:scaleX(var(--progress,0))}
.menu{display:none}

/* ---------- Opening ---------- */
.opening{display:grid;grid-template-columns:1.6fr 1fr;gap:55px;align-items:center;padding:62px 0 58px}
.opening h1{font-size:clamp(48px,5.6vw,80px);line-height:1.09;letter-spacing:-2.5px;margin:24px 0 0}
.opening h1 .line{display:block;overflow:hidden;padding-bottom:.08em}
.opening h1 .line>*{display:inline-block}
.opening h1 em{color:#957442}
.opening .eyebrow{font-size:12px}
.opening-aside{border-left:1px solid #bca37d;padding-left:42px;max-width:355px;justify-self:end}
.opening-aside p{font:21px/1.6 Georgia,serif;color:#4e514f;margin:0 0 25px}
.js .rise{opacity:0;transform:translateY(105%);animation:rise 1s var(--ease) forwards;animation-delay:calc(var(--d,0) * .14s + .15s)}
.js .opening-aside.rise,.js .eyebrow.rise{transform:translateY(22px)}
@keyframes rise{to{opacity:1;transform:none}}

.button{display:inline-flex;align-items:center;justify-content:space-between;gap:34px;background:var(--red);color:#fff6e9;padding:14px 24px;font-size:14px;border-radius:999px;transition:background .25s,transform .25s var(--ease),box-shadow .25s}
.button:hover{background:#4d1d23;transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(106,39,45,.8)}
.button span{transition:transform .25s var(--ease)}
.button:hover span{transform:translate(3px,-3px)}
.quiet-link{display:block;margin-top:18px;font-size:14px;text-decoration:underline;text-underline-offset:6px;text-decoration-color:#b8a487;transition:text-decoration-color .2s}
.quiet-link:hover{text-decoration-color:var(--red)}

/* ---------- River: widens to full-bleed and zooms gently as you scroll ---------- */
.river-scene{position:relative;margin:0;height:clamp(320px,60vh,640px);--p:0}
.river-frame{position:absolute;inset:0;overflow:hidden;background:var(--deep);clip-path:inset(0 calc(3% * (1 - var(--p))))}
.river-frame img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;display:block;transform:translate3d(0,var(--py,0px),0) scale(calc(1.12 - .1 * var(--p)));will-change:transform}
.river-frame::after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(13,10,8,.72));pointer-events:none}
.river-scene figcaption{position:absolute;z-index:1;left:6%;bottom:62px;color:#fff0d3;font:italic clamp(28px,3.2vw,44px)/1.25 Georgia,serif}
.scene-caption{position:absolute;z-index:1;bottom:28px;left:6%;font-size:10px;letter-spacing:2px;color:#f4e8d4}

.intro-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:65px}
.intro h2{font-size:clamp(33px,3.1vw,43px)}
.intro-copy{max-width:510px;color:var(--muted)}
.signature-line{border-left:2px solid var(--red);padding-left:20px;margin:25px 0 0;font:italic 25px/1.4 Georgia,serif;color:#8d6e3d}

/* ---------- Work: Apple-style sideways gallery ---------- */
.work{background:var(--deep);color:var(--ivory);transition:background .5s}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:55px;margin-bottom:45px}
.section-heading h2{margin-bottom:0}
.section-heading>p{max-width:330px;color:var(--muted);margin-bottom:3px}
.work .eyebrow,.work em{color:var(--champagne)}
.work .section-heading>p{color:#cfcbc2}
.carousel-track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(280px,40vw,590px);gap:34px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px max(6%,calc((100% - 1240px)/2)) 12px;scroll-padding-inline:max(6%,calc((100% - 1240px)/2));scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.carousel-track.is-dragging a{pointer-events:none}
.project{scroll-snap-align:start}
.project-image{position:relative;aspect-ratio:1.72;background:#e7dfd2;overflow:hidden;border-radius:4px}
.project-image img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .8s var(--ease)}
.project a:hover img,.project a:focus-visible img{transform:scale(1.045)}
.project-title{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}
.project-title h3{font-size:25px;margin:0}
.project-title span{color:var(--champagne);font-size:23px;transition:transform .3s var(--ease)}
.project a:hover .project-title span{transform:translate(4px,-4px)}
.project>p{font-size:13px;color:#c9c5bc;margin:7px 0 0}
.project-status{position:absolute;top:15px;right:15px;background:#6a272d;color:#fff3e3;padding:6px 10px;font-size:10px;letter-spacing:1.5px}
.carousel-controls{display:flex;align-items:center;gap:30px;margin-top:34px}
.carousel-progress{flex:1;height:1px;background:var(--deep-line);position:relative;overflow:hidden}
.carousel-progress span{position:absolute;inset:0 auto 0 0;width:var(--w,20%);left:var(--x,0);background:var(--champagne);transition:left .15s linear}
.carousel-buttons{display:flex;gap:12px}
.carousel-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--deep-line);background:transparent;color:var(--ivory);font-size:18px;cursor:pointer;transition:background .25s,border-color .25s,opacity .25s,transform .25s var(--ease)}
.carousel-btn:hover:not(:disabled){background:var(--champagne);border-color:var(--champagne);color:var(--deep);transform:scale(1.06)}
.carousel-btn:disabled{opacity:.3;cursor:default}
.portfolio-note{display:flex;justify-content:space-between;gap:35px;border-top:1px solid var(--deep-line);padding-top:28px;margin-top:45px}
.portfolio-note .eyebrow{display:block;font-size:10px;margin-bottom:8px}
.portfolio-note a,.portfolio-note p{display:block;font:20px/1.5 Georgia,serif;margin:0}

/* ---------- Services ---------- */
.services{display:grid;grid-template-columns:1fr 1fr;gap:0 70px}
.services article{position:relative;padding:28px 0 26px;border-top:1px solid var(--line)}
.services article::before{content:'';position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.services article:hover::before{transform:scaleX(1)}
.svc-num{display:block;font:italic 17px Georgia,serif;color:#985c52;margin-bottom:8px}
.services h3{font-size:28px;transition:transform .4s var(--ease)}
.services article:hover h3{transform:translateX(6px)}
.services p{color:var(--muted);font-size:16px;max-width:500px;margin-bottom:0}

/* ---------- Clients + triptych ---------- */
.clients{background:var(--stone);padding:clamp(56px,7vw,90px) 0}
.clients-layout{display:grid;grid-template-columns:1fr 1.35fr;gap:80px}
.clients-layout>div>p:not(.eyebrow){color:#5b5751;max-width:570px}
.clients ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:0 22px;margin:25px 0 0}
.clients li{font-size:14px;border-bottom:1px solid #c6b69e;padding:9px 0}
.triptych{margin-top:55px;margin-bottom:0}
.triptych-frame{position:relative;aspect-ratio:2.35;overflow:hidden;border-radius:4px;background:#d9d0c2}
.triptych-frame img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;transform-origin:0 50%;transform:translate3d(calc(var(--tx,0) * 1%),var(--py,0px),0) scale(var(--s,1));transition:transform 1.6s cubic-bezier(.65,0,.35,1);will-change:transform}

/* ---------- Approach: sticky storytelling ---------- */
.approach-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:90px;align-items:start}
.approach-sticky{position:sticky;top:calc(var(--header-h) + 30px)}
.approach-lede{color:var(--muted);margin-bottom:34px}
.approach-counter{display:flex;align-items:baseline;gap:12px;font-family:Georgia,serif;color:#985c52}
.approach-num{font-style:italic;font-size:clamp(80px,9vw,128px);line-height:1;display:inline-block;transition:opacity .3s,transform .45s var(--ease)}
.approach-num.is-changing{opacity:0;transform:translateY(18px)}
.approach-of{font-size:20px;color:#a58f78}
.approach-rail{height:1px;background:var(--line);margin-top:26px;position:relative;max-width:360px}
.approach-rail span{position:absolute;inset:0;background:var(--red);transform-origin:left;transform:scaleX(var(--ap,.142));transition:transform .5s var(--ease)}
.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:64px 1fr;column-gap:10px;border-top:1px solid var(--line);padding:clamp(34px,6vh,60px) 0;transition:opacity .5s var(--ease),border-color .5s}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps span{font:italic 26px Georgia,serif;color:#985c52;grid-row:span 2;padding-top:4px}
.steps h3{font-size:clamp(28px,2.6vw,36px);margin:0 0 10px}
.steps p{font-size:16px;color:var(--muted);margin:0;max-width:430px}
.js .steps li{opacity:.28}
.js .steps li.is-active{opacity:1;border-top-color:var(--red)}

/* ---------- About / AI ---------- */
.about{background:var(--deep);color:var(--ivory);transition:background .5s}
.about-layout{display:grid;grid-template-columns:1.45fr 1fr;gap:90px;align-items:center}
.about .eyebrow,.about em{color:var(--champagne)}
.about p:not(.eyebrow){color:#d9d5cc;max-width:650px}
.about .body-large{font-size:23px;margin-bottom:24px}
.about-signature{text-align:center;border-left:1px solid var(--deep-line);padding:35px 0 35px 55px}
.about-signature .brand-symbol{width:100%;background:linear-gradient(115deg,#a3854d 8%,#c5a773 22%,#ffe8bc 30%,#ba965c 40%,#957343 57%,#e5cfaa 69%,#c4a371 84%);background-size:200% 100%;animation:shimmer 7s ease-in-out infinite alternate}
@keyframes shimmer{to{background-position:100% 0}}
.about-signature p{font:17px/1.8 Georgia,serif;margin:22px 0 0}
.ai{display:grid;grid-template-columns:1fr 1.15fr;gap:65px}
.ai>div>p:not(.eyebrow):not(.body-large){color:var(--muted)}
.ai h2{font-size:49px}

/* ---------- Contact ---------- */
.contact{padding:clamp(60px,8vw,100px) 0;background:var(--stone);border-top:1px solid #c7b697}
.contact-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:75px;align-items:center}
.contact .eyebrow{color:var(--red)}
.contact h2{font-size:clamp(38px,4.3vw,58px);margin:0}
.contact h2 em{color:var(--red)}
.contact-intro{max-width:390px;color:#59564f}
.contact-email{display:inline-block;margin-top:18px;font-size:16px}
.contact .contact-email{text-decoration:underline;text-decoration-color:#bca276;text-underline-offset:6px}
.scope-form{border-top:1px solid #bfae94;padding-top:23px}
.form-heading>p:last-child{color:#59564f;margin-bottom:25px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.scope-form label{display:block;color:#514b45;font-size:13px;margin-bottom:16px}
.scope-form input,.scope-form textarea,.scope-form select{display:block;width:100%;margin-top:7px;border:1px solid #c9bca9;background:rgba(255,255,255,.4);color:var(--ink);font:15px/1.5 var(--sans);padding:11px 12px;border-radius:6px;transition:border-color .2s,background .2s,box-shadow .2s}
.scope-form input:hover,.scope-form textarea:hover{background:rgba(255,255,255,.65)}
.scope-form textarea{resize:vertical;min-height:80px}
.scope-form input:focus,.scope-form textarea:focus,.scope-form select:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 3px rgba(106,39,45,.15)}
.scope-form .is-invalid{border-color:#a2323c;box-shadow:0 0 0 3px rgba(162,50,60,.12)}
.form-submit{border:0;cursor:pointer;margin-top:5px}
.form-note{color:#756d63;font-size:12px;margin:13px 0 0}
.form-note.is-error{color:#a2323c}
.form-note.is-done{color:#3f6b45}

/* ---------- Footer ---------- */
.footer{padding-top:35px}
.footer-top{display:flex;align-items:center;gap:35px;justify-content:space-between;padding-bottom:30px}
.footer .brand-symbol{width:155px}
.footer-top p{font:14px/1.8 Georgia,serif;margin:0;flex:1}
.footer-top>a:last-child{font-size:13px}
.footer-bottom{border-top:1px solid var(--line);padding:20px 0;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}

/* ---------- Floating: back-to-top ---------- */
.to-top{position:fixed;right:22px;bottom:22px;z-index:90;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(247,243,236,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);color:var(--ink);font-size:18px;box-shadow:0 10px 24px -14px rgba(40,25,15,.6);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .35s,transform .35s var(--ease)}
.to-top.is-shown{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--red);color:#fff6e9;border-color:var(--red)}

/* ---------- Reveal on scroll (only when JS is running) ---------- */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--rd,0s)}
.js .reveal.is-visible{opacity:1;transform:none}


/* =========================== Responsive =========================== */
@media(max-width:1080px){
  .masthead-descriptor{display:none}.masthead-inner{gap:15px}nav{gap:20px}.masthead .brand-symbol{width:170px}
  .opening-aside{padding-left:28px}.opening{gap:30px}.opening h1{font-size:60px}.opening-aside p{font-size:19px}
  .intro-layout{gap:35px}.about-layout{gap:40px}.about-signature{padding-left:30px}.approach-layout{gap:50px}
}
@media(max-width:760px){
  :root{--header-h:70px}
  .masthead-inner{padding:14px 0;justify-content:space-between}
  .masthead .brand-symbol{width:140px}.masthead.is-scrolled .brand-symbol{width:112px}
  .menu{display:inline-flex;align-items:center;gap:10px;border:1px solid #bbab92;background:transparent;color:var(--ink);padding:8px 14px;border-radius:999px;position:relative;z-index:120;cursor:pointer}
  .menu-lines{position:relative;width:16px;height:10px}
  .menu-lines::before,.menu-lines::after{content:'';position:absolute;left:0;width:100%;height:1.5px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
  .menu-lines::before{top:1px}.menu-lines::after{top:7px}
  .menu[aria-expanded="true"] .menu-lines::before{top:4px;transform:rotate(45deg)}
  .menu[aria-expanded="true"] .menu-lines::after{top:4px;transform:rotate(-45deg)}
  nav{position:fixed;inset:0;z-index:110;margin:0;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:90px 9% 60px;background:rgba(247,243,236,.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
  nav.open{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
  nav a{font:clamp(32px,9vw,44px)/1.3 Georgia,serif;letter-spacing:-.8px;opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  nav.open a{opacity:1;transform:none}
  nav.open a:nth-child(2){transition-delay:.05s}nav.open a:nth-child(3){transition-delay:.1s}nav.open a:nth-child(4){transition-delay:.15s}nav.open a:nth-child(5){transition-delay:.2s}
  nav a::after{bottom:6px}
  .nav-cta{margin:24px 0 0;font:15px var(--sans)!important;letter-spacing:0;padding:14px 24px!important}
  .opening{grid-template-columns:1fr;gap:30px;padding:39px 0}
  .opening h1{font-size:clamp(40px,9.7vw,64px);letter-spacing:-1.4px;margin-top:19px}
  .opening .eyebrow{font-size:10px;letter-spacing:1.5px}
  .opening-aside{justify-self:start;border-left:2px solid var(--red);padding-left:22px;max-width:none}
  .opening-aside p{font:18px/1.55 Georgia,serif;margin-bottom:20px}.opening-aside p br{display:none}
  .quiet-link{display:inline-block;margin:0 0 0 16px}
  .river-scene{height:clamp(280px,48vh,420px)}
  .river-scene figcaption{font-size:28px;bottom:62px}
  .scene-caption{font-size:9px;letter-spacing:1px;max-width:280px;line-height:1.7}
  .button{gap:20px}
  .intro-layout,.clients-layout,.about-layout,.ai,.contact-layout,.approach-layout{grid-template-columns:1fr;gap:25px}
  .intro h2{font-size:34px}.signature-line{margin-top:15px}
  .section-heading{display:block;margin-bottom:30px}.section-heading>p{max-width:none;margin-top:25px}
  .carousel-track{grid-auto-columns:82%;gap:18px}
  .carousel-controls{margin-top:24px}.carousel-btn{width:42px;height:42px}
  .project-title{margin-top:15px}.project-title h3{font-size:22px}
  .portfolio-note{flex-direction:column;gap:22px}
  .services{grid-template-columns:1fr}.services article{padding:25px 0}.services h3{font-size:27px}
  .clients h2{margin-bottom:0}.clients ul{margin-top:12px}
  .triptych{margin-top:35px}.triptych-frame{aspect-ratio:1.5}
  .approach-sticky{position:static}.approach-counter,.approach-rail{display:none}.approach-lede{margin-bottom:10px}
  .js .steps li{opacity:1}.steps li{grid-template-columns:48px 1fr;padding:26px 0}
  .about-signature{border-left:0;border-top:1px solid var(--deep-line);padding:30px 0 0;max-width:280px;width:100%;margin:5px auto 0}
  .about-signature .brand-symbol{width:210px;margin:auto}
  .about h2{font-size:35px}.ai h2{font-size:42px}
  .contact h2{font-size:43px}
  .form-grid{grid-template-columns:1fr}.scope-form{margin-top:15px}.contact-intro{margin-top:20px}.form-submit{width:100%}
  .footer-top{flex-wrap:wrap;gap:20px}.footer-top p{font-size:13px;min-width:160px}.footer-bottom{font-size:11px;flex-wrap:wrap;padding-bottom:80px}
  .to-top{right:14px;bottom:14px;width:44px;height:44px}
}
@media(max-width:380px){.quiet-link{display:block;margin:15px 0 0}.opening h1{font-size:39px}.opening-aside{padding-left:17px}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .rise,.js .reveal{opacity:1;transform:none}
  .river-frame{clip-path:none}.river-frame img,.triptych-frame img{transform:none}
}

/* =========================== v2.1 motion layer =========================== */

/* Headings: each line slides up from behind a mask as it enters */
.js h2 .line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.js h2 .line-in{display:inline-block;transform:translateY(110%);transition:transform 1.15s var(--ease);transition-delay:var(--ld,0s)}
.js h2.is-in .line-in{transform:none}
/* Eyebrow labels settle their letter-spacing as they appear */
.js .section .eyebrow,.js .clients .eyebrow,.js .contact .eyebrow{opacity:0;letter-spacing:6px;transition:opacity 1s var(--ease),letter-spacing 1.4s var(--ease)}
.js .eyebrow.is-in{opacity:1;letter-spacing:2.2px}

/* Who we work with: tabs that glide the camera across the triptych */
.triptych-tabs{display:flex;gap:6px;margin-bottom:18px;padding:5px;background:rgba(255,255,255,.45);border:1px solid #d6c9b4;border-radius:999px;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.triptych-tabs::-webkit-scrollbar{display:none}
.triptych-tabs button{position:relative;overflow:hidden;border:0;background:transparent;color:#5b5751;font-size:13px;padding:9px 18px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .3s,background .3s}
.triptych-tabs button span{position:relative;z-index:1}
.triptych-tabs button:hover{color:var(--ink)}
.triptych-tabs button[aria-selected="true"]{background:var(--ink);color:var(--ivory)}
.triptych-tabs i{position:absolute;left:18px;right:18px;bottom:5px;height:1px;background:var(--champagne);transform:scaleX(0);transform-origin:left;opacity:0}
.triptych-tabs button[aria-selected="true"] i{opacity:.9}
.triptych-tabs.is-playing button[aria-selected="true"] i{animation:tabfill var(--dur,6s) linear forwards}
@keyframes tabfill{to{transform:scaleX(1)}}
.triptych-copy{position:absolute;left:0;right:0;bottom:0;padding:60px 5% 26px;background:linear-gradient(transparent,rgba(20,14,10,.62));pointer-events:none}
.triptych-line{position:absolute;left:5%;right:5%;bottom:26px;margin:0;color:#fff4e2;font:italic clamp(19px,2.2vw,30px)/1.3 Georgia,serif;max-width:640px;opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.triptych-line.is-shown{opacity:1;transform:none;transition-delay:.45s}

/* Statement: words light up as you scroll through it */
.statement{padding:clamp(80px,14vw,190px) 0;background:var(--ivory)}
.statement-text{font:clamp(30px,4.3vw,62px)/1.2 Georgia,'Times New Roman',serif;letter-spacing:-1.2px;margin:0;max-width:1100px;text-wrap:balance;color:var(--ink)}
.statement-text em{color:#90703f}
.js .statement-text .w{opacity:.14;transition:opacity .35s ease}
.js .statement-text .w.on{opacity:1}

/* Questions: smooth accordion */
.faq-layout{display:grid;grid-template-columns:1fr 1.45fr;gap:80px;align-items:start}
.faq-layout>div:first-child{position:sticky;top:calc(var(--header-h) + 30px)}
.faq-lede{color:var(--muted);max-width:320px}
.acc{border-top:1px solid var(--line)}
.acc:last-child{border-bottom:1px solid var(--line)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;cursor:pointer;list-style:none;font:clamp(20px,1.9vw,25px)/1.3 Georgia,serif;letter-spacing:-.3px;transition:color .25s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--red)}
.acc summary i{position:relative;flex:0 0 34px;height:34px;border:1px solid var(--line);border-radius:50%;transition:background .3s,border-color .3s,transform .5s var(--ease)}
.acc summary i::before,.acc summary i::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .45s var(--ease)}
.acc summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc[open] summary i{background:var(--red);border-color:var(--red);color:#fff6e9;transform:rotate(180deg)}
.acc[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
.acc-body{overflow:hidden}
.acc-body p{color:var(--muted);margin:0;padding:0 60px 28px 0;max-width:620px}

/* Moving band */
.marquee{overflow:hidden;border-top:1px solid var(--line);padding:clamp(22px,3vw,40px) 0;background:var(--ivory)}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-track span{font:clamp(44px,7.5vw,112px)/1.1 Georgia,'Times New Roman',serif;letter-spacing:-2px;white-space:nowrap;color:var(--ink);padding-right:.3em}
.marquee-track em{color:#90703f}
.marquee-track b{font-weight:400;color:var(--champagne);padding:0 .25em}

@media(max-width:760px){
  .triptych-tabs{width:100%}.triptych-tabs button{padding:8px 13px;font-size:12px;flex:1 0 auto}
  .triptych-line{bottom:18px;font-size:18px}
  .faq-layout{grid-template-columns:1fr;gap:20px}.faq-layout>div:first-child{position:static}
  .acc-body p{padding-right:0}
  .statement-text{letter-spacing:-.6px}
}
@media(prefers-reduced-motion:reduce){
  .js h2 .line-in{transform:none}.js .eyebrow{opacity:1;letter-spacing:2.2px}
  .js .statement-text .w{opacity:1}.triptych-line{transition:none}
}

@media print{.masthead,.to-top{display:none}}
.acc.is-closing summary i{background:transparent;border-color:var(--line);color:inherit;transform:none}
.acc.is-closing summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
/* Title-card placeholder until a screenshot is added */
.project-image.is-placeholder{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:8%;background:radial-gradient(120% 90% at 85% 0%,rgba(215,189,136,.28),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.07),rgba(0,0,0,.25)),var(--deep);border:1px solid var(--deep-line)}
.ph-name{font:italic clamp(28px,3vw,44px)/1.1 Georgia,serif;color:var(--champagne);letter-spacing:-.5px;transition:transform .8s var(--ease)}
.ph-domain{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#d8cdbd}
.project a:hover .ph-name{transform:translateY(-4px)}

/* =========================== v2.2 curated work, Our Work page, Pricing =========================== */
.features{display:grid;grid-template-columns:repeat(6,1fr);gap:44px 34px}
.feature{grid-column:span 2}
.feature-lg{grid-column:span 3}
.feature a{display:block}
.feature .project-image{aspect-ratio:1.72}
.feature a:hover img,.feature a:focus-visible img{transform:scale(1.045)}
.feature a:hover .project-title span{transform:translateX(5px)}
.feature>a>p{font-size:13px;color:#c9c5bc;margin:7px 0 0}
.feature-lg .project-title h3{font-size:clamp(26px,2.3vw,32px)}
.all-card{aspect-ratio:1.72;border-radius:4px;border:1px solid var(--deep-line);display:flex;flex-direction:column;justify-content:flex-end;padding:9%;background:radial-gradient(110% 90% at 90% 0%,rgba(215,189,136,.22),transparent 60%),rgba(0,0,0,.18);transition:border-color .4s,background-color .4s}
.feature-all a:hover .all-card{border-color:var(--champagne);background-color:rgba(0,0,0,.28)}
.all-count{font:italic clamp(56px,6vw,92px)/1 Georgia,serif;color:var(--champagne);transition:transform .7s var(--ease)}
.feature-all a:hover .all-count{transform:translateY(-6px)}
.all-label{font-size:13px;color:#d8cdbd;max-width:240px;margin-top:10px;line-height:1.55}
.inline-link{color:var(--red);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.footer-links{display:flex;gap:22px;flex-wrap:wrap;font-size:13px}
.footer-links a:hover{color:var(--red)}

/* Sub-page opening */
.page-hero{padding:clamp(56px,8vw,110px) 0 clamp(40px,5vw,64px)}
.page-hero h1{font-size:clamp(46px,6vw,86px);line-height:1.05;letter-spacing:-2.4px;margin:18px 0 0}
.page-hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em}
.page-hero h1 .line>*{display:inline-block}
.page-lede{font:clamp(19px,1.7vw,23px)/1.55 Georgia,serif;color:#4e514f;max-width:640px;margin:26px 0 0}

/* Our Work page */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:18px 0 34px;border-bottom:1px solid var(--line);margin-bottom:10px}
.filter-chip{border:1px solid var(--line);background:transparent;color:var(--ink);padding:9px 18px;border-radius:999px;font-size:13px;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.filter-chip:hover{border-color:var(--ink)}
.filter-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.filter-count{margin-left:auto;font:italic 15px Georgia,serif;color:var(--muted)}
.case{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(30px,5vw,70px);align-items:center;padding:clamp(40px,6vw,76px) 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.case.is-entering{opacity:0;transform:translateY(20px)}
.case:nth-of-type(even) .case-media{order:2}
.case-media{position:relative;border-radius:6px;overflow:hidden;background:#e7dfd2;box-shadow:0 30px 60px -38px rgba(40,25,15,.55)}
.case-media img{display:block;width:100%;height:auto;transition:transform 1s var(--ease)}
.case:hover .case-media img{transform:scale(1.03)}
.case-tag{display:inline-block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#705942;margin-bottom:14px}
.case h2{font-size:clamp(32px,3.2vw,46px);margin-bottom:18px}
.case dl{margin:0 0 26px}
.case dt{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--red);margin-top:16px}
.case dd{margin:4px 0 0;color:var(--muted);max-width:480px}
.case-link{display:inline-flex;align-items:center;gap:10px;font-size:14px;padding:11px 20px;border:1px solid var(--ink);border-radius:999px;transition:background .25s,color .25s}
.case-link:hover{background:var(--ink);color:var(--ivory)}
.case-private{font:italic 15px Georgia,serif;color:var(--muted)}
.work-cta{padding:clamp(64px,9vw,120px) 0;text-align:center}
.work-cta h2{margin-bottom:28px}

/* Pricing page */
.packages{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.package{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;padding:34px 30px 30px;background:rgba(255,255,255,.4);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.package:hover{transform:translateY(-6px);box-shadow:0 30px 60px -40px rgba(40,25,15,.6);border-color:#c9b99f}
.package.is-featured{background:var(--work-bg);border-color:var(--work-bg);color:var(--ivory)}
.package.is-featured:hover{border-color:var(--champagne)}
.package-badge{position:absolute;top:-12px;left:30px;background:var(--champagne);color:#3a1d21;font-size:10px;letter-spacing:1.8px;padding:5px 11px;border-radius:999px;font-weight:600}
.package h3{font-size:30px;margin:0 0 6px}
.package-for{font-size:14px;color:var(--muted);margin:0 0 22px;min-height:48px}
.is-featured .package-for{color:#d9cfc2}
.price{display:flex;align-items:baseline;gap:8px;margin:0 0 4px}
.price small{font-size:13px;color:var(--muted)}
.is-featured .price small{color:#d9cfc2}
.price b{font:400 clamp(40px,3.6vw,52px)/1 Georgia,serif;letter-spacing:-1.5px;font-variant-numeric:lining-nums tabular-nums}
.price-sub{font-size:12px;color:var(--muted);margin:0 0 22px}
.is-featured .price-sub{color:#cfc4b6}
.package ul{list-style:none;padding:0;margin:0 0 28px;flex:1}
.package li{position:relative;padding:9px 0 9px 26px;border-top:1px solid var(--line);font-size:14px}
.is-featured li{border-color:rgba(215,189,136,.25)}
.package li::before{content:'';position:absolute;left:2px;top:17px;width:10px;height:5px;border-left:1.5px solid var(--red);border-bottom:1.5px solid var(--red);transform:rotate(-45deg)}
.is-featured li::before{border-color:var(--champagne)}
.package .button{justify-content:center}
.is-featured .button{background:var(--champagne);color:#3a1d21}
.is-featured .button:hover{background:#e6cf9f}
.package-time{font-size:12px;color:var(--muted);margin:12px 0 0;text-align:center}
.is-featured .package-time{color:#cfc4b6}
.care{background:var(--about-bg);color:var(--ivory)}
.care .eyebrow,.care em{color:var(--champagne)}
.care .section-heading>p{color:#cfd3dc}
.care-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--about-line)}
.care-plan{padding:30px 30px 10px 0;border-right:1px solid var(--about-line);margin-right:30px}
.care-plan:last-child{border-right:0;margin-right:0}
.care-plan h3{font-size:25px;margin:0 0 10px}
.care-plan .price b{font-size:40px}
.care-plan .price small,.care-plan p{color:#cfd3dc}
.care-plan p{font-size:14px;margin:12px 0 0}
.addons{display:grid;grid-template-columns:repeat(2,1fr);gap:0 60px}
.addon{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.addon h3{font-size:21px;margin:0}
.addon p{font-size:13px;color:var(--muted);margin:4px 0 0}
.addon b{font:400 20px Georgia,serif;white-space:nowrap;color:var(--red);font-variant-numeric:tabular-nums}
.price-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:10px}
.price-note h3{font-size:22px;margin-bottom:8px}
.price-note p{color:var(--muted);font-size:15px;margin:0}
.market{margin-top:50px;padding:26px 30px;border-left:2px solid var(--gold);background:rgba(255,255,255,.4);font-size:14px;color:var(--muted)}
.market strong{color:var(--ink);font-weight:600}

@media(max-width:1180px){.packages{grid-template-columns:1fr 1fr;gap:26px 18px}}
@media(max-width:760px){
  .features{grid-template-columns:1fr;gap:34px}.feature,.feature-lg{grid-column:auto}
  .filter-count{width:100%;margin:6px 0 0}
  .case{grid-template-columns:1fr}.case:nth-of-type(even) .case-media{order:0}
  .packages{grid-template-columns:1fr}
  .package-for{min-height:0}
  .care-plans{grid-template-columns:1fr}.care-plan{border-right:0;margin-right:0;border-bottom:1px solid var(--about-line);padding:26px 0}
  .addons,.price-notes{grid-template-columns:1fr;gap:0 0}.price-notes{gap:26px}
  .footer-links{gap:16px}
}
.case[hidden]{display:none}
@media(max-width:760px){.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-6%;padding-inline:6%}.filters::-webkit-scrollbar{display:none}.filter-chip{flex:0 0 auto}.filter-count{display:none}}

/* =========================== v2.3 one-at-a-time showcase, triptych focus =========================== */
.showcase{position:relative}
.show-stage{display:grid;touch-action:pan-y}
.show-slide{grid-area:1/1;display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center;opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility 0s .8s}
.show-slide.is-active{opacity:1;visibility:visible;transition:opacity .8s var(--ease),visibility 0s}
.show-media{display:block;position:relative;border-radius:6px;overflow:hidden;aspect-ratio:1.72;background:rgba(0,0,0,.2);box-shadow:0 40px 80px -50px rgba(0,0,0,.8)}
.show-media img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transform:scale(1.07);transition:transform 1.4s var(--ease)}
.show-slide.is-active .show-media img{transform:scale(1)}
.show-media:hover img{transform:scale(1.03)!important}
.show-info>*{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.show-slide.is-active .show-info>*{opacity:1;transform:none}
.show-slide.is-active .show-info>:nth-child(1){transition-delay:.15s}
.show-slide.is-active .show-info>:nth-child(2){transition-delay:.25s}
.show-slide.is-active .show-info>:nth-child(3){transition-delay:.35s}
.show-slide.is-active .show-info>:nth-child(4){transition-delay:.45s}
.show-tag{display:block;font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--champagne);margin-bottom:14px}
.show-info h3{font-size:clamp(32px,3.4vw,50px);letter-spacing:-1px;margin:0 0 16px}
.show-info p{color:#d9cfc2;font:clamp(17px,1.4vw,20px)/1.55 Georgia,serif;margin:0 0 26px;max-width:400px}
.show-link{display:inline-flex;align-items:center;gap:10px;font-size:14px;padding:11px 20px;border:1px solid var(--champagne);border-radius:999px;color:var(--ivory);transition:background .25s,color .25s}
.show-link:hover{background:var(--champagne);color:#3a1d21}
.show-link span{transition:transform .25s var(--ease)}
.show-link:hover span{transform:translateX(4px)}
.show-controls{display:flex;align-items:center;gap:26px;margin-top:40px;padding-top:26px;border-top:1px solid var(--deep-line)}
.show-dots{display:flex;gap:10px;align-items:center}
.show-dot{position:relative;width:10px;height:10px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.28);cursor:pointer;overflow:hidden;transition:width .5s var(--ease),background .3s}
.show-dot:hover{background:rgba(255,255,255,.5)}
.show-dot[aria-current="true"]{width:48px;background:rgba(255,255,255,.22)}
.show-dot i{position:absolute;inset:0;background:var(--champagne);transform:scaleX(0);transform-origin:left}
.show-dot[aria-current="true"] i{transform:scaleX(1)}
.showcase.is-playing .show-dot[aria-current="true"] i{transform:scaleX(0);animation:tabfill var(--dur,7s) linear forwards}
.show-more{margin-left:auto;display:inline-flex;align-items:center;gap:10px;font:italic 18px Georgia,serif;color:var(--champagne);border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .3s}
.show-more:hover{border-color:var(--champagne)}
.show-more span{font-style:normal;transition:transform .3s var(--ease)}
.show-more:hover span{transform:translateX(5px)}

/* Triptych: the chosen room stays bright, the others dim */
.triptych-frame img{transform:translate3d(0,var(--py,0px),0)!important}
.tri-mask{position:absolute;top:0;bottom:0;width:33.334%;background:rgba(18,12,9,.66);-webkit-backdrop-filter:grayscale(.6);backdrop-filter:grayscale(.6);transition:opacity .9s var(--ease);pointer-events:none;z-index:1}
.tri-mask[data-m="0"]{left:0}.tri-mask[data-m="1"]{left:33.333%}.tri-mask[data-m="2"]{left:66.666%}
.tri-mask.is-lit{opacity:0}
.tri-frame{position:absolute;top:14px;bottom:14px;width:calc(33.333% - 28px);left:calc(var(--ti,0) * 33.333% + 14px);border:1px solid rgba(215,189,136,.85);border-radius:3px;transition:left .9s var(--ease);pointer-events:none;z-index:2}
.triptych-copy{z-index:3;background:none;padding:0}
.triptych-line{left:calc(var(--ti,0) * 33.333% + 34px);right:auto;width:calc(33.333% - 68px);bottom:34px;font-size:clamp(17px,1.5vw,22px);text-shadow:0 2px 14px rgba(0,0,0,.55);transition:opacity .7s var(--ease),transform .9s var(--ease),left 0s}
.triptych-frame::after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(15,10,8,.45));z-index:1;pointer-events:none}

@media(max-width:1080px){.show-slide{grid-template-columns:1.3fr 1fr}}
@media(max-width:760px){
  .show-slide{grid-template-columns:1fr;gap:22px;align-items:start}
  .show-info h3{font-size:30px}
  .show-controls{flex-wrap:wrap;gap:18px}
  .show-more{margin-left:0;width:100%}
  .tri-frame{top:8px;bottom:8px;width:calc(33.333% - 16px);left:calc(var(--ti,0) * 33.333% + 8px)}
  .triptych-line{left:5%;width:90%;bottom:18px;font-size:17px}
}
@media(prefers-reduced-motion:reduce){.show-slide,.show-info>*,.show-media img{transition:none!important;transform:none!important}}

.package{padding:32px 24px 26px}
.package h3{font-size:27px}
.price b{font-size:clamp(36px,3vw,46px)}
.host-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.host-item{padding:28px 30px 6px 0;margin-right:30px;border-right:1px solid var(--line)}
.host-item:last-child{border-right:0;margin-right:0}
.host-k{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.host-item .price b{font-size:34px}
.host-item p:last-child{color:var(--muted);font-size:14px;margin:10px 0 0}
.budget-card{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;padding:clamp(34px,5vw,64px);border-radius:12px;background:var(--stone);border:1px solid #d9ccb8}
.budget-card h2{margin-bottom:0}
.budget-card .body-large{margin-bottom:20px}
.budget-list{list-style:none;padding:0;margin:0 0 22px}
.budget-list li{padding:12px 0;border-top:1px solid #d3c5ae;color:var(--muted);font-size:15px}
.budget-list b{color:var(--ink);font-weight:600}
.budget-example{font:italic 16px/1.6 Georgia,serif;color:#5b5751;margin:0;padding:14px 18px;background:rgba(255,255,255,.5);border-radius:8px}
.budget-example b{font-style:normal;color:var(--red)}
@media(max-width:760px){.host-grid,.budget-card{grid-template-columns:1fr;gap:20px}.host-item{border-right:0;margin-right:0;border-bottom:1px solid var(--line);padding:22px 0}}
.budget-samples{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 18px}
.budget-samples a{border:1px solid var(--red);color:var(--red);border-radius:999px;padding:7px 14px;transition:background .2s,color .2s}
.budget-samples a:hover{background:var(--red);color:#fff6e9}