/* =============================================================================
   YQR DESIGN — "Old Money / Quiet Luxury" system — LIGHT (ivory) edition
   Ivory paper (#F8FAFC) · deep ink · antique gold · Cormorant Garamond serif +
   Pinyon Script calligraphy + Jost. Dark footer anchors the page.
   ============================================================================= */
:root{
  --bg:#F8FAFC;            /* primary ivory paper */
  --bg-2:#FFFFFF;          /* alternating (clean white) */
  --bg-3:#14201a;          /* deep ink — footer + media letterbox */
  --raise:#EEF1F6;         /* card hover / inset / highlight rows */
  --panel-warm:#EAE7DE;
  --gold:#b0894a;          /* antique gold — fills, large accents, on dark */
  --gold-2:#c8a86b;        /* lighter gold — hover */
  --gold-ink:#8c6a2c;      /* deep gold — small text on light (contrast) */
  --cream:#17231c;         /* PRIMARY INK (named 'cream' for legacy refs) */
  --ink-on-dark:#f1ece1;   /* light text for the dark footer / dark bands */
  --muted:rgba(23,35,28,.66);
  --faint:rgba(23,35,28,.46);
  --hair:rgba(23,35,28,.12);
  --hair-2:rgba(23,35,28,.20);
  --hero-grad:radial-gradient(120% 85% at 50% 8%,#ffffff 0%,#f1f4f8 52%,#e8ecf1 100%);
  --serif:'Cormorant Garamond',Georgia,serif;
  --script:'Pinyon Script',cursive;
  --sans:'Jost',system-ui,sans-serif;
  --maxw:1180px;
  --pad:clamp(20px,5vw,56px);
  --r:18px;          /* soft, friendly corner radius for media + cards */
  --r-sm:12px;
}

/* ---- rounded media + cards (smooth, friendly aesthetic) -------------------- */
.frame,.work,.web,.campaign,.film,.video-frame,.igtile,.fig,
.card,.quote,.formpanel{border-radius:var(--r);}
.frame img,.work img,.work video,.web .shot img,.campaign img,
.film video,.video-frame video,.igtile img{border-radius:inherit;}
.lightbox img{border-radius:var(--r);}
/* top-left corner labels curve with the frame */
.video-badge,.web .ribbon,.fig .figtag{border-top-left-radius:var(--r);}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--bg);color:var(--cream);font-family:var(--sans);font-weight:300;
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;position:relative;}
::selection{background:var(--gold);color:#fff;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* ---- film grain overlay (subtle on light) ---------------------------------- */
.grain{position:fixed;inset:-150%;width:400%;height:400%;pointer-events:none;z-index:90;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite;}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-4%,-5%)}20%{transform:translate(-8%,3%)}
  30%{transform:translate(3%,-8%)}40%{transform:translate(-3%,9%)}50%{transform:translate(-8%,4%)}
  60%{transform:translate(7%,0)}70%{transform:translate(-6%,6%)}80%{transform:translate(4%,8%)}90%{transform:translate(-5%,-4%)}}

/* ---- type ------------------------------------------------------------------ */
.eyebrow{font-family:var(--sans);font-weight:500;text-transform:uppercase;font-size:12px;
  letter-spacing:.4em;color:var(--gold-ink);}
.serif{font-family:var(--serif);font-weight:300;}
.script{font-family:var(--script);color:var(--gold);font-weight:400;line-height:.9;}
.h1{font-family:var(--serif);font-weight:300;line-height:.92;letter-spacing:.01em;color:var(--cream);
  font-size:clamp(58px,12vw,168px);}
.h2{font-family:var(--serif);font-weight:300;line-height:1.05;color:var(--cream);
  font-size:clamp(34px,5vw,64px);}
.h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,28px);color:var(--cream);}
.statement{font-family:var(--serif);font-weight:300;font-size:clamp(24px,3.2vw,42px);
  line-height:1.28;letter-spacing:.005em;color:var(--cream);}
