:root{
  color-scheme:light;
  --cream:#F7F3E8;
  --ink:#14110B;
  --gold:#8A724C;
  --gold-soft:#B59A6D;
  --paper:#EBE2D4;
  --line:rgba(20,17,11,.14);
  --line-light:rgba(247,243,232,.16);
  --sans:'Inter Tight',sans-serif;
  --serif:'Prata',serif;
  --accent:'Prata',serif;
  --pad:clamp(20px,5.5vw,88px);
  --nav-h:54px;
  --ease:cubic-bezier(.2,.75,.2,1);
  --mx:50%;--my:50%;
}

/* ---------- Reset / global ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;background:var(--cream);max-width:100%;overflow-x:clip}
body{margin:0;max-width:100%;background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:400;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.no-scroll,body.menu-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
button{border:0}
::selection{background:var(--gold);color:var(--cream)}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;left:16px;top:12px;z-index:5000;transform:translateY(-150%);background:var(--ink);color:var(--cream);padding:10px 14px;text-decoration:none;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.skip-link:focus{transform:none}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.serif{font-family:var(--serif)}
.eyebrow,.section-index,.hero-meta,.nav,.composer-head,.control label,.project-meta small,.final-top,.footer-line,.modal-kicker,.filters,.field label,.field-label,.legal-small{font-size:9px;letter-spacing:.18em;text-transform:uppercase}

.grain{position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E")}
.cursor{position:fixed;left:0;top:0;width:15px;height:15px;border:1px solid #fff;border-radius:50%;z-index:1300;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:difference;opacity:0;transition:width .2s var(--ease),height .2s var(--ease),opacity .18s}
.cursor.ready{opacity:1}.cursor.big{width:46px;height:46px}

/* ---------- Page transitions ---------- */
@keyframes sweep{to{transform:rotate(-7deg) translateX(0)}}

