/* =========================================================
   SUPERSIGN PRINTING — STYLE SHEET
   Design tokens
   ========================================================= */
:root{
  --ink:        #0a0908;
  --ink-soft:   #15130f;
  --ink-line:   #2a251c;
  --marble:     #f4efe3;
  --marble-2:   #eae2ce;
  --paper:      #fbf8f1;
  --glow:       #f0a63d;
  --glow-2:     #ffcf7d;
  --glow-dim:   #8a5c1c;
  --wire:       #4fa8ff;
  --wire-dim:   #1d3a5c;
  --steel:      #b7ad9a;
  --steel-dark: #746a58;
  --brass:      #cda868;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body:    "Work Sans", "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", "Courier New", monospace;

  --container: 1240px;
  --radius: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--marble);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }

::selection{ background:var(--glow); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--glow);
  outline-offset:3px;
}

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:0.01em;
  margin:0;
  text-transform:uppercase;
}
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--glow);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:26px; height:1px;
  background:var(--glow);
  display:inline-block;
}
.eyebrow.on-light{ color:var(--glow-dim); }
.eyebrow.on-light::before{ background:var(--glow-dim); }

p{ margin:0 0 1em; }
.lede{ font-size:18px; color:var(--steel); max-width:56ch; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(10,9,8,0.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:background .3s;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:38px; width:38px; object-fit:contain; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{
  font-family:var(--display); font-size:19px; letter-spacing:0.03em;
  text-transform:uppercase;
}
.brand-text span{
  font-family:var(--mono); font-size:10px; letter-spacing:0.18em;
  color:var(--steel); text-transform:uppercase;
}

.main-nav{ display:flex; align-items:center; gap:22px; }
.main-nav a{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--marble); opacity:.78;
  position:relative; padding:6px 0; white-space:nowrap;
}
.main-nav a:hover{ opacity:1; color:var(--glow); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:0.1em;
  text-transform:uppercase; padding:12px 22px;
  border-radius:var(--radius); border:1px solid transparent;
  transition:transform .2s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
  white-space:nowrap;
}
.btn-glow{
  background:var(--glow); color:var(--ink);
  box-shadow:0 0 0 rgba(240,166,61,0);
}
.btn-glow:hover{ box-shadow:0 0 26px rgba(240,166,61,0.55); transform:translateY(-1px); }
.btn-outline{
  border-color:rgba(245,240,230,0.35); color:var(--marble);
}
.btn-outline:hover{ border-color:var(--glow); color:var(--glow); }
.btn-outline.on-light{ border-color:rgba(20,19,15,0.3); color:var(--ink); }
.btn-outline.on-light:hover{ border-color:var(--glow-dim); color:var(--glow-dim); }

/* "Book Now" flash CTA — pulsing luxury gold outline */
.btn-flash{
  background:var(--ink); color:var(--glow-2);
  border:1px solid var(--glow);
  position:relative;
  animation:flashPulse 2.2s ease-in-out infinite;
}
.btn-flash:hover{ background:var(--glow); color:var(--ink); transform:translateY(-1px); }
@keyframes flashPulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(240,166,61,0.55); }
  50%{ box-shadow:0 0 0 7px rgba(240,166,61,0); }
}
.header-ctas{ display:flex; gap:10px; align-items:center; }
.btn-icon-call{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(240,166,61,0.4); color:var(--glow);
  transition:background .2s ease, color .2s ease;
}
.btn-icon-call:hover{ background:var(--glow); color:var(--ink); }
.btn-icon-call svg{ width:17px; height:17px; }

