/* ============================================================
   Tenn Renovation — design system
   Refined premium · navy, cream & brass · Fraunces + Manrope
   ============================================================ */

:root{
  --ink:      #0d1130;
  --ink-2:    #161b45;
  --ink-soft: #454a66;
  --muted:    #7d8197;
  --cream:    #f7f3ec;
  --cream-2:  #efe8db;
  --sand:     #e4d9c5;
  --paper:    #ffffff;
  --brass:    #d6a63a;
  --brass-d:  #b98b24;
  --brass-l:  #f3d98a;
  --red:      #e02226;
  --wa:       #1f8a4c;
  --wa-d:     #176d3b;
  --line:     rgba(13,17,48,.12);
  --line-2:   rgba(13,17,48,.07);
  --line-inv: rgba(255,255,255,.14);

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 80px);
  --radius: 18px;
  --radius-sm: 12px;

  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.2,.7,.2,1);
  --shadow: 0 30px 60px -36px rgba(13,17,48,.45);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-font-smoothing:antialiased; }
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--cream);
  font-size:17px; line-height:1.65; font-weight:400; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.05; margin:0; letter-spacing:-.015em; font-variation-settings:"opsz" 96; }
h1{ font-size:clamp(42px,6.4vw,88px); }
h2{ font-size:clamp(32px,4.4vw,56px); }
h3{ font-size:clamp(22px,2.4vw,30px); }
:focus-visible{ outline:3px solid var(--brass); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--brass-l); color:var(--ink); }

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:100;
  background:var(--ink); color:var(--cream); padding:10px 16px; border-radius:8px;
  font-weight:700; font-size:14px; transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; }

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(72px,10vw,128px); }
.section.tight{ padding-block:clamp(56px,7vw,88px); }
.on-ink{ background:var(--ink); color:var(--cream); }
.on-paper{ background:var(--paper); }
.on-cream2{ background:var(--cream-2); }
.eyebrow{
  font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass-d); display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--brass); display:inline-block; border-radius:2px; }
.on-ink .eyebrow, .hero .eyebrow, .page-hero .eyebrow{ color:var(--brass); }
.zh-head{
  font-size:clamp(15px,1.3vw,18px); font-weight:500; letter-spacing:.06em; line-height:1.6;
  margin-top:14px; color:var(--ink-soft);
}
.on-ink .zh-head, .hero .zh-head, .page-hero .zh-head{ color:rgba(247,243,236,.78); }
.lead{ font-size:clamp(18px,1.9vw,21px); color:var(--ink-soft); line-height:1.6; max-width:58ch; }
.on-ink .lead{ color:rgba(247,243,236,.78); }
.shot{ width:100%; height:100%; object-fit:cover; display:block; }

