/* ===========================================================
   PAPAYA CREATIVE STUDIO
   Warm limestone canvas, ember accent.
   Deliberately shadowless — hierarchy comes from surface
   colour and radius, never elevation.
   =========================================================== */

:root{
  /* surfaces */
  --pumice:     #e2e2df;   /* page canvas */
  --limestone:  #f7f6f2;   /* cards, content blocks */
  --ember:      #fc5000;   /* the one aggressive accent */
  --sulfur:     #f5f28e;   /* tags only */
  --obsidian:   #070607;   /* text, dark sections */
  --chalk:      #ffffff;

  /* reassigned per surface below */
  --bg:         var(--pumice);
  --fg:         var(--obsidian);
  --fg-soft:    rgba(7,6,7,.62);
  --hair:       rgba(7,6,7,.18);
  --btn-bg:     var(--ember);
  --btn-fg:     var(--obsidian);

  --pad:        clamp(18px, 4vw, 56px);
  --maxw:       1280px;
  --r-card:     40px;
  --r-pill:     800px;
  --r-small:    16px;
  --gap:        clamp(56px, 8vw, 92px);

  --ease:       cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* .pill sets display:inline-flex, which beats the [hidden] attribute's
   default display:none — so hidden buttons stayed clickable. */
[hidden]{ display:none !important; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--pumice); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--pumice);
  color:var(--obsidian);
  font-family:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:500;                 /* Medium only — never Regular, never Bold */
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--ember); color:var(--chalk); }

:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--ember); outline-offset:3px; border-radius:var(--r-small);
}

/* ===========================================================
   Surfaces
   =========================================================== */

.room{ background:var(--bg); color:var(--fg); }

