/* ============================================================
   Lola Print Studio — design system
   Ink-black + paper-white + CMYK accents. Editorial print feel.
   ============================================================ */

:root{
  --ink:#0B0C10;
  --ink-2:#14161C;
  --ink-3:#1D212B;
  --paper:#F7F4ED;
  --paper-2:#EFEAE0;
  --line:rgba(11,12,16,.12);
  --line-dark:rgba(247,244,237,.14);
  --muted:#6B6F7A;
  --muted-dark:#9AA0AE;

  --cyan:#00A9E0;
  --magenta:#E6007E;
  --yellow:#FFD400;
  --key:#0B0C10;

  --accent:var(--magenta);

  --font-display:"Fraunces","Georgia",serif;
  --font-body:"Inter","Helvetica Neue",Arial,sans-serif;

  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-xl:40px;
  --pad:clamp(20px,5vw,80px);
  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--magenta);color:#fff}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--muted);margin:0 0 18px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}
section.dark .eyebrow{color:var(--muted-dark)}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.05;letter-spacing:-.02em;margin:0}
h2.title{font-size:clamp(32px,5vw,60px)}
h3{font-size:clamp(20px,2.4vw,26px);line-height:1.2}
p{margin:0 0 1em}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:62ch}
section.dark .lead{color:var(--muted-dark)}

.sec{padding:clamp(72px,10vw,140px) 0;position:relative}
.sec.dark{background:var(--ink);color:var(--paper)}
.sec.dark h2,.sec.dark h3{color:var(--paper)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:100px;border:1px solid transparent;
  font-size:14px;font-weight:600;letter-spacing:.01em;
  transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s;
  position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--magenta)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.dark .btn-primary{background:var(--paper);color:var(--ink)}