.lead{font-weight:300;font-size:clamp(15px,1.5vw,18px);line-height:1.75;color:var(--muted);}
.body{font-weight:300;font-size:16px;line-height:1.8;color:var(--muted);}
.body + .body{margin-top:22px;}
.small{font-size:13px;line-height:1.7;color:var(--faint);}
em,.ital{font-style:italic;color:var(--gold-ink);font-family:var(--serif);}
.gold{color:var(--gold-ink);}

/* drop cap */
.dropcap::first-letter{font-family:var(--serif);font-weight:500;font-size:4.2em;line-height:.72;
  float:left;margin:8px 16px 0 0;color:var(--gold);}

/* ---- ornaments / dividers -------------------------------------------------- */
.orn{display:flex;align-items:center;justify-content:center;gap:18px;color:var(--gold);margin:0 auto;}
.orn::before,.orn::after{content:"";height:1px;width:clamp(40px,8vw,90px);}
.orn::before{background:linear-gradient(90deg,transparent,var(--gold));}
.orn::after{background:linear-gradient(90deg,var(--gold),transparent);}
.orn i{display:block;width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none;}
.orn.left{justify-content:flex-start;}
.orn.left::before{display:none;}

/* ---- buttons / links ------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-family:var(--sans);font-weight:500;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:15px 32px;border-radius:999px;
  background:var(--cream);color:var(--bg);border:1px solid var(--cream);transition:.4s;}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#fff;}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff;}
.btn.gold:hover{background:var(--cream);border-color:var(--cream);color:var(--bg);}
.btn.ghost{background:transparent;color:var(--cream);border-color:var(--hair-2);}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-ink);background:transparent;}
.ulink{display:inline-block;cursor:pointer;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream);border-bottom:1px solid var(--gold);padding-bottom:5px;transition:color .4s;}
.ulink:hover{color:var(--gold-ink);}

/* ---- layout ---------------------------------------------------------------- */
.shell{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
section{position:relative;}
.sec{padding:clamp(80px,10vw,140px) 0;}
.sec.lg{padding:clamp(90px,12vw,170px) 0;}
.rule-t{border-top:1px solid var(--hair);}
.bg-2{background:var(--bg-2);} .bg-3{background:var(--bg-3);} .raise{background:var(--raise);}

/* ---- nav ------------------------------------------------------------------- */
.scrollbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:100;background:var(--gold);
  transform:scaleX(0);transform-origin:0 50%;}
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  background:linear-gradient(180deg,rgba(248,250,252,.94),rgba(248,250,252,.6) 70%,rgba(248,250,252,0));
  backdrop-filter:blur(6px);transition:padding .5s,background .5s,box-shadow .5s;}
.nav.cond{padding-top:11px;padding-bottom:11px;background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--hair);}
.nav .brand img{height:46px;width:auto;}
.nav.cond .brand img{height:40px;transition:height .5s;}
.nav .links{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);}
.nav .links a{position:relative;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);transition:color .4s;}
.nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .55s cubic-bezier(.2,.7,.2,1);}
.nav .links a:hover::after,.nav .links a.active::after{transform:scaleX(1);}
.nav .links a:hover,.nav .links a.active{color:var(--gold-ink);}
.nav .shop{color:#fff!important;background:var(--gold);padding:9px 20px;border-radius:999px;font-weight:500;}
.nav .shop::after{display:none;}
.nav .shop:hover{background:var(--gold-ink);}
.nav .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;}
.nav .burger span{display:block;width:24px;height:1.5px;background:var(--cream);}
.mpanel{position:fixed;inset:0;z-index:95;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:28px;transform:translateX(100%);
  transition:transform .55s cubic-bezier(.2,.7,.2,1);}
.mpanel.open{transform:translateX(0);}
.mpanel .script{font-size:42px;margin-bottom:4px;}
.mpanel a.mlink{font-family:var(--serif);font-size:30px;color:var(--cream);}
.mpanel a.mlink:hover{color:var(--gold-ink);}
.mpanel .close{position:absolute;top:22px;right:26px;background:none;border:none;color:var(--gold-ink);
  font-family:var(--serif);font-size:36px;line-height:1;cursor:pointer;}