.nav-toggle{
  display:none; background:none; border:0; color:var(--marble);
  width:34px; height:26px; position:relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:var(--marble);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle span{ top:12px; }
.nav-toggle span::before{ top:-8px; }
.nav-toggle span::after{ top:8px; }
.nav-toggle.open span{ background:transparent; }
.nav-toggle.open span::before{ transform:translateY(8px) rotate(45deg); }
.nav-toggle.open span::after{ transform:translateY(-8px) rotate(-45deg); }

/* =========================================================
   HERO — "power switch"
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:150px 0 90px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 78% 18%, rgba(240,166,61,0.10), transparent 60%),
    linear-gradient(180deg, #0a0908 0%, #0d0b09 100%);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, black, transparent);
  pointer-events:none;
}
.hero .container{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center;
  position:relative; z-index:2;
}
.hero-copy .eyebrow{ margin-bottom:22px; }
.hero-title{
  font-size:clamp(40px, 5.6vw, 74px);
  line-height:0.98;
  color:var(--marble);
}
.hero-title .flicker{
  color:var(--glow);
  animation:flickerOn 2.6s ease-out 1 both;
  text-shadow:
    0 0 6px rgba(240,166,61,0.85),
    0 0 22px rgba(240,166,61,0.55),
    0 0 60px rgba(240,166,61,0.28);
}
@keyframes flickerOn{
  0%{ opacity:0; text-shadow:none; }
  4%{ opacity:1; text-shadow:0 0 6px rgba(240,166,61,0.85),0 0 22px rgba(240,166,61,0.5); }
  8%{ opacity:0.2; text-shadow:none; }
  12%{ opacity:1; text-shadow:0 0 6px rgba(240,166,61,0.85),0 0 22px rgba(240,166,61,0.5); }
  16%{ opacity:0.35; text-shadow:none; }
  22%{ opacity:1; text-shadow:0 0 6px rgba(240,166,61,0.85),0 0 22px rgba(240,166,61,0.55),0 0 60px rgba(240,166,61,0.28); }
  100%{ opacity:1; text-shadow:0 0 6px rgba(240,166,61,0.85),0 0 22px rgba(240,166,61,0.55),0 0 60px rgba(240,166,61,0.28); }
}
.hero-copy .lede{ margin-top:22px; }
.hero-hindi{
  font-family:var(--body); font-size:15px; color:var(--steel);
  margin-top:-8px; margin-bottom:22px;
}
.hero-ctas{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }

.hero-stats{
  display:flex; gap:34px; margin-top:52px; padding-top:28px;
  border-top:1px solid rgba(255,255,255,0.09);
}
.hero-stats div strong{
  display:block; font-family:var(--display); font-size:26px; color:var(--glow);
}
.hero-stats div span{
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--steel);
  text-transform:uppercase;
}

/* Hero video — luxury studio showcase */
.hero-media{ position:relative; }
.hero-media-frame{
  position:relative;
  border:1px solid rgba(240,166,61,0.28);
  border-radius:6px;
  overflow:hidden;
  aspect-ratio:4/3;
  background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.hero-media-frame video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-media-glow{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,9,8,0.05) 0%, rgba(10,9,8,0.55) 100%);
  box-shadow:inset 0 0 90px rgba(240,166,61,0.14);
}
.hero-media-frame .frame-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 18px;
  background:linear-gradient(0deg, rgba(0,0,0,0.8), transparent);
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--glow-2);
  z-index:2;
}

/* Trust bar (happy customers / rating / cities) reuses .hero-stats layout */
.hero-stats{ flex-wrap:wrap; }
.trust-rating .stars{ display:inline-flex; gap:1px; color:var(--glow); vertical-align:middle; }
.trust-rating .stars svg{ width:13px; height:13px; }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee-strip{
  border-top:1px solid var(--ink-line); border-bottom:1px solid var(--ink-line);
  background:var(--ink-soft);
  overflow:hidden;
  padding:16px 0;
}
.marquee-track{
  display:flex; gap:44px; white-space:nowrap;
  animation:scrollLeft 34s linear infinite;
  width:max-content;
}
@keyframes scrollLeft{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.marquee-track span{
  font-family:var(--mono); font-size:13px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--steel);
  display:flex; align-items:center; gap:44px;
}
.marquee-track span::after{
  content:"◆"; color:var(--glow-dim); font-size:9px; margin-left:44px;
}

/* =========================================================
   LIVE FROM THE WORKSHOP — video strip
   ========================================================= */
.workshop-strip{
  background:var(--ink); padding:56px 0 40px; border-bottom:1px solid var(--ink-line);
}
.workshop-strip .container{ margin-bottom:26px; }
.workshop-strip .eyebrow{ margin-bottom:8px; }
.workshop-heading{
  font-size:clamp(22px,2.4vw,30px); text-transform:none; letter-spacing:0; color:var(--marble);
}
.workshop-track{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--ink-line);
}
.workshop-card{
  position:relative; aspect-ratio:9/12; overflow:hidden; background:#000;
}
.workshop-card video{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(1.05) brightness(0.92);
}
.workshop-tag{
  position:absolute; left:12px; bottom:12px; z-index:2;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:#fff; background:rgba(10,9,8,0.55); border:1px solid rgba(240,166,61,0.4);
  padding:5px 10px; border-radius:20px;
}

