/* ==========================================================================
   Nishi's Solution — Premium Agency Website
   Design system + components
   ========================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}

/* ---------- Tokens ---------- */
:root{
  --ink:#08080A;
  --ink-1:#0C0C0F;
  --ink-2:#111116;
  --ink-3:#17171E;
  --cream:#F7F4EE;
  --cream-dim:rgba(247,244,238,.66);
  --cream-faint:rgba(247,244,238,.42);
  --line:rgba(247,244,238,.10);
  --line-strong:rgba(247,244,238,.18);

  --gold:#D9B36C;
  --gold-lite:#F2DCAF;
  --gold-deep:#B98F45;
  --gold-grad:linear-gradient(120deg,#F5E3BC 0%,#D9B36C 42%,#B98F45 100%);

  --font-display:"Fraunces",ui-serif,Georgia,"Times New Roman",serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --maxw:1240px;
  --gutter:clamp(20px,5vw,48px);
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --sec-y:clamp(72px,10vw,140px);
  --ease:cubic-bezier(.22,.86,.32,1);
  --shadow-lg:0 30px 80px -30px rgba(0,0,0,.75);
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--cream);
  font-size:16.5px;
  line-height:1.65;
  letter-spacing:-.006em;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
::selection{background:var(--gold);color:#111}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.06;letter-spacing:-.022em;font-variation-settings:"SOFT" 12,"WONK" 1;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.2vw,5.1rem)}
h2{font-size:clamp(2rem,4.3vw,3.5rem)}
h3{font-size:clamp(1.28rem,2vw,1.7rem)}
p{text-wrap:pretty}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec-y);position:relative}
.section--tight{padding-block:clamp(56px,7vw,96px)}
.bg-1{background:var(--ink-1)}
.bg-2{background:var(--ink-2)}
.bg-grad{background:radial-gradient(120% 90% at 50% 0%,#15151C 0%,var(--ink) 62%)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:22px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.8}
.eyebrow--center::after{content:"";width:26px;height:1px;background:var(--gold);opacity:.8}

.lead{font-size:clamp(1.02rem,1.35vw,1.18rem);color:var(--cream-dim);max-width:62ch}
.muted{color:var(--cream-dim)}
.gold{color:var(--gold)}
.serif-italic{font-family:var(--font-display);font-style:italic;font-weight:400}
.grad-text{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.center{text-align:center}
.center .lead{margin-inline:auto}
.center .eyebrow{margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:999px;border:1px solid transparent;
  font-size:.93rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .35s;
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex:none;transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn--gold{background:var(--gold-grad);color:#14100A;box-shadow:0 12px 34px -14px rgba(217,179,108,.85)}
.btn--gold:hover{box-shadow:0 20px 44px -14px rgba(217,179,108,.95)}
.btn--ghost{border-color:var(--line-strong);color:var(--cream);background:rgba(247,244,238,.02)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--dark{background:var(--ink);color:var(--cream)}
.btn--sm{padding:11px 22px;font-size:.85rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.center .btn-row{justify-content:center}

.link-arrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.92rem;color:var(--gold);position:relative}
.link-arrow svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- Header ---------- */
.header{position:fixed;inset:0 0 auto;z-index:100;transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.header.is-stuck{background:rgba(8,8,10,.82);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:28px;height:78px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:1.12rem;font-weight:600;letter-spacing:-.02em}
.brand__mark{width:38px;height:38px;flex:none;border-radius:11px;background:var(--gold-grad);display:grid;place-items:center;color:#14100A;font-weight:700;font-size:.95rem;font-family:var(--font-body);letter-spacing:-.03em;box-shadow:0 8px 22px -10px rgba(217,179,108,.9)}
.brand small{display:block;font-family:var(--font-body);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-faint);font-weight:500;margin-top:2px}

.nav__menu{display:flex;align-items:center;gap:4px}
.nav__link{position:relative;padding:9px 15px;border-radius:999px;font-size:.92rem;font-weight:500;color:var(--cream-dim);transition:color .25s,background .25s}
.nav__link:hover,.nav__link.is-active{color:var(--cream);background:rgba(247,244,238,.06)}
.nav__link.is-active{color:var(--gold)}
.nav__actions{display:flex;align-items:center;gap:12px}

/* dropdown */
.has-drop{position:relative}
.drop{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,10px);
  width:min(560px,86vw);background:rgba(17,17,22,.96);backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;
  display:grid;grid-template-columns:1fr 1fr;gap:4px;
  opacity:0;visibility:hidden;transition:.32s var(--ease);box-shadow:var(--shadow-lg);
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop a{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border-radius:14px;transition:background .25s}
.drop a:hover{background:rgba(247,244,238,.06)}
.drop b{display:block;font-size:.88rem;font-weight:600}
.drop span{display:block;font-size:.76rem;color:var(--cream-faint);line-height:1.45}
.drop i{font-style:normal;font-size:1rem;line-height:1.2}

.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-strong);background:transparent;place-items:center;cursor:pointer}
.burger span{display:block;width:18px;height:1.6px;background:var(--cream);border-radius:2px;transition:.3s var(--ease)}
.burger span+span{margin-top:5px}
.burger.is-open span:first-child{transform:translateY(3.3px) rotate(45deg)}
.burger.is-open span:last-child{transform:translateY(-3.3px) rotate(-45deg)}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:95;background:var(--ink);padding:100px var(--gutter) 40px;transform:translateY(-100%);transition:transform .5s var(--ease);overflow-y:auto;visibility:hidden}
.drawer.is-open{transform:translateY(0);visibility:visible}
.drawer a{display:block;padding:16px 0;border-bottom:1px solid var(--line);font-family:var(--font-display);font-size:1.7rem;font-weight:500}
.drawer a:last-of-type{border-bottom:0}
.drawer a.btn{display:inline-flex;font-family:var(--font-body);font-size:.95rem;font-weight:600;padding:16px 30px;margin-top:28px;width:100%;border-bottom:0;color:#14100A}
.drawer a.btn svg{width:16px;height:16px}
.drawer__meta{margin-top:30px;display:grid;gap:6px;font-size:.9rem;color:var(--cream-dim)}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:clamp(130px,17vw,190px);padding-bottom:clamp(70px,9vw,110px);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-1}
.hero__bg::before,.hero__bg::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.hero__bg::before{width:56vw;height:56vw;background:radial-gradient(circle,rgba(217,179,108,.30),transparent 68%);top:-22vw;right:-14vw}
.hero__bg::after{width:44vw;height:44vw;background:radial-gradient(circle,rgba(110,125,255,.16),transparent 70%);bottom:-20vw;left:-12vw}
.grid-lines{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:78px 78px;mask-image:radial-gradient(circle at 50% 22%,#000 0%,transparent 72%);opacity:.5}
.hero h1{max-width:16ch}
.hero .lead{margin-top:26px;font-size:clamp(1.04rem,1.5vw,1.24rem)}
.hero .btn-row{margin-top:38px}

.rotator{display:inline-grid;vertical-align:bottom}
.rotator span{grid-area:1/1;opacity:0;transform:translateY(.3em) scale(.98);transition:opacity .28s var(--ease),transform .28s var(--ease);white-space:nowrap}
.rotator span.is-live{opacity:1;transform:none;transition-duration:.55s;transition-delay:.12s}

.hero__inner{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,72px);align-items:center}
.hero__copy{min-width:0}
.hero__stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:clamp(48px,6vw,76px);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--line)}
.hero__stats>div{background:var(--ink-1);padding:26px 22px}
.hero__stats b{display:block;font-family:var(--font-display);font-size:clamp(1.9rem,3.1vw,2.6rem);font-weight:600;line-height:1;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__stats b span{font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;display:inline;margin:0}
.hero__stats>div>span{display:block;margin-top:9px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-faint)}

/* hero showcase */
.hero__show{position:relative;height:clamp(360px,32vw,500px)}
.hero__show::before{content:"";position:absolute;inset:8% 4%;background:radial-gradient(circle,rgba(217,179,108,.30),transparent 68%);filter:blur(60px);z-index:-1}
.hs{position:absolute;margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--line-strong);box-shadow:var(--shadow-lg);background:var(--ink-2)}
.hs img{width:100%;display:block}
.hs--1{width:84%;top:0;right:0;transform:rotate(2.2deg);animation:floatA 9s ease-in-out infinite}
.hs--2{width:58%;bottom:0;left:0;transform:rotate(-3.4deg);animation:floatB 11s ease-in-out infinite}
@keyframes floatA{50%{transform:rotate(2.2deg) translateY(-16px)}}
@keyframes floatB{50%{transform:rotate(-3.4deg) translateY(14px)}}

/* ---------- Marquee ---------- */
.marquee{border-block:1px solid var(--line);padding-block:22px;overflow:hidden;background:var(--ink-1)}
.marquee__track{display:flex;gap:56px;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-family:var(--font-display);font-size:clamp(1rem,1.7vw,1.35rem);color:var(--cream-faint);white-space:nowrap;display:flex;align-items:center;gap:56px}
.marquee__track span::after{content:"◆";font-size:.5rem;color:var(--gold);font-family:var(--font-body)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Section head ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(38px,5vw,64px)}
.sec-head h2{max-width:18ch}
.sec-head .lead{margin-top:18px}
.sec-head--center{flex-direction:column;align-items:center;text-align:center}
.sec-head--center h2{max-width:22ch}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  position:relative;background:linear-gradient(180deg,rgba(247,244,238,.045),rgba(247,244,238,.012));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3vw,34px);
  transition:transform .45s var(--ease),border-color .35s,background .35s;overflow:hidden;
}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(400px 200px at var(--mx,50%) var(--my,0%),rgba(217,179,108,.14),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover{transform:translateY(-6px);border-color:var(--line-strong)}
.card:hover::after{opacity:1}
.card__icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:rgba(217,179,108,.12);border:1px solid rgba(217,179,108,.28);color:var(--gold);margin-bottom:22px}
.card__icon svg{width:24px;height:24px}
.card h3{margin-bottom:12px}
.card p{color:var(--cream-dim);font-size:.95rem}
.card__list{margin-top:18px;display:grid;gap:9px}
.card__list li{position:relative;padding-left:20px;font-size:.87rem;color:var(--cream-dim)}
.card__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.85}
.card .link-arrow{margin-top:22px}
.card--num::before{counter-increment:step;content:"0" counter(step);position:absolute;top:22px;right:26px;font-family:var(--font-display);font-size:2.6rem;color:rgba(247,244,238,.07);font-weight:600}
.steps{counter-reset:step}