@media(max-width:820px){.nav .links{display:none;}.nav .burger{display:flex;}}

/* ---- hero (light wash, dark text) ------------------------------------------ */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:150px var(--pad) 96px;overflow:hidden;background:var(--hero-grad);}
.hero-bg{position:absolute;left:0;top:-8%;width:100%;height:116%;z-index:0;overflow:hidden;will-change:transform;}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.0) brightness(1.12) sepia(.04);
  animation:kenburns 26s ease-in-out infinite alternate;}
@keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.14)}}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(248,250,252,.55),rgba(248,250,252,.72) 55%,rgba(248,250,252,.96));}
.hero-in{position:relative;z-index:2;max-width:900px;}
.hero .script{font-size:clamp(80px,16vw,228px);display:inline-block;margin-top:.04em;}
.hero-meta{position:absolute;z-index:2;bottom:34px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--faint);}
.hero-meta i{width:5px;height:5px;border-radius:50%;background:var(--gold);transform:none;}

/* ---- marquee --------------------------------------------------------------- */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:var(--raise);padding:20px 0;}
.marquee .track{display:inline-block;animation:marquee 42s linear infinite;will-change:transform;}
.marquee span{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,30px);color:var(--muted);}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- 2-col helpers --------------------------------------------------------- */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(40px,5vw,72px);align-items:center;}
.two.start{align-items:start;}
.narrow{max-width:1080px;margin:0 auto;}
.tight{max-width:1000px;margin:0 auto;}

/* portrait frame */
.frame{position:relative;overflow:hidden;border:1px solid var(--hair-2);}
.frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.02) brightness(1.0);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .6s;}
.frame.zoom:hover img{transform:scale(1.06);filter:saturate(1.02) contrast(1.02) brightness(1.02);}
.frame .cap{position:absolute;left:0;right:0;bottom:0;padding:34px 20px 16px;
  background:linear-gradient(180deg,transparent,rgba(12,20,16,.78));}
.frame .cap span{font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2);}
.ar-45{aspect-ratio:4/5;}.ar-43{aspect-ratio:4/3;}.ar-11{aspect-ratio:1/1;}.ar-168{aspect-ratio:16/8;}

/* ---- hairline cell grid ---------------------------------------------------- */
.cells{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);}
.cells.c3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.cells > *{background:var(--bg);padding:clamp(32px,3.4vw,52px);transition:background .5s;}
.cells > *:hover{background:var(--raise);}
.svc-n{font-family:var(--serif);font-style:italic;font-size:34px;color:rgba(140,106,44,.55);margin-bottom:24px;}

/* ---- track cards ----------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.card{border:1px solid var(--hair-2);padding:clamp(34px,3.6vw,52px);display:flex;flex-direction:column;transition:border-color .5s,background .5s;}
.card:hover{border-color:var(--gold);}
.card .price{font-family:var(--serif);font-size:34px;color:var(--gold-ink);}
.pill{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);
  border:1px solid var(--hair-2);padding:9px 16px;border-radius:999px;}

/* ---- atmosphere band (kept as a dark photographic moment) ------------------ */
.atmos{position:relative;height:clamp(340px,54vh,580px);overflow:hidden;}
.atmos img{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;will-change:transform;
  filter:saturate(.8) contrast(1.03) brightness(.82) sepia(.18);}
.atmos .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,21,17,.45),rgba(13,21,17,.7));
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;}
.atmos .eyebrow{color:var(--gold-2);}
.atmos .script{font-size:clamp(48px,8vw,104px);color:var(--ink-on-dark);}