.room-pumice    { --bg:var(--pumice);    --fg:var(--obsidian); --fg-soft:rgba(7,6,7,.62); --hair:rgba(7,6,7,.18); --btn-bg:var(--ember);    --btn-fg:var(--obsidian); }
.room-limestone { --bg:var(--limestone); --fg:var(--obsidian); --fg-soft:rgba(7,6,7,.62); --hair:rgba(7,6,7,.16); --btn-bg:var(--ember);    --btn-fg:var(--obsidian); }
.room-ember     { --bg:var(--ember);     --fg:var(--chalk);    --fg-soft:rgba(255,255,255,.88); --hair:rgba(255,255,255,.34); --btn-bg:var(--obsidian); --btn-fg:var(--chalk); }
.room-obsidian  { --bg:var(--obsidian);  --fg:var(--chalk);    --fg-soft:rgba(255,255,255,.68); --hair:rgba(255,255,255,.22); --btn-bg:var(--ember);   --btn-fg:var(--obsidian); }
.room-plasma    { --bg:var(--plasma);    --fg:var(--chalk);    --fg-soft:rgba(255,255,255,.84); --hair:rgba(255,255,255,.30); --btn-bg:var(--ember);   --btn-fg:var(--obsidian); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.band{ padding-block:var(--gap); }
.band-tight{ padding-block:clamp(40px,5vw,64px); }

/* dotted rule — dotted, never dashed, never solid */
.rule-dot{ border:0; border-top:1.5px dotted var(--hair); margin:0; }

/* ===========================================================
   Type
   =========================================================== */

.display{
  font-family:"Anton","Bebas Neue",Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:.94;
  letter-spacing:.02em;              /* positive — keeps heavy strokes apart */
  margin:0;
}

/* sized so even a wide fallback face fits the column — Anton, being far
   narrower, then sits comfortably inside it */
.mega   { font-size:clamp(44px, 10.5vw, 84px); line-height:.94; }
@media (min-width:1000px){ .mega{ font-size:clamp(64px, min(11vw, 19vh), 168px); } }
.big    { font-size:clamp(44px, 7.6vw, 96px);  line-height:.95; }
.medium { font-size:clamp(32px, 4.2vw, 56px);  line-height:1; }
.small  { font-size:clamp(26px, 2.6vw, 32px);  line-height:1; }

.lede{
  font-size:clamp(18px,1.6vw,20px);
  line-height:1.5; margin:0; max-width:46ch; color:var(--fg);
}
.body-txt{ margin:0; color:var(--fg-soft); max-width:62ch; font-size:16px; }

.eyebrow{
  display:inline-block; font-size:14px; line-height:1.2;
  color:var(--fg-soft); margin:0 0 clamp(14px,1.8vw,22px);
}

.editorial{
  font-size:clamp(24px,3.2vw,30px); font-weight:500; line-height:1.5;
  margin:0; max-width:34ch;
}

/* ===========================================================
   Controls — pill or 40px, never square
   =========================================================== */

.pill{
  display:inline-flex; align-items:center; gap:9px;
  border-radius:var(--r-pill);
  padding:12px 24px;
  font-size:16px; font-weight:500;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1.5px solid var(--btn-bg);
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pill:hover{ transform:translateY(-2px); }
.pill.ghost{ background:transparent; color:var(--fg); border-color:var(--fg); }
.pill.ghost:hover{ background:var(--fg); color:var(--bg); }
.pill.lg{ padding:16px 32px; font-size:18px; }
.pill svg{ width:13px; height:13px; flex:none; }

.tag{
  display:inline-block; justify-self:start;
  border-radius:var(--r-pill);
  padding:4px 13px; font-size:13px; font-weight:500;
  background:var(--sulfur); color:var(--obsidian);
}
.tag.outline{ background:transparent; color:var(--fg); border:1.5px solid var(--hair); }

/* ===========================================================
   Nav — links ride inside a limestone pill
   =========================================================== */

.nav{ background:var(--bg); color:var(--fg); position:relative; z-index:60; }
.nav-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:20px; }

.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.brand-name{
  display:block; width:clamp(116px,12vw,158px); aspect-ratio:834/263;
  background:currentColor;
  -webkit-mask:url("../img/wordmark-black.webp") left center/contain no-repeat;
  mask:url("../img/wordmark-black.webp") left center/contain no-repeat;
}

.nav-links{
  display:flex; align-items:center; gap:9px;
  background:var(--limestone); border-radius:var(--r-pill);
  padding:9px 12px;
}
.nav-links a,.has-drop > a{ padding:0 12px; font-size:16px; color:var(--obsidian);
  transition:opacity .25s var(--ease); }
.nav-links a:hover,.has-drop:hover > a{ opacity:.55; }

.has-drop{ position:relative; }
.drop{
  position:absolute; top:calc(100% + 18px); left:-12px; min-width:250px;
  background:var(--limestone); color:var(--obsidian);
  border-radius:var(--r-card); padding:14px; display:grid; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .26s var(--ease), transform .3s var(--ease), visibility .26s;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{ opacity:1; visibility:visible; transform:none; }
.drop a{ padding:10px 16px; border-radius:var(--r-pill); font-size:16px; white-space:nowrap;
  transition:background .22s var(--ease); }
.drop a:hover{ background:rgba(7,6,7,.07); opacity:1; }

.burger{ display:none; width:46px; height:46px; border-radius:var(--r-pill); place-items:center;
  background:var(--limestone); color:var(--obsidian); }
.burger i{ display:block; width:19px; height:1.8px; background:currentColor; position:relative; transition:.3s var(--ease); }
.burger i::before,.burger i::after{ content:""; position:absolute; left:0; width:19px; height:1.8px;
  background:currentColor; transition:.3s var(--ease); }
.burger i::before{ top:-6px; } .burger i::after{ top:6px; }
.nav.open .burger i{ background:transparent; }
.nav.open .burger i::before{ top:0; transform:rotate(45deg); }
.nav.open .burger i::after{ top:0; transform:rotate(-45deg); }

.mobile-menu{ display:none; padding:0 var(--pad) 26px; }
.mobile-menu.open{ display:block; }
.mobile-menu a{
  display:block; font-family:"Anton",sans-serif; text-transform:uppercase;
  font-size:32px; letter-spacing:.02em; line-height:1; padding:13px 0;
  border-top:1.5px dotted var(--hair);
}
.mobile-menu a.sub{
  font-family:inherit; text-transform:none; font-size:16px; font-weight:500;
  letter-spacing:0; padding:10px 0 10px 20px;
}

/* ===========================================================
   Hero
   =========================================================== */

.hero{ padding-block:clamp(20px,3vw,40px) clamp(48px,7vw,92px); }
.hero-grid{ display:grid; gap:clamp(28px,4vw,48px); }
.hero-copy{ display:grid; gap:clamp(22px,2.8vw,34px); justify-items:start; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }


/* ===========================================================
   Marquee
   =========================================================== */

.marquee{ overflow:hidden; padding-block:16px; }
.marquee-track{ display:flex; width:max-content; animation:slide 40s linear infinite; }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none } }
.marquee-track span{
  font-family:"Anton",sans-serif; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(20px,2.4vw,32px); line-height:1;
  padding-inline:20px; display:flex; align-items:center; gap:20px; white-space:nowrap;
}
.marquee-track span::after{ content:""; width:6px; height:6px; border-radius:50%;
  background:var(--ember); flex:none; }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ===========================================================
   Cards & grids
   =========================================================== */