/* =========================================================
   SECTION shell
   ========================================================= */
section{ padding:110px 0; position:relative; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
  margin-bottom:56px; flex-wrap:wrap;
}
.section-head h2{
  font-size:clamp(30px,3.6vw,46px); margin-top:14px; max-width:14ch; line-height:1.02;
}
.section-head .lede{ max-width:38ch; }
.on-light{ color:var(--ink); }
.on-light .lede{ color:var(--steel-dark); }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   SERVICES
   ========================================================= */
.services{ background:var(--marble); color:var(--ink); }
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(20,19,15,0.14);
  border:1px solid rgba(20,19,15,0.14);
}
.service-card{
  background:var(--marble); cursor:pointer;
  transition:background .3s ease, transform .3s ease;
  display:flex; flex-direction:column;
}
.service-card:hover{ background:var(--marble-2); transform:translateY(-2px); }
.service-card:focus-visible{ outline:2px solid var(--glow-dim); outline-offset:-2px; }
.service-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--ink); }
.service-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
  filter:saturate(1.02) brightness(0.96);
}
.service-card:hover .service-media img{ transform:scale(1.06); }
.service-body{ padding:30px 32px 34px; flex:1; display:flex; flex-direction:column; }
.service-card .icon{
  width:36px; height:36px; margin-bottom:18px;
  color:var(--glow-dim);
}
.service-card .icon svg{ width:100%; height:100%; }
.service-card h3{
  font-size:19px; text-transform:none; letter-spacing:0.01em; margin-bottom:10px;
}
.service-card p{ color:var(--steel-dark); font-size:14.5px; margin:0 0 16px; }
.service-link{
  margin-top:auto; font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--glow-dim); transition:color .25s ease, gap .25s ease;
}
.service-card:hover .service-link{ color:var(--glow); }

/* =========================================================
   PORTFOLIO
   ========================================================= */
.work{ background:var(--ink); }
.filter-bar{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px;
}
.filter-btn{
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  padding:10px 18px; border:1px solid var(--ink-line); background:transparent; color:var(--steel);
  border-radius:20px; transition:all .25s ease;
}
.filter-btn:hover{ border-color:var(--glow); color:var(--glow); }
.filter-btn.active{ background:var(--glow); border-color:var(--glow); color:var(--ink); }

.work-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.work-card{
  position:relative; overflow:hidden; border-radius:3px;
  aspect-ratio:4/5; background:var(--ink-soft);
  border:1px solid var(--ink-line);
}
.work-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  filter:saturate(0.92) brightness(0.92);
}
.work-card:hover img{ transform:scale(1.06); filter:saturate(1.05) brightness(1);}
.work-card .tag{
  position:absolute; top:14px; left:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  background:rgba(10,9,8,0.72); color:var(--glow); padding:5px 10px; border-radius:12px;
  border:1px solid rgba(240,166,61,0.4);
}
.work-card .overlay{
  position:absolute; left:0; right:0; bottom:0; padding:20px;
  background:linear-gradient(0deg, rgba(0,0,0,0.88) 10%, rgba(0,0,0,0.55) 55%, transparent);
  transform:translateY(6px); opacity:0.92; transition:transform .3s ease;
}
.work-card h4{
  font-size:16.5px; text-transform:none; letter-spacing:0.005em; color:var(--marble);
  margin-bottom:4px;
}
.work-card .overlay p{
  font-size:12.5px; color:var(--steel); margin:0;
}
.work-card::after{
  content:"+"; position:absolute; top:14px; right:14px;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--marble); opacity:0; transition:opacity .3s ease, transform .3s ease;
  transform:rotate(-45deg);
}
.work-card:hover::after{ opacity:1; transform:rotate(0deg); }