/* ---- brand-mark tiles (legacy, unused) ------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;}
.tile{position:relative;aspect-ratio:4/3;border:1px solid var(--hair-2);overflow:hidden;transition:border-color .5s;}
.tile:hover{border-color:var(--gold);}
.tile .lab{position:absolute;top:0;left:0;font-family:var(--sans);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-2);background:rgba(12,20,16,.82);padding:7px 12px;z-index:2;}
.iggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;}
.igtile{position:relative;aspect-ratio:1/1;border:1px solid var(--hair);overflow:hidden;}
.igtile img{width:100%;height:100%;object-fit:cover;}

/* ---- selected work (real portfolio) ---------------------------------------- */
.work-feature{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:clamp(36px,5vw,72px);align-items:center;}
.video-frame{position:relative;width:100%;max-width:360px;aspect-ratio:9/16;margin:0 auto;
  border:1px solid var(--hair-2);overflow:hidden;background:var(--bg-3);}
.video-frame video{width:100%;height:100%;object-fit:cover;display:block;}
.video-badge{position:absolute;top:0;left:0;z-index:2;font-family:var(--sans);font-size:9.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2);background:rgba(12,20,16,.82);padding:7px 12px;}
@media(max-width:820px){.work-feature{grid-template-columns:1fr;}}

.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
.work{position:relative;display:block;aspect-ratio:3/4;border:1px solid var(--hair-2);overflow:hidden;}
.work img,.work video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1) contrast(1.02);
  transition:transform 1.3s cubic-bezier(.2,.7,.2,1);}
.work:hover img,.work:hover video{transform:scale(1.06);}
.work .grad{position:absolute;inset:0;opacity:.6;transition:opacity .5s;
  background:linear-gradient(180deg,rgba(13,21,17,0) 42%,rgba(13,21,17,.86));}
.work:hover .grad{opacity:.85;}
.work .meta{position:absolute;left:0;right:0;bottom:0;padding:22px;display:flex;flex-direction:column;gap:5px;}
.work .meta .k{font-family:var(--sans);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-2);}
.work .meta .t{font-family:var(--serif);font-size:24px;line-height:1.1;color:var(--ink-on-dark);}

/* website previews — 1080×1350 (4:5) browser frame, click to expand full hero */
.web-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,3vw,32px);
  justify-items:center;}
.web{position:relative;display:flex;flex-direction:column;width:100%;max-width:480px;aspect-ratio:1080/1350;
  cursor:pointer;border:1px solid var(--hair-2);overflow:hidden;background:#fff;
  transition:border-color .5s,box-shadow .5s,transform .5s cubic-bezier(.2,.7,.2,1);}