.sec-head{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,64px); align-items:end; margin-bottom:clamp(40px,5vw,64px); }
.sec-head h2{ margin-top:18px; max-width:16ch; text-wrap:balance; }
.sec-head .lead{ padding-bottom:6px; }
.sec-head.center{ grid-template-columns:1fr; text-align:center; justify-items:center; }
.sec-head.center .lead{ margin-inline:auto; }
@media (max-width:840px){ .sec-head{ grid-template-columns:1fr; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:.01em;
  padding:15px 26px; border-radius:999px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  white-space:nowrap;
}
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn-primary{ background:var(--ink); color:var(--cream); }
.btn-primary:hover{ background:var(--ink-2); box-shadow:0 14px 30px -14px rgba(13,17,48,.6); }
.btn-brass{ background:var(--brass); color:var(--ink); }
.btn-brass:hover{ background:var(--brass-l); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-ghost.inv{ color:#fff; border-color:rgba(255,255,255,.4); }
.btn-ghost.inv:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-wa{ background:var(--wa); color:#fff; }
.btn-wa:hover{ background:var(--wa-d); }
.btn-sm{ padding:11px 18px; font-size:13.5px; }
.btn-lg{ padding:18px 32px; font-size:16px; }
.text-link{ font-weight:700; font-size:15px; color:var(--ink); display:inline-flex; align-items:center; gap:8px; border-bottom:1.5px solid var(--brass); padding-bottom:2px; }
.text-link .arr{ transition:transform .3s var(--ease); }
.text-link:hover .arr{ transform:translateX(4px); }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.site-head.is-solid{
  background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2);
  border-bottom-color:var(--line-2);
}
.site-head .bar{ display:flex; align-items:center; justify-content:space-between; height:84px; gap:24px; }
.brand{ display:block; position:relative; }
.logo-mark{ height:50px; width:auto; display:block; }
.brand .logo-light{ display:none; }
.site-head.over-dark:not(.is-solid) .brand .logo-dark{ display:none; }
.site-head.over-dark:not(.is-solid) .brand .logo-light{ display:block; }
.nav{ display:flex; align-items:center; gap:clamp(22px,2.6vw,36px); }
.nav a.link{ font-size:14.5px; font-weight:600; letter-spacing:.01em; color:var(--ink-soft); position:relative; padding:8px 0; }
.nav a.link::after{ content:""; position:absolute; left:0; bottom:2px; height:2px; width:0; background:var(--brass); border-radius:2px; transition:width .35s var(--ease); }
.nav a.link:hover, .nav a.link[aria-current="page"]{ color:var(--ink); }
.nav a.link:hover::after, .nav a.link[aria-current="page"]::after{ width:100%; }
.site-head.over-dark:not(.is-solid) .nav a.link{ color:rgba(255,255,255,.78); }
.site-head.over-dark:not(.is-solid) .nav a.link:hover, .site-head.over-dark:not(.is-solid) .nav a.link[aria-current="page"]{ color:#fff; }
.nav-cta{ display:flex; align-items:center; gap:12px; margin-left:8px; }
.site-head.over-dark:not(.is-solid) .nav-cta .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.bar-actions{ display:none; align-items:center; gap:10px; }
.menu-btn{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0 11px; border-radius:999px;
  background:none; border:1.5px solid var(--line); cursor:pointer; color:var(--ink);
}
.site-head.over-dark:not(.is-solid) .menu-btn{ color:#fff; border-color:rgba(255,255,255,.4); }
.menu-btn span{ display:block; height:2px; width:100%; background:currentColor; border-radius:2px; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.menu-open .menu-btn span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2){ opacity:0; }
.menu-open .menu-btn span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:960px){
  .site-head .bar{ height:74px; }
  .logo-mark{ height:44px; }
  .bar-actions{ display:flex; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    display:none; flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); border-bottom:1px solid var(--line);
    padding:10px var(--gutter) 22px; box-shadow:0 24px 40px -30px rgba(13,17,48,.45);
  }
  .menu-open .nav{ display:flex; }
  .menu-open.site-head{ background:var(--cream); }
  .menu-open .brand .logo-light{ display:none !important; }
  .menu-open .brand .logo-dark{ display:block !important; }
  .menu-open .menu-btn{ color:var(--ink); border-color:var(--line); }
  .nav a.link{ font-size:17px; font-weight:600; padding:14px 0; border-bottom:1px solid var(--line-2); color:var(--ink) !important; }
  .nav a.link::after{ display:none; }
  .nav-cta{ flex-direction:column; align-items:stretch; margin:16px 0 0; gap:10px; }
  .nav-cta .btn{ justify-content:center; }
}

/* ---------- home hero ---------- */
.hero{ position:relative; min-height:min(94vh,860px); margin-top:-84px; display:flex; align-items:flex-end; overflow:hidden; color:#fff; isolation:isolate; }
@media (max-width:960px){ .hero{ margin-top:-74px; min-height:min(92vh,760px); } }
.hero-media{ position:absolute; inset:0; z-index:-1; }
.hero-media .shot{ transform:scale(1.04); animation:heroZoom 12s var(--ease) both; }
@keyframes heroZoom{ from{ transform:scale(1.12); } to{ transform:scale(1.04); } }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(13,17,48,.55) 0%, rgba(13,17,48,.15) 30%, rgba(13,17,48,.25) 55%, rgba(13,17,48,.82) 100%),
    linear-gradient(90deg, rgba(13,17,48,.45) 0%, transparent 60%);
}
.hero-inner{ position:relative; width:100%; padding-top:140px; padding-bottom:clamp(56px,8vh,96px); display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:end; }
.hero h1{ color:#fff; max-width:13ch; text-wrap:balance; margin-top:22px; font-weight:600; font-variation-settings:"opsz" 144; }
.hero h1 em{ font-style:italic; color:var(--brass-l); }
.hero .hero-sub{ margin-top:22px; font-size:clamp(17px,1.7vw,20px); color:rgba(255,255,255,.84); max-width:48ch; line-height:1.6; }
.hero-actions{ margin-top:36px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hero-note{
  display:inline-flex; align-items:center; gap:10px; margin-top:28px;
  padding:9px 16px 9px 10px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  font-size:13px; font-weight:600; color:#fff; backdrop-filter:blur(6px); transition:background .3s var(--ease);
}
.hero-note:hover{ background:rgba(255,255,255,.18); }
.hero-note .pulse{ width:9px; height:9px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 0 rgba(214,166,58,.6); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(214,166,58,.55); } 70%{ box-shadow:0 0 0 12px rgba(214,166,58,0); } 100%{ box-shadow:0 0 0 0 rgba(214,166,58,0); } }
.hero-side{ justify-self:end; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:20px; }
.hero-badge{ width:clamp(120px,14vw,176px); aspect-ratio:1; filter:drop-shadow(0 12px 30px rgba(0,0,0,.45)); animation:sealIn 1s var(--ease) both .3s; }
.hero-badge .seal{ width:100%; height:100%; display:block; overflow:visible; }
.seal-arc{ font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.3em; }
.seal-num{ font-family:var(--display); font-size:96px; font-weight:600; letter-spacing:-.02em; }
.seal-years{ font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.54em; }
@keyframes sealIn{ from{ opacity:0; transform:scale(.8) rotate(-8deg); } to{ opacity:1; transform:none; } }
.hero-scroll{ font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.7); display:inline-flex; align-items:center; gap:10px; }
.hero-scroll::after{ content:""; width:1px; height:40px; background:linear-gradient(180deg, var(--brass), transparent); }
@media (max-width:840px){
  .hero-inner{ grid-template-columns:1fr; padding-top:120px; }
  .hero-side{ position:absolute; top:96px; right:var(--gutter); gap:0; }
  .hero-badge{ width:104px; }
  .hero-scroll{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .hero-badge, .hero-media .shot{ animation:none; } }

/* ---------- stats band ---------- */
.stats{ background:var(--ink); color:var(--cream); }
.stats .row{ display:grid; grid-template-columns:repeat(4,1fr); }
.stats .cell{ padding:clamp(30px,3.4vw,44px) clamp(18px,3vw,40px); border-left:1px solid var(--line-inv); }
.stats .cell:first-child{ border-left:0; padding-left:0; }
.stats .n{ font-family:var(--display); font-weight:600; font-size:clamp(36px,4.2vw,56px); color:#fff; line-height:1; letter-spacing:-.02em; }
.stats .n sup{ font-size:.5em; color:var(--brass); vertical-align:top; margin-left:2px; }
.stats .t{ font-size:13.5px; color:rgba(247,243,236,.66); margin-top:10px; letter-spacing:.01em; max-width:22ch; }
@media (max-width:760px){
  .stats .row{ grid-template-columns:1fr 1fr; }
  .stats .cell{ padding-inline:18px; }
  .stats .cell:nth-child(odd){ border-left:0; padding-left:0; }
  .stats .cell:nth-child(n+3){ border-top:1px solid var(--line-inv); }
}

/* ---------- intro / statement ---------- */
.statement{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,80px); align-items:start; }
.statement h2{ max-width:14ch; margin-top:18px; }
.statement .copy p{ color:var(--ink-soft); font-size:clamp(17px,1.5vw,19px); }
.statement .copy p + p{ margin-top:18px; }
.statement .marks{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.statement .marks span{ font-size:13px; font-weight:700; padding:9px 16px; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft); background:var(--paper); }
@media (max-width:840px){ .statement{ grid-template-columns:1fr; } }

/* ---------- service cards ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,1.8vw,24px); }
.svc-card{
  position:relative; display:flex; flex-direction:column; min-height:440px;
  background:var(--ink); color:#fff; border-radius:var(--radius); overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.svc-card .pic{ position:absolute; inset:0; z-index:-1; }
.svc-card .pic .shot{ transition:transform .8s var(--ease); }
.svc-card:hover .pic .shot{ transform:scale(1.06); }
.svc-card .pic::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,17,48,.12) 0%, rgba(13,17,48,.35) 40%, rgba(13,17,48,.94) 100%); }
.svc-card .body{ text-shadow:0 1px 10px rgba(13,17,48,.5); }
.svc-card .body{ margin-top:auto; padding:clamp(22px,2.2vw,30px); }
.svc-card .ix{ font-family:var(--display); font-size:14px; color:var(--brass); letter-spacing:.08em; }
.svc-card h3{ font-size:clamp(22px,2vw,27px); margin-top:10px; color:#fff; }
.svc-card p{ color:rgba(255,255,255,.78); font-size:14.5px; margin-top:10px; line-height:1.55; }
.svc-card .more{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-weight:700; font-size:13.5px; color:var(--brass-l); }
.svc-card .more .arr{ transition:transform .3s var(--ease); }
.svc-card:hover .more .arr{ transform:translateX(4px); }
@media (max-width:1000px){ .svc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .svc-grid{ grid-template-columns:1fr; } .svc-card{ min-height:360px; } }

/* ---------- feature split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,88px); align-items:center; }
.split.rev .pic{ order:2; }
.split .pic{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/4.6; box-shadow:var(--shadow); }
.split .pic.landscape{ aspect-ratio:4/3; }
.split .pic .tag{
  position:absolute; left:18px; bottom:18px; padding:10px 16px; border-radius:999px;
  background:rgba(13,17,48,.78); color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.06em; backdrop-filter:blur(6px);
}
.split .txt h2{ margin-top:18px; max-width:15ch; }
.split .txt > p{ color:var(--ink-soft); margin-top:22px; max-width:50ch; }
.on-ink .split .txt > p{ color:rgba(247,243,236,.78); }
.split .txt .actions{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
ul.feat{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px; }
ul.feat li{ display:flex; gap:14px; align-items:flex-start; font-size:15.5px; color:var(--ink-soft); }
ul.feat li::before{ content:""; flex:none; width:8px; height:8px; margin-top:9px; background:var(--brass); transform:rotate(45deg); border-radius:1px; }
.on-ink ul.feat li{ color:rgba(247,243,236,.82); }
@media (max-width:840px){ .split{ grid-template-columns:1fr; } .split.rev .pic{ order:0; } .split .pic{ aspect-ratio:4/3; } }

/* ---------- pillars (why Tenn / investors) ---------- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px); }
.pillar{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(26px,2.6vw,36px); display:flex; flex-direction:column; gap:14px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pillar:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.pillar .ic{ width:52px; height:52px; border-radius:14px; background:var(--cream-2); display:grid; place-items:center; color:var(--ink); }
.pillar .ic svg{ width:26px; height:26px; }
.pillar .num{ font-family:var(--display); font-size:13px; color:var(--brass-d); letter-spacing:.1em; }
.pillar h3{ font-size:clamp(20px,1.9vw,24px); }
.pillar p{ color:var(--ink-soft); font-size:15px; line-height:1.6; }
.pillar .kpi{ font-family:var(--display); font-size:clamp(30px,3vw,40px); color:var(--ink); line-height:1; letter-spacing:-.02em; }
.pillar .kpi small{ font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:block; margin-top:8px; }
.on-ink .pillar{ background:rgba(255,255,255,.05); border-color:var(--line-inv); }
.on-ink .pillar .ic{ background:rgba(255,255,255,.08); color:var(--brass); }
.on-ink .pillar h3, .on-ink .pillar .kpi{ color:#fff; }
.on-ink .pillar p{ color:rgba(247,243,236,.74); }
@media (max-width:900px){ .pillars{ grid-template-columns:1fr; } }

/* ---------- process strip ---------- */
.proc{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); }
.proc .step{ padding:clamp(24px,2.6vw,36px) clamp(18px,2vw,28px) 0 0; border-right:1px solid var(--line); }
.proc .step:last-child{ border-right:0; }
.proc .step + .step{ padding-left:clamp(18px,2vw,28px); }
.proc .k{ font-family:var(--display); font-size:clamp(36px,4vw,52px); color:var(--brass); line-height:1; letter-spacing:-.02em; }
.proc h3{ font-size:20px; margin-top:18px; }
.proc p{ color:var(--ink-soft); font-size:14.5px; margin-top:10px; }
@media (max-width:840px){ .proc{ grid-template-columns:1fr 1fr; } .proc .step:nth-child(2n){ border-right:0; } .proc .step:nth-child(n+3){ border-top:1px solid var(--line); } }
@media (max-width:480px){ .proc{ grid-template-columns:1fr; } .proc .step{ border-right:0; padding-left:0 !important; } .proc .step + .step{ border-top:1px solid var(--line); } }

/* ---------- project cards ---------- */
.proj-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(16px,1.8vw,24px); }
.proj-card{
  position:relative; display:block; border-radius:var(--radius); overflow:hidden; min-height:460px;
  background:var(--ink); color:#fff; isolation:isolate;
}
.proj-card .pic{ position:absolute; inset:0; z-index:-1; }
.proj-card .pic .shot{ transition:transform .9s var(--ease); }
.proj-card:hover .pic .shot{ transform:scale(1.05); }
.proj-card .pic::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,17,48,.05) 30%, rgba(13,17,48,.9) 100%); }
.proj-card .body{ position:absolute; left:0; right:0; bottom:0; padding:clamp(22px,2.4vw,34px); }
.proj-card .loc{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); font-weight:700; }
.proj-card h3{ color:#fff; margin-top:10px; font-size:clamp(24px,2.4vw,32px); max-width:16ch; }
.proj-card p{ color:rgba(255,255,255,.78); margin-top:10px; font-size:15px; max-width:44ch; }
.proj-card .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.proj-card .tags span{ font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.3); color:#fff; }
.proj-card.soon .pic .shot{ filter:saturate(.7) brightness(.7); }
@media (max-width:840px){ .proj-grid{ grid-template-columns:1fr; } .proj-card{ min-height:380px; } }

/* ---------- gallery tiles + lightbox ---------- */
.gal-head{ max-width:62ch; margin-bottom:clamp(22px,3vw,34px); }
.gal-head h3{ margin-top:12px; }
.gal-head p{ color:var(--ink-soft); margin-top:12px; }
.gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,18px); }
.gal.three{ grid-template-columns:repeat(3,1fr); }
.gal.two{ grid-template-columns:repeat(2,minmax(0,320px)); }
.tile{
  position:relative; padding:0; border:0; cursor:zoom-in; background:var(--cream-2);
  border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:3/4; display:block; width:100%;
}
.tile.wide{ aspect-ratio:4/3; }
.tile img, .tile .poster{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease); }
.tile:hover img, .tile:hover .poster{ transform:scale(1.05); }
.tile.vid{ cursor:pointer; }
.tile.vid::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,17,48,.05), rgba(13,17,48,.45)); }
.play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.94); box-shadow:0 10px 28px -8px rgba(13,17,48,.6);
  display:grid; place-items:center;
}
.play::before{ content:""; width:0; height:0; margin-left:5px; border-left:19px solid var(--ink); border-top:11px solid transparent; border-bottom:11px solid transparent; }
.cap{ position:absolute; left:14px; bottom:12px; z-index:2; color:#fff; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,.5); }
@media (max-width:840px){ .gal, .gal.three{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .gal, .gal.three, .gal.two{ grid-template-columns:1fr 1fr; } }

.lightbox{ position:fixed; inset:0; z-index:120; display:none; background:rgba(8,10,28,.93); backdrop-filter:blur(6px); align-items:center; justify-content:center; padding:clamp(16px,4vw,56px); }
.lightbox.open{ display:flex; }
.lb-stage{ max-width:min(92vw,1100px); max-height:86vh; display:flex; align-items:center; justify-content:center; }
.lb-stage img, .lb-stage video{ max-width:100%; max-height:86vh; width:auto; height:auto; border-radius:10px; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); background:#000; }
.lb-close, .lb-nav{ position:absolute; z-index:2; cursor:pointer; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; transition:background .2s; }
.lb-close:hover, .lb-nav:hover{ background:rgba(255,255,255,.26); }
.lb-close{ top:22px; right:24px; width:46px; height:46px; border-radius:50%; font-size:26px; line-height:1; }
.lb-nav{ top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; font-size:32px; line-height:1; padding-bottom:4px; }
.lb-prev{ left:clamp(12px,3vw,40px); } .lb-next{ right:clamp(12px,3vw,40px); }
.lb-count{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.8); font-size:13px; letter-spacing:.14em; }
@media (max-width:560px){ .lb-nav{ width:44px; height:44px; font-size:26px; } }

/* ---------- testimonials ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px); }
.quote{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(26px,2.8vw,36px); display:flex; flex-direction:column; gap:18px; position:relative; }
.quote::before{ content:"\201C"; position:absolute; top:14px; right:24px; font-family:var(--display); font-size:84px; line-height:1; color:var(--brass-l); }
.quote .stars{ color:var(--brass); letter-spacing:3px; font-size:14px; }
.quote p{ font-family:var(--display); font-size:clamp(18px,1.5vw,21px); line-height:1.45; color:var(--ink); font-weight:500; }
.quote .who{ font-size:13.5px; color:var(--muted); margin-top:auto; }
.quote .who b{ color:var(--ink); font-weight:700; }
.partner-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:clamp(28px,3vw,40px); padding-top:24px; border-top:1px solid var(--line); }
.partner-row .lbl{ font-size:11.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.partner-row .name{ font-family:var(--display); font-size:clamp(20px,2vw,26px); color:var(--ink); }
@media (max-width:840px){ .quotes{ grid-template-columns:1fr; } }

/* ---------- CTA band ---------- */
.cta{ background:var(--ink); color:var(--cream); position:relative; overflow:hidden; }
.cta::before{ content:""; position:absolute; inset:-40% -20% auto auto; width:60vw; height:60vw; max-width:760px; max-height:760px; border-radius:50%; background:radial-gradient(circle, rgba(214,166,58,.16), transparent 60%); pointer-events:none; }
.cta .inner{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(34px,5vw,80px); align-items:center; }
.cta h2{ color:#fff; max-width:14ch; margin-top:18px; }
.cta .inner > div > p:not(.zh-head){ color:rgba(247,243,236,.78); margin-top:20px; max-width:44ch; }
.cta .card{ background:rgba(255,255,255,.06); border:1px solid var(--line-inv); border-radius:var(--radius); padding:clamp(24px,2.6vw,32px); backdrop-filter:blur(4px); }
.cta .card .lbl{ font-size:11.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); }
.person{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; border-bottom:1px solid var(--line-inv); }
.person:last-of-type{ border-bottom:0; }
.person .nm{ font-family:var(--display); font-size:22px; color:#fff; }
.person .rl{ font-size:12.5px; color:rgba(247,243,236,.62); margin-top:2px; }
.wa-pill{ display:inline-flex; align-items:center; gap:8px; background:var(--wa); color:#fff; font-weight:700; font-size:13.5px; padding:11px 18px; border-radius:999px; transition:background .3s var(--ease); white-space:nowrap; }
.wa-pill:hover{ background:var(--wa-d); }
.cta .fine{ font-size:13px; margin-top:16px; color:rgba(247,243,236,.55); }
@media (max-width:840px){ .cta .inner{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
.foot{ background:#090c24; color:var(--cream); padding-block:64px 32px; }
.foot .top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:46px; border-bottom:1px solid var(--line-inv); }
.foot .brand{ display:block; }
.foot .logo-mark{ height:56px; }
.foot p.bl{ color:rgba(247,243,236,.6); margin-top:18px; max-width:34ch; font-size:14.5px; }
.foot h4{ font-family:var(--sans); font-size:11.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); margin-bottom:18px; }
.foot ul{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.foot ul a, .foot ul span{ color:rgba(247,243,236,.72); font-size:14.5px; }
.foot ul a:hover{ color:#fff; }
.foot .bot{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:26px; font-size:13px; color:rgba(247,243,236,.5); }
@media (max-width:760px){ .foot .top{ grid-template-columns:1fr 1fr; } }

/* ---------- floating WhatsApp ---------- */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:60; display:inline-flex; align-items:center; gap:10px;
  background:var(--wa); color:#fff; font-weight:700; font-size:14.5px; padding:13px 20px 13px 16px; border-radius:999px;
  box-shadow:0 14px 34px -10px rgba(31,138,76,.65); transition:transform .35s var(--ease), opacity .35s var(--ease), background .3s var(--ease);
}
.wa-float svg{ width:24px; height:24px; flex:none; }
.wa-float:hover{ background:var(--wa-d); transform:translateY(-2px); }
.wa-float.is-hidden{ opacity:0; transform:translateY(24px); pointer-events:none; }
@media (max-width:560px){
  .wa-float{ right:14px; bottom:14px; padding:14px; }
  .wa-float span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .wa-float svg{ width:26px; height:26px; }
}

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } html{ scroll-behavior:auto; } .pulse{ animation:none; } }

/* ============================================================
   Inner pages
   ============================================================ */
.page-hero{ position:relative; background:var(--ink); color:var(--cream); margin-top:-84px; padding-top:calc(84px + clamp(64px,9vw,120px)); padding-bottom:clamp(56px,8vw,96px); overflow:hidden; isolation:isolate; }
@media (max-width:960px){ .page-hero{ margin-top:-74px; padding-top:calc(74px + clamp(56px,9vw,100px)); } }
.page-hero .bg{ position:absolute; inset:0; z-index:-1; }
.page-hero .bg .shot{ opacity:.28; filter:saturate(.8); }
.page-hero .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(13,17,48,.95) 0%, rgba(13,17,48,.7) 55%, rgba(13,17,48,.4) 100%), linear-gradient(180deg, rgba(13,17,48,.4), rgba(13,17,48,.95)); }
.page-hero h1{ color:#fff; max-width:14ch; text-wrap:balance; margin-top:20px; font-variation-settings:"opsz" 144; }
.page-hero h1 em{ font-style:italic; color:var(--brass-l); }
.page-hero .lead{ margin-top:22px; max-width:54ch; color:rgba(247,243,236,.82); }
.page-hero .crumbs{ font-size:13px; letter-spacing:.04em; color:rgba(247,243,236,.55); margin-bottom:26px; }
.page-hero .crumbs a:hover{ color:#fff; }
.page-hero .hero-actions{ margin-top:32px; }
.page-hero.compact{ padding-bottom:clamp(44px,6vw,72px); }
.page-hero.compact h1{ font-size:clamp(36px,5vw,64px); }

/* ---------- subnav (services / company) ---------- */
.subnav{ position:sticky; top:84px; z-index:40; background:color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-2); }
.subnav .wrap{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-block:8px; }
.subnav .wrap::-webkit-scrollbar{ display:none; }
.subnav a{ flex:none; font-size:13.5px; font-weight:700; padding:10px 16px; border-radius:999px; color:var(--ink-soft); transition:background .25s, color .25s; }
.subnav a:hover{ background:var(--cream-2); color:var(--ink); }
.subnav a.is-active{ background:var(--ink); color:#fff; }
@media (max-width:960px){ .subnav{ top:74px; } }

/* ---------- services page ---------- */
.svc-detail{ scroll-margin-top:150px; }
.svc-detail .ix{ font-family:var(--display); font-size:15px; color:var(--brass-d); letter-spacing:.08em; display:inline-flex; align-items:center; gap:12px; }
.svc-detail .ix::before{ content:""; width:26px; height:2px; background:var(--brass); border-radius:2px; }
.svc-detail h2{ margin-top:14px; max-width:14ch; }
.svc-sub{ margin-top:clamp(44px,6vw,72px); padding-top:clamp(36px,5vw,56px); border-top:1px solid var(--line); }

/* ---------- SOP ---------- */
.sop-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.sop-tab{ font-family:var(--sans); font-weight:700; font-size:14px; padding:12px 20px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); cursor:pointer; transition:all .2s var(--ease); }
.sop-tab:hover{ border-color:var(--ink); color:var(--ink); }
.sop-tab.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.sop-panel{ display:none; margin-top:22px; }
.sop-panel.is-active{ display:block; }
.sop-banner{ border-radius:var(--radius) var(--radius) 0 0; padding:clamp(18px,2.4vw,26px) clamp(22px,3vw,36px); color:#fff; display:flex; align-items:baseline; gap:16px 22px; flex-wrap:wrap; background:linear-gradient(100deg, var(--ink), var(--ink-2)); }
.sop-banner h3{ font-size:clamp(20px,2.3vw,28px); color:#fff; }
.sop-banner .sub{ font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); }
.sop-body{ border:1px solid var(--line); border-top:0; border-radius:0 0 var(--radius) var(--radius); padding:clamp(22px,3vw,36px); background:var(--paper); }
.sop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,18px); }
.sop-step{ position:relative; background:var(--cream); border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:clamp(18px,1.8vw,22px); }
.sop-step .stop{ display:flex; align-items:center; justify-content:space-between; }
.sop-step .num{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:var(--ink); color:var(--brass); font-family:var(--display); font-size:15px; }
.sop-step .sop-ic{ width:24px; height:24px; color:var(--brass-d); }
.sop-step h3{ font-family:var(--sans); font-weight:800; font-size:15.5px; margin-top:16px; color:var(--ink); letter-spacing:0; }
.sop-step p{ font-size:13.5px; color:var(--ink-soft); margin-top:6px; }
.sop-step:not(:nth-child(4n)):not(:last-child)::after{ content:"\203A"; position:absolute; top:30px; right:-14px; z-index:2; width:24px; height:24px; border-radius:50%; background:var(--brass); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; line-height:1; padding-bottom:2px; }
.sop-foot{ display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,3vw,40px); margin-top:clamp(22px,3vw,30px); flex-wrap:wrap; }
.sop-note{ flex:1 1 320px; }
.sop-note p{ color:var(--ink-soft); font-size:14.5px; max-width:56ch; }
.sop-note .zh{ font-size:13px; opacity:.85; margin-top:6px; line-height:1.7; }
.sop-dl{ display:flex; align-items:center; gap:16px; }
.sop-thumb{ padding:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; cursor:zoom-in; background:var(--cream-2); width:104px; height:78px; flex:none; }
.sop-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.sop-thumb:hover img{ transform:scale(1.06); }
@media (max-width:860px){ .sop-grid{ grid-template-columns:1fr 1fr; } .sop-step::after{ display:none !important; } }
@media (max-width:480px){ .sop-grid{ grid-template-columns:1fr; } }