/* Trusted strip */
.trusted{ padding:70px 0; background:var(--ink-soft); border-top:1px solid var(--ink-line); border-bottom:1px solid var(--ink-line); overflow:hidden; }
.trusted .eyebrow{ justify-content:center; margin:0 auto 30px; width:fit-content; }
.trusted-track{
  display:flex; gap:56px; width:max-content; animation:scrollLeft 40s linear infinite;
}
.trusted-track span{
  font-family:var(--display); font-size:22px; text-transform:uppercase; color:var(--steel-dark);
  letter-spacing:0.02em; white-space:nowrap;
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(6,5,4,0.94);
  display:flex; align-items:center; justify-content:center; padding:30px;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-inner{ max-width:900px; width:100%; }
.lightbox-inner figure{ margin:0; }
.lightbox-inner img, .lightbox-inner video{ width:100%; max-height:64vh; object-fit:contain; border-radius:3px; background:#000; }
.lightbox-meta{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-top:18px; }
.lightbox-meta h4{ text-transform:none; font-size:20px; color:var(--marble); margin-bottom:6px; }
.lightbox-meta p{ color:var(--steel); font-size:14px; margin:0; }
.lightbox-close, .lightbox-nav{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); color:var(--marble);
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:20px; flex:none;
}
.lightbox-close{ position:absolute; top:26px; right:30px; }
.lightbox-nav-row{ display:flex; justify-content:space-between; margin-top:20px; }

/* =========================================================
   ABOUT
   ========================================================= */
.about{ background:var(--marble); color:var(--ink); }
.about .container{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:center; }
.about-visual{
  position:relative; border-radius:4px; overflow:hidden; aspect-ratio:3/4;
  background:var(--ink);
}
.about-visual img{ width:100%; height:100%; object-fit:cover; opacity:0.92; }
.about-visual .badge{
  position:absolute; bottom:20px; left:20px; right:20px;
  background:rgba(10,9,8,0.82); border:1px solid rgba(240,166,61,0.35);
  padding:16px 18px; border-radius:3px;
}
.about-visual .badge strong{ display:block; color:var(--glow); font-family:var(--display); font-size:20px; }
.about-visual .badge span{ font-family:var(--mono); font-size:11px; color:var(--steel); letter-spacing:0.08em; text-transform:uppercase; }

.about-copy h2{ font-size:clamp(28px,3.4vw,40px); margin:14px 0 22px; line-height:1.08; }
.about-copy p{ color:var(--steel-dark); font-size:16px; max-width:56ch; }
.about-points{ margin-top:28px; display:grid; gap:16px; }
.about-point{ display:flex; gap:14px; align-items:flex-start; }
.about-point .dot{
  width:8px; height:8px; border-radius:50%; background:var(--glow-dim); margin-top:8px; flex:none;
}
.about-point strong{ display:block; font-size:15px; }
.about-point span{ font-size:14px; color:var(--steel-dark); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ background:var(--ink); }
.contact .container{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.contact-card{
  border:1px solid var(--ink-line); border-radius:4px; padding:40px;
  background:linear-gradient(160deg, rgba(240,166,61,0.05), transparent 60%);
}
.contact-row{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--ink-line); }
.contact-row:last-child{ border-bottom:none; }
.contact-row .ico{ width:20px; height:20px; color:var(--glow); flex:none; margin-top:2px; }
.contact-row strong{ display:block; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; font-family:var(--mono); color:var(--steel); margin-bottom:4px; }
.contact-row a, .contact-row span.value{ font-size:16px; color:var(--marble); }
.contact-ctas{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }

.map-frame{
  border:1px solid var(--ink-line); border-radius:4px; overflow:hidden; min-height:340px;
  filter:grayscale(0.35) invert(0.92) contrast(0.9);
}
.map-frame iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; }

/* =========================================================
   FOOTER
   ========================================================= */
footer{
  background:var(--ink-soft); border-top:1px solid var(--ink-line);
  padding:56px 0 28px;
}
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:40px; }
.footer-brand{ display:flex; gap:12px; align-items:center; }
.footer-brand img{ height:34px; width:34px; object-fit:contain; }
.footer-brand strong{ font-family:var(--display); font-size:18px; text-transform:uppercase; }
.footer-links{ display:flex; gap:50px; flex-wrap:wrap; }
.footer-col strong{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--steel); margin-bottom:14px;
}
.footer-col a{ display:block; font-size:14px; color:var(--marble); opacity:0.82; margin-bottom:9px; }
.footer-col a:hover{ opacity:1; color:var(--glow); }
.footer-bottom{
  border-top:1px solid var(--ink-line); padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:var(--mono); font-size:11.5px; color:var(--steel-dark); letter-spacing:0.04em;
}

/* Work grid — video cards */
.work-card video{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(0.95) brightness(0.94);
}
.work-card.is-video .play-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%;
  background:rgba(10,9,8,0.6); border:1px solid rgba(240,166,61,0.55);
  display:flex; align-items:center; justify-content:center;
  color:var(--glow); pointer-events:none;
  transition:transform .3s ease, background .3s ease;
}
.work-card.is-video .play-badge svg{ width:22px; height:22px; margin-left:2px; }
.work-card.is-video:hover .play-badge{ transform:translate(-50%,-50%) scale(1.1); background:rgba(240,166,61,0.85); color:var(--ink); }