/* ---------- Work ---------- */
.work-grid{display:grid;gap:clamp(20px,2.6vw,32px);grid-template-columns:repeat(2,minmax(0,1fr))}
.work-card{display:block;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-1);transition:transform .5s var(--ease),border-color .35s}
.work-card:hover{transform:translateY(-7px);border-color:var(--line-strong)}
.work-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-2)}
.work-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.work-card:hover .work-card__media img{transform:scale(1.045)}
.work-card__tag{position:absolute;top:16px;left:16px;padding:7px 14px;border-radius:999px;background:rgba(8,8,10,.66);backdrop-filter:blur(8px);border:1px solid var(--line-strong);font-size:.71rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600}
.work-card__body{padding:26px clamp(22px,2.4vw,30px) 30px;display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.work-card__body h3{font-size:clamp(1.2rem,1.7vw,1.5rem)}
.work-card__body p{font-size:.88rem;color:var(--cream-faint);margin-top:7px}
.work-card__go{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--gold);transition:.35s var(--ease)}
.work-card:hover .work-card__go{background:var(--gold);color:#14100A;border-color:transparent;transform:rotate(45deg)}
.work-card__go svg{width:16px;height:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 clamp(22px,2.4vw,30px) 28px}
.chip{font-size:.74rem;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--cream-faint)}