/* ---------- company page ---------- */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px); }
.value{ padding:clamp(22px,2.4vw,30px) 0 0; border-top:2px solid var(--ink); }
.value .k{ font-family:var(--display); font-size:13px; letter-spacing:.1em; color:var(--brass-d); }
.value h3{ font-size:clamp(20px,2vw,25px); margin-top:12px; }
.value p{ color:var(--ink-soft); font-size:15px; margin-top:10px; }
@media (max-width:760px){ .values{ grid-template-columns:1fr; } }

.timeline{ position:relative; display:grid; gap:0; margin-top:clamp(30px,4vw,48px); }
.timeline::before{ content:""; position:absolute; left:clamp(84px,10vw,140px); top:8px; bottom:8px; width:1px; background:var(--line); }
.tl{ display:grid; grid-template-columns:clamp(84px,10vw,140px) 1fr; gap:0 clamp(26px,3vw,44px); padding:clamp(18px,2.4vw,28px) 0; position:relative; }
.tl .yr{ font-family:var(--display); font-size:clamp(18px,1.8vw,24px); color:var(--ink); line-height:1.1; padding-right:14px; overflow-wrap:anywhere; }
.tl .yr small{ display:block; font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:6px; font-weight:700; }
.tl::before{ content:""; position:absolute; left:calc(clamp(84px,10vw,140px) - 6px); top:calc(clamp(18px,2.4vw,28px) + 9px); width:13px; height:13px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 4px var(--cream); }
.tl .txt{ padding-left:clamp(10px,1vw,14px); }
.tl h3{ font-size:clamp(19px,1.9vw,24px); }
.tl p{ color:var(--ink-soft); font-size:15px; margin-top:8px; max-width:60ch; }
.tl.future .yr, .tl.future h3{ color:var(--brass-d); }
.tl.future::before{ background:var(--cream); border:2px solid var(--brass); }
@media (max-width:560px){ .timeline::before{ left:10px; } .tl{ grid-template-columns:1fr; padding-left:34px; } .tl::before{ left:4px; } .tl .yr{ margin-bottom:8px; } .tl .txt{ padding-left:0; } }

