/* ============================================================
   FIKA CREATIVE® · Pause. Create. Fika.
   ============================================================ */
:root{
  /* Fika Creative brand guidelines 2026 */
  --paper:      #FDF8FA;  /* tertiary */
  --ink:        #394659;  /* primary slate */
  --ink-dim:    #6E7A8C;
  --ink-faint:  #9CA6B4;
  --frost:      #F2ECEF;
  --frost-deep: #C5CDD9;
  --line:       #E4E1E5;
  --red:        #ED2524;  /* secondary */
  --blue:       #394659;
  --g-red:      linear-gradient(160deg, #FF6A57 0%, #ED2524 55%, #C0161C 100%);
  --g-blue:     linear-gradient(160deg, #5C7395 0%, #394659 55%, #222C3B 100%);
  --g-mix:      linear-gradient(160deg, #FF6A57 0%, #ED2524 35%, #76304E 68%, #394659 100%);
  --font-d:     "Familjen Grotesk", sans-serif;
  --font-m:     "Fragment Mono", monospace;
  --pad:        clamp(20px, 4vw, 56px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ background:var(--paper); }
body{
  font-family:var(--font-d);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{ background:var(--red); color:#fff; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; background:none; border:none; color:inherit; cursor:pointer; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--paper); }
::-webkit-scrollbar-thumb{ background:var(--frost-deep); border:3px solid var(--paper); border-radius:99px; }

/* ---------- webgl canvas (dot wave, hero only) ---------- */
#gl{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.gl-fallback #gl{ display:none; }
.gl-fallback .hero{
  background-image:radial-gradient(var(--frost-deep) 1px, transparent 1.5px);
  background-size:20px 20px;
  background-position:center 60%;
}

/* ---------- cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:300; pointer-events:none;
  width:10px; height:10px; border-radius:50%;
  background:var(--red);
  transform:translate(-50%,-50%);
  transition:width .35s cubic-bezier(.25,1,.3,1), height .35s cubic-bezier(.25,1,.3,1), background .35s, border .35s;
}
.cursor.is-hover{ width:54px; height:54px; background:rgba(237,36,36,.08); border:1.5px solid var(--red); }
@media (pointer:coarse){ .cursor{ display:none; } }

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; z-index:400;
  background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:var(--pad);
}
.loader-top{ display:flex; justify-content:space-between; font-family:var(--font-m); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.loader-num{
  font-family:var(--font-d); font-weight:700;
  font-size:clamp(80px, 22vw, 280px);
  line-height:.82; letter-spacing:-.04em;
  align-self:flex-end;
}
.loader-num sup{ font-size:.25em; vertical-align:super; letter-spacing:0; color:var(--red); }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad);
  opacity:0;
  transition:background .35s, box-shadow .35s;
}
.nav.scrolled{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
}
.nav-logo img{ height:28px; width:auto; display:block; }
.nav-links{
  position:absolute; left:50%; transform:translateX(-50%);
  display:flex; gap:clamp(22px,3vw,44px);
}
.nl{
  font-size:13.5px; font-weight:600; letter-spacing:.01em;
  position:relative; padding:4px 0;
  transition:color .3s;
}
.nl::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--red); transform:scaleX(0); transform-origin:right;
  transition:transform .4s cubic-bezier(.25,1,.3,1);
}
.nl:hover{ color:var(--red); }
.nl:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-clock{ font-family:var(--font-m); font-size:11px; letter-spacing:.08em; color:var(--ink-faint); text-transform:uppercase; }
.pill{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:#fff;
  border-radius:99px; padding:11px 20px;
  font-size:13px; font-weight:600; letter-spacing:.01em;
  transition:background .35s, transform .35s cubic-bezier(.25,1,.3,1);
}
.pill:hover{ background:var(--red); transform:translateY(-2px); }
.menu-btn{
  font-family:var(--font-m); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  display:none; align-items:center; gap:8px;
}
@media (max-width:980px){
  .nav-links, .nav-clock{ display:none; }
  .menu-btn{ display:flex; }
}
@media (max-width:560px){ .pill{ display:none; } }

/* ---------- menu overlay ---------- */
.menu{
  position:fixed; inset:0; z-index:250;
  background:var(--ink); color:#fff;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(var(--pad) + 40px) var(--pad) var(--pad);
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
}
.menu-close{
  position:absolute; top:24px; right:var(--pad);
  font-family:var(--font-m); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.menu-list a{
  display:block; font-weight:700; text-transform:uppercase;
  font-size:clamp(44px, 11vw, 110px); line-height:1.02; letter-spacing:-.03em;
  transition:color .3s, transform .4s cubic-bezier(.25,1,.3,1);
}
.menu-list a:hover{ color:var(--red); transform:translateX(12px); }
.menu-list .idx{ font-family:var(--font-m); font-size:.18em; vertical-align:super; letter-spacing:0; color:var(--red); margin-right:.6em; }
.menu-foot{ display:flex; justify-content:space-between; font-family:var(--font-m); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.5); }

/* ---------- shared section bits ---------- */
.section{ position:relative; z-index:2; padding:0 var(--pad); }
.sec-head{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--line);
  padding:18px 0 0;
  font-family:var(--font-m); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
}
.sec-head .lbl{ color:var(--red); }
.sec-head .hint{ color:var(--ink-faint); }

/* ---------- hero ---------- */
.hero{
  position:relative; z-index:2;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) clamp(24px,4vh,48px);
  background:var(--paper);
  overflow:hidden;
}
.hero > *{ position:relative; z-index:1; }
.hero-meta{
  position:absolute; top:clamp(86px,13vh,130px); left:var(--pad);
  display:flex; gap:clamp(28px,5vw,72px); flex-wrap:wrap;
  font-family:var(--font-m); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); line-height:1.7;
}
.hero-meta .col{ display:block; }
.hero-meta .sub{ color:var(--ink-faint); display:block; }
.hero-side{
  position:absolute; top:50%; right:14px; z-index:1;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  font-family:var(--font-m); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint);
  white-space:nowrap;
}
@media (max-width:700px){ .hero-side{ display:none; } }

.hero-title{ --hsize:clamp(60px, 14.5vw, 238px); }
.hl{
  overflow:hidden; display:block;
}
.hl-inner{
  display:flex; align-items:baseline; gap:clamp(14px,2.4vw,46px);
  transform:translateY(112%); will-change:transform;
}
.ht{
  font-weight:700; text-transform:uppercase;
  font-size:var(--hsize); line-height:.92; letter-spacing:-.045em;
  white-space:nowrap;
}
/* mark & blocks share the exact cap-height box of the letters:
   bottoms on the baseline, tops level with the caps */
.hmark{
  font-size:var(--hsize);
  height:.73em; width:auto;
  margin-left:clamp(6px,1vw,20px);
}
.hblock{
  font-size:var(--hsize);
  width:.73em; height:.73em;
  flex:none;
  transform-origin:bottom;
  background-size:170% 170%; background-position:0% 100%;
  animation:blockshift 7s ease-in-out infinite alternate;
}
@supports (height:1cap){
  .hmark{ height:1cap; }
  .hblock{ width:1cap; height:1cap; }
}
.hb-red{ background-image:var(--g-red); }
.hb-blue{ background-image:var(--g-mix); animation-delay:-3s; }
.hb-ink{ background:var(--ink); animation:none; }
@keyframes blockshift{
  from{ background-position:0% 100%; }
  to{ background-position:100% 0%; }
}

.hero-foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:18px;
  margin-top:clamp(28px,5vh,64px);
  font-family:var(--font-m); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint);
  opacity:0;
}
.hero-foot .tag b{ color:var(--ink); font-weight:400; }
.scroll-cue{ display:flex; align-items:center; gap:12px; color:var(--ink); }
.scroll-cue .sq{ width:9px; height:9px; background:var(--blue); display:inline-block; }
.scroll-cue .arr{ display:inline-block; animation:nudge 1.8s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

/* ---------- marquee ---------- */
.marquee{
  position:relative; z-index:2;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:#FBFCFD;
  padding:clamp(14px,2vw,26px) 0;
  overflow:hidden; white-space:nowrap;
}
.marquee-track{ display:inline-flex; align-items:center; will-change:transform; }
.marquee span{
  font-weight:700; text-transform:uppercase;
  font-size:clamp(34px, 6vw, 86px); line-height:1; letter-spacing:-.03em;
  padding-right:.45em;
}
.marquee .o{ color:var(--frost-deep); }
.marquee .a{
  font-size:clamp(34px, 6vw, 86px);
  height:.5em; width:auto; flex:none;
  margin-right:.45em; padding:0;
  transform:translateY(.04em);
}

/* ---------- ritual / manifesto ---------- */
#ritual{ padding-top:clamp(80px,14vh,160px); padding-bottom:clamp(80px,14vh,160px); }
.ritual-grid{ display:grid; grid-template-columns:1fr; gap:clamp(36px,6vh,72px); padding-top:clamp(40px,8vh,90px); }
.ritual-def{
  font-family:var(--font-m); font-size:clamp(13px,1.2vw,16px);
  color:var(--ink-dim); letter-spacing:.02em; max-width:560px; line-height:1.7;
  border-left:3px solid var(--red); padding-left:22px;
}
.ritual-def em{ color:var(--red); font-style:italic; }
.manifesto{
  font-weight:500;
  font-size:clamp(28px, 4.6vw, 72px);
  line-height:1.08; letter-spacing:-.025em;
  max-width:18em;
}
.manifesto .dim{ color:var(--frost-deep); }
.manifesto .hot{ color:var(--red); font-style:italic; }
.manifesto .line{ overflow:hidden; display:block; }
.manifesto .line-in{ display:block; transform:translateY(110%); }

/* ---------- services ---------- */
#services{ padding-bottom:clamp(60px,10vh,120px); }
.svc-rows{ margin-top:clamp(36px,7vh,80px); border-bottom:1px solid var(--line); }
.svc{
  position:relative; display:grid;
  grid-template-columns:minmax(60px,.15fr) 1.1fr 1fr minmax(50px,.1fr);
  align-items:center; gap:clamp(14px,2vw,40px);
  border-top:1px solid var(--line);
  padding:clamp(26px,4.5vh,52px) clamp(8px,1vw,18px);
  overflow:hidden; cursor:pointer;
}
.svc::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--ink);
  transform:translateY(101%);
  transition:transform .5s cubic-bezier(.65,0,.35,1);
}
.svc:hover::before{ transform:translateY(0); }
.svc > *{ position:relative; z-index:1; transition:color .4s; }
.svc-idx{ font-family:var(--font-m); font-size:clamp(12px,1.1vw,15px); color:var(--red); }
.svc-name{
  font-weight:700; text-transform:uppercase;
  font-size:clamp(26px, 4vw, 60px); line-height:.95; letter-spacing:-.03em;
}
.svc-desc{ font-size:clamp(14px,1.25vw,17px); line-height:1.5; color:var(--ink-dim); max-width:46ch; }
.svc-arrow{
  font-size:clamp(24px,2.6vw,40px); justify-self:end;
  transform:translate(-10px,10px); opacity:.35;
  transition:transform .45s cubic-bezier(.25,1,.3,1), opacity .45s, color .4s;
}
.svc:hover > *{ color:#fff; }
.svc:hover .svc-idx{ color:var(--red); }
.svc:hover .svc-desc{ color:rgba(255,255,255,.62); }
.svc:hover .svc-arrow{ transform:translate(0,0); opacity:1; color:var(--red); }
@media (max-width:820px){
  .svc{ grid-template-columns:minmax(44px,.2fr) 1fr minmax(36px,.12fr); }
  .svc-desc{ grid-column:2 / 4; grid-row:2; }
  .svc-arrow{ grid-column:3; grid-row:1; }
}

/* ---------- stats ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line); border-left:none; border-right:none;
  margin-top:clamp(70px,12vh,150px);
}
.stat{
  padding:clamp(28px,4.5vh,56px) clamp(10px,1.5vw,28px);
  border-left:1px solid var(--line);
  transition:background .4s;
}
.stat:hover{ background:var(--frost); }
.stat:first-child{ border-left:none; }
.stat-num{
  font-weight:700; letter-spacing:-.04em; line-height:1;
  font-size:clamp(40px, 6.5vw, 110px);
}
.stat-num .plus{ color:var(--red); font-size:.6em; vertical-align:.35em; }
.stat-num .den{ color:var(--red); font-size:.38em; font-weight:700; letter-spacing:-.02em; }
.stats-note{
  font-family:var(--font-m); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); padding-top:16px; text-align:right;
}
.stats-note .ast-red{ color:var(--red); }
.stat-lbl{
  font-family:var(--font-m); font-size:12px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-dim); margin-top:14px;
}
@media (max-width:820px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-left:none; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); }
}

/* ---------- works ---------- */
#works{ padding-top:clamp(80px,14vh,160px); }
.works{ margin-top:clamp(36px,7vh,80px); border-bottom:1px solid var(--line); }
.work{ border-top:1px solid var(--line); }
.work-head{
  width:100%; display:flex; align-items:baseline; gap:clamp(16px,3vw,48px);
  padding:clamp(20px,3.2vh,38px) clamp(8px,1vw,18px);
  text-align:left; cursor:pointer;
}
.work-idx{ font-family:var(--font-m); font-size:clamp(12px,1.1vw,15px); color:var(--red); }
/* logo sits right of the name, sized to its exact cap height,
   and shifts along with the name on hover/open */
.work-logo{
  font-size:clamp(30px, 5.8vw, 92px);
  height:.73em; width:auto; flex:none;
  transition:transform .45s cubic-bezier(.25,1,.3,1);
}
@supports (height:1cap){ .work-logo{ height:1cap; } }
.work-head:hover .work-logo, .work.open .work-logo{ transform:translateX(10px); }
.work-name{
  font-weight:700; text-transform:uppercase; line-height:.95; letter-spacing:-.035em;
  font-size:clamp(30px, 5.8vw, 92px);
  color:var(--frost-deep);
  transition:color .45s, transform .45s cubic-bezier(.25,1,.3,1);
}
.work-head:hover .work-name, .work.open .work-name{ color:var(--ink); transform:translateX(10px); }
.work-tag{
  margin-left:auto; text-align:right;
  font-family:var(--font-m); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); transition:color .45s;
}
.work-head:hover .work-tag, .work.open .work-tag{ color:var(--red); }
.work-x{
  flex:none; font-weight:400; line-height:1;
  font-size:clamp(24px,2.6vw,40px); color:var(--ink-faint);
  transition:transform .45s cubic-bezier(.25,1,.3,1), color .45s;
}
.work.open .work-x{ transform:rotate(45deg); color:var(--red); }
.work-panel{ height:0; overflow:hidden; }
.work-body{
  display:grid; grid-template-columns:minmax(260px,.9fr) 1.8fr;
  gap:clamp(20px,3vw,56px);
  padding:6px clamp(8px,1vw,18px) clamp(28px,4.5vh,52px);
}
.work-desc{ font-size:clamp(14px,1.2vw,17px); line-height:1.6; color:var(--ink-dim); max-width:44ch; }
.work-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.work-chips span{
  font-family:var(--font-m); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:99px; padding:5px 12px; color:var(--ink-dim);
}
.work-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  font-family:var(--font-m); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--red); border-bottom:1px solid currentColor; padding-bottom:3px;
  transition:color .35s;
}
.work-link:hover{ color:var(--ink); }
.work-gallery{
  display:flex; align-items:flex-start; gap:clamp(10px,1.2vw,18px);
  overflow-x:auto; padding-bottom:6px;
  scrollbar-width:thin; scrollbar-color:var(--frost-deep) transparent;
}
.work-gallery .shot{
  height:clamp(220px,34vh,380px); width:auto; flex:none;
  border-radius:12px; display:block; background:var(--frost);
}
.ph{
  width:100%; height:clamp(200px,30vh,340px);
  background:var(--frost); border:1px dashed var(--frost-deep); border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.ph .ph-mark{ width:32px; height:32px; opacity:.4; }
.ph span{ font-family:var(--font-m); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
@media (max-width:820px){
  .work-head{ flex-wrap:wrap; row-gap:10px; }
  .work-tag{ order:4; margin-left:0; flex-basis:100%; text-align:left; }
  .work-x{ margin-left:auto; }
  .work-body{ grid-template-columns:1fr; }
  .work-gallery{ flex-direction:column; overflow:visible; }
  .work-gallery .shot{ height:auto; width:100%; }
  .ph{ height:clamp(180px,26vh,260px); }
}

/* ---------- engage ---------- */
#engage{ padding-top:clamp(80px,14vh,160px); padding-bottom:clamp(80px,14vh,160px); }
.cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,24px);
  margin-top:clamp(36px,7vh,80px);
}
.card{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:18px;
  padding:clamp(24px,2.6vw,40px);
  min-height:clamp(360px, 46vh, 520px);
  background:var(--paper);
  transition:transform .5s cubic-bezier(.25,1,.3,1), border-color .4s, box-shadow .5s;
}
.card:hover{ transform:translateY(-10px); border-color:var(--frost-deep); box-shadow:0 30px 70px rgba(57,70,89,.13); }
.card--hot{
  background:var(--ink); color:#fff; border-color:var(--ink);
}
.card-top{ display:flex; justify-content:space-between; align-items:center; font-family:var(--font-m); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.card--hot .card-top{ color:rgba(255,255,255,.55); }
.chip{
  border:1px solid var(--red); color:var(--red);
  border-radius:99px; padding:4px 12px;
}
.card-name{
  font-weight:700; text-transform:uppercase; letter-spacing:-.03em;
  font-size:clamp(30px,3vw,46px); line-height:.95;
  margin-top:clamp(20px,3vh,36px);
}
.card-desc{ margin-top:18px; font-size:15px; line-height:1.55; color:var(--ink-dim); max-width:34ch; }
.card--hot .card-desc{ color:rgba(255,255,255,.62); }
.card-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:28px; }
.card-tags span{
  font-family:var(--font-m); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:99px; padding:5px 12px; color:var(--ink-dim);
}
.card--hot .card-tags span{ border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.6); }
.card-cta{
  margin-top:22px; display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--frost-deep); border-radius:99px;
  padding:14px 22px;
  font-family:var(--font-m); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  transition:background .4s, color .4s, border-color .4s;
}
.card-cta:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.card--hot .card-cta{ background:#fff; color:var(--ink); border-color:#fff; }
.card--hot .card-cta:hover{ background:var(--red); border-color:var(--red); color:#fff; }
@media (max-width:900px){ .cards{ grid-template-columns:1fr; } .card{ min-height:0; } }

/* ---------- contact ---------- */
#contact{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  padding-top:clamp(60px,10vh,120px);
}
.contact-mid{ padding:clamp(50px,9vh,100px) 0 clamp(40px,7vh,80px); }
.giant{
  display:block; font-weight:700; text-transform:uppercase;
  font-size:clamp(56px, 14.5vw, 235px);
  line-height:.9; letter-spacing:-.045em;
}
.giant .row{ display:block; overflow:hidden; }
.giant .row-in{ display:block; transform:translateY(112%); }
.giant:hover .arr{ transform:translate(.06em,-.06em); }
.giant .arr{ display:inline-block; color:var(--red); transition:transform .4s cubic-bezier(.25,1,.3,1); }
.giant .it{ font-style:italic; font-weight:500; color:var(--red); }
.contact-meta{
  display:grid; grid-template-columns:repeat(3,auto); justify-content:space-between; gap:20px;
  font-family:var(--font-m); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-dim);
  padding-bottom:clamp(30px,5vh,60px);
}
.contact-meta a{ color:var(--ink); position:relative; }
.contact-meta a::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:var(--red); transform:scaleX(0); transform-origin:right;
  transition:transform .4s cubic-bezier(.25,1,.3,1);
}
.contact-meta a:hover::after{ transform:scaleX(1); transform-origin:left; }
.contact-meta .col{ display:flex; flex-direction:column; gap:10px; }
.contact-meta .k{ color:var(--ink-faint); margin-bottom:4px; }
@media (max-width:700px){ .contact-meta{ grid-template-columns:1fr 1fr; } }

