/* ==========================================================================
   KVR Engraving - public site
   Light theme: warm ivory surfaces, gold + brushed-steel accents (from logo)
   ========================================================================== */

@font-face { font-family:"Big Shoulders Display"; font-weight:700; font-style:normal; font-display:swap;
  src:url("../fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Big Shoulders Display"; font-weight:800; font-style:normal; font-display:swap;
  src:url("../fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family:"Instrument Sans"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Instrument Sans"; font-weight:500; font-style:normal; font-display:swap;
  src:url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Instrument Sans"; font-weight:600; font-style:normal; font-display:swap;
  src:url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  --bg:#fbf9f4;           /* warm ivory */
  --bg-2:#f4efe4;         /* stone */
  --panel:#ffffff;
  --line:rgba(40,36,28,.10);
  --line-2:rgba(40,36,28,.18);
  --ink:#1c1e23;          /* steel black, headings */
  --soft:#3f434b;         /* body text */
  --muted:#6d6b66;
  --steel:#5a626d;
  --steel-2:#8d949e;
  --gold:#f2b51f;
  --gold-2:#d99a0a;
  --gold-deep:#a8740a;    /* gold text on light: AA on ivory at large sizes */
  --link:#9a6a06;
  --gold-grad:linear-gradient(180deg,#ffd75e 0%,#f5b921 45%,#d99a0a 100%);
  --steel-grad:linear-gradient(90deg,#3a4049,#8d949e 50%,#3a4049);

  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --r-sm:10px;
  --r:18px;
  --r-lg:28px;
  --wrap:1200px;
  --gutter:clamp(18px,4vw,40px);
  --header-h:88px;
  --shadow:0 1px 2px rgba(40,30,10,.06), 0 18px 40px -18px rgba(60,45,15,.22);
  --shadow-lg:0 2px 4px rgba(40,30,10,.05), 0 40px 80px -30px rgba(60,45,15,.35);
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--bg); }
body { margin:0; font-family:var(--text); font-size:1.0625rem; line-height:1.65; color:var(--soft); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { display:block; max-width:100%; height:auto; }
a { color:var(--link); text-underline-offset:3px; }
a:hover { color:var(--ink); }
h1,h2,h3,h4 { font-family:var(--display); font-weight:800; line-height:1.02; margin:0 0 .5em; letter-spacing:.005em; color:var(--ink); text-wrap:balance; }
p { margin:0 0 1em; max-width:68ch; }
ul, ol { margin:0; padding:0; list-style:none; }

:focus-visible { outline:3px solid var(--gold-2); outline-offset:3px; border-radius:6px; }

.wrap { width:min(var(--wrap), 100% - var(--gutter)*2); margin-inline:auto; }
.skip { position:absolute; left:-999px; top:8px; background:var(--ink); color:#fff; padding:10px 14px; z-index:200; border-radius:var(--r-sm); }
.skip:focus { left:8px; }

.gold-text { background:linear-gradient(180deg,#e9a90f 0%,#c88a06 55%,#9b6a05 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; margin:0 0 14px; font:600 .82rem/1 var(--text); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); }
.eyebrow::before { content:""; width:28px; height:2px; background:var(--gold-grad); border-radius:2px; }

/* ---------- signature devices: temper strip + ruler ---------- */
.temper { display:block; height:3px; background:linear-gradient(90deg,var(--gold-2),var(--gold) 30%,#c9ced6 65%,var(--steel)); }
.ruler { height:18px; opacity:.7;
  background:
    linear-gradient(90deg,rgba(90,98,109,.55) 1px,transparent 1px) 0 100%/80px 16px repeat-x,
    linear-gradient(90deg,rgba(90,98,109,.28) 1px,transparent 1px) 0 100%/8px 8px repeat-x; }

/* ---------- buttons (pills) ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5em; font:600 1rem/1 var(--text); padding:15px 28px; border-radius:999px; border:1px solid #e0a312; background:var(--gold-grad); color:#1d1500; cursor:pointer; text-decoration:none; box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 24px -10px rgba(217,154,10,.7); transition:background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s; }
.btn:hover { background:linear-gradient(180deg,#ffe189,#f7c33e 45%,#e3a50f); color:#1d1500; transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 14px 30px -10px rgba(217,154,10,.8); }
.btn:active { transform:translateY(0); }
.btn-ghost, .btn-outline { background:rgba(255,255,255,.6); background-image:none; border-color:var(--line-2); color:var(--ink); box-shadow:none; }
.btn-ghost:hover, .btn-outline:hover { background:#fff; background-image:none; border-color:var(--gold-2); color:var(--ink); box-shadow:0 10px 24px -14px rgba(60,45,15,.4); }
.btn-dark { background:linear-gradient(180deg,#3b414b,#1f2329); border-color:#1f2329; color:#fff; box-shadow:0 10px 24px -12px rgba(20,22,26,.6); }
.btn-dark:hover { background:linear-gradient(180deg,#4a515c,#2a2f36); color:#fff; }
.btn-sm { padding:11px 20px; font-size:.95rem; }

/* ---------- header ---------- */
.site-header { position:sticky; top:0; z-index:60; background:rgba(251,249,244,.82); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line); transition:background-color .2s, box-shadow .2s; }
.site-header.is-stuck { background:rgba(255,255,255,.94); box-shadow:0 10px 30px -20px rgba(60,45,15,.35); }
.site-header .temper { position:absolute; left:0; right:0; bottom:-1px; height:2px; opacity:.85; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:var(--header-h); }
.logo { display:block; flex:none; line-height:0; }
.logo img { height:66px; width:auto; max-width:min(60vw,240px); object-fit:contain; }
.main-nav ul { display:flex; align-items:center; gap:4px; }
.main-nav a:not(.btn) { position:relative; display:block; padding:9px 16px; font-weight:500; font-size:.98rem; color:var(--soft); text-decoration:none; border-radius:999px; transition:background-color .15s, color .15s; }
.main-nav a:not(.btn):hover { color:var(--ink); background:rgba(242,181,31,.12); }
.main-nav a.active:not(.btn) { color:var(--ink); font-weight:600; }
.main-nav a.active:not(.btn)::after { content:""; position:absolute; left:16px; right:16px; bottom:3px; height:2px; border-radius:2px; background:var(--gold-grad); }
.main-nav .nav-cta { margin-left:10px; }
.nav-toggle { display:none; width:46px; height:46px; border:1px solid var(--line-2); border-radius:999px; background:#fff; cursor:pointer; padding:0; position:relative; }
.nav-toggle span { position:absolute; left:14px; right:14px; height:2px; background:var(--ink); transition:transform .2s, opacity .2s, top .2s; }
.nav-toggle span:nth-child(1) { top:16px; } .nav-toggle span:nth-child(2) { top:22px; } .nav-toggle span:nth-child(3) { top:28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top:22px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top:22px; transform:rotate(-45deg); }

/* ---------- glow surfaces (light) ---------- */
.glow { position:relative; isolation:isolate; overflow:hidden; background:var(--bg); }
.glow::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(55% 60% at 85% 10%, rgba(242,181,31,.22), transparent 70%),
    radial-gradient(45% 55% at 5% 0%, rgba(160,168,180,.20), transparent 70%),
    radial-gradient(40% 40% at 60% 100%, rgba(242,181,31,.10), transparent 70%); }
.glow::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:radial-gradient(rgba(90,98,109,.22) 1px, transparent 1px); background-size:24px 24px;
  -webkit-mask-image:radial-gradient(70% 70% at 30% 30%, #000, transparent); mask-image:radial-gradient(70% 70% at 30% 30%, #000, transparent); }

/* ---------- hero (home) ---------- */
.hero-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,72px); align-items:center; padding-block:clamp(40px,6vw,88px) clamp(48px,7vw,100px); }
.hero-logo { width:min(440px,100%); height:auto; margin:0 0 clamp(18px,2.5vw,28px) -6px; filter:drop-shadow(0 12px 22px rgba(120,85,10,.18)); }
.hero h1 { font-size:clamp(2.8rem,6.2vw,5.4rem); line-height:.95; margin:0 0 .35em; max-width:13ch; }
.hero-lead { font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--soft); max-width:50ch; margin:0 0 1.8em; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-call { margin:1.5em 0 0; color:var(--muted); font-size:.98rem; }
.hero-call a { color:var(--ink); font-weight:600; text-decoration:none; border-bottom:2px solid rgba(242,181,31,.6); }
.hero-call a:hover { border-color:var(--gold-2); }

.hero-collage { position:relative; height:clamp(420px,46vw,580px); }
.hero-collage figure { position:absolute; margin:0; overflow:hidden; border-radius:var(--r-lg); background:var(--bg-2); border:6px solid #fff; box-shadow:var(--shadow-lg); }
.hero-collage img { width:100%; height:118%; object-fit:cover; object-position:top center; } /* crop baked-in caption band */
.hero-collage .c1 { left:0; top:6%; width:48%; height:78%; z-index:2; transform:rotate(-3deg); }
.hero-collage .c2 { right:0; top:0; width:46%; height:56%; z-index:1; transform:rotate(3deg); }
.hero-collage .c3 { right:6%; bottom:0; width:42%; height:44%; z-index:3; transform:rotate(-1.5deg); }
.hero-collage .badge { position:absolute; left:34%; bottom:2%; z-index:4; display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; padding:14px 18px; border-radius:16px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--line); box-shadow:var(--shadow); }
.hero-collage .badge strong { font:800 1.25rem/1 var(--display); color:var(--ink); letter-spacing:.02em; }
.hero-collage .badge small { grid-column:2; color:var(--muted); font-size:.85rem; }
.spark { grid-row:span 2; width:38px; height:38px; border-radius:50%; background:radial-gradient(circle,#fff 0 12%,#ffcf4a 30%,#f07a1a 55%,rgba(240,122,26,0) 72%); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform:scale(.9); opacity:.85; } 50% { transform:scale(1.1); opacity:1; } }

@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.hero-logo, .hero h1, .hero-lead, .hero-actions, .hero-call { opacity:0; animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.hero h1 { animation-delay:.1s; } .hero-lead { animation-delay:.22s; } .hero-actions { animation-delay:.34s; } .hero-call { animation-delay:.44s; }
.hero-collage figure, .hero-collage .badge { opacity:0; animation:pop .8s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-collage .c1 { animation-delay:.15s; } .hero-collage .c2 { animation-delay:.3s; } .hero-collage .c3 { animation-delay:.45s; } .hero-collage .badge { animation-delay:.65s; }
/* keep each tilt after the pop animation */
.hero-collage .c1 { --t:rotate(-3deg); } .hero-collage .c2 { --t:rotate(3deg); } .hero-collage .c3 { --t:rotate(-1.5deg); }
@keyframes pop { from { opacity:0; transform:translateY(24px) var(--t,none); } to { opacity:1; transform:var(--t,none); } }

/* ---------- marquee ---------- */
.marquee { border-block:1px solid var(--line); overflow:hidden; padding-block:20px; background:#fff;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track { display:flex; width:max-content; animation:marquee 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-set { display:flex; align-items:center; flex:none; }
.marquee-set li { display:flex; align-items:center; font:700 clamp(1.4rem,2.4vw,2rem)/1 var(--display); color:var(--steel); white-space:nowrap; text-transform:uppercase; letter-spacing:.03em; }
.marquee-set li:nth-child(odd) { color:var(--gold-deep); }
.marquee-set li::after { content:""; width:8px; height:8px; margin-inline:clamp(22px,3vw,40px); background:var(--gold-grad); transform:rotate(45deg); }
@keyframes marquee { to { transform:translateX(-50%); } }

/* ---------- page head (inner pages) ---------- */
.page-head { text-align:center; padding-top:clamp(52px,7vw,96px); border-bottom:1px solid var(--line); }
.page-head .wrap { padding-bottom:clamp(36px,5vw,60px); }
.page-head h1 { font-size:clamp(3rem,7vw,5.6rem); margin:0 0 .22em; }
.page-head h1::after { content:""; display:block; width:72px; height:4px; margin:.28em auto 0; border-radius:4px; background:var(--gold-grad); }
.page-head p { color:var(--soft); max-width:52ch; margin:0 auto; font-size:1.12rem; }
.page-head .ruler { opacity:.5; }

/* ---------- generic sections ---------- */
.section { padding-block:clamp(56px,8vw,100px); }
.section-tight { padding-block:clamp(40px,6vw,72px); }
.section-title { font-size:clamp(2.2rem,4.4vw,3.4rem); margin-bottom:.6em; }
.section-head { margin-bottom:clamp(22px,3vw,36px); }
.section-head .section-title { margin:0; }
.section-head.center { text-align:center; }
.section-head.center .eyebrow { justify-content:center; }
.section-head.split { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; }
.muted { color:var(--muted); }

/* service cards (home) */
.cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.card a { display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); transition:transform .25s, box-shadow .25s, border-color .25s; }
.card a:hover { transform:translateY(-4px); border-color:rgba(217,154,10,.45); box-shadow:var(--shadow-lg); }
.card-img { display:block; aspect-ratio:4/5; overflow:hidden; background:var(--bg-2); }
.card-img img { width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.card a:hover .card-img img { transform:scale(1.05); }
.card-title { display:block; padding:16px 18px 2px; font:800 1.4rem/1.05 var(--display); color:var(--ink); }
.card-more { display:block; padding:6px 18px 18px; margin-top:auto; font-size:.9rem; font-weight:600; color:var(--gold-deep); }

/* intro */
.intro-band { background:linear-gradient(180deg,#fff,var(--bg-2)); border-block:1px solid var(--line); }
.intro-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); gap:clamp(24px,5vw,80px); align-items:start; }
.intro-grid h2 { font-size:clamp(2.3rem,4.4vw,3.6rem); margin:0 0 .6em; }
.intro-body p { color:var(--muted); }
.intro-body p:first-child { font-size:clamp(1.15rem,1.8vw,1.4rem); line-height:1.5; color:var(--ink); font-weight:500; }
.intro-body .btn { margin-top:.4em; }
.ticks li { position:relative; padding:10px 0 10px 36px; border-top:1px solid var(--line); color:var(--soft); font-weight:500; }
.ticks li:last-child { border-bottom:1px solid var(--line); }
.ticks li::before { content:""; position:absolute; left:2px; top:13px; width:20px; height:20px; border-radius:50%; background:var(--gold-grad); box-shadow:0 4px 10px -4px rgba(217,154,10,.8); }
.ticks li::after { content:""; position:absolute; left:9px; top:17px; width:5px; height:9px; border:solid #1d1500; border-width:0 2px 2px 0; transform:rotate(45deg); }

/* steps */
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; counter-reset:s; }
.steps li { position:relative; padding:28px 24px 24px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.steps li::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--gold-2),var(--gold),#c9ced6); }
.step-no { display:block; font:800 2.6rem/1 var(--display); background:var(--steel-grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:12px; }
.steps h3 { font-size:1.6rem; margin:0 0 .35em; }
.steps p { margin:0; color:var(--muted); font-size:.98rem; }

/* portfolio bento */
.portfolio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:calc((min(var(--wrap), 100vw - var(--gutter)*2) - 28px) / 3); grid-auto-flow:dense; gap:14px; }
.portfolio li { position:relative; overflow:hidden; border-radius:var(--r); background:var(--bg-2); border:1px solid var(--line); box-shadow:var(--shadow); }
.portfolio li:nth-child(6n+1) { grid-column:span 2; grid-row:span 2; }
.portfolio img { width:100%; height:100%; object-fit:cover; object-position:center 30%; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.portfolio li:hover img { transform:scale(1.05); }
.portfolio .cap, .strip-item .cap { position:absolute; left:14px; bottom:14px; right:auto; margin:0; padding:8px 14px; border-radius:999px; color:var(--ink); font:600 .9rem/1.2 var(--text); letter-spacing:0; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(217,154,10,.35); box-shadow:0 6px 18px -8px rgba(0,0,0,.35); }

/* featured strip */
.hero-media { position:relative; }
.strip { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 2px 24px; scrollbar-width:none; }
.strip::-webkit-scrollbar { display:none; }
.strip-item { position:relative; margin:0; flex:0 0 calc((100% - 42px) / 4); aspect-ratio:3/4; scroll-snap-align:start; overflow:hidden; border-radius:var(--r); background:var(--bg-2); border:1px solid var(--line); box-shadow:var(--shadow); }
.strip-item img { width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .7s cubic-bezier(.2,.7,.2,1); }
.strip-item:hover img { transform:scale(1.05); }
.strip-controls { display:flex; gap:8px; }
.slider-btn { width:46px; height:46px; border:1px solid var(--line-2); border-radius:50%; background:#fff; color:var(--ink); font-size:16px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:background-color .15s, border-color .15s; }
.slider-btn:hover { background:var(--gold-grad); border-color:var(--gold-2); }

/* closing call to action: gold panel */
.cta-band { padding-block:clamp(48px,7vw,96px); }
.cta-inner { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 40px; padding:clamp(30px,5vw,64px); border-radius:var(--r-lg); background:linear-gradient(120deg,#ffe089 0%,#f5b921 45%,#e2a00d 100%); border:1px solid #e0a312; box-shadow:0 40px 80px -40px rgba(217,154,10,.8); }
.cta-inner::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.35;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.35) 0 1px, transparent 1px 9px); }
.cta-inner::after { content:""; position:absolute; right:-80px; top:-80px; width:280px; height:280px; z-index:-1; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.75), transparent 65%); }
.cta-inner h2 { font-size:clamp(2.2rem,4.6vw,3.6rem); margin:0; max-width:16ch; color:#1d1500; }
.cta-inner p { margin:.6em 0 0; color:#3d2e05; max-width:46ch; font-weight:500; }
.cta-actions { display:flex; flex-wrap:wrap; gap:12px; }
.cta-inner .btn-ghost { background:rgba(255,255,255,.55); border-color:rgba(29,21,0,.25); }
.cta-inner .btn-ghost:hover { background:#fff; border-color:#1d1500; }

/* ---------- about ---------- */
.frame { position:relative; padding-bottom:18px; }
.frame-img { position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--r); background:var(--bg-2); border:6px solid #fff; box-shadow:var(--shadow-lg); }
.frame .ruler { position:absolute; left:6px; right:6px; bottom:0; }
.about-top { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,5vw,72px); align-items:center; }
.about-top h2 { font-size:clamp(2.2rem,3.8vw,3rem); }
.about-top p { font-size:1.12rem; color:var(--soft); }
.facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.facts li { position:relative; padding:24px 26px 24px 30px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); color:var(--soft); box-shadow:var(--shadow); }
.facts li::before { content:""; position:absolute; left:0; top:22px; bottom:22px; width:3px; border-radius:0 3px 3px 0; background:var(--gold-grad); }
.callout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:clamp(20px,4vw,60px); background:linear-gradient(135deg,#fff,var(--bg-2)); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:clamp(26px,4.5vw,52px); position:relative; overflow:hidden; box-shadow:var(--shadow); }
.callout::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,var(--gold),var(--gold-2),var(--steel-2),var(--steel)); }
.callout h3 { font-size:clamp(1.9rem,3.2vw,2.6rem); margin:0; }
.callout li { position:relative; padding:0 0 .8em 22px; color:var(--soft); }
.callout li::before { content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; transform:rotate(45deg); background:var(--gold-grad); }
.callout li:last-child { padding-bottom:0; }

/* ---------- services ---------- */
.service { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,5vw,72px); align-items:center; padding-block:clamp(28px,4vw,52px); }
.service + .service { border-top:1px solid var(--line); }
.service.reverse .service-media { order:2; }
.service-media { max-width:420px; width:100%; margin-inline:auto; }
.service-media .frame-img { aspect-ratio:3/4; }
.service-media .frame-img img { object-position:top center; }
.service h2 { font-size:clamp(2.3rem,4.4vw,3.4rem); }
.service h2::before { content:""; display:block; width:48px; height:4px; margin-bottom:.4em; border-radius:4px; background:var(--gold-grad); }
.service p { color:var(--soft); }
.service .btn { margin-top:.6em; }

/* ---------- gallery ---------- */
.masonry { columns:4 240px; column-gap:16px; }
.masonry li { break-inside:avoid; margin:0 0 16px; border-radius:var(--r); overflow:hidden; background:var(--bg-2); border:1px solid var(--line); box-shadow:var(--shadow); }
.masonry a { display:block; position:relative; }
.masonry a::after { content:"+"; position:absolute; top:12px; right:12px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.92); color:var(--ink); font:600 1.4rem/1 var(--text); opacity:0; transform:scale(.8); transition:opacity .2s, transform .2s; }
.masonry a:hover::after, .masonry a:focus-visible::after { opacity:1; transform:none; }
.masonry img { width:100%; height:auto; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.masonry a:hover img { transform:scale(1.03); }
.empty { padding:40px; border:1px dashed var(--line-2); border-radius:var(--r); text-align:center; color:var(--muted); background:#fff; }
.video-note { margin-top:clamp(40px,6vw,72px); padding:28px; border:1px dashed var(--line-2); border-radius:var(--r); color:var(--muted); background:#fff; text-align:center; max-width:none; }

/* lightbox */
.lb { position:fixed; inset:0; z-index:300; background:rgba(28,30,35,.92); display:grid; place-items:center; padding:clamp(12px,4vw,48px); }
.lb img { max-width:100%; max-height:calc(100vh - 96px); width:auto; height:auto; border-radius:var(--r-sm); box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lb button { position:absolute; width:48px; height:48px; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(255,255,255,.12); color:#fff; font-size:20px; cursor:pointer; }
.lb button:hover { background:var(--gold); color:#1d1500; border-color:var(--gold); }
.lb .lb-close { top:16px; right:16px; } .lb .lb-prev { left:16px; top:50%; transform:translateY(-50%); } .lb .lb-next { right:16px; top:50%; transform:translateY(-50%); }
.lb .lb-cap { position:absolute; left:0; right:0; bottom:14px; text-align:center; color:#d6d3cc; font-size:.95rem; }

/* ---------- contact ---------- */
.contact-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr); gap:clamp(28px,5vw,80px); align-items:start; }
.contact-info h2 { font-size:clamp(2rem,3.4vw,2.8rem); }
.contact-info dl { margin:0; }
.contact-info dt { font-weight:600; color:var(--ink); margin-top:1.4em; text-transform:uppercase; font-size:.8rem; letter-spacing:.14em; }
.contact-info dt::before { content:""; display:inline-block; width:8px; height:8px; margin-right:10px; transform:rotate(45deg) translateY(-2px); background:var(--gold-grad); }
.contact-info dd { margin:.3em 0 0; color:var(--soft); }
.contact-info dd a { color:var(--ink); font-weight:500; }
.contact-info dd a:hover { color:var(--gold-deep); }
.contact-card { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,4vw,44px); box-shadow:var(--shadow-lg); overflow:hidden; }
.contact-card::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,var(--gold-2),var(--gold),#c9ced6,var(--steel)); }
.contact-form { display:grid; gap:20px; }
.contact-form .row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.contact-form label { display:grid; gap:8px; font-weight:600; font-size:.95rem; color:var(--ink); }
.contact-form input, .contact-form textarea { font:400 1.05rem/1.4 var(--text); color:var(--ink); background:var(--bg); padding:14px 16px; border:1px solid var(--line-2); border-radius:12px; width:100%; transition:border-color .15s, background-color .15s, box-shadow .15s; }
.contact-form input:hover, .contact-form textarea:hover { border-color:rgba(40,36,28,.32); }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--gold-2); background:#fff; box-shadow:0 0 0 4px rgba(242,181,31,.22); }
.contact-form textarea { resize:vertical; min-height:150px; }
.contact-form .btn { justify-self:start; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.alert { padding:14px 18px; border-radius:12px; margin:0 0 22px; max-width:none; border:1px solid; }
.alert.success { background:#ecf8f0; border-color:#9ad5ae; color:#1f6b3a; }
.alert.error { background:#fdf0ee; border-color:#f0b0a6; color:#9b2c1f; }

/* ---------- footer ---------- */
.site-footer { position:relative; background:linear-gradient(180deg,var(--bg-2),#ece5d6); color:var(--muted); border-top:1px solid var(--line); }
.site-footer .temper { height:3px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1.2fr 1fr 1fr; gap:36px; padding-block:clamp(44px,6vw,72px); }
.footer-grid.cols-3 { grid-template-columns:1.6fr 1.3fr 1fr; }
.footer-brand { display:block; margin:0 0 14px -4px; text-decoration:none; line-height:0; }
.footer-brand img { width:min(100%,280px); height:auto; }
.footer-grid p { font-size:.98rem; margin:0; max-width:36ch; color:var(--soft); }
.site-footer h3 { font:700 1.35rem/1.1 var(--display); letter-spacing:.04em; text-transform:uppercase; color:var(--ink); margin:0 0 14px; }
.site-footer li { margin-bottom:8px; font-size:.98rem; color:var(--soft); }
.site-footer a { color:var(--soft); text-decoration:none; }
.site-footer a:hover { color:var(--gold-deep); text-decoration:underline; }
.copyright { border-top:1px solid var(--line); padding-block:18px; font-size:.92rem; color:var(--muted); }

/* ---------- responsive ---------- */
@media (max-width:1100px) {
  .cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1000px) {
  .footer-grid, .footer-grid.cols-3 { grid-template-columns:1fr 1fr; }
  .intro-grid, .about-top, .contact-grid, .callout { grid-template-columns:1fr; }
  .hero-grid { grid-template-columns:1fr; text-align:center; }
  .hero-logo { margin-inline:auto; }
  .hero h1, .hero-lead { margin-inline:auto; }
  .hero-actions { justify-content:center; }
  .hero-collage { width:min(560px,100%); margin-inline:auto; height:clamp(360px,80vw,520px); }
}
@media (max-width:860px) {
  .strip-item { flex-basis:calc((100% - 14px) / 2); }
  .nav-toggle { display:block; }
  .main-nav { position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 20px 30px -20px rgba(60,45,15,.35); display:none; }
  .main-nav.open { display:block; }
  .main-nav ul { flex-direction:column; align-items:stretch; gap:2px; padding:10px var(--gutter) 22px; }
  .main-nav a:not(.btn) { padding:14px 16px; }
  .main-nav a.active:not(.btn) { background:rgba(242,181,31,.14); }
  .main-nav a.active:not(.btn)::after { display:none; }
  .main-nav .nav-cta { margin:14px 0 0; }
  .main-nav .btn { width:100%; }
  .service, .service.reverse { grid-template-columns:1fr; }
  .service.reverse .service-media { order:0; }
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  :root { --header-h:72px; --r:14px; --r-lg:20px; }
  .logo img { height:52px; }
  .frame-img { aspect-ratio:4/3; }
  .service-media .frame-img { aspect-ratio:3/4; }
  .portfolio { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:calc((100vw - var(--gutter)*2 - 14px) / 2); }
  .portfolio li:nth-child(6n+1) { grid-column:span 2; grid-row:span 2; }
  .portfolio li:last-child:nth-child(even) { grid-column:span 2; grid-row:span 1; }
  .facts, .steps { grid-template-columns:1fr; }
  .cards { gap:12px; }
  .card-title { font-size:1.2rem; padding:12px 12px 0; }
  .card-more { padding:4px 12px 14px; font-size:.82rem; }
  .contact-form .row { grid-template-columns:1fr; }
  .footer-grid, .footer-grid.cols-3 { grid-template-columns:1fr; gap:28px; }
  .masonry { columns:2; column-gap:10px; }
  .masonry li { margin-bottom:10px; }
  .hero-actions .btn, .cta-actions .btn { flex:1 1 auto; }
  .hero-collage .badge { left:50%; --t:translateX(-50%); transform:var(--t); white-space:nowrap; }
  .hero-collage .c1, .hero-collage .c2, .hero-collage .c3 { border-width:4px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .hero-logo, .hero h1, .hero-lead, .hero-actions, .hero-call, .hero-collage figure, .hero-collage .badge { opacity:1; }
  .marquee-track { width:auto; flex-wrap:wrap; }
  .marquee-set[aria-hidden="true"] { display:none; }
}

/* ==========================================================================
   v3: motion, conversion and new home sections
   ========================================================================== */

/* ---------- scroll reveal ---------- */
.js [data-reveal] { opacity:0; transform:translateY(34px); transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms); }
.js [data-reveal].in { opacity:1; transform:none; }
.js .card[data-reveal] { transform:translateY(40px) scale(.97); }
.js .card[data-reveal].in { transform:none; }

/* ---------- progress bar ---------- */
.progress { position:fixed; left:0; right:0; top:0; height:3px; z-index:120; pointer-events:none; }
.progress span { display:block; height:100%; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--gold-2),var(--gold),#ff7a1a); box-shadow:0 0 12px rgba(255,140,30,.7); }

/* ---------- buttons: shine + WhatsApp ---------- */
.btn .arrow { display:inline-block; transition:transform .25s; }
.btn:hover .arrow, .card a:hover .arrow { transform:translateX(4px); }
.btn-shine { position:relative; overflow:hidden; isolation:isolate; }
.btn-shine::after { content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; z-index:-1; background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent); transform:skewX(-20deg); animation:btnshine 3.6s ease-in-out 1.2s infinite; }
@keyframes btnshine { 0% { left:-60%; } 35%,100% { left:130%; } }
.btn-wa { background:linear-gradient(180deg,#2fd366,#1faa4f); border-color:#1c9b48; color:#fff; box-shadow:0 10px 24px -10px rgba(31,170,79,.7); }
.btn-wa:hover { background:linear-gradient(180deg,#45e07a,#22b857); color:#fff; }

/* ---------- hero: animated logo + trust ---------- */
.hero-logo-wrap { position:relative; width:min(440px,100%); margin:0 0 clamp(16px,2.2vw,24px) -6px; }
.hero-logo-wrap .hero-logo { margin:0; width:100%; }
.hero-logo-wrap::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.95) 48%,rgba(255,236,170,.9) 52%,transparent 65%) no-repeat;
  background-size:250% 100%; background-position:150% 0;
  -webkit-mask:var(--logo) center/contain no-repeat; mask:var(--logo) center/contain no-repeat;
  animation:logoshine 5.5s ease-in-out 1.4s infinite; }
@keyframes logoshine { 0% { background-position:150% 0; } 40%,100% { background-position:-60% 0; } }
.laser-tip { position:absolute; left:75.6%; top:42%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,#fff 0 8%,#ffd25a 18%,rgba(255,110,20,.8) 34%,rgba(255,60,0,0) 66%); animation:lasertip 1.6s ease-in-out infinite; }
@keyframes lasertip { 0%,100% { transform:scale(.7); opacity:.7; } 45% { transform:scale(1.15); opacity:1; } 55% { transform:scale(.95); } }
.hero-kicker { display:inline-flex; align-items:center; gap:10px; margin:0 0 16px; padding:7px 14px 7px 10px; border-radius:999px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); font-size:.88rem; font-weight:600; color:var(--soft); opacity:0; animation:rise .7s cubic-bezier(.2,.7,.2,1) .05s forwards; }
.hero-kicker .dot { width:9px; height:9px; border-radius:50%; background:#ff6a1a; animation:ping 1.8s infinite; }
@keyframes ping { 0% { box-shadow:0 0 0 0 rgba(255,106,26,.55); } 80%,100% { box-shadow:0 0 0 10px rgba(255,106,26,0); } }
.hero-trust { display:flex; flex-wrap:wrap; gap:8px 20px; margin:22px 0 0; opacity:0; animation:rise .7s cubic-bezier(.2,.7,.2,1) .44s forwards; }
.hero-trust li { position:relative; padding-left:24px; font-size:.95rem; font-weight:500; color:var(--soft); }
.hero-trust li::before { content:""; position:absolute; left:0; top:4px; width:16px; height:16px; border-radius:50%; background:var(--gold-grad); }
.hero-trust li::after { content:""; position:absolute; left:6px; top:7px; width:4px; height:7px; border:solid #1d1500; border-width:0 2px 2px 0; transform:rotate(45deg); }
.hero-call { animation-delay:.52s; }

/* collage: float + pointer parallax */
.hero-collage { translate:var(--px,0) var(--py,0); transition:translate .6s cubic-bezier(.2,.7,.2,1); }
.hero-collage figure { animation:pop .8s cubic-bezier(.2,.7,.2,1) forwards, float 7s ease-in-out 1.2s infinite; }
.hero-collage .c1 { animation-delay:.15s, 1.2s; } .hero-collage .c2 { animation-delay:.3s, 2.4s; } .hero-collage .c3 { animation-delay:.45s, 3.4s; }
@keyframes float { 0%,100% { translate:0 0; } 50% { translate:0 -12px; } }
.hero-collage .badge-2 { left:auto; right:-2%; top:44%; bottom:auto; display:block; padding:12px 16px; animation-delay:.8s; }
.hero-collage .badge-2 strong { display:block; font:400 1.5rem/1 "Brush Script MT","Segoe Script",cursive; color:var(--gold-deep); letter-spacing:0; }
.hero-collage .badge-2 small { display:block; margin-top:4px; }

/* ---------- cards: gold ring on hover ---------- */
.card a { position:relative; }
.card a::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 0 rgba(242,181,31,0); transition:box-shadow .3s; }
.card a:hover::after { box-shadow:inset 0 0 0 2px rgba(242,181,31,.55); }

/* ---------- occasions ---------- */
.occasions-band { background:linear-gradient(180deg,#fff,var(--bg-2)); border-block:1px solid var(--line); }
.occasions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.occasions li { position:relative; padding:28px 26px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; transition:transform .3s, box-shadow .3s, border-color .3s, opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms); }
.occasions li::after { content:""; position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle,rgba(242,181,31,.22),transparent 70%); transition:transform .5s; }
.occasions li.in:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(217,154,10,.4); }
.occasions li:hover::after { transform:scale(1.8); }
.occasions h3 { font-size:1.7rem; margin:14px 0 .3em; }
.occasions p { margin:0; color:var(--muted); font-size:.98rem; }
.ic { display:inline-grid; place-items:center; width:54px; height:54px; border-radius:16px; background:linear-gradient(145deg,#fff6dc,#ffe7a3); border:1px solid rgba(217,154,10,.35); color:var(--gold-deep); flex:none; }
.ic svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.occasions li:hover .ic svg, .reasons li:hover .ic svg { animation:wiggle .6s ease; }
@keyframes wiggle { 30% { transform:rotate(-10deg) scale(1.1); } 60% { transform:rotate(8deg); } }

/* ---------- why us: laser scan image ---------- */
.why-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,5vw,72px); align-items:center; }
.why-media { position:relative; max-width:460px; width:100%; margin-inline:auto; }
.scan { position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-lg); border:6px solid #fff; box-shadow:var(--shadow-lg); background:var(--bg-2); }
.scan img { width:100%; height:118%; object-fit:cover; object-position:top center; }
.scan .beam { position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,transparent,#ff5a00 20%,#fff2b0 50%,#ff5a00 80%,transparent); box-shadow:0 0 18px 4px rgba(255,110,20,.75), 0 0 60px 10px rgba(255,160,40,.35); animation:scan 4.2s ease-in-out infinite; }
@keyframes scan { 0% { top:4%; } 50% { top:92%; } 100% { top:4%; } }
.why-chip { position:absolute; right:-18px; bottom:28px; padding:14px 18px; border-radius:16px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-lg); animation:float 6s ease-in-out infinite; }
.why-chip strong { display:block; font:800 1.5rem/1 var(--display); color:var(--ink); }
.why-chip small { color:var(--muted); font-size:.85rem; }
.reasons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:26px; }
.reasons li { display:flex; gap:14px; align-items:flex-start; padding:18px; background:#fff; border:1px solid var(--line); border-radius:var(--r); }
.reasons li:hover { border-color:rgba(217,154,10,.45); box-shadow:var(--shadow); }
.reasons .ic { width:46px; height:46px; border-radius:14px; }
.reasons .ic svg { width:22px; height:22px; }
.reasons h3 { font-size:1.35rem; margin:2px 0 .2em; }
.reasons p { margin:0; font-size:.93rem; color:var(--muted); line-height:1.5; }

/* ---------- steps: animated dashed connector ---------- */
.steps { position:relative; }
.steps::before { content:""; position:absolute; left:6%; right:6%; top:52px; height:2px; z-index:0; background:repeating-linear-gradient(90deg,rgba(217,154,10,.6) 0 8px,transparent 8px 16px); animation:dash 1.4s linear infinite; }
@keyframes dash { to { background-position:32px 0; } }
.steps li { z-index:1; }
.step-no { display:inline-grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--gold-grad); -webkit-background-clip:border-box; background-clip:border-box; color:#1d1500; font-size:1.7rem; box-shadow:0 0 0 6px #fff, 0 10px 24px -8px rgba(217,154,10,.8); }

/* ---------- corporate band (brushed steel) ---------- */
.corporate { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,4vw,56px); align-items:center; padding:clamp(28px,5vw,60px); border-radius:var(--r-lg); position:relative; overflow:hidden; box-shadow:var(--shadow-lg); color:#d9dce1;
  background:radial-gradient(60% 80% at 100% 0%, rgba(242,181,31,.25), transparent 70%), linear-gradient(135deg,#3a414b,#262b32 60%,#3d444e); }
.corporate::before { content:""; position:absolute; inset:0; opacity:.16; pointer-events:none; background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,transparent 1px 4px); }
.corporate .eyebrow { color:#f5c445; }
.corporate h2 { color:#fff; font-size:clamp(2.2rem,4.2vw,3.4rem); }
.corporate .ticks li { color:#e3e5e9; border-color:rgba(255,255,255,.14); }
.corporate .hero-actions { margin-top:24px; }
.corp-media { position:relative; height:clamp(300px,34vw,420px); }
.corp-media img { position:absolute; object-fit:cover; object-position:top center; border-radius:var(--r); border:5px solid rgba(255,255,255,.92); box-shadow:0 30px 60px -20px rgba(0,0,0,.6); }
.corp-media .m1 { left:0; top:0; width:62%; height:88%; transform:rotate(-4deg); animation:float 7s ease-in-out infinite; }
.corp-media .m2 { right:0; bottom:0; width:58%; height:56%; object-position:center; transform:rotate(4deg); animation:float 7s ease-in-out 2s infinite; }

/* ---------- FAQ ---------- */
.faq-grid { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,5vw,72px); align-items:start; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:var(--r); margin-bottom:12px; transition:border-color .2s, box-shadow .2s; }
.faq details[open] { border-color:rgba(217,154,10,.45); box-shadow:var(--shadow); }
.faq summary { position:relative; list-style:none; cursor:pointer; padding:20px 56px 20px 22px; font-weight:600; color:var(--ink); font-size:1.05rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:18px; top:50%; width:28px; height:28px; margin-top:-14px; display:grid; place-items:center; border-radius:50%; background:var(--bg-2); color:var(--gold-deep); font-size:1.3rem; line-height:1; transition:transform .3s, background-color .3s; }
.faq details[open] summary::after { transform:rotate(45deg); background:var(--gold-grad); color:#1d1500; }
.faq details p { margin:0; padding:0 22px 20px; color:var(--soft); animation:rise .4s ease; }

/* ---------- contact page tweaks ---------- */
.contact-info > p { color:var(--soft); }
.contact-info .btn-wa { margin:6px 0 10px; }

/* ---------- floating WhatsApp, back-to-top, mobile action bar ---------- */
.wa-float { position:fixed; right:22px; bottom:22px; z-index:90; display:flex; align-items:center; gap:10px; height:58px; padding:0 18px 0 14px; border-radius:999px; background:#25d366; color:#fff; text-decoration:none; font-weight:600; box-shadow:0 14px 30px -10px rgba(20,140,60,.7); transition:transform .2s, box-shadow .2s; }
.wa-float svg { width:30px; height:30px; }
.wa-float:hover { color:#fff; transform:translateY(-3px); box-shadow:0 18px 36px -10px rgba(20,140,60,.8); }
.wa-float::before { content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid #25d366; animation:waring 2.2s ease-out infinite; }
@keyframes waring { 0% { transform:scale(1); opacity:.8; } 100% { transform:scale(1.15,1.5); opacity:0; } }
.to-top { position:fixed; right:22px; bottom:92px; z-index:89; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); background:#fff; color:var(--ink); font-size:1.2rem; cursor:pointer; box-shadow:var(--shadow); opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .25s, transform .25s; }
.to-top.show { opacity:1; transform:none; pointer-events:auto; }
.to-top:hover { background:var(--gold-grad); }
.action-bar { display:none; }

/* ---------- responsive for new sections ---------- */
@media (max-width:1000px) {
  .why-grid, .faq-grid, .corporate { grid-template-columns:1fr; }
  .why-chip { right:8px; }
  .steps::before { display:none; }
  .occasions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-logo-wrap { margin-inline:auto; }
  .hero-trust { justify-content:center; }
}
@media (max-width:860px) {
  .action-bar { position:fixed; left:0; right:0; bottom:0; z-index:95; display:flex; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line); box-shadow:0 -10px 30px -18px rgba(60,45,15,.5); transform:translateY(110%); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
  body.scrolled .action-bar { transform:none; }
  .action-bar a { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; height:48px; border-radius:14px; text-decoration:none; font-weight:600; font-size:.95rem; color:var(--ink); background:var(--bg-2); border:1px solid var(--line); }
  .action-bar svg { width:20px; height:20px; }
  .action-bar .is-wa { background:#25d366; border-color:#1fae55; color:#fff; }
  .action-bar .is-quote { background:var(--gold-grad); border-color:#e0a312; color:#1d1500; }
  .wa-float { display:none; }
  .to-top { bottom:84px; right:14px; }
  body { padding-bottom:76px; }
  .reasons { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .occasions { grid-template-columns:1fr; }
  .occasions li { display:grid; grid-template-columns:auto 1fr; column-gap:16px; padding:20px; }
  .occasions .ic { grid-row:span 2; }
  .occasions h3 { margin:2px 0 .2em; font-size:1.45rem; }
  .hero-collage .badge-2 { display:none; }
  .corp-media { height:260px; }
  .faq summary { padding:16px 50px 16px 18px; font-size:1rem; }
  .laser-tip { width:34px; height:34px; margin:-17px 0 0 -17px; }
}
@media (prefers-reduced-motion:reduce) {
  .js [data-reveal] { opacity:1; transform:none; }
  .hero-kicker, .hero-trust { opacity:1; }
  .action-bar { transform:none; }
}

/* ---------- reviews ---------- */
.reviews-band { background:linear-gradient(180deg,#fff,var(--bg-2)); border-block:1px solid var(--line); }
.reviews { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.reviews li { position:relative; display:flex; flex-direction:column; padding:28px 26px 24px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
.reviews li::before { content:"\201C"; position:absolute; right:22px; top:6px; font:800 5rem/1 Georgia,serif; color:rgba(242,181,31,.25); }
.stars { color:#f2b51f; letter-spacing:2px; font-size:1.1rem; }
.stars .off { color:#e4dfd3; }
.reviews blockquote { margin:12px 0 20px; color:var(--soft); font-size:1.02rem; flex:1; }
.who { display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--line); }
.who img, .who .initial { width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; }
.who .initial { display:grid; place-items:center; background:var(--gold-grad); color:#1d1500; font:800 1.3rem/1 var(--display); }
.who strong { display:block; color:var(--ink); }
.who small { display:block; color:var(--muted); font-size:.88rem; }

/* ---------- contact map ---------- */
.map { border-radius:var(--r-lg); overflow:hidden; border:6px solid #fff; box-shadow:var(--shadow-lg); background:var(--bg-2); }
.map iframe { display:block; width:100%; height:clamp(300px,40vw,440px); border:0; }

/* ---------- 404 ---------- */
.notfound { padding-bottom:20px; }
.page-head .big-404 { margin:0 auto; max-width:none; font:800 clamp(6rem,20vw,12rem)/.9 var(--display); background:linear-gradient(180deg,#f5c445,#b57d06); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 14px 24px rgba(217,154,10,.3)); }
.notfound h1::after { display:none; }

@media (max-width:1000px) { .reviews { grid-template-columns:1fr 1fr; } }
@media (max-width:640px)  { .reviews { grid-template-columns:1fr; } }

/* ---------- phone polish ---------- */
@media (max-width:640px) {
  .portfolio .cap, .strip-item .cap { left:8px; right:auto; bottom:8px; padding:6px 10px; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:calc(100% - 16px); }
  .steps li { display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:start; padding:20px; }
  .steps .step-no { grid-row:span 2; width:48px; height:48px; font-size:1.4rem; margin:0; box-shadow:0 8px 18px -8px rgba(217,154,10,.8); }
  .steps h3 { font-size:1.4rem; margin:2px 0 .2em; }
  .section { padding-block:52px; }
  .section-title { font-size:clamp(2rem,9vw,2.6rem); }
}

/* services on phones: shorter photos (top crop also hides the baked-in caption band) */
@media (max-width:640px) {
  .service { padding-block:26px; gap:18px; }
  .service-media { max-width:none; }
  .service-media .frame-img { aspect-ratio:1/1; }
  .service-media .frame-img img { object-position:50% 40%; }
  .service h2 { font-size:2rem; }
}