.web:hover{border-color:var(--gold);box-shadow:0 30px 70px -34px rgba(23,35,28,.5);transform:translateY(-4px);}
.web .chrome{flex:none;display:flex;align-items:center;gap:6px;padding:11px 14px;background:#f2f0ea;border-bottom:1px solid var(--hair);}
.web .chrome .d{width:8px;height:8px;border-radius:50%;background:#d3cec3;}
.web .chrome .url{margin-left:10px;flex:1;font-family:var(--sans);font-size:9.5px;letter-spacing:.05em;color:#9a9488;
  background:#fff;border:1px solid var(--hair);border-radius:999px;padding:4px 12px;}
.web .shot{position:relative;flex:1;overflow:hidden;background:#111;}
.web .shot img{width:100%;height:100%;object-fit:cover;object-position:left center;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1);}
.web:hover .shot img{transform:scale(1.05);}
.web .ribbon{position:absolute;top:0;left:0;z-index:3;font-family:var(--sans);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:#fff;background:var(--gold);padding:6px 12px;}
.web .expand{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:18px 16px 14px;background:linear-gradient(180deg,rgba(17,17,17,0),rgba(17,17,17,.82));
  opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.2,1);}
.web:hover .expand,.web:focus-visible .expand{opacity:1;transform:none;}
.web .expand .t{font-family:var(--serif);font-size:clamp(18px,2vw,22px);color:#fff;line-height:1.1;}
.web .expand .z{flex:none;display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:7px 13px;}

/* lightbox — full hero on click (60fps scale + fade) */
.lightbox{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:clamp(24px,5vw,64px);background:rgba(20,30,25,0);backdrop-filter:blur(0);
  opacity:0;visibility:hidden;transition:opacity .4s,background .4s,backdrop-filter .4s,visibility .4s;}
.lightbox.open{opacity:1;visibility:visible;background:rgba(20,30,25,.9);backdrop-filter:blur(10px);}
.lightbox figure{margin:0;max-width:1280px;width:100%;display:flex;flex-direction:column;align-items:center;
  transform:scale(.93);transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.lightbox.open figure{transform:scale(1);}
.lightbox img{width:100%;height:auto;max-height:80vh;object-fit:contain;background:#fff;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 100px rgba(0,0,0,.55);}
.lightbox figcaption{margin-top:18px;font-family:var(--serif);font-size:clamp(20px,2.4vw,28px);color:#f1ece1;text-align:center;}
.lb-close{position:fixed;top:22px;right:26px;z-index:301;background:none;border:none;cursor:pointer;
  font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#f1ece1;
  display:inline-flex;align-items:center;gap:8px;}
.lb-close:hover{color:var(--gold-2);}
body.lb-open{overflow:hidden;}
@media(prefers-reduced-motion:reduce){.lightbox,.lightbox figure{transition:opacity .2s;}.lightbox figure{transform:none;}}

/* campaign row (self-captioned social posts) */
.campaign-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.campaign{display:block;border:1px solid var(--hair-2);overflow:hidden;aspect-ratio:4/5;background:var(--bg-3);transition:border-color .5s;}
.campaign:hover{border-color:var(--gold);}
.campaign img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform 1.3s cubic-bezier(.2,.7,.2,1);}
.campaign:hover img{transform:scale(1.05);}
@media(max-width:820px){.campaign-grid{grid-template-columns:repeat(2,1fr);}}
.ig-cta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:clamp(40px,5vw,64px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--hair);}
.ig-cta svg{width:20px;height:20px;}

/* films grid (Work page) */
.films{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.film{position:relative;aspect-ratio:4/5;border:1px solid var(--hair-2);overflow:hidden;background:var(--bg-3);}
.film video{width:100%;height:100%;object-fit:cover;display:block;}
.film .video-badge{z-index:2;}
@media(max-width:820px){.films{grid-template-columns:1fr;}}

/* page sub-hero (interior pages) */
.subhero{padding:clamp(150px,18vh,210px) 0 clamp(40px,6vw,72px);}
.subhero .h1{font-size:clamp(48px,9vw,120px);}
.crumb{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);}
.crumb a:hover{color:var(--gold-ink);}

/* ---- FAQ accordion (native details/summary) -------------------------------- */
.faq details{border-top:1px solid var(--hair-2);}
.faq details[open]{background:linear-gradient(180deg,var(--raise),transparent);}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 0;font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.4vw,26px);color:var(--cream);
  transition:color .3s;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--gold-ink);}
.faq summary .pl{position:relative;flex:none;width:18px;height:18px;}
.faq summary .pl::before,.faq summary .pl::after{content:"";position:absolute;background:var(--gold);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s;}
.faq summary .pl::before{top:8px;left:0;width:18px;height:1.5px;}
.faq summary .pl::after{left:8px;top:0;width:1.5px;height:18px;}
.faq details[open] summary .pl::after{transform:scaleY(0);opacity:0;}
.faq details > .ans{overflow:hidden;}
.faq details > .ans p{padding:0 0 26px;max-width:70ch;}
.faq .legal-block{padding:26px 0;border-top:1px solid var(--hair-2);}

/* ---- testimonials ---------------------------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;}
.quote{padding:clamp(30px,3vw,42px);border:1px solid var(--hair-2);background:var(--bg-2);}
.quote .mark{font-family:var(--serif);font-size:60px;color:rgba(176,137,74,.5);line-height:.4;height:30px;}

/* ---- forms ----------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);}
.field input,.field select,.field textarea{font-family:var(--serif);font-size:20px;color:var(--cream);
  background:transparent;border:none;border-bottom:1px solid var(--hair-2);padding:10px 0;outline:none;transition:border-color .4s;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);}
.field select option{background:var(--bg-2);color:var(--cream);}

/* ---- article / prose (journal posts) --------------------------------------- */
.artmeta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-family:var(--sans);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:20px;}
.artmeta .dot{width:4px;height:4px;border-radius:50%;background:var(--hair-2);}
.frameworktag{display:inline-block;font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-ink);border:1px solid var(--hair-2);padding:5px 12px;border-radius:999px;}
.prose{font-family:var(--sans);}
.prose > p{font-weight:300;font-size:18px;line-height:1.9;color:var(--ink-2,#3a3d40);margin-bottom:24px;}
.prose > p:first-of-type{font-size:21px;line-height:1.7;color:var(--cream);}
.prose strong{color:var(--cream);font-weight:500;}
.prose em{font-style:italic;color:var(--gold-ink);font-family:var(--serif);font-size:1.08em;}
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(27px,3.6vw,36px);color:var(--cream);
  line-height:1.12;margin:48px 0 16px;}
.prose h3{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--cream);margin:34px 0 12px;}
.prose ul{list-style:none;margin:0 0 26px;padding:0;}
.prose ul li{position:relative;padding-left:26px;margin-bottom:13px;font-weight:300;font-size:17px;
  line-height:1.7;color:var(--muted);}