.card{
  border-radius:var(--r-card);
  padding:clamp(26px,3vw,40px);
  background:var(--bg); color:var(--fg);
  display:grid; gap:16px; align-content:start;
}

.mosaic{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:720px){  .mosaic{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .mosaic{ grid-template-columns:repeat(3,1fr); } }

.svc{ min-height:clamp(240px,25vw,300px); grid-template-rows:auto 1fr auto;
  align-content:space-between; transition:transform .45s var(--ease); }
.svc:hover{ transform:translateY(-5px); }
.svc-text{ display:grid; gap:10px; align-content:start; }
.svc h3{ font-family:"Anton",sans-serif; text-transform:uppercase; margin:0;
  font-size:clamp(26px,2.7vw,32px); line-height:1; letter-spacing:.02em; }
.svc p{ margin:0; font-size:16px; line-height:1.5; color:var(--fg-soft); max-width:34ch; }
.svc-go{ width:42px; height:42px; border-radius:var(--r-pill); display:grid; place-items:center;
  border:1.5px solid currentColor; justify-self:start;
  transition:transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease); }
.svc-go svg{ width:14px; height:14px; transition:transform .4s var(--ease); }
.svc:hover .svc-go{ transform:rotate(45deg); background:var(--fg); color:var(--bg); }

/* portfolio */
.work-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:760px){  .work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1180px){ .work-grid{ grid-template-columns:repeat(3,1fr); } }

.work-card{ border-radius:var(--r-card); padding:clamp(20px,2.2vw,28px);
  background:var(--limestone); color:var(--obsidian);
  display:grid; gap:18px; transition:transform .45s var(--ease); }
.work-card:hover{ transform:translateY(-5px); }
.work-shot{ position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r-small); background:var(--obsidian);
  display:grid; place-items:center; }
/* grey until you hover, then the site comes to life */
.work-shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:top center;
  filter:grayscale(1) contrast(1.03);
  transition:filter .55s var(--ease), transform .8s var(--ease); }
.work-card:hover .work-shot img,
.work-card:focus-visible .work-shot img{ filter:grayscale(0) contrast(1); transform:scale(1.035); }
@media (hover:none){ .work-shot img{ filter:none; } }
@media (prefers-reduced-motion:reduce){
  .work-shot img{ transition:filter .3s linear; }
  .work-card:hover .work-shot img{ transform:none; }
}
.work-fruit{ width:26%; color:var(--chalk); }
.work-fruit svg{ width:100%; height:auto; }
.work-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.work-meta h3{ font-family:"Anton",sans-serif; text-transform:uppercase; margin:0;
  font-size:clamp(22px,2.1vw,28px); line-height:1; letter-spacing:.02em; }
.work-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.work-tags span{ font-size:12px; border-radius:var(--r-pill); padding:4px 11px;
  background:var(--sulfur); color:var(--obsidian); white-space:nowrap; }

/* ===========================================================
   Service pages
   =========================================================== */

.svc-hero{ padding-block:clamp(24px,3vw,44px) clamp(48px,7vw,88px); }
.svc-hero-grid{ display:grid; gap:clamp(28px,4vw,48px); }
.svc-hero-copy{ display:grid; gap:clamp(20px,2.4vw,30px); justify-items:start; }

.back{ display:inline-flex; align-items:center; gap:8px; font-size:16px; }
.back svg{ width:16px; height:14px; }
.back:hover{ opacity:.6; }