/* project detail blocks */
.project{padding-block:clamp(56px,7vw,96px);border-bottom:1px solid var(--line)}
.project:last-of-type{border-bottom:0}
.project__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:start;margin-bottom:40px}
.project__meta{display:grid;gap:16px}
.meta-row{display:flex;gap:14px;font-size:.88rem;border-bottom:1px dashed var(--line);padding-bottom:12px}
.meta-row b{min-width:110px;color:var(--cream-faint);font-weight:500}
.shots{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.shots figure{margin:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--ink-2);cursor:zoom-in;transition:transform .4s var(--ease),border-color .3s}
.shots figure:hover{transform:translateY(-4px);border-color:var(--gold)}
.shots img{width:100%;height:100%;object-fit:cover;object-position:top}
.shots--wide{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(4,4,6,.94);backdrop-filter:blur(10px);display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;transition:.35s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:min(1100px,92vw);max-height:88vh;border-radius:var(--r-md);border:1px solid var(--line-strong);object-fit:contain}
.lightbox__close{position:absolute;top:22px;right:22px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--cream);cursor:pointer;font-size:1.3rem;display:grid;place-items:center}
.lightbox__close:hover{background:var(--gold);color:#14100A}

/* ---------- Split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.split--rev .split__media{order:2}
.split__media{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--ink-2)}
.split__media img{width:100%}
.ticks{display:grid;gap:14px;margin-top:28px}
.ticks li{display:flex;gap:13px;align-items:flex-start;font-size:.96rem;color:var(--cream-dim)}
.ticks svg{width:20px;height:20px;flex:none;color:var(--gold);margin-top:2px}

/* ---------- Testimonials ---------- */
.quote{background:linear-gradient(180deg,rgba(247,244,238,.05),rgba(247,244,238,.015));border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3vw,36px);display:flex;flex-direction:column;gap:20px;height:100%}
.quote__stars{color:var(--gold);letter-spacing:3px;font-size:.85rem}
.quote p{font-family:var(--font-display);font-size:clamp(1.02rem,1.35vw,1.16rem);line-height:1.55;font-weight:400;font-style:italic}
.quote footer{display:flex;align-items:center;gap:13px;margin-top:auto}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--gold-grad);display:grid;place-items:center;color:#14100A;font-weight:700;font-size:.85rem;flex:none}
.quote b{display:block;font-size:.92rem;font-weight:600}
.quote small{color:var(--cream-faint);font-size:.79rem}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:26px 52px 26px 0;position:relative;font-family:var(--font-display);font-size:clamp(1.06rem,1.6vw,1.32rem);font-weight:500;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;margin-top:-6px;background:
  linear-gradient(currentColor,currentColor) center/100% 1.6px no-repeat,
  linear-gradient(currentColor,currentColor) center/1.6px 100% no-repeat;
  color:var(--gold);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(90deg);background:linear-gradient(currentColor,currentColor) center/100% 1.6px no-repeat}