.prose ul li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;background:var(--gold);transform:rotate(45deg);}
.prose ul li strong{color:var(--cream);font-weight:500;}
.callout{border-left:2px solid var(--gold);padding:4px 0 4px 26px;margin:34px 0;font-family:var(--serif);
  font-style:italic;font-size:clamp(21px,2.6vw,26px);line-height:1.4;color:var(--cream);}
.takeaway{background:var(--raise);border:1px solid var(--hair-2);padding:clamp(26px,3vw,38px);margin:44px 0;}
.takeaway .eyebrow{margin-bottom:18px;}
.cta-band{margin-top:48px;padding:clamp(34px,4vw,52px);background:var(--bg-3);text-align:center;}
.cta-band .h3{color:var(--ink-on-dark);}
.cta-band .body{color:rgba(241,236,225,.66);max-width:46ch;margin:14px auto 28px;}
.artnav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:26px;border-top:1px solid var(--hair-2);}

/* ---- portfolio bento grid (rounded squircle + circle tiles) ---------------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(120px,13.6vw,182px);
  gap:clamp(12px,1.4vw,18px);grid-auto-flow:dense;}
.bento .t{position:relative;overflow:hidden;border-radius:22px;background:var(--bg-3);
  display:block;text-decoration:none;padding:0;border:0;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;}
.bento a.t:hover{transform:translateY(-4px);box-shadow:0 26px 60px -30px rgba(23,35,28,.5);}
.bento .t.circle{border-radius:50%;}
.bento .t.pill{border-radius:999px;}
/* rounded tiles read as pure image windows: no clipped caption */
.bento .t.pill .lab,.bento .t.pill .grad,
.bento .t.circle .lab,.bento .t.circle .grad{display:none;}
.bento .t img,.bento .t video{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.97) contrast(1.02);transition:transform 1.3s cubic-bezier(.2,.7,.2,1),filter .6s;}
.bento a.t:hover img,.bento a.t:hover video{transform:scale(1.06);}
.bento .t .grad{position:absolute;inset:0;opacity:.5;transition:opacity .5s;
  background:linear-gradient(180deg,rgba(13,21,17,0) 45%,rgba(13,21,17,.85));}
.bento a.t:hover .grad{opacity:.8;}
.bento .t .lab{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;display:flex;flex-direction:column;gap:3px;}
.bento .t .lab .k{font-family:var(--sans);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2);}
.bento .t .lab .n{font-family:var(--serif);font-size:clamp(18px,2vw,23px);line-height:1.05;color:#fff;}
/* solid graphic "shape" tiles */
.bento .t.shape{display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;}
.bento .t.shape.gold{background:var(--gold);} .bento .t.shape.ink{background:var(--bg-3);}
.bento .t.shape img,.bento .t.shape svg{width:58%;height:auto;object-fit:contain;filter:none;}
.bento .t.shape .big{font-family:var(--serif);font-weight:300;color:var(--ink-on-dark);line-height:.9;}
.bento .t.shape.gold .big{color:#fff;}
/* spans */
.c2{grid-column:span 2;} .c3{grid-column:span 3;} .c4{grid-column:span 4;}
.r2{grid-row:span 2;} .r3{grid-row:span 3;}
@media(max-width:820px){
  .bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:110px;}
  .c4{grid-column:span 4;} .c3{grid-column:span 2;}
}
@media(max-width:520px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:96px;}
  .c2,.c3,.c4{grid-column:span 2;} .r3{grid-row:span 2;}
}