/* =========================================================
   AREAS WE SERVE
   ========================================================= */
.areas{ background:var(--ink-soft); border-top:1px solid var(--ink-line); border-bottom:1px solid var(--ink-line); }
.areas-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
}
.area-chip{
  border:1px solid var(--ink-line); border-radius:4px; padding:18px 16px;
  background:linear-gradient(160deg, rgba(240,166,61,0.05), transparent 60%);
  transition:border-color .25s ease, transform .25s ease;
}
.area-chip:hover{ border-color:var(--glow-dim); transform:translateY(-2px); }
.area-chip strong{ display:block; font-family:var(--display); font-size:18px; text-transform:uppercase; color:var(--marble); margin-bottom:4px; }
.area-chip span{ font-family:var(--mono); font-size:11px; color:var(--steel); letter-spacing:0.02em; }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials{ background:var(--marble); color:var(--ink); }
.testimonials-track{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.testi-card{
  background:var(--paper); border:1px solid rgba(20,19,15,0.1); border-radius:4px;
  padding:28px 26px; display:flex; flex-direction:column;
}
.testi-stars{ display:flex; gap:2px; color:var(--glow-dim); margin-bottom:14px; }
.testi-stars svg{ width:15px; height:15px; }
.testi-quote{ font-size:15px; color:var(--steel-dark); flex:1; margin-bottom:18px; line-height:1.55; }
.testi-who strong{ display:block; font-size:14.5px; color:var(--ink); }
.testi-who span{ font-family:var(--mono); font-size:11px; color:var(--glow-dim); letter-spacing:0.05em; text-transform:uppercase; }

/* =========================================================
   FLOATING CTAs — Book Now (flash) + WhatsApp
   ========================================================= */
.float-stack{
  position:fixed; right:22px; bottom:22px; z-index:90;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
}
.float-btn{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  transition:transform .2s ease;
}
.float-btn:hover{ transform:scale(1.07); }
.wa-float{ background:#25D366; }
.wa-float svg{ width:28px; height:28px; }
.call-float{ background:linear-gradient(160deg, var(--glow), var(--glow-dim)); }
.call-float svg{ width:24px; height:24px; }
.insta-float{
  position:relative;
  background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.insta-float svg{ width:26px; height:26px; }
.insta-ring{
  position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(214,36,159,0.55);
  animation:flashPulse 2.2s ease-in-out infinite;
  pointer-events:none;
}

.book-float{
  position:relative; background:var(--glow); color:var(--ink);
  width:auto; height:auto; padding:14px 20px; border-radius:30px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  font-weight:600;
}
.float-ring{
  position:absolute; inset:0; border-radius:30px;
  box-shadow:0 0 0 0 rgba(240,166,61,0.6);
  animation:flashPulse 2.2s ease-in-out infinite;
  pointer-events:none;
}
.float-label{ position:relative; z-index:1; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-media{ order:-1; max-width:420px; }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .work-grid{ grid-template-columns:repeat(2,1fr); }
  .about .container{ grid-template-columns:1fr; }
  .contact .container{ grid-template-columns:1fr; }
  .areas-grid{ grid-template-columns:repeat(3,1fr); }
  .testimonials-track{ grid-template-columns:repeat(2,1fr); }
  .workshop-track{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 720px){
  .main-nav{
    position:fixed; top:76px; left:0; right:0;
    height:calc(100vh - 76px); height:calc(100dvh - 76px);
    background:var(--ink); flex-direction:column; align-items:flex-start;
    padding:34px 24px; gap:24px;
    transform:translateX(100%); transition:transform .3s ease;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav a{ font-size:16px; }
  .nav-toggle{ display:block; }
  .header-cta, .header-ctas{ display:none; }
  section{ padding:74px 0; }
  .services-grid{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns:1fr; }
  .hero{ padding-top:120px; }
  .hero-stats{ gap:22px; flex-wrap:wrap; }
  .footer-top{ flex-direction:column; }
  .areas-grid{ grid-template-columns:repeat(2,1fr); }
  .testimonials-track{ grid-template-columns:1fr; }
  .float-stack{ right:14px; bottom:14px; }
  .book-float .float-label{ font-size:11px; }
  .workshop-track{ grid-template-columns:repeat(2,1fr); }
  .workshop-strip{ padding:44px 0 28px; }
}