.faq p{padding:0 60px 28px 0;color:var(--cream-dim);font-size:.97rem;max-width:78ch}

/* ---------- Statement / flow (About) ---------- */
.statement{text-align:center;position:relative;overflow:hidden}
.statement .kicker{max-width:64ch;margin:0 auto 26px;color:var(--cream-dim);font-size:clamp(1rem,1.35vw,1.14rem)}
.statement q,.statement .big{
  display:block;font-family:var(--font-display);font-weight:600;letter-spacing:-.024em;
  font-size:clamp(1.95rem,4.6vw,3.5rem);line-height:1.12;max-width:19ch;margin-inline:auto;quotes:none;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.statement .rule{width:64px;height:1px;background:var(--gold);opacity:.7;margin:34px auto 0}

.flowline{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(10px,2.2vw,26px);margin-bottom:clamp(34px,4.5vw,56px);
  font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.25rem,2.7vw,2.15rem);line-height:1.2}
.flowline i{font-style:normal;color:var(--gold);display:inline-flex;align-items:center;opacity:.95}
.flowline i svg{width:.85em;height:.85em;display:block}

.pull{margin-top:24px;padding:20px 0 20px 24px;border-left:2px solid var(--gold);
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.12rem,1.7vw,1.42rem);line-height:1.45;color:var(--cream)}

.closer{text-align:center}
.closer .soft{font-family:var(--font-display);font-size:clamp(1.3rem,2.5vw,2rem);color:var(--cream-faint);font-weight:400;line-height:1.28;letter-spacing:-.018em;max-width:26ch;margin-inline:auto}
.closer .strong{font-family:var(--font-display);font-size:clamp(1.95rem,4.4vw,3.3rem);font-weight:600;line-height:1.12;letter-spacing:-.024em;margin:14px auto 0;max-width:17ch;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.closer .rule{width:64px;height:1px;background:var(--gold);opacity:.7;margin:36px auto 0}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(44px,6vw,84px);text-align:center;border:1px solid rgba(217,179,108,.28);background:radial-gradient(120% 130% at 50% -10%,rgba(217,179,108,.22),rgba(12,12,15,.9) 58%)}
.cta h2{max-width:20ch;margin-inline:auto}
.cta .lead{margin:20px auto 0}
.cta .btn-row{margin-top:34px;justify-content:center}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,4.5vw,70px);align-items:start}
.info-card{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.info-card:last-child{border-bottom:0}
.info-card__ic{width:44px;height:44px;flex:none;border-radius:13px;background:rgba(217,179,108,.12);border:1px solid rgba(217,179,108,.26);color:var(--gold);display:grid;place-items:center}
.info-card__ic svg{width:20px;height:20px}
.info-card b{display:block;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--cream-faint);font-weight:600;margin-bottom:5px}
.info-card a,.info-card span{font-size:1.02rem}
.info-card a:hover{color:var(--gold)}