/* ---------- Header ---------- */
.nav{position:fixed;z-index:900;top:12px;left:50%;width:min(calc(100% - 28px),1240px);min-height:var(--nav-h);transform:translateX(-50%);display:grid;grid-template-columns:minmax(126px,1fr) auto minmax(250px,1fr);align-items:center;padding:7px 9px 7px 14px;border:1px solid transparent;border-radius:999px;background:rgba(247,243,232,0);transition:transform .38s var(--ease),background .28s,border-color .28s,box-shadow .28s,backdrop-filter .28s}
.nav.scrolled,.nav:hover{background:rgba(247,243,232,.92);border-color:rgba(20,17,11,.1);box-shadow:0 12px 40px rgba(20,17,11,.05);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%)}
.nav.hide{transform:translate(-50%,-120px)}
.brand{display:flex;align-items:center;width:max-content;height:30px;text-decoration:none}
.brand img{width:118px;height:auto;object-fit:contain;object-position:left center}
.nav-center{justify-self:center;white-space:nowrap;font-size:8px;letter-spacing:.22em;text-transform:uppercase;opacity:.78}
.nav-right{justify-self:end;display:flex;align-items:center;gap:14px}
.nav-link,.lang{font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.nav-link{text-decoration:none;position:relative;padding:8px 2px}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;background:currentColor;transition:right .22s var(--ease)}
.nav-link:hover::after,.nav-link.under::after{right:0}
.lang{appearance:none;background:none;padding:9px 7px;cursor:pointer}
.menu-toggle{display:none;width:40px;height:40px;border-radius:50%;background:transparent;position:relative;cursor:pointer}
.menu-toggle span:not(.sr-only){position:absolute;left:12px;width:16px;height:1px;background:var(--ink);transition:.25s var(--ease)}
.menu-toggle span:first-child{top:16px}.menu-toggle span:nth-child(2){top:23px}
.menu-toggle[aria-expanded="true"] span:first-child{top:20px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){top:20px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:850;pointer-events:none;visibility:hidden;background:var(--cream);opacity:0;transition:opacity .28s ease,visibility .28s}
.mobile-menu.open{pointer-events:auto;visibility:visible;opacity:1}
.mobile-menu-inner{min-height:100%;padding:120px 24px 32px;display:flex;flex-direction:column;justify-content:center;gap:8px;position:relative;overflow:hidden}
.mobile-menu-inner::before{content:"";position:absolute;width:720px;aspect-ratio:1000/760;right:-420px;bottom:-160px;background:url("assets/pattern-soft.svg") center/contain no-repeat;opacity:.09;pointer-events:none}
.mobile-menu a{position:relative;z-index:1;text-decoration:none;font-family:var(--serif);font-size:clamp(46px,14vw,74px);line-height:.96}
.mobile-menu-tools{position:relative;z-index:1;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.mobile-menu-tools button{background:none;padding:0;font-size:11px;letter-spacing:.15em;text-transform:uppercase;cursor:pointer}

/* ---------- Shared editorial controls ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:10px 15px;border:1px solid currentColor;border-radius:999px;background:transparent;text-decoration:none;font-size:9px;letter-spacing:.14em;text-transform:uppercase;transition:background .22s,color .22s,border-color .22s}
.pill:hover{background:currentColor;color:var(--cream)}
.js .reveal{opacity:0;transform:translateY(24px)}
.reveal{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Pattern treatment ---------- */
.pattern-bg{position:relative;overflow:hidden;isolation:isolate}
.pattern-bg::before{content:"";position:absolute;z-index:-1;width:min(64vw,900px);aspect-ratio:1000/760;right:-14vw;top:10vh;background:url("assets/pattern-soft.svg") center/contain no-repeat;opacity:.085;pointer-events:none;transform:rotate(-2deg)}

/* ---------- Home hero ---------- */
.hero{min-height:100svh;padding:112px var(--pad) 38px;display:grid;grid-template-rows:auto 1fr auto;position:relative;overflow:hidden}
.hero-meta{display:flex;justify-content:space-between;gap:20px;position:relative;z-index:2;font-size:8px;letter-spacing:.2em;text-transform:uppercase}
.hero-title{align-self:center;position:relative;z-index:2;margin:5vh 0 4.5vh;font-size:clamp(66px,11.6vw,178px);font-weight:300;line-height:.82;letter-spacing:-.064em;text-transform:uppercase;text-wrap:balance;overflow:visible}
.hero-title>span{display:block;overflow:visible;padding-block:.025em}
.hero-title .script{font-family:var(--accent);font-style:normal;font-size:.48em;font-weight:400;line-height:1.05;letter-spacing:-.02em;text-transform:none;color:var(--gold);margin-left:13%;padding-bottom:.08em}
.hero-title .right{text-align:right}
.hero-orbit{position:absolute;z-index:1;right:12vw;top:31%;width:clamp(104px,10vw,158px);aspect-ratio:1;border:1px solid rgba(138,114,76,.42);border-radius:50%;display:grid;place-items:center;animation:spin 20s linear infinite}
.hero-orbit::before,.hero-orbit::after{content:"";position:absolute;border:1px solid rgba(138,114,76,.2);border-radius:50%}
.hero-orbit::before{inset:14%}.hero-orbit::after{inset:31%}
.hero-orbit img{width:34%;height:auto;animation:spin 20s linear reverse infinite;object-fit:contain}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-bottom{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:32px}
.hero-copy{max-width:430px;margin:0;font-size:14px;line-height:1.65}
.hero-stat{text-align:center;min-width:150px}
.hero-stat b{display:block;font-family:var(--serif);font-size:44px;font-weight:400;line-height:1;color:var(--gold)}
.hero-stat small{display:block;margin-top:5px;font-size:8px;letter-spacing:.17em;text-transform:uppercase}
.hero-scroll{justify-self:end;text-decoration:none;font-size:8px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.hero-scroll b{margin-left:12px;font-size:18px;font-weight:400}

/* ---------- Signature ribbon ---------- */
.signature-scene{background:var(--ink);color:var(--cream);position:relative;overflow:hidden;isolation:isolate;padding-bottom:13vh}
.ribbon-window{height:140px;position:relative;overflow:hidden;border-bottom:1px solid rgba(247,243,232,.08);contain:paint}
.ribbon-safe{position:absolute;left:-10vw;top:35px;width:120vw;height:70px;background:var(--gold);transform:rotate(-5deg);display:flex;align-items:center;overflow:hidden;box-shadow:0 14px 45px rgba(0,0,0,.12);pointer-events:none}
.ribbon-track{display:flex;width:max-content;align-items:center;gap:54px;white-space:nowrap;animation:marquee 20s linear infinite}
.ribbon-track span{font-size:10px;letter-spacing:.24em;color:var(--cream);text-transform:uppercase}
@keyframes marquee{to{transform:translateX(-50%)}}
.signature-copy{position:relative;z-index:2;background:var(--ink);padding:9vh var(--pad) 0;text-align:center}
.signature-kicker{margin-bottom:4.5vh;font-size:8px;letter-spacing:.2em;text-transform:uppercase;opacity:.56}
.signature-copy h2{max-width:1200px;margin:0 auto;font-size:clamp(56px,8.6vw,132px);font-weight:300;line-height:.89;letter-spacing:-.055em;text-transform:uppercase;overflow:visible}
.signature-copy h2 span{display:inline-block;padding-block:.025em}
.signature-copy h2 em{display:block;margin-top:28px;font-family:var(--accent);font-size:.42em;font-style:normal;font-weight:400;line-height:1.08;letter-spacing:-.025em;text-transform:none;color:var(--gold)}

/* ---------- Philosophy ---------- */
.philosophy{min-height:100svh;padding:13vh var(--pad) 14vh;display:grid;grid-template-columns:minmax(150px,.6fr) minmax(0,2fr);gap:7vw;align-items:center}
.section-index{padding-top:8px}.section-index b{display:block;margin-bottom:7px;font-size:34px;font-weight:300;letter-spacing:-.04em;line-height:1}
.philosophy-copy h2{max-width:1160px;margin:0 0 8vh;font-size:clamp(52px,7.3vw,108px);font-weight:300;line-height:.97;letter-spacing:-.047em;text-wrap:balance;overflow:visible}
.philosophy-copy h2 em{font-family:var(--accent);font-style:normal;font-weight:400;color:var(--gold)}
.triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.triptych article{min-height:190px;padding:22px 22px 44px 0;border-right:1px solid var(--line)}
.triptych article+article{padding-left:22px}.triptych article:last-child{border-right:0}
.triptych b{font-size:9px;letter-spacing:.12em}.triptych p{margin:52px 0 0;font-family:var(--serif);font-size:22px;line-height:1.22}

/* ---------- Flair index ---------- */
.flair-index{position:relative;overflow:hidden;background:var(--paper);min-height:100svh;padding:12vh var(--pad) 13vh;display:flex;flex-direction:column;justify-content:center}
.flair-index::before{content:"";position:absolute;width:min(57vw,800px);aspect-ratio:1000/760;right:-15vw;bottom:-12vw;background:url("assets/pattern-soft.svg") center/contain no-repeat;opacity:.085;pointer-events:none;transform:rotate(1.5deg)}
.flair-index-head{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:7vw;align-items:end;margin-bottom:7vh}
.flair-index-head h2{margin:0;font-size:clamp(52px,7.7vw,110px);font-weight:300;line-height:.92;letter-spacing:-.052em;text-transform:uppercase;overflow:visible}
.flair-index-head h2 .serif{font-family:var(--accent);font-style:normal;font-weight:400;text-transform:none;color:var(--gold)}
.flair-index-head p{max-width:420px;margin:18px 0 0;font-size:14px;line-height:1.7}
.word-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(20,17,11,.18);border-left:1px solid rgba(20,17,11,.18)}
.word{appearance:none;min-height:145px;padding:18px 18px 20px;background:transparent;border-right:1px solid rgba(20,17,11,.18);border-bottom:1px solid rgba(20,17,11,.18);text-align:left;position:relative;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.word span{font-family:var(--serif);font-size:clamp(27px,3vw,46px);line-height:1}
.word small{position:absolute;right:15px;bottom:13px;font-size:9px;letter-spacing:.08em}
.word:hover,.word:focus-visible{background:var(--ink);color:var(--cream)}

/* ---------- Atmosphere ---------- */
.composer{position:relative;min-height:100svh;padding:13vh var(--pad) 14vh;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(520px,1.2fr);gap:7vw;align-items:center;overflow:hidden}
.composer::before{content:"";position:absolute;width:min(44vw,620px);aspect-ratio:1000/760;left:-22vw;top:6vh;background:url("assets/pattern-soft.svg") center/contain no-repeat;opacity:.04;pointer-events:none}
.composer-copy{position:sticky;top:108px;z-index:1}
.composer-copy h2{margin:16px 0 24px;font-size:clamp(54px,7.3vw,104px);font-weight:300;line-height:.94;letter-spacing:-.052em;text-transform:uppercase;overflow:visible}
.composer-copy h2 em{display:block;font-family:var(--accent);font-size:.5em;font-style:normal;font-weight:400;line-height:1.08;letter-spacing:0;text-transform:none;color:var(--gold)}
.composer-copy p{max-width:400px;margin:0;font-size:14px;line-height:1.72}
.composer-panel{position:relative;min-height:650px;padding:28px 30px 30px;background:var(--ink);color:var(--cream);overflow:hidden;display:grid;grid-template-rows:auto minmax(300px,1fr) auto auto;gap:18px;border:1px solid rgba(247,243,232,.08);isolation:isolate}
.composer-panel::before{content:"";position:absolute;width:82%;aspect-ratio:1000/760;right:-28%;top:-12%;background:url("assets/pattern-soft.svg") center/contain no-repeat;filter:invert(1);opacity:.045;pointer-events:none}
.composer-head{position:relative;z-index:3;display:flex;justify-content:space-between;gap:20px;color:rgba(247,243,232,.5);font-size:8px;letter-spacing:.17em;text-transform:uppercase}
.orb{position:absolute;z-index:1;left:60%;top:40%;width:min(360px,44vw);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(1);background:radial-gradient(circle at 62% 32%,rgba(247,235,213,.72),rgba(153,112,72,.8) 28%,rgba(72,40,30,.82) 60%,transparent 76%);filter:blur(3px) saturate(1.1);transition:transform .5s var(--ease),filter .45s var(--ease),background .55s var(--ease);box-shadow:0 0 80px rgba(138,114,76,.08)}
.readout{position:relative;z-index:2;align-self:end;max-width:560px;padding-right:20%}
.readout strong{display:block;font-family:var(--serif);font-size:clamp(42px,5vw,70px);font-weight:400;line-height:.98;letter-spacing:-.02em}
.readout p{max-width:500px;margin:9px 0 0;color:rgba(247,243,232,.62);font-size:11px;line-height:1.65}
.composer-presets{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:7px;padding-top:15px;border-top:1px solid rgba(247,243,232,.12)}
.composer-preset{appearance:none;border:1px solid rgba(247,243,232,.2);border-radius:999px;background:transparent;color:rgba(247,243,232,.7);padding:9px 12px;font-size:8px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.22s ease}
.composer-preset:hover,.composer-preset.active{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.controls{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:18px;align-items:end;padding-top:4px}
.control{min-width:0}.control label{display:flex;justify-content:space-between;gap:10px;color:rgba(247,243,232,.72);font-size:8px;letter-spacing:.14em}.control [data-value]{font-variant-numeric:tabular-nums;color:rgba(247,243,232,.42)}
.control input[type="range"]{appearance:none;-webkit-appearance:none;width:100%;height:18px;margin:7px 0 0;background:transparent;cursor:pointer;--pct:50%}
.control input[type="range"]::-webkit-slider-runnable-track{height:1px;background:linear-gradient(90deg,var(--gold-soft) 0 var(--pct),rgba(247,243,232,.2) var(--pct) 100%)}
.control input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-5.5px;border:1px solid var(--cream);border-radius:50%;background:var(--ink);transition:transform .2s,background .2s}
.control input[type="range"]:hover::-webkit-slider-thumb,.control input[type="range"]:focus-visible::-webkit-slider-thumb{transform:scale(1.18);background:var(--gold)}
.control input[type="range"]::-moz-range-track{height:1px;background:rgba(247,243,232,.2)}
.control input[type="range"]::-moz-range-progress{height:1px;background:var(--gold-soft)}
.control input[type="range"]::-moz-range-thumb{width:12px;height:12px;border:1px solid var(--cream);border-radius:50%;background:var(--ink)}
.surprise{appearance:none;min-height:38px;border:1px solid rgba(247,243,232,.3);border-radius:999px;background:transparent;color:var(--cream);padding:10px 14px;font-size:8px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:.22s}
.surprise:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.composer-panel[data-mood="intimate"] .orb{background:radial-gradient(circle at 38% 34%,rgba(247,243,232,.8),rgba(181,154,109,.72) 28%,rgba(105,65,52,.72) 58%,transparent 75%)}
.composer-panel[data-mood="cinematic"] .orb{background:radial-gradient(circle at 62% 32%,rgba(247,235,213,.72),rgba(153,112,72,.82) 28%,rgba(72,40,30,.84) 60%,transparent 76%)}
.composer-panel[data-mood="solar"] .orb{background:radial-gradient(circle at 36% 28%,rgba(255,249,226,.92),rgba(208,175,116,.8) 32%,rgba(160,104,68,.52) 60%,transparent 76%)}
.composer-panel[data-mood="afterdark"] .orb{background:radial-gradient(circle at 64% 40%,rgba(214,190,146,.5),rgba(111,72,49,.82) 33%,rgba(38,25,21,.96) 65%,transparent 78%)}

/* ---------- Services ---------- */
.services{background:var(--ink);color:var(--cream);padding:12vh 0 6vh}
.services-head{min-height:100svh;padding:12vh var(--pad) 10vh;display:grid;grid-template-columns:1.2fr .8fr;gap:7vw;align-items:center}
.services-head h2{margin:0;font-size:clamp(54px,7.5vw,108px);font-weight:300;line-height:.94;letter-spacing:-.052em;text-transform:uppercase}
.services-head h2 .serif{font-style:normal;font-weight:400;text-transform:none;color:var(--gold-soft)}
.services-head p{max-width:360px;margin:18px 0 0;font-size:13px;line-height:1.68;color:rgba(247,243,232,.68)}
.service{position:sticky;top:78px;z-index:1;min-height:62vh;padding:clamp(34px,5vh,64px) var(--pad);display:grid;grid-template-columns:64px minmax(0,1.25fr) minmax(270px,.75fr) 52px;gap:3.5vw;align-items:center;border-top:1px solid rgba(247,243,232,.14);background:#14110B;overflow:hidden;isolation:isolate}
.service:nth-of-type(2){z-index:2;background:#19150F}.service:nth-of-type(3){z-index:3;background:#1E1912}.service:nth-of-type(4){z-index:4;background:#241D15}.service:nth-of-type(5){z-index:5;background:#2A2218}
.service-num{align-self:start;padding-top:8px;font-size:10px;opacity:.62;display:grid;gap:8px}.service-num b{font-weight:400;font-size:12px}.service-num small{font-size:7px;letter-spacing:.16em;writing-mode:vertical-rl;transform:rotate(180deg);opacity:.48}
.service h3{margin:0;font-family:var(--serif);font-size:clamp(43px,5.7vw,82px);font-weight:400;line-height:.98;letter-spacing:-.025em;overflow:visible}
.service-copy{position:relative;z-index:2;max-width:390px}.service p{max-width:360px;margin:0;font-size:13px;line-height:1.65;color:rgba(247,243,232,.68)}.service-tags{margin-top:22px;padding-top:14px;border-top:1px solid rgba(247,243,232,.12);font-size:7px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)}
.service-open,.modal-close{appearance:none;width:46px;height:46px;min-width:46px;min-height:46px;aspect-ratio:1;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;display:grid;place-items:center;position:relative;cursor:pointer;font-size:0;padding:0;transition:background .22s,color .22s,border-color .22s}
.service-open::before,.service-open::after,.modal-close::before,.modal-close::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1px;background:currentColor;transform-origin:center}
.service-open::before{transform:translate(-50%,-50%)}.service-open::after{transform:translate(-50%,-50%) rotate(90deg)}
.modal-close::before{transform:translate(-50%,-50%) rotate(45deg)}.modal-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.service-open:hover{background:var(--gold);border-color:var(--gold)}

/* ---------- Archive preview ---------- */
.archive-preview{position:relative;overflow:hidden;min-height:100svh;padding:13vh var(--pad) 14vh;background:var(--cream);display:flex;flex-direction:column;justify-content:center}
.archive-head{display:grid;grid-template-columns:1.1fr .9fr;gap:7vw;align-items:end;margin-bottom:7vh}
.archive-head h2{margin:0;font-size:clamp(54px,7.8vw,112px);font-weight:300;line-height:.92;letter-spacing:-.055em;text-transform:uppercase}
.archive-head h2 em{display:block;font-family:var(--accent);font-size:.48em;font-style:normal;font-weight:400;letter-spacing:0;text-transform:none;color:var(--gold)}
.archive-head p{max-width:420px;margin:18px 0 0;font-size:14px;line-height:1.7}
.projects{display:grid;grid-template-columns:1.18fr .82fr;gap:16px}
.project-stack{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.project-card{position:relative;min-height:58vh;overflow:hidden;background:#D9C9B4;text-decoration:none;color:var(--ink)}
.project-card.small{min-height:calc(29vh - 8px)}
.project-art{position:absolute;inset:0;transition:transform .75s var(--ease)}
.project-card:hover .project-art{transform:scale(1.025)}
.project-meta{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;gap:20px;align-items:flex-end;z-index:2}
.project-meta strong{font-family:var(--serif);font-size:clamp(24px,3vw,44px);font-weight:400;line-height:.95}
.project-meta small{font-size:8px;white-space:nowrap}
.project-card.dark{color:var(--cream)}
.art-a{background:radial-gradient(circle at 64% 32%,#F9EED8 0 6%,transparent 7%),linear-gradient(145deg,#D1B999,#7C6346 48%,#17120E)}
.art-a::before{content:"";position:absolute;width:54%;height:17%;left:20%;bottom:18%;border-radius:50%;background:rgba(247,243,232,.86);box-shadow:0 -34px 0 -14px rgba(247,243,232,.45),0 15px 50px rgba(0,0,0,.25);transform:perspective(400px) rotateX(62deg)}
.art-b{background:linear-gradient(125deg,#1B1512,#7B392F 55%,#D49568)}
.art-b::before{content:"";position:absolute;width:42%;aspect-ratio:1;border-radius:50%;left:47%;top:18%;background:radial-gradient(circle,#F6DFBD 0 7%,rgba(246,223,189,.18) 8% 28%,transparent 29%);box-shadow:0 0 60px rgba(246,223,189,.25)}
.art-c{background:linear-gradient(160deg,#CEBFA9,#F2E8D8 50%,#796044)}
.art-c::before,.art-c::after{content:"";position:absolute;border:1px solid rgba(20,17,11,.42);border-radius:50%}
.art-c::before{width:220px;height:220px;left:16%;top:14%;box-shadow:110px 95px 0 -48px rgba(20,17,11,.18)}
.art-c::after{width:86px;height:86px;right:15%;bottom:17%;box-shadow:0 0 0 20px rgba(138,114,76,.18)}
.art-d{background:linear-gradient(145deg,#F0E5D4 0 45%,#A78964 46% 49%,#251D17 50%)}
.art-d::before{content:"";position:absolute;inset:18% 14%;border:1px solid rgba(247,243,232,.55);transform:rotate(7deg)}
.art-e{background:radial-gradient(circle at 30% 35%,rgba(247,243,232,.9) 0 4%,transparent 5%),linear-gradient(120deg,#8A724C,#C2A77A 48%,#2A1F18)}
.art-e::after{content:"";position:absolute;inset:12% 18%;border-left:1px solid rgba(247,243,232,.4);border-right:1px solid rgba(247,243,232,.18);transform:skewX(-11deg)}
.art-f{background:var(--paper)}
.art-f::before{content:"";position:absolute;width:86%;aspect-ratio:1000/760;left:7%;top:8%;background:url("assets/pattern-soft.svg") center/contain no-repeat;opacity:.22}
.archive-link{display:flex;justify-content:flex-end;margin-top:24px}

/* ---------- Final ---------- */
.final{position:relative;overflow:hidden;min-height:100svh;padding:7vh var(--pad) 30px;background:var(--gold);color:var(--cream);display:flex;flex-direction:column;justify-content:space-between}
.final::before{content:"";position:absolute;width:min(68vw,900px);aspect-ratio:1000/760;right:-19vw;bottom:-20vw;background:url("assets/pattern-soft.svg") center/contain no-repeat;filter:invert(1);opacity:.1;pointer-events:none}
.final-top,.final h2,.final-actions,.footer-line{position:relative;z-index:2}
.final-top{display:flex;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:.18em;text-transform:uppercase}
.final h2{margin:7vh 0;font-size:clamp(66px,10.8vw,164px);font-weight:300;line-height:.84;letter-spacing:-.065em;text-transform:uppercase;overflow:visible}
.final h2 em{display:block;margin:18px 0 0 20%;font-family:var(--accent);font-size:.4em;font-style:normal;font-weight:400;line-height:1.06;letter-spacing:0;text-transform:none}
.final-actions{display:flex;flex-wrap:wrap;gap:10px}.final .pill:hover{background:var(--cream);color:var(--gold)}
.footer-line{display:flex;justify-content:space-between;gap:18px;padding-top:17px;border-top:1px solid rgba(247,243,232,.38);font-size:8px;letter-spacing:.12em;text-transform:uppercase}.footer-line a{text-decoration:none}

/* ---------- Modal / drawer ---------- */
.modal{position:fixed;inset:0;z-index:1100;pointer-events:none;visibility:hidden;overflow:hidden}.modal.open{pointer-events:auto;visibility:visible}
.modal-backdrop{position:absolute;inset:0;background:rgba(20,17,11,.5);opacity:0;backdrop-filter:blur(4px);transition:opacity .32s}
.modal.open .modal-backdrop{opacity:1}
.modal-panel{position:absolute;top:0;right:0;width:min(620px,100%);height:100%;padding:28px 34px 34px;background:var(--cream);overflow:auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform .48s var(--ease);display:flex;flex-direction:column}
.modal-panel::before{content:"";position:absolute;width:520px;aspect-ratio:1000/760;right:-270px;top:70px;background:url("assets/pattern-soft.svg") center/contain no-repeat;opacity:.075;pointer-events:none}
.modal.open .modal-panel{transform:none}
.modal-close{align-self:flex-end;z-index:2;border-color:var(--ink)}.modal-close:hover{background:var(--ink);color:var(--cream)}
.modal-kicker{margin-top:9vh;font-size:8px;letter-spacing:.2em;text-transform:uppercase;opacity:.55}
.modal h3{position:relative;margin:18px 0 20px;font-family:var(--serif);font-size:clamp(48px,6vw,76px);font-weight:400;line-height:1;letter-spacing:-.025em;overflow:visible}
.modal-lead{max-width:470px;margin:0 0 24px;font-size:14px;line-height:1.65}
.modal-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.modal-list li{padding:13px 0;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.modal-note{margin:26px 0;font-family:var(--serif);font-size:25px;line-height:1.2;color:var(--gold)}
.modal-cta{margin-top:auto;padding-top:24px}

/* ---------- Archive page ---------- */
.page-hero{min-height:90svh;padding:116px var(--pad) 56px;display:flex;flex-direction:column;justify-content:space-between}
.page-hero .hero-meta{margin-bottom:7vh}
.page-hero h1{max-width:1220px;margin:auto 0 4vh;font-size:clamp(70px,10vw,150px);font-weight:300;line-height:.86;letter-spacing:-.06em;text-transform:uppercase;overflow:visible}
.page-hero h1 em{display:block;margin:18px 0 0 17%;font-family:var(--accent);font-size:.42em;font-style:normal;font-weight:400;line-height:1.05;letter-spacing:0;text-transform:none;color:var(--gold)}
.page-hero p{max-width:520px;margin:0;font-size:14px;line-height:1.65}
.archive-page{padding:6vh var(--pad) 13vh}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:5vh}
.filter{appearance:none;border:1px solid rgba(20,17,11,.35);border-radius:999px;background:transparent;padding:9px 13px;font-size:8px;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;transition:.2s}
.filter:hover,.filter.active{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.archive-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.archive-item{appearance:none;grid-column:span 7;position:relative;min-height:58vh;padding:0;border:0;background:#D9C9B4;color:var(--ink);overflow:hidden;text-align:left;cursor:pointer}
.archive-item:nth-child(2),.archive-item:nth-child(4){grid-column:span 5}.archive-item:nth-child(3),.archive-item:nth-child(6){grid-column:span 5}.archive-item:nth-child(5){grid-column:span 7}
.archive-item .project-art{position:absolute;inset:0}.archive-item .project-meta{position:absolute}.archive-item:hover .project-art{transform:scale(1.025)}
.archive-item.dark{color:var(--cream)}.archive-item.hidden{display:none}
.archive-note{max-width:640px;margin:28px 0 0;font-size:11px;line-height:1.65;opacity:.64}

/* ---------- Contact ---------- */
.contact-shell{min-height:100svh;display:grid;grid-template-columns:minmax(440px,.43fr) minmax(0,.57fr);padding-top:72px}
.contact-intro{position:relative;overflow:hidden;background:var(--gold);color:var(--cream);padding:8vh clamp(32px,4.5vw,72px) 5vh;display:flex;flex-direction:column;justify-content:space-between;min-height:calc(100svh - 72px)}
.contact-intro::after{content:"";position:absolute;width:min(760px,88vw);aspect-ratio:1000/760;right:-38%;bottom:-20%;background:url("assets/pattern-soft.svg") center/contain no-repeat;filter:invert(1);opacity:.1;pointer-events:none}
.contact-intro>div,.contact-details{position:relative;z-index:2}
.contact-intro h1{margin:8vh 0 5vh;font-size:clamp(60px,7.2vw,106px);font-weight:300;line-height:.9;letter-spacing:-.06em;text-transform:uppercase;overflow:visible}
.contact-intro h1 em{display:block;margin:18px 0 0 10%;font-family:var(--accent);font-size:.48em;font-style:normal;font-weight:400;line-height:1.05;letter-spacing:0;text-transform:none}
.contact-intro p{max-width:480px;margin:0;font-size:14px;line-height:1.65}
.contact-details{font-size:10px;line-height:1.85;letter-spacing:.13em;text-transform:uppercase}.contact-details a{text-decoration:none}
.contact-form{padding:9vh clamp(34px,6vw,92px) 7vh;background:var(--cream)}
.contact-form h2{max-width:700px;margin:0 0 7vh;font-family:var(--serif);font-size:clamp(48px,5vw,72px);font-weight:400;line-height:1.02}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
.field{display:flex;flex-direction:column;min-width:0}.field.full,.mood-picks,.consent,.submit-row,.form-status{grid-column:1/-1}
.field label,.field-label{margin-bottom:8px;font-size:8px;letter-spacing:.16em;text-transform:uppercase}
.field input,.field textarea,.field select{width:100%;border:0;border-bottom:1px solid rgba(20,17,11,.34);border-radius:0;background:transparent;padding:10px 3px 12px;outline:none;font-size:15px;transition:border-color .2s}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold)}
.mood-picks{display:flex;flex-wrap:wrap;gap:8px;margin-top:-8px}
.mood-picks input{position:absolute;opacity:0;pointer-events:none}
.mood-picks label{border:1px solid rgba(20,17,11,.3);border-radius:999px;padding:10px 13px;font-size:8px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.2s}
.mood-picks input:checked+label{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.mood-picks input:focus-visible+label{outline:1px solid var(--gold);outline-offset:3px}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:10px;line-height:1.5}.consent input{margin-top:2px;accent-color:var(--gold)}.consent a{text-underline-offset:3px}
.submit-row{display:flex;justify-content:space-between;gap:24px;align-items:center;padding-top:8px}
.submit-btn{appearance:none;min-height:46px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--cream);padding:12px 18px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.2s}.submit-btn:hover{background:var(--gold);border-color:var(--gold)}.submit-btn:disabled{opacity:.5;cursor:wait}
.submit-row small{max-width:420px;font-size:9px;line-height:1.55;opacity:.58}
.form-status{min-height:20px;font-size:11px}.form-status.success{color:#315d38}.form-status.fallback{color:#7a5528}.form-status.working{opacity:.6}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* ---------- Legal / privacy ---------- */
.legal-shell{min-height:100svh}
.legal-hero{min-height:72svh;padding:118px var(--pad) 8vh;display:flex;flex-direction:column;justify-content:center}
.legal-hero h1{max-width:1120px;margin:5vh 0 3vh;font-size:clamp(68px,9vw,136px);font-weight:300;line-height:.88;letter-spacing:-.058em;text-transform:uppercase;overflow:visible}
.legal-hero h1 em{display:block;margin:16px 0 0 18%;font-family:var(--accent);font-size:.42em;font-style:normal;font-weight:400;line-height:1.05;letter-spacing:0;text-transform:none;color:var(--gold)}
.legal-hero p{max-width:520px;margin:0;font-size:14px;line-height:1.65}
.lang-block{display:none}.lang-block.active{display:block}
.legal-copy{max-width:900px;margin:0 auto;padding:4vh var(--pad) 10vh}
.legal-copy h2{margin:50px 0 14px;font-family:var(--serif);font-size:36px;font-weight:400;line-height:1}.legal-copy h2:first-child{margin-top:0}
.legal-copy p{margin:0;font-size:14px;line-height:1.75}.legal-copy a{text-underline-offset:3px}.legal-small{margin-top:50px!important;font-size:9px!important;opacity:.55}
.legal-footer{padding:24px var(--pad);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:.12em;text-transform:uppercase}.legal-footer a{text-decoration:none}

/* ---------- 404 ---------- */
.not-found{min-height:100svh;padding:44px var(--pad);background:var(--ink);color:var(--cream);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.not-found::after{content:"";position:absolute;width:min(760px,70vw);aspect-ratio:1000/760;right:-18vw;bottom:-17vw;background:url("assets/pattern-soft.svg") center/contain no-repeat;filter:invert(1);opacity:.08}
.not-found>img{width:min(230px,50vw);position:relative;z-index:2}
.not-found>div{position:relative;z-index:2}
.not-found>div>span{font-size:9px;letter-spacing:.18em;text-transform:uppercase;opacity:.55}
.not-found h1{margin:4vh 0 3vh;font-size:clamp(62px,10vw,150px);font-weight:300;line-height:.88;letter-spacing:-.06em;text-transform:uppercase;overflow:visible}
.not-found h1 em{display:block;margin-left:15%;font-family:var(--accent);font-size:.42em;font-style:normal;font-weight:400;line-height:1.05;letter-spacing:0;text-transform:none;color:var(--gold)}
.not-found p{max-width:420px;margin:0 0 26px;font-size:14px;line-height:1.65}.not-found .pill:hover{background:var(--cream);color:var(--ink)}
.noscript{position:fixed;left:16px;right:16px;bottom:16px;z-index:2000;padding:12px 14px;background:var(--ink);color:var(--cream);font-size:12px}

/* ---------- Tablet ---------- */
@media(max-width:1080px){
  .nav{grid-template-columns:minmax(118px,1fr) auto minmax(220px,1fr)}
  .nav-right{gap:9px}
  .hero-title{font-size:clamp(64px,11.7vw,145px)}
  .composer{grid-template-columns:.85fr 1.15fr;gap:5vw}
  .controls{grid-template-columns:1fr 1fr 1fr}.surprise{grid-column:1/-1;justify-self:start}
  .service{grid-template-columns:48px minmax(0,1.15fr) minmax(230px,.85fr) 46px;gap:2.5vw}
}

/* ---------- Mobile ---------- */
@media(max-width:760px){
  :root{--pad:20px;--nav-h:48px}
  html{scroll-padding-top:70px}
  .cursor{display:none}
  .nav{top:8px;width:calc(100% - 16px);min-height:48px;grid-template-columns:1fr auto;padding:6px 6px 6px 12px}
  .nav-center,.desktop-link,.nav-right>.lang{display:none}
  .nav-right{gap:0}.menu-toggle{display:block}
  .brand{height:26px}.brand img{width:104px}
  .hero{min-height:100svh;padding:92px 20px 28px}
  .hero-meta{font-size:7px;letter-spacing:.16em}.hero-meta span:last-child{max-width:48%;text-align:right}
  .hero-title{margin:6vh 0 5vh;font-size:clamp(52px,14.5vw,82px);line-height:.89;letter-spacing:-.052em}
  .hero-title .script{font-size:.5em;margin:10px 0 8px 3%;line-height:1.08}
  .hero-title .right{text-align:left}
  .hero-orbit{right:7%;top:29%;width:94px;opacity:.66}
  .hero-bottom{grid-template-columns:1fr;gap:22px}.hero-stat{display:none}.hero-scroll{justify-self:start}
  .signature-scene{padding-bottom:10vh}.ribbon-window{height:106px}.ribbon-safe{left:-32vw;top:29px;width:168vw;height:54px;transform:rotate(-5deg)}.ribbon-track{gap:38px}.ribbon-track span{font-size:8px}
  .signature-copy{padding:7vh 20px 0}.signature-copy h2{font-size:clamp(50px,15.2vw,78px);line-height:.94}.signature-copy h2 em{font-size:.48em;margin-top:16px}
  .philosophy{min-height:100svh;grid-template-columns:1fr;gap:5vh;padding:10vh 20px 11vh;align-content:center}.section-index{padding:0}.philosophy-copy h2{margin-bottom:6vh;font-size:clamp(46px,12.4vw,64px);line-height:1.01}.triptych{grid-template-columns:1fr}.triptych article{min-height:auto;padding:20px 0 28px;border-right:0;border-bottom:1px solid var(--line)}.triptych article:last-child{border-bottom:0}.triptych article+article{padding-left:0}.triptych p{margin-top:24px;font-size:22px}
  .flair-index{min-height:100svh;padding:10vh 20px 11vh}.flair-index-head{grid-template-columns:1fr;gap:4vh;margin-bottom:5vh}.flair-index-head h2{font-size:clamp(48px,13.8vw,70px);line-height:.97}.word-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.word{min-height:118px;padding:16px}.word span{font-size:29px}
  .composer{min-height:100svh;grid-template-columns:1fr;gap:5vh;padding:10vh 20px 11vh;align-content:center}.composer-copy{position:static}.composer-copy h2{font-size:clamp(48px,13.2vw,68px);line-height:.98}.composer-panel{min-height:640px;padding:22px 20px;grid-template-rows:auto minmax(270px,1fr) auto auto;gap:16px}.orb{left:54%;top:35%;width:min(300px,77vw)}.readout{padding-right:0}.readout strong{font-size:45px}.readout p{font-size:10.5px}.composer-presets{gap:6px}.composer-preset{padding:8px 10px}.controls{grid-template-columns:1fr;gap:12px}.surprise{grid-column:auto}
  .services{padding-top:0}.services-head{min-height:100svh;grid-template-columns:1fr;gap:4vh;padding:10vh 20px 8vh;align-content:center}.services-head h2{font-size:clamp(49px,13.4vw,70px);line-height:.98}
  .service{position:relative;top:auto;min-height:70svh;padding:42px 20px 44px;grid-template-columns:36px minmax(0,1fr) 44px;gap:14px;align-content:center}.service-copy{grid-column:2/-1;max-width:100%;padding-right:6px}.service p{max-width:100%;padding-right:0}.service-tags{margin-top:18px}.service h3{font-size:clamp(36px,10.8vw,46px);line-height:1;overflow-wrap:normal;word-break:normal}.service-open{width:44px;height:44px;min-width:44px;min-height:44px}
  .archive-preview{min-height:100svh;padding:10vh 20px 11vh}.archive-head{grid-template-columns:1fr;gap:4vh;margin-bottom:5vh}.archive-head h2{font-size:clamp(48px,13.4vw,70px);line-height:.97}.projects{grid-template-columns:1fr}.project-stack{grid-template-rows:none}.project-card,.project-card.small{min-height:46vh}.project-meta strong{font-size:34px}.archive-link{justify-content:flex-start}
  .final{min-height:100svh;padding:7vh 20px 24px}.final-top{font-size:7px}.final h2{margin:7vh 0;font-size:clamp(58px,16vw,86px);line-height:.89}.final h2 em{margin:14px 0 0 6%;font-size:.43em}.footer-line{flex-direction:column;gap:10px}
  .modal-panel{padding:20px 20px 28px}.modal-kicker{margin-top:8vh}.modal h3{font-size:52px}.modal-close{width:44px;height:44px;min-width:44px;min-height:44px}
  .page-hero{min-height:82svh;padding:96px 20px 46px}.page-hero h1{font-size:clamp(58px,15.5vw,88px);line-height:.91}.page-hero h1 em{margin-left:4%;font-size:.44em}.page-hero p{font-size:13px}.archive-page{padding:5vh 20px 10vh}.archive-grid{grid-template-columns:1fr}.archive-item,.archive-item:nth-child(n){grid-column:1;min-height:46vh}
  .contact-shell{grid-template-columns:1fr;padding-top:64px}.contact-intro{min-height:auto;padding:7vh 20px 6vh}.contact-intro h1{margin:7vh 0 4vh;font-size:clamp(57px,15.8vw,82px);line-height:.91}.contact-intro h1 em{margin-left:7%;font-size:.47em}.contact-details{margin-top:6vh}.contact-form{padding:8vh 20px 8vh}.contact-form h2{font-size:47px;margin-bottom:6vh}.form{grid-template-columns:1fr;gap:26px}.field.full,.mood-picks,.consent,.submit-row,.form-status{grid-column:1}.submit-row{align-items:flex-start;flex-direction:column}.mood-picks{margin-top:-4px}
  .legal-hero{min-height:64svh;padding:96px 20px 7vh}.legal-hero h1{font-size:clamp(58px,15vw,86px);line-height:.92}.legal-hero h1 em{margin-left:5%;font-size:.45em}.legal-copy{padding:4vh 20px 9vh}.legal-copy h2{font-size:32px}.legal-footer{padding:22px 20px;flex-direction:column}
  .not-found{padding:28px 20px}.not-found>img{width:190px}.not-found h1{font-size:clamp(56px,15vw,82px);line-height:.92}.not-found h1 em{margin-left:4%}
}

@media(pointer:coarse){.cursor{display:none}.project-card:hover .project-art,.archive-item:hover .project-art{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.loader{display:none!important}.transition{display:none!important}.ribbon-track,.hero-orbit,.hero-orbit img{animation:none!important}.reveal,.js .reveal{opacity:1!important;transform:none!important;transition:none!important}.cursor{display:none!important}}

.service::after{
  content:attr(data-index);
  position:absolute;z-index:0;
  right:7vw;bottom:-.19em;
  font-family:var(--sans);
  font-size:clamp(190px,25vw,390px);
  font-weight:300;line-height:.78;letter-spacing:-.08em;
  color:rgba(247,243,232,.025);
  pointer-events:none;
  transition:color .35s ease,transform .55s var(--ease);
}
.service:hover::after{color:rgba(181,154,109,.055);transform:translateY(-.02em)}
.service h3,.service-copy,.service-num,.service-open{position:relative;z-index:2}
.service h3::after{
  content:"";display:block;width:42px;height:1px;margin-top:22px;
  background:var(--gold-soft);opacity:.65;
  transition:width .4s var(--ease)
}
.service:hover h3::after{width:82px}

/* V27 — chapter rhythm: 01 → 06 occupy at least one full viewport */
.philosophy,.flair-index,.composer,.services-head,.archive-preview,.final{
  scroll-margin-top:calc(var(--nav-h) + 26px);
}
@supports(height:100dvh){
  .philosophy,.flair-index,.composer,.services-head,.archive-preview,.final{min-height:100dvh}
}

@media(max-width:760px){
  .service::after{right:-5vw;bottom:.04em;font-size:52vw;color:rgba(247,243,232,.02)}
  .service-num small{display:none}
  .signature-copy h2 em{font-size:.43em;line-height:1.12}
}

/* =========================================================
   V28 — typography + drawer stability
   ========================================================= */
.hero-title .script,
.signature-copy h2 em,
.philosophy-copy h2 em,
.flair-index-head h2 .serif,
.composer-copy h2 em,
.archive-head h2 em,
.final h2 em,
.page-hero h1 em,
.contact-intro h1 em,
.legal-hero h1 em,
.not-found h1 em{
  font-family:var(--serif)!important;
  font-style:normal!important;
  font-weight:400!important;
  font-synthesis:none!important;
}
.final h2 em{
  font-size:.36em!important;
  line-height:1.02!important;
  letter-spacing:-.018em!important;
  margin-top:24px!important;
}

/* Drawer: always starts off-canvas and only becomes visible before animation begins. */
.modal{
  visibility:hidden!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.modal.active{
  visibility:visible!important;
  pointer-events:auto!important;
}
.modal-backdrop{
  opacity:0!important;
  transition:opacity .38s ease!important;
}
.modal.open .modal-backdrop{opacity:1!important}

.modal-panel{
  left:auto!important;
  right:0!important;
  margin:0!important;
  transform:translate3d(104%,0,0)!important;
  opacity:1!important;
  will-change:transform!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transition:transform .58s cubic-bezier(.22,.74,.13,1)!important;
}
.modal.open .modal-panel{
  transform:translate3d(0,0,0)!important;
}

/* Mobile drawer is a true full-width off-canvas sheet. */
@media(max-width:760px){
  .modal-panel{
    width:100vw!important;
    max-width:none!important;
    min-width:0!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:
      max(18px,env(safe-area-inset-top))
      max(20px,env(safe-area-inset-right))
      max(28px,env(safe-area-inset-bottom))
      max(20px,env(safe-area-inset-left))!important;
  }
  .final h2 em{
    font-size:.38em!important;
    line-height:1.05!important;
    margin:18px 0 0 4%!important;
  }
}

/* Small phones: prevent oversized accents and chapter content from touching edges. */
@media(max-width:380px){
  .hero-title{font-size:clamp(48px,14vw,68px)!important}
  .signature-copy h2{font-size:clamp(46px,14.4vw,66px)!important}
  .final h2{font-size:clamp(52px,15vw,70px)!important}
  .word span{font-size:26px!important}
  .service h3{font-size:clamp(34px,10vw,42px)!important}
  .composer-panel{min-height:610px!important}
}


/* =========================================================
   V29 — TYPOGRAPHY CLEANUP: INTER TIGHT + PRATA
   Prata removed from the entire project.
   ========================================================= */
.serif,
.hero-title .script,
.signature-copy h2 em,
.philosophy-copy h2 em,
.flair-index-head h2 .serif,
.triptych p,
.word span,
.composer-copy h2 em,
.readout strong,
.service h3,
.archive-head h2 em,
.project-meta strong,
.final h2 em,
.modal h3,
.modal-note,
.page-hero h1 em,
.contact-intro h1 em,
.contact-form h2,
.legal-hero h1 em,
.legal-copy h2,
.not-found h1 em,
.mobile-menu a{
  font-family:var(--serif)!important;
  font-style:normal!important;
  font-weight:400!important;
  font-synthesis:none!important;
}

/* Prata is stately; give it air rather than fake italics. */
.hero-title .script{
  font-size:.40em!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
  margin-left:12%!important;
}
.signature-copy h2 em{
  font-size:.36em!important;
  line-height:1.12!important;
  letter-spacing:-.026em!important;
  margin-top:26px!important;
}
.philosophy-copy h2 em,
.flair-index-head h2 .serif,
.composer-copy h2 em,
.archive-head h2 em{
  letter-spacing:-.03em!important;
}
.final h2 em{
  font-size:.31em!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
  margin-top:26px!important;
}
.page-hero h1 em,
.contact-intro h1 em,
.legal-hero h1 em,
.not-found h1 em{
  font-size:.36em!important;
  line-height:1.10!important;
  letter-spacing:-.024em!important;
}
.modal-note{
  font-size:22px!important;
  line-height:1.35!important;
}

/* The wordmark-like serif headings should never clip Prata's vertical metrics. */
.service h3,
.modal h3,
.contact-form h2,
.legal-copy h2,
.readout strong,
.project-meta strong,
.word span{
  overflow:visible!important;
  padding-block:.06em .10em;
}

/* Mobile serif balance */
@media(max-width:760px){
  .hero-title .script{font-size:.42em!important;margin-left:5%!important}
  .signature-copy h2 em{font-size:.39em!important}
  .final h2 em{font-size:.34em!important;margin-left:3%!important}
  .page-hero h1 em,.contact-intro h1 em,.legal-hero h1 em,.not-found h1 em{
    font-size:.39em!important;margin-left:4%!important
  }
}


/* =========================================================
   V29 — NEW LOADING SEQUENCE
   "Constellation → focus → slit reveal"
   ========================================================= */
.loader{
  position:fixed!important;inset:0!important;z-index:1200!important;
  display:grid!important;place-items:center!important;
  background:var(--ink)!important;overflow:hidden!important;
  clip-path:inset(0 0 0 0);
  transition:clip-path .82s cubic-bezier(.72,0,.18,1),visibility 0s .82s!important;
}
.loader::before,.loader::after{
  content:"";position:absolute;inset:0;pointer-events:none;
}
.loader::before{
  background:
    radial-gradient(circle at 50% 50%,rgba(181,154,109,.07),transparent 34%),
    linear-gradient(rgba(247,243,232,.018),rgba(247,243,232,0));
}
.loader::after{
  width:1px;left:50%;right:auto;background:rgba(247,243,232,.11);
  transform:scaleY(0);transform-origin:center;
  animation:loader-axis-grow .9s .18s var(--ease) forwards;
}
.loader-constellation{
  position:absolute;left:50%;top:50%;width:min(460px,78vw);aspect-ratio:1;
  transform:translate(-50%,-50%);
}
.loader-constellation span{
  position:absolute;width:31%;aspect-ratio:1;border:1px solid rgba(181,154,109,.48);
  border-radius:50%;left:34.5%;top:34.5%;
  opacity:0;transform:scale(.35);
  animation:loader-orbit 1.2s var(--ease) forwards;
}
.loader-constellation span:nth-child(1){--x:-92%;--y:0%;animation-delay:.04s}
.loader-constellation span:nth-child(2){--x:92%;--y:0%;animation-delay:.10s}
.loader-constellation span:nth-child(3){--x:0%;--y:-92%;animation-delay:.16s}
.loader-constellation span:nth-child(4){--x:0%;--y:92%;animation-delay:.22s}
.loader-constellation span:nth-child(5){--x:0%;--y:0%;animation-delay:.28s;border-color:rgba(247,243,232,.34)}
.loader-focus{
  position:relative;z-index:4;width:min(270px,58vw);text-align:center;
  opacity:0;transform:translateY(10px);
  animation:loader-focus-in .7s .62s var(--ease) forwards;
}
.loader-focus img{display:block;width:100%!important;height:auto!important;margin:0 auto!important;opacity:1!important;animation:none!important}
.loader-focus small{
  display:block;margin-top:18px!important;color:rgba(247,243,232,.55)!important;
  font-family:var(--sans);font-size:8px!important;letter-spacing:.22em!important;text-transform:uppercase;
}
.loader-axis{
  position:absolute;z-index:2;left:50%;top:50%;width:min(620px,90vw);height:1px;
  background:linear-gradient(90deg,transparent,rgba(181,154,109,.52),transparent);
  transform:translate(-50%,-50%) scaleX(0);transform-origin:center;
  animation:loader-line .85s .48s var(--ease) forwards;
}
.loader.ready .loader-constellation{opacity:.28;transition:opacity .25s ease}
.loader.ready .loader-focus{transform:translateY(-3px);transition:transform .25s ease}
.loader.out{
  animation:none!important;
  clip-path:inset(0 49.92% 0 49.92%)!important;
  visibility:hidden!important;
}
@keyframes loader-orbit{
  0%{opacity:0;transform:translate(0,0) scale(.35)}
  48%{opacity:.88}
  100%{opacity:.48;transform:translate(var(--x),var(--y)) scale(1)}
}
@keyframes loader-focus-in{to{opacity:1;transform:translateY(0)}}
@keyframes loader-axis-grow{to{transform:scaleY(1)}}
@keyframes loader-line{to{transform:translate(-50%,-50%) scaleX(1)}}
@media(max-width:760px){
  .loader-constellation{width:min(350px,88vw)}
  .loader-focus{width:min(230px,64vw)}
}
@media(prefers-reduced-motion:reduce){
  .loader{display:none!important}
}


/* =========================================================
   V30 — SERVICE STACK HOTFIX
   Keep the approved V29 art direction; fix only layout bugs.
   ========================================================= */

/* Explicit stack order. Later cards always sit above earlier cards. */
.service[data-index="01"]{z-index:11;background:#14110B}
.service[data-index="02"]{z-index:12;background:#19150F}
.service[data-index="03"]{z-index:13;background:#1E1912}
.service[data-index="04"]{z-index:14;background:#241D15}
.service[data-index="05"]{z-index:15;background:#2A2218}
.service[data-index="06"]{z-index:16;background:#30271C}

/* Grid children are allowed to shrink inside their own track instead of invading neighbours. */
.service>h3,
.service-copy{
  min-width:0!important;
  max-width:100%!important;
}
.service{
  grid-template-columns:64px minmax(0,1.08fr) minmax(310px,.72fr) 52px!important;
  column-gap:clamp(32px,4vw,72px)!important;
}
.service h3{
  max-width:100%!important;
  text-wrap:balance;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}

/* The three longest headings need a slightly more disciplined scale. */
.service[data-index="04"] h3,
.service[data-index="05"] h3{
  font-size:clamp(40px,4.65vw,70px)!important;
  line-height:.98!important;
  letter-spacing:-.022em!important;
}
.service[data-index="06"] h3{
  font-size:clamp(38px,4.35vw,66px)!important;
  line-height:1!important;
  letter-spacing:-.018em!important;
}

/* Give the descriptive column a little visual breathing room. */
.service-copy{
  padding-left:clamp(0px,.7vw,12px)!important;
}
.service-copy p{
  max-width:370px!important;
}

/* Avoid a sticky card visually disappearing under the following chapter. */
.services{
  isolation:isolate;
}
.archive-preview{
  position:relative;
  z-index:30;
}

/* Tablet tuning */
@media(max-width:1080px) and (min-width:761px){
  .service{
    grid-template-columns:48px minmax(0,1fr) minmax(250px,.72fr) 46px!important;
    column-gap:clamp(22px,3vw,40px)!important;
  }
  .service[data-index="04"] h3,
  .service[data-index="05"] h3{
    font-size:clamp(38px,4.7vw,58px)!important;
  }
  .service[data-index="06"] h3{
    font-size:clamp(36px,4.35vw,54px)!important;
  }
}

/* Mobile stays non-sticky and gives all six service titles a clean wrap. */
@media(max-width:760px){
  .service{
    z-index:auto!important;
    grid-template-columns:36px minmax(0,1fr) 44px!important;
    column-gap:14px!important;
  }
  .service[data-index="04"] h3,
  .service[data-index="05"] h3,
  .service[data-index="06"] h3{
    font-size:clamp(34px,9.5vw,44px)!important;
    line-height:1.02!important;
    letter-spacing:-.018em!important;
  }
  .service-copy{
    padding-left:0!important;
  }
}


/* =========================================================
   V31 — LIVE MOBILE + PAGE TRANSITION
   ========================================================= */

/* New internal page transition: no old ribbon. */
.transition{
  position:fixed;inset:0;z-index:1250;
  pointer-events:none;visibility:hidden;
  display:grid;place-items:center;
  background:var(--ink);
  clip-path:inset(0 50% 0 50%);
  transition:
    clip-path .62s cubic-bezier(.76,0,.18,1),
    visibility 0s .62s;
  overflow:hidden;
}
.transition.active{
  visibility:visible;
  clip-path:inset(0 0 0 0);
  transition:
    clip-path .62s cubic-bezier(.76,0,.18,1),
    visibility 0s 0s;
}
.transition-slit{
  position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:rgba(181,154,109,.45);
  transform:scaleY(.18);
  opacity:0;
  transition:transform .52s .08s var(--ease),opacity .25s .08s;
}
.transition.active .transition-slit{
  transform:scaleY(1);opacity:1;
}
.transition-signature{
  width:min(230px,55vw);
  text-align:center;
  opacity:0;
  transform:translateY(9px);
  transition:opacity .28s .24s ease,transform .42s .20s var(--ease);
}
.transition.active .transition-signature{
  opacity:1;transform:translateY(0);
}
.transition-signature img{
  display:block;width:100%;height:auto;margin:auto;
}
.transition-signature small{
  display:block;margin-top:14px;
  color:rgba(247,243,232,.52);
  font-family:var(--sans);
  font-size:7px;letter-spacing:.21em;text-transform:uppercase;
}

/* Modal no longer needs an index/kicker line. */
.modal-kicker{display:none!important}
.modal h3{margin-top:12vh!important}

/* Hard mobile safety layer. */
@media(max-width:760px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{min-width:0}
  main,section,.hero,.signature-scene,.philosophy,.flair-index,.composer,
  .services,.archive-preview,.final,.page-hero,.archive-page,.contact-shell,
  .legal-hero,.legal-copy{
    width:100%;max-width:100%;box-sizing:border-box;
  }

  .nav{
    left:8px!important;right:8px!important;
    width:auto!important;
    transform:none!important;
    grid-template-columns:minmax(0,1fr) auto!important;
  }
  .nav.hide{transform:translateY(-120px)!important}
  .brand{min-width:0;max-width:132px}
  .brand img{width:104px!important;max-width:100%!important;height:auto!important}

  .hero-meta{gap:12px}
  .hero-meta span{min-width:0}
  .hero-title,.signature-copy h2,.philosophy-copy h2,
  .flair-index-head h2,.composer-copy h2,.services-head h2,
  .archive-head h2,.final h2,.page-hero h1,.contact-intro h1,
  .legal-hero h1,.not-found h1{
    max-width:100%;
    overflow:visible!important;
  }

  .word-grid,.projects,.archive-grid,.form{min-width:0}
  .word,.project-card,.archive-item,.field{min-width:0}

  /* Drawer is guaranteed to stay within the physical phone viewport. */
  .modal-panel{
    left:0!important;right:auto!important;
    width:100vw!important;max-width:100vw!important;
    transform:translate3d(101%,0,0)!important;
  }
  .modal.open .modal-panel{transform:translate3d(0,0,0)!important}

  .transition-signature{width:min(205px,58vw)}
}

@media(max-width:430px){
  :root{--pad:18px}
  .hero{padding-left:18px!important;padding-right:18px!important}
  .hero-title{font-size:clamp(49px,14.2vw,67px)!important}
  .signature-copy,.philosophy,.flair-index,.composer,
  .services-head,.archive-preview,.final{
    padding-left:18px!important;padding-right:18px!important;
  }
}

@media(max-width:360px){
  :root{--pad:16px}
  .nav{left:6px!important;right:6px!important}
  .hero{padding-left:16px!important;padding-right:16px!important}
  .hero-title{font-size:clamp(46px,13.8vw,60px)!important}
  .word span{font-size:24px!important}
  .composer-preset{font-size:7px!important;padding:8px 9px!important}
}


/* =========================================================
   V32 — IOS CLICK / ARROW HOTFIX
   ========================================================= */

/* No Unicode arrow: CSS only, so iOS cannot render it as an emoji. */
.word small{
  display:flex!important;
  align-items:center;
  gap:7px;
}
.word small i{
  display:inline-block;
  position:relative;
  width:11px;height:11px;
  flex:0 0 11px;
}
.word small i::before{
  content:"";
  position:absolute;
  width:11px;height:1px;
  left:0;top:6px;
  background:currentColor;
  transform:rotate(-45deg);
  transform-origin:center;
}
.word small i::after{
  content:"";
  position:absolute;
  width:5px;height:5px;
  right:0;top:0;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
}
.word,
.service-open,
[data-index-word],
[data-service]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* One simple modal state machine: hidden → mounted off-canvas → open. */
.modal{
  visibility:hidden!important;
  pointer-events:none!important;
}
.modal.is-mounted{
  visibility:visible!important;
  pointer-events:auto!important;
}
.modal-backdrop{
  opacity:0!important;
}
.modal.open .modal-backdrop{
  opacity:1!important;
}
.modal-panel{
  left:auto!important;
  right:0!important;
  transform:translate3d(102%,0,0)!important;
  transition:transform .52s cubic-bezier(.22,.74,.13,1)!important;
  will-change:transform;
}
.modal.open .modal-panel{
  transform:translate3d(0,0,0)!important;
}

@media(max-width:760px){
  .modal-panel{
    left:0!important;
    right:auto!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    transform:translate3d(102%,0,0)!important;
  }
  .modal.open .modal-panel{
    transform:translate3d(0,0,0)!important;
  }
}


/* =========================================================
   V33 — AUTHORITATIVE MODAL STATE
   ========================================================= */
.modal{
  visibility:hidden!important;
  pointer-events:none!important;
}
.modal.active{
  visibility:visible!important;
  pointer-events:auto!important;
}
.modal.is-mounted{
  visibility:hidden!important;
  pointer-events:none!important;
}
.modal.active .modal-backdrop{
  opacity:0!important;
}
.modal.active.open .modal-backdrop{
  opacity:1!important;
}
.modal-panel{
  left:auto!important;
  right:0!important;
  transform:translate3d(103%,0,0)!important;
  transition:transform .54s cubic-bezier(.22,.74,.13,1)!important;
  will-change:transform!important;
}
.modal.active.open .modal-panel{
  transform:translate3d(0,0,0)!important;
}
@media(max-width:760px){
  .modal-panel{
    left:0!important;
    right:auto!important;
    width:100vw!important;
    max-width:100vw!important;
    transform:translate3d(103%,0,0)!important;
  }
  .modal.active.open .modal-panel{
    transform:translate3d(0,0,0)!important;
  }
}


/* V34: inline drawer controller owns the final visual state. */
#modal{
  position:fixed!important;
  inset:0!important;
  z-index:1400!important;
}
#modal .modal-backdrop{
  transition:opacity .34s ease!important;
}
#modal .modal-panel{
  transition:transform .54s cubic-bezier(.22,.74,.13,1)!important;
  will-change:transform!important;
  -webkit-overflow-scrolling:touch;
}


/* =========================================================
   V35 — DRAWER TITLE SAFETY
   Prevent long service names from touching / clipping the edge.
   ========================================================= */
#modal .modal-panel{
  box-sizing:border-box!important;
  width:min(680px,100vw)!important;
  padding-left:clamp(28px,3vw,42px)!important;
  padding-right:clamp(34px,3.6vw,52px)!important;
}

#modal #modalTitle{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  padding:.08em .10em .12em 0!important;
  margin-right:0!important;
  overflow:visible!important;
  text-wrap:balance;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
  font-size:clamp(42px,4.7vw,66px)!important;
  line-height:1.03!important;
  letter-spacing:-.018em!important;
}

/* Slightly more room for very long titles, without affecting short ones. */
#modal #modalTitle[data-long="true"]{
  font-size:clamp(38px,4.25vw,60px)!important;
  line-height:1.05!important;
}

@media(max-width:760px){
  #modal .modal-panel{
    width:100vw!important;
    max-width:100vw!important;
    padding-left:22px!important;
    padding-right:26px!important;
  }
  #modal #modalTitle{
    font-size:clamp(38px,10.5vw,52px)!important;
    line-height:1.04!important;
    padding-right:.08em!important;
  }
  #modal #modalTitle[data-long="true"]{
    font-size:clamp(34px,9.2vw,46px)!important;
  }
}


/* =========================================================
   V36 — UNIVERSAL CSS ARROW
   No Unicode arrow can render as an emoji on iOS.
   ========================================================= */
.css-arrow{
  display:inline-block;
  position:relative;
  width:12px;
  height:12px;
  margin-left:6px;
  vertical-align:-1px;
  flex:0 0 12px;
  color:currentColor;
}
.css-arrow::before{
  content:"";
  position:absolute;
  width:11px;
  height:1px;
  left:0;
  top:6px;
  background:currentColor;
  transform:rotate(-45deg);
  transform-origin:center;
}
.css-arrow::after{
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  right:0;
  top:0;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
}

/* For buttons/links, keep icon aligned without forcing line breaks. */
a .css-arrow,
button .css-arrow,
.project-card .css-arrow,
.archive-item .css-arrow{
  margin-left:7px;
}

/* =========================================================
   V36 — MOBILE MENU REFINEMENT
   ========================================================= */
@media(max-width:760px){
  .mobile-menu{
    position:fixed!important;
    inset:0!important;
    z-index:1150!important;
    background:var(--cream)!important;
    padding:
      max(110px,calc(env(safe-area-inset-top) + 96px))
      20px
      max(26px,env(safe-area-inset-bottom))
      20px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
  }

  .mobile-menu-inner{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    width:100%!important;
    max-width:100%!important;
  }

  .mobile-menu a{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:18px 0!important;
    border-bottom:1px solid rgba(20,17,11,.14)!important;
    font-family:var(--sans)!important;
    font-size:clamp(26px,8vw,38px)!important;
    line-height:1.05!important;
    letter-spacing:-.035em!important;
    text-transform:none!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
    color:var(--ink)!important;
  }

  .mobile-menu a:first-child{
    border-top:1px solid rgba(20,17,11,.14)!important;
  }

  .mobile-menu a::after{
    content:"";
    width:10px;
    height:10px;
    border-top:1px solid currentColor;
    border-right:1px solid currentColor;
    transform:rotate(45deg);
    flex:0 0 10px;
    margin-left:18px;
    opacity:.58;
  }

  .mobile-menu-footer{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:14px 20px!important;
    padding-top:28px!important;
    margin-top:34px!important;
    border-top:1px solid rgba(20,17,11,.14)!important;
    font-family:var(--sans)!important;
    font-size:11px!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
  }

  .mobile-menu .lang-mobile,
  .mobile-menu [data-lang-toggle]{
    font-size:11px!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
  }

  /* Keep the actual fixed navigation/header above the menu. */
  .nav{
    z-index:1200!important;
  }

  /* Menu open close icon */
  .nav.menu-open{
    background:rgba(247,243,232,.96)!important;
    backdrop-filter:blur(16px)!important;
    -webkit-backdrop-filter:blur(16px)!important;
  }
}

@media(max-width:390px){
  .mobile-menu{
    padding-left:16px!important;
    padding-right:16px!important;
  }
  .mobile-menu a{
    font-size:clamp(24px,7.8vw,34px)!important;
    padding:16px 0!important;
  }
}


/* =========================================================
   V38 — INTERNAL PAGE TRANSITION
   No logo image: impossible to explode / distort during navigation.
   ========================================================= */
.transition{
  position:fixed!important;
  inset:0!important;
  z-index:2000!important;
  display:grid!important;
  place-items:center!important;
  background:#14110B!important;
  visibility:hidden!important;
  pointer-events:none!important;
  opacity:0!important;
  clip-path:inset(0 50% 0 50%)!important;
  overflow:hidden!important;
  transition:
    clip-path .56s cubic-bezier(.76,0,.18,1),
    opacity .18s ease,
    visibility 0s .56s!important;
}

.transition.active{
  visibility:visible!important;
  opacity:1!important;
  clip-path:inset(0 0 0 0)!important;
  transition:
    clip-path .56s cubic-bezier(.76,0,.18,1),
    opacity .12s ease,
    visibility 0s 0s!important;
}

.transition-line{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(181,154,109,.48);
  transform:scaleY(.08);
  opacity:0;
  transform-origin:center;
  transition:
    transform .44s .12s cubic-bezier(.2,.7,.1,1),
    opacity .2s .10s ease;
}

.transition.active .transition-line{
  transform:scaleY(1);
  opacity:1;
}

.transition-wordmark{
  position:relative;
  z-index:2;
  display:grid;
  justify-items:center;
  gap:12px;
  width:min(320px,72vw);
  text-align:center;
  color:#F7F3E8;
  opacity:0;
  transform:translateY(9px) scale(.985);
  transition:
    opacity .24s .22s ease,
    transform .42s .18s cubic-bezier(.2,.7,.1,1);
}

.transition.active .transition-wordmark{
  opacity:1;
  transform:translateY(0) scale(1);
}

.transition-wordmark span{
  display:block;
  font-family:var(--serif);
  font-size:clamp(30px,3.2vw,44px);
  line-height:1;
  font-weight:400;
  letter-spacing:-.035em;
  white-space:nowrap;
}

.transition-wordmark small{
  display:block;
  font-family:var(--sans);
  font-size:7px;
  line-height:1.4;
  letter-spacing:.21em;
  text-transform:uppercase;
  color:rgba(247,243,232,.48);
}

@media(max-width:760px){
  .transition-wordmark{
    width:min(250px,70vw);
    gap:10px;
  }
  .transition-wordmark span{
    font-size:32px;
  }
  .transition-wordmark small{
    font-size:6.5px;
    letter-spacing:.17em;
  }
}

@media(prefers-reduced-motion:reduce){
  .transition{
    transition:none!important;
    clip-path:none!important;
  }
  .transition-line,
  .transition-wordmark{
    transition:none!important;
  }
}


/* =========================================================
   V39 — SLIDER / TRANSITION LOGO / ARROWS
   ========================================================= */

/* Slider fill is drawn on the input itself so Safari updates it with the thumb. */
.control input[type="range"]{
  --pct:50%;
  appearance:none!important;
  -webkit-appearance:none!important;
  width:100%!important;
  height:18px!important;
  margin:7px 0 0!important;
  cursor:pointer!important;
  background:
    linear-gradient(
      90deg,
      var(--gold-soft) 0 var(--pct),
      rgba(247,243,232,.20) var(--pct) 100%
    )
    center / 100% 1px no-repeat!important;
}
.control input[type="range"]::-webkit-slider-runnable-track{
  height:1px!important;
  background:transparent!important;
}
.control input[type="range"]::-moz-range-track{
  height:1px!important;
  background:transparent!important;
}
.control input[type="range"]::-moz-range-progress{
  background:transparent!important;
}
.control input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  width:12px!important;
  height:12px!important;
  margin-top:-5.5px!important;
  border:1px solid var(--cream)!important;
  border-radius:50%!important;
  background:var(--ink)!important;
}
.control input[type="range"]::-moz-range-thumb{
  width:12px!important;
  height:12px!important;
  border:1px solid var(--cream)!important;
  border-radius:50%!important;
  background:var(--ink)!important;
}

/* Real logo in internal page transition, strictly contained. */
.transition-brand{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  justify-items:center!important;
  gap:14px!important;
  width:min(290px,64vw)!important;
  max-width:290px!important;
  text-align:center!important;
  opacity:0!important;
  transform:translateY(8px) scale(.985)!important;
  transition:
    opacity .24s .22s ease,
    transform .42s .18s cubic-bezier(.2,.7,.1,1)!important;
}
.transition.active .transition-brand{
  opacity:1!important;
  transform:translateY(0) scale(1)!important;
}
.transition-brand-logo{
  display:block!important;
  position:static!important;
  inset:auto!important;
  width:220px!important;
  max-width:min(220px,52vw)!important;
  min-width:0!important;
  height:auto!important;
  max-height:90px!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0 auto!important;
  padding:0!important;
  transform:none!important;
  opacity:1!important;
  filter:none!important;
}
.transition-brand small{
  display:block!important;
  font-family:var(--sans)!important;
  font-size:7px!important;
  line-height:1.4!important;
  letter-spacing:.20em!important;
  text-transform:uppercase!important;
  color:rgba(247,243,232,.48)!important;
}
@media(max-width:760px){
  .transition-brand{
    width:min(240px,68vw)!important;
  }
  .transition-brand-logo{
    width:190px!important;
    max-width:56vw!important;
    max-height:78px!important;
  }
}

/* CSS arrows: always visible, never rendered as iOS emoji. */
.has-arrow{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
}
.has-arrow::after,
.project-card .project-meta small::after,
.archive-item .project-meta small::after{
  content:""!important;
  display:inline-block!important;
  width:10px!important;
  height:10px!important;
  flex:0 0 10px!important;
  border-top:1px solid currentColor!important;
  border-right:1px solid currentColor!important;
  transform:rotate(45deg)!important;
  opacity:.78!important;
  margin-left:3px!important;
}
.project-card .project-meta small,
.archive-item .project-meta small{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
}
.project-card .project-meta small::after,
.archive-item .project-meta small::after{
  width:8px!important;
  height:8px!important;
  flex-basis:8px!important;
}

/* Keep the Flair Index material arrows as their existing CSS icons. */
.word small i{
  display:inline-block!important;
}


/* =========================================================
   V40 — CUSTOM RANGE + CLEAN NE ARROWS
   ========================================================= */

/* -------- Custom slider -------- */
.range-shell{
  --pct:50%;
  --thumb-x:clamp(7px,var(--pct),calc(100% - 7px));
  position:relative;
  width:100%;
  height:28px;
  margin-top:1px;
}

.range-visual{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.range-visual::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  transform:translateY(-50%);
  background:rgba(247,243,232,.20);
}

.range-fill{
  position:absolute;
  left:0;
  top:50%;
  width:var(--thumb-x);
  height:1px;
  transform:translateY(-50%);
  background:var(--gold-soft);
}

.range-thumb{
  position:absolute;
  left:var(--thumb-x);
  top:50%;
  width:14px;
  height:14px;
  transform:translate(-50%,-50%);
  border:1px solid var(--cream);
  border-radius:50%;
  background:var(--ink);
  box-shadow:0 0 0 0 rgba(181,154,109,0);
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.range-shell:hover .range-thumb,
.range-shell:focus-within .range-thumb{
  background:var(--gold);
  border-color:var(--cream);
  box-shadow:0 0 0 4px rgba(181,154,109,.10);
  transform:translate(-50%,-50%) scale(1.08);
}

/* Native control stays fully functional, but invisible. */
.range-shell input[type="range"]{
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  cursor:pointer!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  background:transparent!important;
}

/* Neutralise all browser-native pseudo visuals. */
.range-shell input[type="range"]::-webkit-slider-runnable-track{
  background:transparent!important;
  border:0!important;
  height:28px!important;
}
.range-shell input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  width:20px!important;
  height:28px!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.range-shell input[type="range"]::-moz-range-track,
.range-shell input[type="range"]::-moz-range-progress{
  background:transparent!important;
  border:0!important;
  height:28px!important;
}
.range-shell input[type="range"]::-moz-range-thumb{
  width:20px!important;
  height:28px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* -------- Proper NE arrow -------- */
:root{
  --flair-arrow-ne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 10L10 2M4.5 2H10V7.5' fill='none' stroke='black' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.has-arrow::after,
.project-card .project-meta small::after,
.archive-item .project-meta small::after,
.word small i{
  content:""!important;
  display:inline-block!important;
  width:11px!important;
  height:11px!important;
  flex:0 0 11px!important;
  margin-left:5px!important;
  border:0!important;
  border-radius:0!important;
  background:currentColor!important;
  -webkit-mask:var(--flair-arrow-ne) center/contain no-repeat!important;
  mask:var(--flair-arrow-ne) center/contain no-repeat!important;
  transform:none!important;
  opacity:.82!important;
}

/* Kill the older pseudo-parts used to draw arrows. */
.word small i::before,
.word small i::after{
  content:none!important;
  display:none!important;
}

.project-card .project-meta small::after,
.archive-item .project-meta small::after{
  width:9px!important;
  height:9px!important;
  flex-basis:9px!important;
  margin-left:2px!important;
}

.has-arrow{
  gap:5px!important;
}

/* Slightly finer arrow in pills */
.pill.has-arrow::after{
  width:10px!important;
  height:10px!important;
  flex-basis:10px!important;
}

@media(max-width:760px){
  .range-shell{height:32px}
  .range-shell input[type="range"]::-webkit-slider-runnable-track,
  .range-shell input[type="range"]::-moz-range-track{height:32px!important}
  .range-shell input[type="range"]::-webkit-slider-thumb,
  .range-shell input[type="range"]::-moz-range-thumb{height:32px!important}
}


/* =========================================================
   V41 — INTERACTION POLISH
   ========================================================= */

/* ---------- Range dragging ---------- */
.range-shell{
  cursor:ew-resize!important;
  touch-action:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}
.range-shell input[type="range"]{
  pointer-events:none!important;
}
.range-shell:active .range-thumb{
  transform:translate(-50%,-50%) scale(1.12)!important;
  background:var(--gold)!important;
  box-shadow:0 0 0 5px rgba(181,154,109,.12)!important;
}

/* ---------- Hero logo becomes a clear seal, never hidden by typography ---------- */
.hero-orbit{
  z-index:5!important;
  right:5vw!important;
  top:27%!important;
  width:clamp(112px,8.8vw,148px)!important;
  background:rgba(247,243,232,.94)!important;
  box-shadow:
    0 0 0 10px rgba(247,243,232,.64),
    0 16px 44px rgba(20,17,11,.06)!important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.hero-orbit img{
  width:38%!important;
  opacity:1!important;
}
@media(max-width:760px){
  .hero-orbit{
    z-index:5!important;
    right:5%!important;
    top:24%!important;
    width:86px!important;
    opacity:1!important;
    box-shadow:
      0 0 0 7px rgba(247,243,232,.72),
      0 10px 26px rgba(20,17,11,.05)!important;
  }
}

/* ---------- Brand star, based on the 4-point negative-space star in the monogram ---------- */
:root{
  --flair-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1C12.45 7.9 16.1 11.55 23 12C16.1 12.45 12.45 16.1 12 23C11.55 16.1 7.9 12.45 1 12C7.9 11.55 11.55 7.9 12 1Z' fill='black'/%3E%3C/svg%3E");
}
.brand-star{
  display:inline-block!important;
  width:11px!important;
  height:11px!important;
  margin-left:5px!important;
  vertical-align:-1px!important;
  background:currentColor!important;
  -webkit-mask:var(--flair-star) center/contain no-repeat!important;
  mask:var(--flair-star) center/contain no-repeat!important;
  flex:0 0 11px!important;
}
.surprise{
  display:inline-flex!important;
  align-items:center!important;
}


/* =========================================================
   V42 — RELIABLE RANGE INTERACTION
   Native input owns pointer/touch; Flair visual mirrors its value.
   ========================================================= */
.range-shell{
  cursor:pointer!important;
  touch-action:pan-y!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}

/* Invisible, but fully interactive native range across the whole shell. */
.range-shell input[type="range"]{
  position:absolute!important;
  inset:0!important;
  z-index:10!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  pointer-events:auto!important;
  cursor:ew-resize!important;
  appearance:auto!important;
  -webkit-appearance:auto!important;
  background:transparent!important;
  touch-action:pan-y!important;
}

/* The Flair visual never intercepts touches. */
.range-visual,
.range-fill,
.range-thumb{
  pointer-events:none!important;
}

/* We only need the native control for hit-testing/input events; hide its own chrome. */
.range-shell input[type="range"]::-webkit-slider-runnable-track{
  background:transparent!important;
  border-color:transparent!important;
  color:transparent!important;
}
.range-shell input[type="range"]::-webkit-slider-thumb{
  opacity:0!important;
}
.range-shell input[type="range"]::-moz-range-track,
.range-shell input[type="range"]::-moz-range-progress{
  background:transparent!important;
  border-color:transparent!important;
}
.range-shell input[type="range"]::-moz-range-thumb{
  opacity:0!important;
}

/* Give immediate visual feedback while the actual input is active/focused. */
.range-shell:has(input:active) .range-thumb,
.range-shell:focus-within .range-thumb{
  background:var(--gold)!important;
  box-shadow:0 0 0 4px rgba(181,154,109,.12)!important;
  transform:translate(-50%,-50%) scale(1.08)!important;
}


/* =========================================================
   V44 — MOBILE HERO + SERVICES SAFETY
   ========================================================= */
@media(max-width:760px){
  /* The hero seal is a real grid item, so it can never sit on top of the title. */
  .hero{
    grid-template-rows:auto auto 1fr auto!important;
    align-content:start!important;
  }
  .hero-meta{grid-row:1!important}
  .hero-orbit{
    position:relative!important;
    grid-row:2!important;
    justify-self:end!important;
    align-self:start!important;
    right:auto!important;
    top:auto!important;
    width:78px!important;
    margin:22px 8px 2px 0!important;
    opacity:1!important;
    z-index:2!important;
    background:rgba(247,243,232,.96)!important;
    box-shadow:
      0 0 0 6px rgba(247,243,232,.70),
      0 10px 26px rgba(20,17,11,.045)!important;
  }
  .hero-title{
    grid-row:3!important;
    margin:2.5vh 0 4.5vh!important;
    position:relative!important;
    z-index:3!important;
  }
  .hero-bottom{grid-row:4!important}

  /* Mobile services: room for every title, including the longest ones. */
  .service{
    grid-template-columns:34px minmax(0,1fr)!important;
    column-gap:16px!important;
    padding-left:20px!important;
    padding-right:20px!important;
    overflow:hidden!important;
  }
  .service-num{
    grid-column:1!important;
    grid-row:1!important;
    align-self:start!important;
  }
  .service h3{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
    max-width:100%!important;
    font-size:clamp(30px,8.6vw,38px)!important;
    line-height:1.01!important;
    letter-spacing:-.018em!important;
    text-wrap:balance!important;
    overflow:visible!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  .service-copy{
    grid-column:2!important;
    grid-row:2!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    padding-right:0!important;
  }
  .service-open{
    grid-column:1!important;
    grid-row:2!important;
    align-self:end!important;
    justify-self:start!important;
    margin-top:24px!important;
  }

  .service[data-index="04"] h3,
  .service[data-index="05"] h3,
  .service[data-index="06"] h3{
    font-size:clamp(27px,7.7vw,34px)!important;
    line-height:1.03!important;
    letter-spacing:-.014em!important;
  }
}

@media(max-width:380px){
  .service h3{
    font-size:clamp(28px,8.1vw,34px)!important;
  }
  .service[data-index="04"] h3,
  .service[data-index="05"] h3,
  .service[data-index="06"] h3{
    font-size:clamp(25px,7.25vw,30px)!important;
  }
}


/* ─────────────────────────────────────────────
   V60 — Contact receipt confirmation popup
   ───────────────────────────────────────────── */
body.receipt-open{overflow:hidden}

.receipt-popup{
  position:fixed;
  inset:0;
  z-index:1800;
  display:grid;
  place-items:center;
  padding:24px;
  visibility:hidden;
  pointer-events:none;
}
.receipt-popup.open{
  visibility:visible;
  pointer-events:auto;
}
.receipt-popup-backdrop{
  position:absolute;
  inset:0;
  background:rgba(20,17,11,.56);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  opacity:0;
  transition:opacity .32s ease;
}
.receipt-popup.open .receipt-popup-backdrop{opacity:1}

.receipt-popup-card{
  position:relative;
  z-index:1;
  width:min(560px,100%);
  overflow:hidden;
  background:var(--cream);
  border:1px solid rgba(20,17,11,.16);
  padding:46px 50px 42px;
  text-align:center;
  box-shadow:0 28px 90px rgba(20,17,11,.18);
  opacity:0;
  transform:translateY(22px) scale(.985);
  transition:opacity .34s ease,transform .46s var(--ease);
}
.receipt-popup.open .receipt-popup-card{
  opacity:1;
  transform:none;
}
.receipt-popup-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:155px;
  background:url("assets/pattern-soft.svg") center top/560px auto no-repeat;
  opacity:.085;
  pointer-events:none;
}
.receipt-popup-mark{
  position:relative;
  z-index:1;
  width:54px;
  height:54px;
  margin:0 auto 34px;
}
.receipt-popup-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.receipt-popup-eyebrow{
  position:relative;
  z-index:1;
  font-size:9px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:18px;
}
.receipt-popup h2{
  position:relative;
  z-index:1;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(42px,6vw,62px);
  line-height:1.02;
  font-weight:400;
  letter-spacing:-.035em;
}
.receipt-popup-rule{
  width:52px;
  height:1px;
  background:var(--gold);
  opacity:.72;
  margin:26px auto;
}
.receipt-popup-body{
  max-width:430px;
  margin:0 auto;
  font-size:14px;
  line-height:1.7;
  color:rgba(20,17,11,.75);
}
.receipt-popup-detail{
  max-width:410px;
  margin:18px auto 0;
  font-family:var(--serif);
  font-size:17px;
  line-height:1.45;
  color:var(--gold);
}
.receipt-popup-close{
  appearance:none;
  border:0;
  border-bottom:1px solid currentColor;
  background:transparent;
  color:var(--ink);
  margin-top:34px;
  padding:10px 0 7px;
  font:500 10px/1 var(--sans);
  letter-spacing:.18em;
  cursor:pointer;
  text-transform:uppercase;
}
.receipt-popup-close:hover{color:var(--gold)}
.receipt-popup-close:focus-visible{
  outline:1px solid var(--ink);
  outline-offset:6px;
}

@media(max-width:600px){
  .receipt-popup{padding:14px}
  .receipt-popup-card{padding:38px 25px 34px}
  .receipt-popup-card::before{height:130px;background-size:470px auto}
  .receipt-popup-mark{width:48px;height:48px;margin-bottom:30px}
  .receipt-popup h2{font-size:44px}
  .receipt-popup-body{font-size:13px}
  .receipt-popup-detail{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .receipt-popup-backdrop,.receipt-popup-card{transition:none}
}