/* ---- terms "tasting menu" (how we work, plated) ---------------------------- */
.tmenu{max-width:1020px;}
.tmenu .course{display:flex;gap:clamp(24px,4vw,54px);align-items:center;
  padding:clamp(30px,4vw,46px) 0;border-top:1px solid var(--hair-2);}
.tmenu .course:first-child{border-top:0;padding-top:6px;}
.tmenu .course:nth-child(even){flex-direction:row-reverse;}
.tmenu .cimg{flex:0 0 42%;position:relative;overflow:hidden;border-radius:var(--r);
  aspect-ratio:5/4;background:var(--bg-3);}
.tmenu .cimg img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.tmenu .course:hover .cimg img{transform:scale(1.05);}
.tmenu .cbody{flex:1;min-width:0;}
.tmenu .ccourse{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:12px;}
.tmenu .chead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.tmenu .cno{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,32px);color:var(--gold);line-height:1;flex:none;}
.tmenu .cname{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.2vw,33px);
  color:var(--cream);line-height:1.04;flex:1;min-width:200px;}
@media(max-width:760px){
  .tmenu .course,.tmenu .course:nth-child(even){flex-direction:column;align-items:stretch;}
  .tmenu .cimg{flex:none;width:100%;aspect-ratio:16/10;}
}

/* ---- recent-work tease strip (services / blog / contact) ------------------- */
.tease-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px);}
.tease{position:relative;display:block;overflow:hidden;border-radius:var(--r);
  aspect-ratio:4/5;background:var(--bg-3);text-decoration:none;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;}
.tease:hover{transform:translateY(-4px);box-shadow:0 24px 54px -30px rgba(23,35,28,.5);}
.tease img,.tease video{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.tease:hover img,.tease:hover video{transform:scale(1.06);}
.tease .g{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,21,17,0) 50%,rgba(13,21,17,.82));}
.tease .tl{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;color:#fff;
  font-family:var(--serif);font-size:clamp(17px,1.8vw,21px);line-height:1.05;}
.tease .tl small{display:block;font-family:var(--sans);font-size:9px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2);margin-bottom:4px;}
@media(max-width:720px){.tease-row{grid-template-columns:repeat(2,1fr);}}

/* ---- contact page ---------------------------------------------------------- */
.cmethods{margin-top:40px;border-top:1px solid var(--hair-2);}
.cmethod{display:flex;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid var(--hair);
  text-decoration:none;transition:padding-left .35s cubic-bezier(.2,.7,.2,1);}
.cmethod:hover{padding-left:10px;}
.cmethod .ic{flex:none;width:42px;height:42px;border:1px solid var(--hair-2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--gold-ink);transition:.35s;}
.cmethod:hover .ic{background:var(--gold);border-color:var(--gold);color:#fff;}
.cmethod .ct .lbl{display:block;font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:2px;}
.cmethod .ct .val{font-family:var(--serif);font-size:clamp(20px,2.2vw,25px);color:var(--cream);line-height:1.15;}
.trust{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:34px;}
.trust .ti{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:12.5px;color:var(--muted);}
.trust .ti svg{flex:none;color:var(--gold-ink);}
.formpanel{border:1px solid var(--hair-2);background:var(--bg-2);padding:clamp(28px,3.4vw,48px);
  box-shadow:0 36px 80px -46px rgba(23,35,28,.45);}
.skmark{display:flex;align-items:center;gap:14px;margin-top:36px;padding-top:26px;border-top:1px solid var(--hair);}
.skmark svg{flex:none;width:54px;height:auto;color:var(--hair-2);}
.skmark .dot{fill:var(--gold);}
.skmark .txt{font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--muted);line-height:1.5;}
.skmark .txt b{display:block;font-family:var(--serif);font-size:18px;color:var(--cream);font-weight:400;letter-spacing:.02em;}