.footer{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding:20px 0 8px;
  font-family:var(--font-m); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint);
}
.footer .mark{ color:var(--red); }
#toTop:hover{ color:var(--ink); }

/* ---------- footer giant logo ---------- */
.footer-logo{
  position:relative; z-index:2;
  overflow:hidden;
  padding-top:clamp(28px,5vh,64px);
  background:var(--paper);
  line-height:0;
}
.footer-logo img{
  display:block; width:100%; height:auto;
  transform:translateY(103%); will-change:transform;
}

/* ---------- custom arrow (Arrowe) ---------- */
.arrow{ display:block; height:1em; width:auto; }
.giant .arr .arrow{ display:inline-block; vertical-align:baseline; height:.73em; }
@supports (height:1cap){ .giant .arr .arrow{ height:1cap; } }
.svc-arrow .arrow{ height:1em; }
.cta-arr .arrow{ height:.95em; }
.scroll-cue .arr{ display:inline-block; }
.scroll-cue .arr .arrow{ height:1.1em; transform:rotate(135deg); }
#toTop .top-arr{ display:inline-block; vertical-align:middle; }
#toTop .top-arr .arrow{ height:.95em; transform:rotate(-45deg); }

/* ---------- reveal helpers ---------- */
.fade-y{ opacity:0; transform:translateY(40px); }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---------- multi-page additions ---------- */
.nl.active{ color:var(--red); }
.nl.active::after{ transform:scaleX(1); transform-origin:left; }