.team{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,1.8vw,24px); }
.member{ display:grid; grid-template-columns:120px 1fr; gap:22px; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,2.2vw,28px); }
.member .av{ width:120px; height:120px; border-radius:50%; background:var(--ink); color:var(--brass); display:grid; place-items:center; font-family:var(--display); font-size:44px; }
.member h3{ font-size:clamp(22px,2vw,26px); }
.member .role{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-d); font-weight:800; margin-top:6px; }
.member p{ color:var(--ink-soft); font-size:14.5px; margin-top:10px; }
.member .wa-pill{ margin-top:14px; }
@media (max-width:840px){ .team{ grid-template-columns:1fr; } }
@media (max-width:480px){ .member{ grid-template-columns:1fr; } .member .av{ width:88px; height:88px; font-size:32px; } }

.caps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,18px); }
.cap-tile{ position:relative; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:3/4; background:var(--ink); color:#fff; }
.cap-tile .shot{ transition:transform .8s var(--ease); }
.cap-tile:hover .shot{ transform:scale(1.05); }
.cap-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(13,17,48,.85)); }
.cap-tile .lbl{ position:absolute; left:16px; right:16px; bottom:16px; z-index:2; }
.cap-tile .lbl b{ display:block; font-family:var(--display); font-size:19px; font-weight:600; }
.cap-tile .lbl span{ display:block; font-size:12.5px; color:rgba(255,255,255,.72); margin-top:4px; }
@media (max-width:840px){ .caps{ grid-template-columns:1fr 1fr; } }