.inc-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:700px){  .inc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .inc-grid{ grid-template-columns:repeat(3,1fr); } }
.inc h3{ font-family:"Anton",sans-serif; text-transform:uppercase; margin:0;
  font-size:clamp(24px,2.3vw,30px); line-height:1; letter-spacing:.02em; }
.inc p{ margin:0; font-size:16px; line-height:1.5; color:var(--fg-soft); }

.steps{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
.step{ border-radius:var(--r-card); padding:clamp(26px,3vw,40px); background:var(--bg); }
.step-n{ font-family:"Anton",sans-serif; font-size:clamp(48px,5.4vw,80px); line-height:1.1;
  letter-spacing:.02em; display:block; margin-bottom:10px; color:var(--ember); }
.step h3{ font-family:"Anton",sans-serif; text-transform:uppercase; margin:0 0 8px;
  font-size:clamp(24px,2.2vw,30px); line-height:1; letter-spacing:.02em; }
.step p{ margin:0; font-size:16px; line-height:1.5; color:var(--fg-soft); max-width:46ch; }

.two-col{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:900px){ .two-col{ grid-template-columns:repeat(2,1fr); } }
.list-card h3{ font-family:"Anton",sans-serif; text-transform:uppercase; margin:0 0 6px;
  font-size:clamp(26px,2.6vw,32px); line-height:1; letter-spacing:.02em; }
.ticks{ list-style:none; margin:0; padding:0; display:grid; }
.ticks li{ padding:15px 0 15px 28px; position:relative; font-size:16px; line-height:1.45;
  border-top:1.5px dotted var(--hair); }
.ticks li:first-child{ border-top:0; }
.ticks li::before{ content:""; position:absolute; left:2px; top:23px;
  width:9px; height:9px; border-radius:50%; background:var(--ember); }
.ticks.diamond li::before{ border-radius:2px; transform:rotate(45deg); }

.rel-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:700px){ .rel-grid{ grid-template-columns:repeat(2,1fr); } }
.rel{ border-radius:var(--r-card); padding:clamp(26px,3vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  font-family:"Anton",sans-serif; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(24px,2.4vw,32px); line-height:1;
  transition:transform .45s var(--ease); }
.rel:hover{ transform:translateY(-4px); }
.rel svg{ width:18px; height:18px; flex:none; transition:transform .35s var(--ease); }
.rel:hover svg{ transform:translate(4px,-4px); }

.all-svc{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(26px,3vw,40px); }

/* ===========================================================
   Contact
   =========================================================== */

.contact-in{ display:grid; justify-items:center; text-align:center; gap:clamp(22px,2.6vw,34px); }
.contact-mail{ font-family:"Anton",sans-serif; text-transform:lowercase; letter-spacing:.02em;
  font-size:clamp(22px,3.6vw,48px); line-height:1; word-break:break-word; }
.contact-mail:hover{ color:var(--ember); }

/* ===========================================================
   Dock
   =========================================================== */

.dock{
  position:fixed; right:clamp(14px,2vw,26px); bottom:clamp(14px,2vw,26px); z-index:70;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px 12px 14px; border-radius:var(--r-pill);
  background:var(--obsidian); color:var(--chalk);
  font-size:16px; font-weight:500;
  border:1.5px solid var(--obsidian);
  transition:transform .35s var(--ease), opacity .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.dock:hover{ transform:translateY(-3px); background:var(--ember); color:var(--chalk); border-color:var(--ember); }
.dock-mark{ width:20px; flex:none; }
.dock-mark svg{ width:100%; height:auto; }
@media (max-width:520px){ .dock{ padding:11px 18px 11px 12px; font-size:15px; } .dock-mark{ width:17px; } }

/* ===========================================================
   Footer
   =========================================================== */

.foot-grid{ display:grid; grid-template-columns:1fr; gap:clamp(30px,4vw,48px); }
@media (min-width:800px){ .foot-grid{ grid-template-columns:1.7fr repeat(3,1fr); } }
.foot-wordmark{
  display:block; width:min(270px,70%); aspect-ratio:834/263; margin-bottom:20px;
  background:currentColor;
  -webkit-mask:url("../img/wordmark-white.webp") left center/contain no-repeat;
  mask:url("../img/wordmark-white.webp") left center/contain no-repeat;
}
.foot-brand p{ margin:0; max-width:34ch; color:var(--fg-soft); }
.foot-col h4{ margin:0 0 14px; font-size:14px; font-weight:500; color:var(--fg-soft); }
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot-col a:hover{ color:var(--ember); }
.foot-base{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  margin-top:clamp(32px,4vw,52px); padding-top:22px;
  border-top:1.5px dotted var(--hair); font-size:12px; color:var(--fg-soft);
}

/* ===========================================================
   Loader — the only place the 3D render appears
   =========================================================== */

#loader{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  /* was 1s with a .15s delay — 1.15s of waiting on a page that is ready in
     ~0.3s. Same gesture, half the time, no delay. */
  transition:transform .55s cubic-bezier(.76,0,.24,1), visibility .55s;
}
.loader-in{ display:grid; justify-items:center; gap:32px; }
.loader-fruit{
  width:clamp(112px,16vw,178px);
  animation:loadSpin 1.5s cubic-bezier(.62,0,.3,1) infinite;
  transform-origin:55% 45%;
}
@keyframes loadSpin{
  0%   { transform:rotate(-9deg) scale(.9); }
  45%  { transform:rotate(9deg)  scale(1.04); }
  100% { transform:rotate(-9deg) scale(.9); }
}
.loader-bar{ width:min(200px,50vw); height:4px; border-radius:var(--r-pill);
  background:rgba(7,6,7,.16); overflow:hidden; }
.loader-bar i{ display:block; height:100%; width:0; background:var(--ember);
  border-radius:var(--r-pill); transition:width .3s linear; }

body.loaded #loader{ transform:translateY(-101%); visibility:hidden; }
body:not(.loaded){ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .loader-fruit{ animation:none; }
  #loader{ transition:opacity .4s; }
  body.loaded #loader{ transform:none; opacity:0; }
}

/* ===========================================================
   Entrance choreography
   =========================================================== */

/* Every delay here used to be stacked on top of the curtain, so the hero was
   not fully readable until ~3.2s. Same choreography, roughly a third of the
   time — the last element now lands a little over 1s after the curtain moves. */

.nav-in{ opacity:0; transform:translateY(-12px); }
body.loaded .nav-in{ opacity:1; transform:none;
  transition:opacity .5s var(--ease) .18s, transform .5s var(--ease) .18s; }

.hero-h1 .ln{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero-h1 .ln > span{ display:block; transform:translateY(104%); }
body.loaded .hero-h1 .ln > span{ transform:none;
  transition:transform .75s cubic-bezier(.16,1,.3,1); }
body.loaded .hero-h1 .ln:nth-child(1) > span{ transition-delay:.10s; }
body.loaded .hero-h1 .ln:nth-child(2) > span{ transition-delay:.18s; }
body.loaded .hero-h1 .ln:nth-child(3) > span{ transition-delay:.26s; }

.hero-copy > *:not(.hero-h1){ opacity:0; }
body.loaded .hero-copy > *:not(.hero-h1){ opacity:1; transition:opacity .6s var(--ease) .42s; }

/* Repeat views in the same session: the intro has been seen, so everything is
   simply present. No curtain, no rise, no fade — the page is just there. */
body.no-intro .nav-in,
body.no-intro .hero-copy > *:not(.hero-h1){ opacity:1; transform:none; transition:none; }
body.no-intro .hero-h1 .ln > span{ transform:none; transition:none; }

@media (prefers-reduced-motion:reduce){
  .nav-in,.hero-copy > *{ opacity:1; transform:none; }
  .hero-h1 .ln > span{ transform:none; }
}

/* ===========================================================
   Scroll reveals
   =========================================================== */

.rv{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv[data-d="1"]{ transition-delay:.08s } .rv[data-d="2"]{ transition-delay:.16s }
.rv[data-d="3"]{ transition-delay:.24s } .rv[data-d="4"]{ transition-delay:.32s }
.rv[data-d="5"]{ transition-delay:.40s }

.wipe{ display:block; overflow:hidden; padding-bottom:.07em; }
.wipe > span{ display:block; transform:translateY(104%);
  transition:transform 1s cubic-bezier(.16,1,.3,1); }
.wipe.in > span{ transform:none; }

@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .wipe > span{ transform:none; }
}

/* ===========================================================
   Hover life
   =========================================================== */

.pill,.svc,.work-card,.rel{ will-change:transform; }
.pill:active{ transform:translateY(0) scale(.98); }
.svc:hover .svc-go svg{ transform:translate(1px,-1px); }
.marquee:hover .marquee-track{ animation-play-state:paused; }

.drop a{ opacity:0; transform:translateX(-6px); }
.has-drop:hover .drop a,.has-drop:focus-within .drop a{
  opacity:1; transform:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease); }
.has-drop:hover .drop a:nth-child(1){ transition-delay:.04s }
.has-drop:hover .drop a:nth-child(2){ transition-delay:.07s }
.has-drop:hover .drop a:nth-child(3){ transition-delay:.10s }
.has-drop:hover .drop a:nth-child(4){ transition-delay:.13s }
.has-drop:hover .drop a:nth-child(5){ transition-delay:.16s }
.has-drop:hover .drop a:nth-child(6){ transition-delay:.19s }
.has-drop:hover .drop a:nth-child(7){ transition-delay:.22s }

@media (prefers-reduced-motion:reduce){
  .drop a{ opacity:1; transform:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* ===========================================================
   Responsive
   =========================================================== */

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-in > .pill{ display:none; }
  .burger{ display:grid; }
}


/* ===========================================================
   Back to top — mirrors the dock, bottom left
   =========================================================== */

.totop{
  position:fixed; left:clamp(14px,2vw,26px); bottom:clamp(14px,2vw,26px); z-index:70;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 20px 10px 12px; border-radius:var(--r-pill);
  background:var(--limestone); color:var(--obsidian);
  border:1.5px solid var(--obsidian);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s,
             background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.totop.show{ opacity:1; visibility:visible; transform:none; }
.totop img{
  width:34px; height:auto;
  animation:loadSpin 1.5s cubic-bezier(.62,0,.3,1) infinite;
  transform-origin:55% 45%;
}
.totop svg{ width:13px; height:15px; flex:none; }
.totop:hover{ background:var(--obsidian); color:var(--chalk); border-color:var(--obsidian); }
.totop:hover img{ filter:invert(1); }
@media (max-width:520px){
  .totop{ padding:9px 16px 9px 10px; }
  .totop img{ width:26px; }
}
@media (prefers-reduced-motion:reduce){ .totop img{ animation:none; } }

/* ===========================================================
   Enquiry form — one question per screen
   =========================================================== */

body.form-page{ overflow:hidden; }

.fm{ position:fixed; inset:0; display:grid; grid-template-rows:auto auto 1fr auto;
  background:var(--pumice); }

.fm-top{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px var(--pad); }
.fm-top .brand-name{ width:clamp(104px,10vw,132px); }
.fm-exit{ display:inline-flex; align-items:center; gap:8px; font-size:15px; color:var(--fg-soft); }
.fm-exit:hover{ color:var(--obsidian); }

.fm-bar{ height:4px; background:rgba(7,6,7,.12); }
.fm-bar i{ display:block; height:100%; width:0; background:var(--ember);
  transition:width .5s var(--ease); }

.fm-body{ position:relative; overflow-y:auto; overflow-x:hidden; }

.step{
  position:absolute; inset:0;
  display:grid; align-content:safe center; justify-items:start;
  overflow-y:auto; overscroll-behavior:contain;
  gap:clamp(18px,2.4vw,28px);
  width:100%; max-width:var(--maxw); margin-inline:auto; padding:clamp(24px,5vw,64px) var(--pad);
  opacity:0; visibility:hidden; transform:translateY(26px);
  transition:opacity .45s var(--ease), transform .55s var(--ease), visibility .45s;
  pointer-events:none;
}
.step.on{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.step.out{ transform:translateY(-26px); }

.step-count{ font-size:14px; color:var(--fg-soft); display:flex; align-items:center; gap:8px; }
.step-count b{ color:var(--ember); font-weight:500; }
.step h2{ font-family:"Anton",sans-serif; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(30px,5.2vw,64px); line-height:.98; margin:0; max-width:18ch; }
.step .hint{ font-size:16px; color:var(--fg-soft); margin:0; max-width:52ch; }
.step .opt-note{ font-size:14px; color:var(--fg-soft); }

.fm-in{
  width:100%; max-width:640px;
  font:inherit; font-size:clamp(20px,2.6vw,30px);
  background:transparent; color:var(--obsidian);
  border:0; border-bottom:2px solid var(--hair);
  padding:12px 4px; border-radius:0;
  transition:border-color .3s var(--ease);
}
.fm-in:focus{ outline:0; border-bottom-color:var(--ember); }
.fm-in::placeholder{ color:rgba(7,6,7,.30); }
textarea.fm-in{ font-size:clamp(17px,1.7vw,20px); line-height:1.5; min-height:130px;
  border:2px solid var(--hair); border-radius:var(--r-small); padding:16px; resize:vertical; }
textarea.fm-in:focus{ border-color:var(--ember); }

/* choice cards */
.choices{ display:grid; gap:10px; width:100%; max-width:720px; }
.choices.two{ grid-template-columns:1fr; }
@media (min-width:760px){ .choices.two{ grid-template-columns:repeat(2,1fr); } }
.choices.grid{ grid-template-columns:1fr; }
@media (min-width:700px){ .choices.grid{ grid-template-columns:repeat(2,1fr); } }

.choice{
  display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  background:var(--limestone); color:var(--obsidian);
  border:2px solid transparent; border-radius:var(--r-small);
  padding:16px 18px; font-size:17px; font-weight:500;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.choice:hover{ transform:translateX(3px); border-color:rgba(7,6,7,.22); }
.choice .key{
  flex:none; width:28px; height:28px; border-radius:8px;
  border:1.5px solid var(--hair); display:grid; place-items:center;
  font-size:13px; color:var(--fg-soft);
}
.choice.sel{ border-color:var(--ember); background:var(--chalk); }
.choice.sel .key{ background:var(--ember); border-color:var(--ember); color:var(--chalk); }
.choice .sub{ display:block; font-size:14px; color:var(--fg-soft); margin-top:3px; font-weight:500; }
.choice .lbl{ display:block; }

.fm-err{ font-size:15px; color:#c02000; min-height:22px; margin:0; }

/* review */
.review{ width:100%; max-width:760px; display:grid; gap:0;
  background:var(--limestone); border-radius:var(--r-card); padding:clamp(20px,2.6vw,32px); }
.review dl{ margin:0; display:grid; gap:0; }
.review .row{ display:grid; grid-template-columns:1fr; gap:2px;
  padding:13px 0; border-top:1.5px dotted var(--hair); }
.review .row:first-child{ border-top:0; }
@media (min-width:640px){ .review .row{ grid-template-columns:200px 1fr; gap:16px; align-items:baseline; } }
.review dt{ font-size:14px; color:var(--fg-soft); }
.review dd{ margin:0; font-size:16px; }

/* footer controls */
.fm-nav{ display:flex; align-items:center; gap:12px; justify-content:space-between;
  padding:16px var(--pad) clamp(18px,3vw,28px); }
.fm-nav .left{ display:flex; gap:10px; align-items:center; }
.fm-key{ font-size:13px; color:var(--fg-soft); }
@media (max-width:640px){ .fm-key{ display:none; } }

.fm-done{ display:grid; place-items:center; text-align:center; gap:22px; padding:var(--pad); }
.fm-done img{ width:120px; animation:loadSpin 1.5s cubic-bezier(.62,0,.3,1) infinite;
  transform-origin:55% 45%; }

/* ===========================================================
   FAQ
   =========================================================== */

.faq-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:820px){ .faq-grid{ grid-template-columns:repeat(2,1fr); } }
.faq{ background:var(--limestone); border-radius:var(--r-card);
  padding:clamp(24px,2.8vw,36px); display:grid; gap:10px; align-content:start; }
.faq h3{ font-family:"Anton",sans-serif; text-transform:uppercase; letter-spacing:.02em;
  margin:0; font-size:clamp(19px,1.9vw,24px); line-height:1.05; }
.faq p{ margin:0; font-size:16px; line-height:1.55; color:var(--fg-soft); }

/* phone / WhatsApp icons inside pills */
.pill svg[viewBox="0 0 24 24"]{ width:17px; height:17px; }