.dark .btn-primary:hover{background:var(--cyan);color:#fff}
.dark .btn-ghost{border-color:var(--line-dark);color:var(--paper)}
.dark .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn svg{width:16px;height:16px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

/* ---------- header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:18px 0;transition:padding .35s var(--ease),background .35s,box-shadow .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.header.scrolled{
  padding:10px 0;background:rgba(247,244,237,.86);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--line);
}
.header .wrap{display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.logo .mark{width:38px;height:38px;flex:0 0 auto}
.logo-txt{display:flex;flex-direction:column;line-height:1}
.logo-txt b{font-family:var(--font-display);font-size:19px;letter-spacing:-.02em}
.logo-txt span{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-top:4px}

.nav{display:flex;gap:4px;margin-left:auto}
.nav a{
  padding:9px 14px;border-radius:100px;font-size:14px;font-weight:500;color:var(--ink);
  transition:background .25s,color .25s;position:relative;
}
.nav a:hover{background:rgba(11,12,16,.06)}
.nav a.active{color:var(--magenta)}

.head-actions{display:flex;align-items:center;gap:10px}
.lang{
  display:flex;border:1px solid var(--line);border-radius:100px;overflow:hidden;background:rgba(255,255,255,.5);
}
.lang button{
  border:0;background:transparent;padding:8px 12px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);
  transition:background .25s,color .25s;
}
.lang button.on{background:var(--ink);color:var(--paper)}
.head-actions .btn{padding:12px 20px}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;place-items:center}
.burger span{display:block;width:18px;height:1.6px;background:var(--ink);margin:3.5px auto;transition:transform .3s var(--ease),opacity .2s}
.burger.on span:nth-child(1){transform:translateY(8.6px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-8.6px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:99;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:100px var(--pad) 40px;
  transform:translateY(-100%);transition:transform .5s var(--ease);
}
.mobile-nav.open{transform:translateY(0)}
.mobile-nav a{font-family:var(--font-display);font-size:clamp(28px,7vw,44px);padding:6px 0;border-bottom:1px solid var(--line-dark)}
.mobile-nav .m-contact{margin-top:26px;font-size:14px;color:var(--muted-dark);font-family:var(--font-body)}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  background:var(--ink);color:var(--paper);overflow:hidden;padding-top:120px;padding-bottom:60px;
}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;mix-blend-mode:screen;animation:float 18s ease-in-out infinite}
.blob.c{width:52vw;height:52vw;background:var(--cyan);top:-14vw;left:-8vw}
.blob.m{width:46vw;height:46vw;background:var(--magenta);bottom:-16vw;right:-6vw;animation-delay:-6s}
.blob.y{width:34vw;height:34vw;background:var(--yellow);top:32%;right:22%;opacity:.32;animation-delay:-11s}
@keyframes float{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(4vw,-3vw,0) scale(1.08)}66%{transform:translate3d(-3vw,3vw,0) scale(.95)}}
.halftone{
  position:absolute;inset:0;opacity:.25;
  background-image:radial-gradient(rgba(247,244,237,.55) 1px,transparent 1.2px);
  background-size:12px 12px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 45%,transparent);
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-tag{
  display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border:1px solid var(--line-dark);
  border-radius:100px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper);
  background:rgba(247,244,237,.06);backdrop-filter:blur(6px);margin-bottom:26px;
}
.dot{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.hero h1{font-size:clamp(42px,8.2vw,116px);letter-spacing:-.035em;max-width:15ch}
.hero h1 em{font-style:italic;color:var(--yellow)}
.hero h1 .ink-c{color:var(--cyan)}
.hero-sub{max-width:56ch;font-size:clamp(16px,1.6vw,20px);color:var(--muted-dark);margin-top:26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero-meta{display:flex;flex-wrap:wrap;gap:34px;margin-top:56px;padding-top:26px;border-top:1px solid var(--line-dark)}
.hero-meta div b{display:block;font-family:var(--font-display);font-size:26px}
.hero-meta div span{font-size:12.5px;color:var(--muted-dark);letter-spacing:.04em}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-dark)}
.scroll-cue i{display:block;width:1px;height:38px;background:linear-gradient(var(--paper),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ---------- marquee ---------- */
.marquee{
  background:var(--yellow);color:var(--ink);padding:14px 0;overflow:hidden;border-block:1px solid var(--ink);
  /* Vertical swipes still scroll the page; horizontal ones drag the strip. */
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;
}
.marquee.dragging{cursor:grabbing}
.marquee-track{display:flex;gap:0;width:max-content;will-change:transform}
.marquee span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;font-family:var(--font-display);font-size:20px;white-space:nowrap;-webkit-user-drag:none}
.marquee span::after{content:"◆";font-size:11px;color:var(--magenta)}
/* Fallback for browsers that never run the script. */
.no-js .marquee-track{animation:slide 38s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--paper);padding:34px 28px}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(34px,4.6vw,54px);line-height:1;letter-spacing:-.03em}
.stat span{display:block;margin-top:10px;font-size:13px;color:var(--muted)}
.stat:nth-child(1) b{color:var(--cyan)}
.stat:nth-child(2) b{color:var(--magenta)}
.stat:nth-child(3) b{color:#C9A200}
.stat:nth-child(4) b{color:var(--ink)}

/* ---------- generic grid head ---------- */
.sec-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:56px}
.sec-head .lead{margin:0}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.about-art{position:relative;aspect-ratio:4/4.4;border-radius:var(--r-lg);overflow:hidden;background:var(--ink)}
.sheet{position:absolute;border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,.35);transition:transform .6s var(--ease)}
.sheet.s1{inset:14% 22% 30% 10%;background:linear-gradient(150deg,var(--cyan),#0067a8);transform:rotate(-8deg)}
.sheet.s2{inset:22% 14% 22% 18%;background:linear-gradient(150deg,var(--magenta),#8e0050);transform:rotate(3deg)}
.sheet.s3{inset:30% 10% 14% 26%;background:linear-gradient(150deg,var(--yellow),#d8a400);transform:rotate(11deg)}
.about-art:hover .s1{transform:rotate(-13deg) translate(-8px,-6px)}
.about-art:hover .s3{transform:rotate(16deg) translate(8px,6px)}
.about-art .cmyk-label{position:absolute;left:20px;bottom:18px;z-index:3;color:var(--paper);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.about-art .grain{position:absolute;inset:0;z-index:2;background-image:radial-gradient(rgba(255,255,255,.25) .8px,transparent 1px);background-size:7px 7px;opacity:.35;mix-blend-mode:overlay}
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:30px}
.value{border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:#fff;transition:transform .35s var(--ease),box-shadow .35s}
.value:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(11,12,16,.08)}
.value b{display:block;font-size:14.5px;margin-bottom:4px}
.value span{font-size:13px;color:var(--muted);line-height:1.5}

/* ---------- services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden}
.svc{background:var(--ink);padding:38px 32px 34px;position:relative;overflow:hidden;transition:background .4s var(--ease)}
.svc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.svc:hover{background:var(--ink-2)}
.svc:hover::after{transform:scaleX(1)}
.svc:nth-child(3n+1){--accent:var(--cyan)}
.svc:nth-child(3n+2){--accent:var(--magenta)}
.svc:nth-child(3n+3){--accent:var(--yellow)}
.svc .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(247,244,237,.07);border:1px solid var(--line-dark);margin-bottom:22px;color:var(--accent)}
.svc .ico svg{width:22px;height:22px}
.svc h3{margin-bottom:10px}
.svc p{color:var(--muted-dark);font-size:14.5px;margin:0}
.svc ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.svc li{font-size:11.5px;letter-spacing:.04em;padding:5px 10px;border:1px solid var(--line-dark);border-radius:100px;color:var(--muted-dark)}
.svc .num{position:absolute;top:22px;right:26px;font-family:var(--font-display);font-size:13px;color:var(--muted-dark);opacity:.6}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:s}
.step{position:relative;padding-top:34px;border-top:2px solid var(--line)}
.step::before{
  counter-increment:s;content:"0" counter(s);
  position:absolute;top:-15px;left:0;background:var(--paper);padding-right:14px;
  font-family:var(--font-display);font-size:15px;color:var(--magenta);
}
.step h3{font-size:20px;margin-bottom:10px}
.step p{font-size:14.5px;color:var(--muted);margin:0}
.step:hover{border-top-color:var(--magenta)}
.step{transition:border-color .35s}

/* ---------- portfolio ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.filters button{
  padding:9px 18px;border-radius:100px;border:1px solid var(--line);background:transparent;
  font-size:13px;font-weight:500;color:var(--muted);transition:all .28s var(--ease);
}
.filters button.on,.filters button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.work{
  position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3.2;
  display:flex;flex-direction:column;justify-content:flex-end;padding:24px;color:#fff;isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s;
}
.work.hide{display:none}
.work:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(11,12,16,.22)}
.work .bg{position:absolute;inset:0;z-index:-2;transition:transform .8s var(--ease)}
.work img.bg{width:100%;height:100%;object-fit:cover;display:block}
.work:hover .bg{transform:scale(1.06)}
.work::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,12,16,0) 35%,rgba(11,12,16,.82))}
.work b{font-family:var(--font-display);font-size:22px;font-weight:600}
.work span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.82}
.work .tagline{font-size:13.5px;opacity:.9;margin-top:6px;max-width:34ch}
.bg-a{background:conic-gradient(from 210deg at 30% 30%,#00A9E0,#0b0c10 55%,#00A9E0)}
.bg-b{background:linear-gradient(135deg,#E6007E,#3a0022 70%)}
.bg-c{background:linear-gradient(160deg,#FFD400,#a06f00)}
.bg-d{background:linear-gradient(140deg,#14161C,#3a4050 60%,#0B0C10)}
.bg-e{background:radial-gradient(circle at 25% 25%,#00A9E0,#E6007E 60%,#0b0c10)}
.bg-f{background:linear-gradient(120deg,#F7F4ED,#c9c2b2)}
.bg-f ~ *{color:var(--ink)}
.work .stripes{position:absolute;inset:0;z-index:-1;opacity:.16;background:repeating-linear-gradient(45deg,#fff 0 8px,transparent 8px 22px)}

/* ---------- specs table ---------- */
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.spec{background:#fff;padding:28px}
.spec h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-family:var(--font-body);font-weight:700}
.spec ul{margin:0;padding:0;list-style:none}
.spec li{display:flex;gap:10px;padding:7px 0;font-size:14.5px;border-bottom:1px dashed var(--line)}
.spec li:last-child{border-bottom:0}
.spec li::before{content:"→";color:var(--magenta);flex:0 0 auto}

/* ---------- eco ---------- */
.eco{background:#0E1A14;color:var(--paper)}
.eco .blobs{position:absolute;inset:0;overflow:hidden;opacity:.5}
.eco .blobs i{position:absolute;width:40vw;height:40vw;border-radius:50%;filter:blur(110px);background:#1f7a4d;top:-10vw;right:-10vw}
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px;position:relative}
.eco-card{border:1px solid rgba(247,244,237,.16);border-radius:var(--r-md);padding:28px;background:rgba(247,244,237,.04)}
.eco-card b{display:block;font-family:var(--font-display);font-size:34px;color:#7CE3A8;margin-bottom:8px}
.eco-card span{color:var(--muted-dark);font-size:14.5px}

/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{border:1px solid var(--line);border-radius:var(--r-md);padding:30px;background:#fff;position:relative}
.quote .mark{font-family:var(--font-display);font-size:60px;line-height:.6;color:var(--magenta);opacity:.25}
.quote p{font-size:15.5px;margin:14px 0 20px}
.quote footer{display:flex;align-items:center;gap:12px;font-size:13px}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;font-size:13px}
.quote b{display:block}
.quote small{color:var(--muted)}
.stars{color:var(--yellow);letter-spacing:2px;font-size:13px}

/* ---------- faq ---------- */
.faq{max-width:900px;margin-inline:auto}
.q{border-bottom:1px solid var(--line)}
.q button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;
  background:transparent;border:0;padding:24px 0;font-size:clamp(16px,2vw,19px);font-family:var(--font-display);font-weight:600;color:var(--ink);
}
.q button i{flex:0 0 auto;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-style:normal;transition:transform .35s var(--ease),background .3s,color .3s}
.q.open button i{transform:rotate(45deg);background:var(--magenta);color:#fff;border-color:var(--magenta)}
.q .a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.q .a p{padding-bottom:22px;color:var(--muted);margin:0;max-width:76ch}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,5vw,64px)}
.info-card{border:1px solid var(--line-dark);border-radius:var(--r-md);padding:22px 24px;margin-bottom:14px;display:flex;gap:16px;align-items:flex-start;background:rgba(247,244,237,.04);transition:border-color .3s,background .3s}
.info-card:hover{border-color:var(--paper);background:rgba(247,244,237,.08)}
.info-card .ico{width:40px;height:40px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;background:rgba(247,244,237,.08);color:var(--cyan)}
.info-card .ico svg{width:19px;height:19px}
.info-card b{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:5px;font-weight:600}
.info-card a,.info-card p{color:var(--paper);font-size:16px;margin:0}
.info-card small{color:var(--muted-dark);display:block;font-size:13px;margin-top:3px}

/* ---------- direct contact (replaces the old request form) ---------- */
.direct{
  background:var(--paper);color:var(--ink);border-radius:var(--r-lg);
  padding:clamp(24px,3.4vw,40px);align-self:start;
}
.direct .eyebrow{color:var(--muted);margin-bottom:12px}
.direct h3{font-size:clamp(22px,2.6vw,30px);line-height:1.15;color:var(--ink)}
.sec.dark .direct h3{color:var(--ink)}
.direct-lead{color:var(--muted);font-size:15px;margin:12px 0 22px;max-width:46ch}
.direct-actions{display:grid;gap:10px}
.dbtn{
  display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:16px;
  border:1px solid var(--line);background:#fff;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s,background .3s;
}
.dbtn:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:0 14px 30px rgba(11,12,16,.1)}
.dbtn .ico{
  width:44px;height:44px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;
  background:var(--paper-2);color:var(--ink);transition:background .3s,color .3s;
}
.dbtn .ico svg{width:21px;height:21px}
.dbtn .txt{display:flex;flex-direction:column;min-width:0}
.dbtn b{font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.2}
.dbtn small{color:var(--muted);font-size:13.5px;overflow-wrap:anywhere}
.dbtn.call:hover .ico{background:var(--cyan);color:#fff}
.dbtn.wa:hover .ico{background:#25D366;color:#fff}
.dbtn.mail:hover .ico{background:var(--magenta);color:#fff}
.dbtn.place:hover .ico{background:var(--ink);color:var(--yellow)}
.direct-note{font-size:12.5px;color:var(--muted);margin:20px 0 0}

.map{margin-top:60px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-dark);filter:grayscale(1) contrast(1.1);transition:filter .5s}
.map:hover{filter:none}
.map iframe{display:block;width:100%;height:380px;border:0}

/* ---------- footer ---------- */
.footer{background:#07080B;color:var(--paper);padding:clamp(60px,8vw,96px) 0 30px}
.f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line-dark)}
.footer h5{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dark);margin:0 0 16px;font-weight:700}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer ul a{font-size:14.5px;color:rgba(247,244,237,.82);transition:color .25s,padding-left .25s}
.footer ul a:hover{color:var(--yellow);padding-left:5px}
.f-about p{color:var(--muted-dark);font-size:14.5px;max-width:36ch;margin-top:18px}
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{width:40px;height:40px;border:1px solid var(--line-dark);border-radius:50%;display:grid;place-items:center;transition:all .3s var(--ease)}
.socials a:hover{background:var(--paper);color:var(--ink);transform:translateY(-3px)}
.socials svg{width:17px;height:17px}
.f-bot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;padding-top:22px;font-size:12.5px;color:var(--muted-dark)}
.cmyk-bar{display:flex;height:4px;border-radius:100px;overflow:hidden;margin:34px 0 0}
.cmyk-bar i{flex:1}
.cmyk-bar i:nth-child(1){background:var(--cyan)}
.cmyk-bar i:nth-child(2){background:var(--magenta)}
.cmyk-bar i:nth-child(3){background:var(--yellow)}
.cmyk-bar i:nth-child(4){background:#3b3f4a}

/* ---------- floating ---------- */
.fab{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:10px}
.fab a,.fab button{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:0;
  box-shadow:0 12px 26px rgba(0,0,0,.25);transition:transform .3s var(--ease);
}
.fab a:hover,.fab button:hover{transform:translateY(-3px) scale(1.05)}
.fab .wa{background:#25D366;color:#fff}
.fab .top{background:var(--ink);color:var(--paper);opacity:0;pointer-events:none}
.fab .top.show{opacity:1;pointer-events:auto}
.fab svg{width:24px;height:24px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:grid}
  .head-actions{margin-left:auto}
  .svc-grid,.work-grid,.quotes,.specs,.eco-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:34px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .about-grid,.contact-grid,.sec-head{grid-template-columns:1fr}
  .about-art{max-width:520px}
}
@media (max-width:640px){
  .head-actions .btn{display:none}
  .call-btn{display:grid}
  .header .wrap{gap:12px}
  .logo .mark{width:34px;height:34px}
  .logo-txt b{font-size:17px}
  .svc-grid,.work-grid,.quotes,.specs,.eco-grid,.stats,.values{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr 1fr}
  .hero-meta{gap:22px}
  .hero{min-height:auto;padding-top:130px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   Contrast pass — the header floats over the dark hero, so its
   text must invert until the page is scrolled, and the hero
   copy needs a scrim over the CMYK blobs to stay readable.
   ============================================================ */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(11,12,16,.92) 0%,rgba(11,12,16,.72) 45%,rgba(11,12,16,.35) 100%),
    linear-gradient(180deg,rgba(11,12,16,.75) 0%,rgba(11,12,16,.2) 40%,rgba(11,12,16,.85) 100%);
}
.blob{opacity:.42}
.blob.y{opacity:.24}

.header:not(.scrolled) .logo-txt b{color:var(--paper)}
.header:not(.scrolled) .logo-txt span{color:rgba(247,244,237,.62)}
.header:not(.scrolled) .nav a{color:rgba(247,244,237,.86)}
.header:not(.scrolled) .nav a:hover{background:rgba(247,244,237,.12);color:var(--paper)}
.header:not(.scrolled) .nav a.active{color:var(--yellow)}
.header:not(.scrolled) .lang{border-color:rgba(247,244,237,.28);background:rgba(247,244,237,.08)}
.header:not(.scrolled) .lang button{color:rgba(247,244,237,.7)}
.header:not(.scrolled) .lang button.on{background:var(--paper);color:var(--ink)}
.header:not(.scrolled) .head-actions .btn-primary{background:var(--paper);color:var(--ink)}
.header:not(.scrolled) .head-actions .btn-primary:hover{background:var(--magenta);color:#fff}
.header:not(.scrolled) .burger{border-color:rgba(247,244,237,.28)}
.header:not(.scrolled) .burger span{background:var(--paper)}

/* Hero sits on ink, so it needs the dark-section button treatment. */
.hero .btn-primary{background:var(--paper);color:var(--ink)}
.hero .btn-primary:hover{background:var(--cyan);color:#fff}
.hero .btn-ghost{border-color:rgba(247,244,237,.32);color:var(--paper)}
.hero .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.hero h1{color:var(--paper);text-shadow:0 2px 30px rgba(11,12,16,.45)}
.hero-sub{color:rgba(247,244,237,.9)}
.hero-meta div span{color:rgba(247,244,237,.72)}
.hero-tag{color:rgba(247,244,237,.95);border-color:rgba(247,244,237,.3)}
.scroll-cue{color:rgba(247,244,237,.7)}

/* Let a bit more CMYK through the scrim, and keep the scroll cue clear of the stats. */
.hero-bg::after{
  background:
    linear-gradient(90deg,rgba(11,12,16,.82) 0%,rgba(11,12,16,.55) 48%,rgba(11,12,16,.2) 100%),
    linear-gradient(180deg,rgba(11,12,16,.6) 0%,rgba(11,12,16,.1) 42%,rgba(11,12,16,.8) 100%);
}
.blob{opacity:.5}
.hero{padding-bottom:110px}
@media (max-width:640px){.scroll-cue{display:none}}

/* Portfolio legibility: a stronger scrim, and darker ends on the light cards. */
.work::after{background:linear-gradient(180deg,rgba(11,12,16,0) 18%,rgba(11,12,16,.5) 52%,rgba(11,12,16,.92) 100%)}
.bg-c{background:linear-gradient(160deg,#FFD400 0%,#8a5f00 62%,#31210a 100%)}
.bg-f{background:linear-gradient(150deg,#F7F4ED 0%,#8d8778 52%,#26251f 100%)}
.bg-f ~ *{color:#fff}
/* Footer logo sits on near-black — lighten its sub-label. */
.footer .logo-txt span{color:var(--muted-dark)}


/* ============================================================
   Mobile pass — header cluster, drawer and portfolio cards.
   ============================================================ */

/* Round call button that stands in for the hidden "Contact us" CTA. */
.call-btn{
  display:none;width:44px;height:44px;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;
  place-items:center;color:var(--ink);transition:background .25s,color .25s,border-color .25s;
}
.call-btn svg{width:19px;height:19px}
.call-btn:active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.header:not(.scrolled) .call-btn{border-color:rgba(247,244,237,.28);color:var(--paper)}

.head-actions{flex:0 0 auto}
.burger{flex:0 0 auto}

/* The drawer is a full-height sheet: it scrolls if the phone is short, and the
   contact details sit in their own rows instead of one wrapped line. */
body.nav-open{overflow:hidden}
.mobile-nav{
  height:100dvh;justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top) + 92px) var(--pad) calc(env(safe-area-inset-bottom) + 32px);
  gap:0;
}
.mobile-nav a{font-size:clamp(24px,6.2vw,38px);padding:11px 0}
.mobile-nav .m-contact{
  margin-top:26px;display:flex;flex-direction:column;gap:8px;
  font-family:var(--font-body);
}
.m-row{
  display:flex!important;align-items:center;gap:12px;font-family:var(--font-body)!important;
  font-size:15px!important;padding:12px 14px!important;border:1px solid var(--line-dark);border-radius:14px;
  color:var(--paper);background:rgba(247,244,237,.05);
}
.m-row svg{width:18px;height:18px;flex:0 0 auto;color:var(--yellow)}
.m-row span{white-space:normal;overflow-wrap:anywhere}
.m-row:active{background:rgba(247,244,237,.14)}

@media (max-width:640px){
  /* Cards get a little taller so the photo and the caption both breathe. */
  .work{aspect-ratio:4/3.6;padding:20px}
  .work b{font-size:20px}
  .filters{gap:8px}
  .filters button{padding:8px 14px}
  .direct{padding:22px 18px}
  .dbtn{padding:13px 14px;gap:12px}
  .dbtn .ico{width:40px;height:40px}
  .dbtn b{font-size:16.5px}
  .map iframe{height:280px}
  .marquee span{font-size:17px;gap:20px;padding-right:20px}
}

/* Declared last so it wins over the base .call-btn rule above. */
@media (max-width:640px){ .call-btn{display:grid} }

/* Narrow phones: the header keeps only logo + call + burger; the language
   switch moves into the drawer so nothing is squeezed off the screen. */
.m-lang{display:none;align-self:flex-start;margin-bottom:22px;border-color:var(--line-dark);background:rgba(247,244,237,.06)}
.m-lang button{color:rgba(247,244,237,.7);padding:9px 16px}
.m-lang button.on{background:var(--paper);color:var(--ink)}
@media (max-width:560px){
  .head-actions > .lang{display:none}
  .m-lang{display:flex}
  .logo-txt span{display:none}
  .logo-txt b{font-size:18px}
  .head-actions{gap:8px}
}