/* ---- footer (kept dark to anchor the page) --------------------------------- */
.footer{background:var(--bg-3);border-top:1px solid var(--gold-ink);padding:clamp(56px,7vw,90px) 0 40px;}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px;align-items:start;}
.footer img.flogo{height:60px;width:auto;margin-bottom:20px;}
.footer .small{color:rgba(241,236,225,.5);}
.ftitle{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2);margin-bottom:14px;}
.footer .fl{display:block;font-size:14px;color:rgba(241,236,225,.72);line-height:2.1;transition:color .4s;}
.footer .fl:hover{color:var(--gold-2);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  margin-top:54px;padding-top:26px;border-top:1px solid rgba(241,236,225,.14);}
.footer-bottom .script{font-size:26px;color:var(--gold-2);}

/* ---- reveal (HD: blur + scale + lift, GPU-composited) ---------------------- */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translate3d(0,30px,0) scale(.985);filter:blur(7px);
    transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1);
    will-change:opacity,transform,filter;}
  .reveal.in{opacity:1;transform:none;filter:none;}
  /* staggered children */
  .stagger.in > *{opacity:0;transform:translate3d(0,22px,0);animation:fxRise .85s cubic-bezier(.2,.7,.2,1) forwards;}
  .stagger.in > *:nth-child(1){animation-delay:.02s}.stagger.in > *:nth-child(2){animation-delay:.10s}
  .stagger.in > *:nth-child(3){animation-delay:.18s}.stagger.in > *:nth-child(4){animation-delay:.26s}
  .stagger.in > *:nth-child(5){animation-delay:.34s}.stagger.in > *:nth-child(6){animation-delay:.42s}
  @keyframes fxRise{to{opacity:1;transform:none;}}
}

/* ---- 60fps dynamic UI layer ------------------------------------------------ */
/* custom lerp cursor (desktop pointers only) */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  border-radius:50%;left:-50px;will-change:transform;}
.cursor-dot{width:6px;height:6px;background:var(--gold);margin:-3px 0 0 -3px;}
.cursor-ring{width:34px;height:34px;border:1px solid var(--gold);margin:-17px 0 0 -17px;opacity:.55;
  transition:width .28s ease,height .28s ease,opacity .28s ease,background .28s ease,margin .28s ease;}
body.cursor-hot .cursor-ring{width:56px;height:56px;margin:-28px 0 0 -28px;opacity:1;background:rgba(176,137,74,.08);}
body.cursor-down .cursor-ring{width:24px;height:24px;margin:-12px 0 0 -12px;}
@media(hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none!important;}}

/* GPU hints for interactive transforms */
.btn,.ulink{will-change:transform;}
.work,.web,.campaign,.card,.tile,.frame{transform-style:preserve-3d;}
.tilt{transition:transform .25s cubic-bezier(.2,.7,.2,1);will-change:transform;}
.tilt.reset{transition:transform .55s cubic-bezier(.2,.7,.2,1);}

/* button sheen sweep on hover (compositor-friendly) */
.btn{position:relative;overflow:hidden;isolation:isolate;}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.btn:hover::after{transform:translateX(120%);}

@media(prefers-reduced-motion:reduce){
  .reveal,.stagger.in > *{opacity:1!important;transform:none!important;filter:none!important;animation:none!important;}
  .cursor-dot,.cursor-ring{display:none!important;}
}

/* ---- utility --------------------------------------------------------------- */
.center{text-align:center;}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt44{margin-top:44px}.mt56{margin-top:56px}
.mb18{margin-bottom:18px}.mb24{margin-bottom:24px}.mb30{margin-bottom:30px}.mb46{margin-bottom:46px}.mb56{margin-bottom:56px}
.row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
.row.center{justify-content:center;}
.between{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px;}