/* ---------- contact / quote page ---------- */
.contact-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(34px,5vw,76px); align-items:start; }
@media (max-width:920px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-aside{ position:sticky; top:110px; }
@media (max-width:920px){ .contact-aside{ position:static; } }
.contact-aside h2{ margin-top:16px; max-width:13ch; }
.contact-aside .lead{ margin-top:18px; max-width:40ch; }
.direct{ margin-top:clamp(26px,3vw,36px); display:grid; gap:12px; }
.direct .person{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 20px; }
.direct .person .nm{ color:var(--ink); font-size:20px; }
.direct .person .rl{ color:var(--muted); }
.q-steps{ list-style:none; padding:0; margin:clamp(26px,3vw,36px) 0 0; display:grid; gap:0; counter-reset:qs; }
.q-steps li{ display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--line); }
.q-steps li:last-child{ border-bottom:1px solid var(--line); }
.q-steps .qn{ counter-increment:qs; flex:none; width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--brass); font-family:var(--display); font-size:15px; display:flex; align-items:center; justify-content:center; }
.q-steps .qn::before{ content:counter(qs,decimal-leading-zero); }
.q-steps .qt b{ display:block; font-family:var(--sans); font-weight:800; font-size:16px; color:var(--ink); }
.q-steps .qt span{ display:block; font-size:14px; color:var(--ink-soft); margin-top:3px; max-width:36ch; }
.quote-reassure{ margin-top:22px; display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink-soft); }
.quote-reassure .dot-ok{ flex:none; width:9px; height:9px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 4px rgba(31,138,76,.16); }