.form{background:linear-gradient(180deg,rgba(247,244,238,.05),rgba(247,244,238,.015));border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,38px)}
.field{margin-bottom:18px}
.field label{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-faint);font-weight:600;margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;padding:14px 16px;border-radius:12px;background:rgba(8,8,10,.6);
  border:1px solid var(--line);color:var(--cream);font-size:.95rem;transition:border-color .3s,background .3s;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:rgba(8,8,10,.9)}
.field input::placeholder,.field textarea::placeholder{color:rgba(247,244,238,.3)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B36C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .btn{width:100%;margin-top:6px}
.form__note{font-size:.8rem;color:var(--cream-faint);margin-top:14px;text-align:center}
.form__alt{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--cream-faint);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.form__alt::before,.form__alt::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Footer ---------- */
.footer{background:var(--ink-1);border-top:1px solid var(--line);padding-top:clamp(56px,7vw,88px)}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,3.5vw,50px);padding-bottom:52px}
.footer h4{font-family:var(--font-body);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-faint);font-weight:600;margin-bottom:20px}
.footer ul{display:grid;gap:11px}
.footer li a{font-size:.93rem;color:var(--cream-dim);transition:color .25s}
.footer li a:hover{color:var(--gold)}
.footer__brand p{font-size:.93rem;color:var(--cream-dim);margin-top:18px;max-width:34ch}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;color:var(--cream-dim);transition:.3s}
.socials a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
.socials svg{width:17px;height:17px}
.footer__bot{border-top:1px solid var(--line);padding-block:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.83rem;color:var(--cream-faint)}

/* ---------- Floating actions ---------- */
.fab{position:fixed;right:20px;bottom:20px;z-index:80;display:grid;gap:12px}
.fab a,.fab button{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);background:rgba(17,17,22,.9);backdrop-filter:blur(10px);color:var(--cream);cursor:pointer;transition:.35s var(--ease);box-shadow:0 12px 30px -12px rgba(0,0,0,.9)}
.fab a:hover,.fab button:hover{transform:translateY(-3px)}
.fab .wa{background:#25D366;border-color:#25D366;color:#04310f}
.fab svg{width:24px;height:24px}
.fab .top{opacity:0;visibility:hidden}
.fab .top.is-on{opacity:1;visibility:visible}

/* ---------- Page hero (inner pages) ---------- */
.phero{padding-top:clamp(120px,15vw,168px);padding-bottom:clamp(40px,6vw,64px);position:relative;overflow:hidden}
.phero h1{font-size:clamp(2.3rem,5.2vw,4.2rem);max-width:18ch}
.crumbs{display:flex;gap:9px;font-size:.8rem;color:var(--cream-faint);margin-bottom:22px}
.crumbs a:hover{color:var(--gold)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .nav__menu,.nav__actions .btn{display:none}
  .burger{display:grid}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .contact-grid{grid-template-columns:1fr}
  .project__head{grid-template-columns:1fr}
  .hero__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__inner{grid-template-columns:1fr}
  .hero__show{display:none}
}
@media (max-width:720px){
  body{font-size:16px}
  .sec-head{flex-direction:column;align-items:flex-start}
  .sec-head .link-arrow{margin-top:-10px}
  .g-2,.g-3,.g-4,.work-grid{grid-template-columns:1fr}
  .field-2{grid-template-columns:1fr}
  .work-card__body{padding-bottom:24px}
  .faq summary{padding-right:44px}
  .faq p{padding-right:20px}
  .footer__bot{flex-direction:column}
}
@media (max-width:480px){
  .footer__top{grid-template-columns:1fr;gap:34px}
  .btn{width:100%}
  .btn-row{width:100%}
  .hero__stats div{padding:20px 16px}
}

/* ---------- Media caption ---------- */
.media-cap{margin-top:14px;font-size:.83rem;line-height:1.5;color:var(--cream-faint);display:flex;gap:9px;align-items:flex-start}
.media-cap::before{content:"";flex:none;width:16px;height:1px;background:var(--gold);opacity:.8;margin-top:.62em}

/* ---------- Plain (cut-out illustration) media ---------- */
.split__media--plain{border:0;background:none;border-radius:0;overflow:visible;position:relative;display:grid;place-items:center}
.split__media--plain::before{content:"";position:absolute;inset:8% 6%;border-radius:50%;
  background:radial-gradient(circle,rgba(217,179,108,.22),rgba(217,179,108,.06) 45%,transparent 70%);filter:blur(46px)}
.split__media--plain img{position:relative;width:min(100%,520px)}