.q-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.q-card-head{ background:var(--ink); color:var(--cream); padding:clamp(24px,3vw,32px) clamp(26px,3.4vw,40px); }
.q-card-head .lbl{ font-size:11.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); }
.q-card-head h3{ color:#fff; font-size:clamp(22px,2.6vw,30px); margin-top:10px; }
.q-card-head p{ color:rgba(247,243,236,.72); font-size:14.5px; margin-top:10px; max-width:48ch; }
.q-form{ padding:clamp(26px,3.4vw,42px); display:grid; gap:clamp(22px,2.6vw,30px); min-width:0; }
.q-field{ display:grid; gap:10px; min-width:0; }
.q-field > label, .q-legend{ font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--ink); display:flex; align-items:baseline; gap:8px; }
.q-field .opt{ font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.q-req{ color:var(--red); }
.q-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.2vw,24px); }
@media (max-width:560px){ .q-grid-2{ grid-template-columns:1fr; } }
.q-input, .q-select, .q-textarea{ font-family:var(--sans); font-size:15.5px; color:var(--ink); background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; width:100%; transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); }
.q-input::placeholder, .q-textarea::placeholder{ color:var(--muted); }
.q-input:focus, .q-select:focus, .q-textarea:focus{ outline:none; border-color:var(--brass-d); background:var(--paper); box-shadow:0 0 0 4px rgba(214,166,58,.18); }
.q-textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.q-select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%237d8197' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px; }
.q-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.q-chip{ position:relative; }
.q-chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.q-chip span{ display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:600; color:var(--ink-soft); padding:11px 18px; border-radius:999px; border:1px solid var(--line); background:var(--paper); cursor:pointer; user-select:none; transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.q-chip span::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; background:transparent; box-shadow:inset 0 0 0 1.5px var(--muted); transition:background .2s var(--ease), box-shadow .2s var(--ease); }
.q-chip input[type="checkbox"] + span::before{ border-radius:3px; }
.q-chip:hover span{ border-color:var(--ink); color:var(--ink); }
.q-chip input:checked + span{ border-color:var(--ink); color:var(--ink); background:color-mix(in srgb, var(--brass) 14%, var(--paper)); }
.q-chip input:checked + span::before{ background:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.q-chip input:focus-visible + span{ outline:3px solid var(--brass); outline-offset:2px; }
.q-recip{ display:flex; flex-wrap:wrap; gap:10px; }
.q-recip .q-chip{ flex:1 1 200px; min-width:0; }
.q-recip .q-chip span{ width:100%; padding:12px 20px; }
.q-recip .q-chip span small{ display:block; font-weight:500; font-size:12px; color:var(--muted); margin-top:2px; }
.q-send{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding-top:4px; }
.q-send .btn-wa{ font-size:15.5px; padding:16px 30px; }
.q-send .wa-ic{ width:20px; height:20px; }
.q-send .fine{ font-size:13px; color:var(--muted); max-width:36ch; line-height:1.5; }
.q-send .fine a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.q-err{ font-size:13px; color:var(--red); font-weight:600; display:none; }
.q-err.show{ display:block; }
.q-field.invalid .q-input, .q-field.invalid .q-textarea{ border-color:var(--red); box-shadow:0 0 0 4px rgba(224,34,38,.12); }

/* ---------- prose (privacy) ---------- */
.prose{ max-width:70ch; }
.prose-meta{ font-size:13px; letter-spacing:.04em; color:var(--muted); padding-bottom:22px; border-bottom:1px solid var(--line); }
.prose h2{ font-size:clamp(22px,2.4vw,30px); margin-top:clamp(34px,4vw,48px); }
.prose h2 + p, .prose p + p, .prose ul + p{ margin-top:14px; }
.prose p{ color:var(--ink-soft); }
.prose ul{ margin:14px 0 0; padding-left:22px; display:grid; gap:10px; color:var(--ink-soft); }
.prose li strong{ color:var(--ink); }
.prose a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.prose a:hover{ color:var(--brass-d); }

/* ---------- showcase reel ---------- */
.showcase .split{ grid-template-columns:auto 1fr; }
.vframe{ position:relative; width:clamp(240px,28vw,330px); aspect-ratio:9/16; border-radius:30px; overflow:hidden; background:#0b0e2a; box-shadow:0 40px 80px -34px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1); justify-self:center; }
.vframe video{ width:100%; height:100%; object-fit:cover; display:block; }
.vframe .mute{ position:absolute; right:14px; bottom:14px; z-index:3; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(13,17,48,.5); backdrop-filter:blur(4px); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s var(--ease), transform .3s var(--ease); }
.vframe .mute:hover{ background:rgba(13,17,48,.8); transform:scale(1.06); }
.vframe .mute svg{ width:20px; height:20px; }
.showcase .txt h2{ color:#fff; margin-top:18px; max-width:14ch; }
.showcase .txt > p{ color:rgba(247,243,236,.78); margin-top:22px; max-width:46ch; }
.showcase .txt .actions{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width:840px){ .showcase .split{ grid-template-columns:1fr; text-align:center; } .showcase .txt h2, .showcase .txt > p{ margin-inline:auto; } .showcase .txt .actions, .showcase .eyebrow{ justify-content:center; } }

/* ---------- project index ---------- */
.proj-index{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,18px); }
.pi{ display:grid; gap:6px; padding:clamp(20px,2vw,26px); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--cream); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); position:relative; }
.pi:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--ink); }
.pi .pi-k{ font-family:var(--display); font-size:13px; color:var(--brass-d); letter-spacing:.1em; }
.pi b{ font-family:var(--display); font-weight:600; font-size:clamp(18px,1.6vw,21px); color:var(--ink); line-height:1.15; margin-top:4px; }
.pi > span:not(.pi-k):not(.pi-badge){ font-size:13.5px; color:var(--ink-soft); }
.pi em{ font-style:normal; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
.pi.next{ background:var(--ink); border-color:var(--ink); }
.pi.next b{ color:#fff; } .pi.next > span:not(.pi-k):not(.pi-badge){ color:rgba(247,243,236,.72); } .pi.next em{ color:var(--brass); } .pi.next .pi-k{ color:var(--brass); }
.pi-badge{ position:absolute; top:16px; right:16px; font-size:10.5px; font-weight:800; letter-spacing:.14em; padding:5px 9px; border-radius:999px; }
.pi-badge.b2c{ background:color-mix(in srgb, var(--brass) 22%, var(--paper)); color:var(--brass-d); }
.pi-badge.b2b{ background:color-mix(in srgb, var(--ink) 10%, var(--paper)); color:var(--ink); }
.pi.next .pi-badge.b2c{ background:rgba(214,166,58,.2); color:var(--brass-l); }
@media (max-width:900px){ .proj-index{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .proj-index{ grid-template-columns:1fr; } }

/* ---------- social link under a photo ---------- */
.social-link{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; font-weight:700; font-size:15px; color:var(--ink); border-bottom:1.5px solid var(--brass); padding-bottom:2px; }
.social-link svg{ width:20px; height:20px; color:#1877f2; }
.social-link .arr{ transition:transform .3s var(--ease); }
.social-link:hover .arr{ transform:translateX(4px); }