/* ==========================================================================
   ZEST — Creative Digital Studio
   Design tokens: ink (bg dark) · paper (bg light) · coral (signal accent)
   lime (pop accent) · cobalt (digital accent) · muted (secondary text)
   Display: Space Grotesk · Body: Plus Jakarta Sans · Mono: JetBrains Mono
   ========================================================================== */

:root{
  --ink:        #12140F;
  --ink-soft:   #1B1E17;
  --ink-line:   rgba(243,245,238,0.10);
  --paper:      #F2F5EC;
  --paper-dim:  #E7EBDD;
  --coral:      #FF4B33;
  --coral-dim:  #D93A24;
  --lime:       #D4FF5C;
  --amber:      #FFB627;
  --amber-dim:  #96650A;
  --cobalt:     #2A2DFF;
  --muted:      #767B6E;
  --muted-lt:   #A7ACA0;
  --white:      #FCFDF9;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --container: 1320px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.16,.84,.32,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* overflow-x:hidden is set on BOTH html and body (belt-and-suspenders): on some
   mobile browsers body's overflow-x does not reliably propagate to the viewport,
   which is the most common cause of a page that can be dragged sideways on phones
   even though nothing visibly sticks out. max-width:100% stops any stray element
   (long unbroken word, wide fixed bar, decorative oversized text) from ever
   pushing the document wider than the screen. */
html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  max-width:100%;
}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
  overscroll-behavior-x:none;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,h5{ font-family:var(--font-display); margin:0; line-height:1.05; letter-spacing:-0.01em; }
p{ margin:0; }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

::selection{ background:var(--coral); color:var(--white); }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--cobalt);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- Type helpers ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--coral);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--coral);
  display:inline-block;
}
.eyebrow.on-dark{ color:var(--lime); }
.eyebrow.on-dark::before{ background:var(--lime); }

.section-tag{ color:var(--muted); font-size:15px; margin-top:14px; max-width:520px; }
.section-head{ margin-bottom:56px; }
.section-head.center{ text-align:center; margin-inline:auto; }
.section-head .section-tag.center{ margin-inline:auto; }

.h-xl{ font-size:clamp(2.6rem, 6vw, 5.2rem); font-weight:600; }
.h-lg{ font-size:clamp(2.1rem, 4.2vw, 3.4rem); font-weight:600; }
.h-md{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); font-weight:600; }
.h-sm{ font-size:1.3rem; font-weight:600; }

.text-coral{ color:var(--coral); }
.text-cobalt{ color:var(--cobalt); }
.text-muted{ color:var(--muted); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  padding:16px 30px; border-radius:100px; border:1px solid transparent;
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); }
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ background:var(--coral); color:var(--white); }
.btn-coral{ background:var(--coral); color:var(--white); }
.btn-coral:hover{ background:var(--ink); }
.btn-outline{ border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-outline.on-dark{ border-color:rgba(243,245,238,0.35); color:var(--paper); }
.btn-outline.on-dark:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn-ghost-lime{ background:transparent; border-color:var(--lime); color:var(--lime); }
.btn-ghost-lime:hover{ background:var(--lime); color:var(--ink); }
.btn svg, .btn i{ transition:transform .35s var(--ease); }
.btn:hover svg, .btn:hover i{ transform:translateX(4px); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:1000;
  padding:22px 0;
  border-bottom:1px solid rgba(18,20,15,0.10);
  transition:padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-header.is-scrolled{
  padding:14px 0;
  background:rgba(242,245,236,0.86);
  backdrop-filter:blur(14px);
  border-bottom-color:rgba(18,20,15,0.12);
}

.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-0.01em; }
/* two logos stacked in one grid cell: white over the dark hero, black once the header is sticky */
.brand-logos{ display:grid; align-items:center; }
.brand-logos img{ grid-area:1/1; width:200px; height:auto; transition:opacity .35s ease; }
.brand-logos .logo-light{ opacity:0; }
.site-header.header-on-dark:not(.is-scrolled){ border-bottom-color:rgba(243,245,238,0.16); }
.site-header.header-on-dark:not(.is-scrolled) .logo-light{ opacity:1; }
.site-header.header-on-dark:not(.is-scrolled) .logo-dark{ opacity:0; }
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--coral); display:inline-block; }

.main-nav{ display:flex; align-items:center; gap:4px; }
.main-nav > ul{ display:flex; align-items:center; gap:2px; }
.nav-link{
  position:relative;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  padding:12px 18px; display:inline-flex; align-items:center; gap:6px;
  transition:color .3s ease;
}
.nav-link::after{
  content:""; position:absolute; left:18px; right:18px; bottom:6px; height:2px;
  background:var(--coral); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav-link:hover, .nav-link.active{ color:var(--coral); }
.nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); }
.nav-item{ position:relative; }
.nav-item.has-sub .nav-link i{ font-size:11px; transition:transform .3s var(--ease); }
.nav-item.has-sub:hover .nav-link i, .nav-item.has-sub.open .nav-link i{ transform:rotate(180deg); }

.header-cta{ display:flex; align-items:center; gap:14px; }
.burger{
  width:52px; height:52px; border-radius:50%; border:1px solid var(--ink);
  background:transparent; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:5px; flex-shrink:0;
  transition:border-color .3s ease;
}
.burger span{ width:20px; height:2px; background:var(--ink); border-radius:2px; transition:background .3s ease, transform .3s var(--ease), opacity .3s var(--ease); }

/* Header sitting over a dark hero (e.g. the home page) needs light text until
   the page scrolls and the header gets its own solid background. Without this
   the menu visually disappears into the dark banner behind it. */
.site-header.header-on-dark:not(.is-scrolled) .brand{ color:var(--paper); }
.site-header.header-on-dark:not(.is-scrolled) .nav-link{ color:var(--paper); }
.site-header.header-on-dark:not(.is-scrolled) .nav-link::after{ background:var(--lime); }
.site-header.header-on-dark:not(.is-scrolled) .nav-link:hover,
.site-header.header-on-dark:not(.is-scrolled) .nav-link.active{ color:var(--lime); }
.site-header.header-on-dark:not(.is-scrolled) .burger{ border-color:rgba(243,245,238,0.4); }
.site-header.header-on-dark:not(.is-scrolled) .burger span{ background:var(--paper); }
.site-header.header-on-dark:not(.is-scrolled) .btn-outline{ border-color:rgba(243,245,238,0.4); color:var(--paper); }
.site-header.header-on-dark:not(.is-scrolled) .btn-outline:hover{ background:var(--paper); color:var(--ink); }

/* ---------- Creative "Start a project" CTA — pill + circular icon badge ---------- */
.cta-pill{ padding-right:8px !important; gap:14px; }
.cta-pill-icon{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:var(--ink); color:var(--paper);
  display:inline-flex; align-items:center; justify-content:center; font-size:13px;
  transition:transform .4s var(--ease), background .3s ease, color .3s ease;
}
.cta-pill:hover .cta-pill-icon{ transform:rotate(45deg); background:var(--coral); color:var(--white); }
.cta-pill.btn-coral .cta-pill-icon{ background:rgba(243,245,238,0.22); color:var(--white); }
.cta-pill.btn-coral:hover .cta-pill-icon{ background:var(--white); color:var(--coral); }
.btn.cta-pill:hover i{ transform:none; }
.site-header.header-on-dark:not(.is-scrolled) .cta-pill-icon{ background:var(--paper); color:var(--ink); }
.site-header.header-on-dark:not(.is-scrolled) .cta-pill:hover .cta-pill-icon{ background:var(--coral); color:var(--white); }

/* ---------- Creative submenu box (About) — professional vertical dropdown ---------- */
.submenu-box{
  position:absolute; top:calc(100% + 16px); left:0; transform:translateY(8px);
  width:300px;
  background:var(--ink); border-radius:var(--radius-md);
  padding:10px; display:flex; flex-direction:column; gap:4px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  box-shadow:0 30px 60px -20px rgba(18,20,15,0.5);
}
.submenu-box::before{
  content:""; position:absolute; top:-6px; left:28px; width:12px; height:12px;
  background:var(--ink); transform:rotate(45deg); border-radius:2px;
}
.nav-item.has-sub:hover .submenu-box,
.nav-item.has-sub:focus-within .submenu-box,
.nav-item.has-sub.open .submenu-box{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
.submenu-eyebrow{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-lt); padding:10px 12px 6px;
}
.submenu-tile{
  background:transparent; border-radius:10px; padding:12px;
  display:flex; flex-direction:row; align-items:center; gap:14px;
  border-left:3px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), padding-left .3s var(--ease);
}
.submenu-tile:nth-child(2){ --tile-accent:var(--coral); }
.submenu-tile:nth-child(3){ --tile-accent:var(--lime); }
.submenu-tile:nth-child(4){ --tile-accent:var(--cobalt); }
.submenu-tile:hover{ background:var(--ink-soft); border-left-color:var(--tile-accent, var(--coral)); padding-left:16px; }
.submenu-tile .tile-icon-sm{
  width:38px; height:38px; border-radius:10px; background:var(--ink-soft); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
}
.submenu-tile:hover .tile-icon-sm{ background:var(--tile-accent, var(--coral)); color:var(--ink); }
.submenu-tile i{ font-size:16px; }
.submenu-tile .t-title{ font-family:var(--font-display); font-size:15px; color:var(--paper); font-weight:600; }
.submenu-tile .t-desc{ font-family:var(--font-body); font-size:12px; color:var(--muted-lt); line-height:1.4; margin-top:2px; }

/* ==========================================================================
   OFFCANVAS DRAWER (right side) — creative menu panel
   Bootstrap offcanvas, restyled: colour glows + dot grid + outlined "360" word,
   numbered links each with their own accent-colour badge (coral/lime/cobalt,
   cycling — echoes the palette used across the mega-menu and service cards),
   a soft tinted highlight that sweeps in behind the row on hover, icon-tile
   submenus, and a contact block in the foot. Sized and spaced for a tighter,
   more considered desktop read — smaller type, even rhythm.
   ========================================================================== */
.offcanvas.drawer{
  width:min(420px, 92vw);
  color:var(--paper);
  border-left:1px solid var(--ink-line);
  background:
    radial-gradient(420px 360px at 108% -6%, rgba(255,75,51,.28), transparent 62%),
    radial-gradient(380px 320px at -12% 104%, rgba(42,45,255,.28), transparent 62%),
    var(--ink);
  overflow:hidden;
}
.drawer::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(243,245,238,.10) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%); mask-image:linear-gradient(180deg,#000,transparent 72%);
}
.drawer-word{
  position:absolute; right:-18px; bottom:112px; z-index:0; pointer-events:none; user-select:none;
  font-family:var(--font-display); font-weight:700; font-size:220px; line-height:.8; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px rgba(243,245,238,.07);
}
.drawer > .offcanvas-header, .drawer > .offcanvas-body{ position:relative; z-index:1; }

.drawer .offcanvas-header{ padding:22px 26px 0; justify-content:space-between; align-items:center; }
.drawer-head-right{ display:flex; align-items:center; gap:12px; }
.drawer-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-lt); }
.drawer-close{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(243,245,238,.22);
  background:transparent; color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:14px;
  transition:transform .45s var(--ease), background .3s ease, border-color .3s ease;
}
.drawer-close:hover{ background:var(--coral); border-color:var(--coral); transform:rotate(90deg); }

.drawer .offcanvas-body{ padding:4px 26px 24px; display:flex; flex-direction:column; }

/* ---- primary links ---- */
.drawer-nav{ margin-top:10px; }
/* accent rotates coral → lime → cobalt → repeat, matching the site's palette */
.drawer-nav > li{ --acc:var(--coral); --acc-ink:var(--white); }
.drawer-nav > li:nth-child(3n+2){ --acc:var(--lime); --acc-ink:var(--ink); }
.drawer-nav > li:nth-child(3n+3){ --acc:var(--cobalt); --acc-ink:var(--white); }
.drawer-nav > li{
  position:relative; border-bottom:1px solid var(--ink-line);
  opacity:0; transform:translateY(18px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.offcanvas.show .drawer-nav > li{ opacity:1; transform:none; }
.offcanvas.show .drawer-nav > li:nth-child(1){ transition-delay:.08s; }
.offcanvas.show .drawer-nav > li:nth-child(2){ transition-delay:.13s; }
.offcanvas.show .drawer-nav > li:nth-child(3){ transition-delay:.18s; }
.offcanvas.show .drawer-nav > li:nth-child(4){ transition-delay:.23s; }
.offcanvas.show .drawer-nav > li:nth-child(5){ transition-delay:.28s; }
.offcanvas.show .drawer-nav > li:nth-child(6){ transition-delay:.33s; }

.drawer-link{
  position:relative; z-index:1;
  display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:14px;
  padding:12px 6px; font-family:var(--font-display); font-size:21px; font-weight:600; letter-spacing:-.005em; line-height:1.15;
}
/* soft colour-tinted wash that sweeps in behind the row — ties each link to its accent */
.drawer-link::before{
  content:""; position:absolute; z-index:-1; inset:2px -10px;
  border-radius:12px; background:color-mix(in srgb, var(--acc) 13%, transparent);
  opacity:0; transform:scaleX(.94); transform-origin:left center;
  transition:opacity .35s var(--ease), transform .4s var(--ease);
}
.drawer-link:hover::before, .drawer-link.active::before{ opacity:1; transform:scaleX(1); }
.dl-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  font-family:var(--font-mono); font-size:10px; font-weight:500; color:var(--muted-lt);
  border:1px solid rgba(243,245,238,.18); background:transparent;
  transition:background .35s var(--ease), color .3s ease, border-color .3s ease, transform .4s var(--ease);
}
.drawer-link:hover .dl-num, .drawer-link.active .dl-num{ background:var(--acc); border-color:var(--acc); color:var(--acc-ink); transform:scale(1.08); }
.dl-text{ display:inline-block; transition:transform .4s var(--ease), color .3s ease; }
.dl-arrow, .dl-toggle{ font-size:14px; color:var(--muted-lt); transition:transform .4s var(--ease), color .3s ease, opacity .3s ease; }
.dl-arrow{ opacity:0; transform:translateX(-10px); }
.drawer-link:hover .dl-text{ transform:translateX(7px); }
.drawer-link:hover .dl-arrow{ opacity:1; transform:none; color:var(--acc); }
.drawer-link:hover .dl-toggle{ color:var(--acc); }
.drawer-link.active .dl-text{ color:var(--acc); }
.drawer-link.active .dl-toggle{ transform:rotate(45deg); color:var(--acc); }
.drawer-link.active:not([data-accordion]) .dl-arrow{ opacity:1; transform:none; color:var(--acc); }

/* ---- submenus (smooth auto-height accordion) ---- */
.drawer-sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.drawer-sub.open{ grid-template-rows:1fr; }
.drawer-sub-inner{ overflow:hidden; min-height:0; }
.ds-list{ display:flex; flex-direction:column; gap:3px; padding:2px 0 14px 30px; }
.ds-list a{
  --acc:var(--coral);
  display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:11px;
  border-left:2px solid transparent;
  transition:background .3s ease, border-color .3s ease, transform .35s var(--ease);
}
.ds-list a:nth-child(2){ --acc:var(--lime); }
.ds-list a:nth-child(3){ --acc:var(--cobalt); }
.ds-list a:hover{ background:rgba(243,245,238,.06); transform:translateX(4px); border-left-color:var(--acc); }
.ds-list a.current{ background:rgba(212,255,92,.07); border-left-color:var(--lime); }
.ds-icon{
  width:34px; height:34px; border-radius:10px; flex-shrink:0; font-size:14.5px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(243,245,238,.07); color:var(--paper);
  transition:background .3s ease, color .3s ease;
}
.ds-list a:hover .ds-icon{ background:var(--acc); color:var(--ink); }
.ds-copy{ display:flex; flex-direction:column; min-width:0; }
.ds-copy b{ font-family:var(--font-display); font-size:13.5px; font-weight:600; color:var(--paper); }
.ds-copy em{ font-style:normal; font-size:11px; line-height:1.4; color:var(--muted-lt); margin-top:1px; }
.ds-badge{
  margin-left:auto; flex-shrink:0; font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--lime); color:var(--ink); padding:3px 8px; border-radius:100px;
}

/* ---- foot: contact + CTA + socials ---- */
.drawer-foot{
  margin-top:auto; padding-top:20px;
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease) .45s, transform .6s var(--ease) .45s;
}
.offcanvas.show .drawer-foot{ opacity:1; transform:none; }
.drawer-contact{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.drawer-kicker{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-lt); }
.drawer-mail{
  position:relative; width:fit-content; font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-.01em;
  transition:color .3s ease;
}
.drawer-mail::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.drawer-mail:hover{ color:var(--lime); }
.drawer-mail:hover::after{ transform:scaleX(1); }
.drawer-phone{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted-lt); display:inline-flex; align-items:center; gap:8px; width:fit-content; transition:color .3s ease; }
.drawer-phone:hover{ color:var(--paper); }
.drawer-foot .socials{ display:flex; gap:9px; margin-top:16px; }
.drawer-foot .socials a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(243,245,238,.2);
  display:flex; align-items:center; justify-content:center; font-size:14px;
  transition:background .3s ease, border-color .3s ease, transform .4s var(--ease);
}
.drawer-foot .socials a:hover{ background:var(--coral); border-color:var(--coral); transform:translateY(-3px); }

.offcanvas-backdrop.show{ opacity:.6; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
@media (max-width:420px){
  .drawer-link{ font-size:19px; grid-template-columns:27px 1fr auto; gap:12px; padding:11px 4px; }
  .drawer .offcanvas-header, .drawer .offcanvas-body{ padding-left:20px; padding-right:20px; }
  .ds-list{ padding-left:27px; }
}
@media (max-height:720px){
  .drawer-link{ padding:9px 6px; font-size:18px; }
  .drawer-word{ display:none; }
}

/* ==========================================================================
   HERO — photo background with a dark overlay, staircase headline
   ========================================================================== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh; display:flex; align-items:flex-end;
  padding:170px 0 0;
  background:var(--ink); color:var(--paper);
}
.hero > .container{ position:relative; }
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background:url("../images/hero.jpg") center 42% / cover no-repeat;   /* fallback if the video can't play */
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
}
/* dark overlay sits on top of the video so the headline stays readable */
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(18,20,15,.85) 0, rgba(18,20,15,0) 230px),
    linear-gradient(0deg, rgba(18,20,15,.94) 0, rgba(18,20,15,0) 58%),
    linear-gradient(90deg, rgba(18,20,15,.84) 0%, rgba(18,20,15,.5) 52%, rgba(18,20,15,.22) 100%);
}
@media (prefers-reduced-motion:reduce){ .hero-video{ display:none; } }
.hero h1{ margin-top:22px; color:var(--paper); }
.hero h1 .line{ display:block; animation:heroStep .9s var(--ease) both; }
.hero h1 .accent{ color:var(--coral); font-style:italic; }
/* staircase: each line steps right, echoing the table's diagonal in the photo */
.hero h1 .step-2{ padding-left:clamp(0px, 7vw, 120px); animation-delay:.12s; }
.hero h1 .step-3{ padding-left:clamp(0px, 14vw, 240px); animation-delay:.24s; }
@keyframes heroStep{ from{ opacity:0; transform:translateX(-28px); } to{ opacity:1; transform:none; } }

/* supporting copy: tagline pinned bottom-left, brief + CTAs pinned bottom-right */
.hero-foot{ display:grid; grid-template-columns:1fr minmax(0,460px); gap:40px; align-items:end; margin-top:56px; }
.hero-note{ font-size:13.5px; line-height:1.5; max-width:230px; padding-left:16px; border-left:2px solid var(--coral); color:rgba(243,245,238,.78); }
.hero .hero-sub{ font-size:1.05rem; line-height:1.6; color:rgba(243,245,238,.86); }
.hero-cta{ display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; }

.hero-tickers{ margin-top:48px; position:relative; z-index:1; }
.marquee{
  border-top:1px solid var(--ink-line); border-bottom:1px solid var(--ink-line);
  overflow:hidden; white-space:nowrap; padding:16px 0; background:rgba(18,20,15,.4); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.marquee-track{ display:inline-flex; gap:40px; animation:scrollLeft 26s linear infinite; }
.marquee-track span{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:var(--muted-lt); display:inline-flex; align-items:center; gap:40px; }
.marquee-track span i{ color:var(--coral); font-size:10px; }
@keyframes scrollLeft{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ==========================================================================
   TILES (shared signature component: submenu / services / portfolio / values)
   ========================================================================== */
.tile{
  background:var(--white); border-radius:var(--radius-md); padding:32px;
  border-top:4px solid var(--coral);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  height:100%; display:flex; flex-direction:column; gap:18px; position:relative; overflow:hidden;
}
.tile:hover{ transform:translateY(-8px); box-shadow:0 30px 50px -25px rgba(18,20,15,0.25); }
.tile-row .tile:nth-child(3n+2){ border-top-color:var(--lime); }
.tile-row .tile:nth-child(3n+3){ border-top-color:var(--cobalt); }
.tile-icon{
  width:56px; height:56px; border-radius:16px; background:var(--ink); color:var(--lime);
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.tile .tile-index{ position:absolute; top:24px; right:28px; font-family:var(--font-mono); font-size:12px; color:var(--muted-lt); }
.tile h3{ font-size:1.3rem; }
.tile p{ color:var(--muted); font-size:14.5px; line-height:1.65; }
.tile .tile-link{ margin-top:auto; font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; display:inline-flex; align-items:center; gap:8px; color:var(--ink); }
.tile .tile-link i{ transition:transform .3s ease; }
.tile:hover .tile-link i{ transform:translateX(5px); }

/* ==========================================================================
   ABOUT PREVIEW (home) — left media panel / right info + CTA
   ========================================================================== */
.about-preview{ padding:120px 0; }
.about-preview-grid{ display:grid; grid-template-columns:.9fr 1.5fr; gap:60px; align-items:start; }
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }

.about-split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
.about-media{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden;
  background-image: url('../images/hero.jpg');
}
.about-media::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(243,245,238,0.16) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse 90% 70% at 70% 20%, #000 30%, transparent 85%);
}
.about-media .monogram{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:min(28vw,220px); line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(243,245,238,0.5);
}
.about-media .chip{
  position:absolute; background:var(--white); border-radius:14px; padding:14px 18px;
  box-shadow:0 24px 50px -20px rgba(18,20,15,0.5);
}
.about-media .chip-a{ top:9%; left:8%; }
.about-media .chip-a .num{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--coral); }
.about-media .chip-a .lbl{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.about-media .chip-b{ bottom:10%; right:8%; display:flex; align-items:center; gap:10px; }
.about-media .chip-b i{ color:var(--lime); background:var(--ink); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; }
.about-media .chip-b span{ font-family:var(--font-mono); font-size:12px; color:var(--ink); }

.about-info p.section-tag{ margin-top:18px; }
.about-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.about-tags a{
  font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  padding:9px 16px; border-radius:100px; border:1px solid var(--ink-line-dark, var(--paper-dim));
  border:1px solid #DCE0D2; color:var(--ink); display:inline-flex; align-items:center; gap:8px;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.about-tags a i{ width:6px; height:6px; border-radius:50%; background:var(--coral); display:inline-block; }
.about-tags a:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.about-info .btn{ margin-top:32px; }
@media (max-width:1080px){ .about-split{ grid-template-columns:1fr; } .about-media{ max-width:420px; aspect-ratio:1/1; } }

/* ==========================================================================
   SECTIONS generic
   ========================================================================== */
.section{ padding:120px 0; }
.section.on-ink{ background:var(--ink); color:var(--paper); }
.section.on-dim{ background:var(--paper-dim); }
.tile-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

/* ==========================================================================
   PORTFOLIO
   ========================================================================== */
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:48px; }
.filter-btn{
  font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em;
  padding:11px 20px; border-radius:100px; border:1px solid var(--ink);
  background:transparent; transition:background .3s ease, color .3s ease;
}
.filter-btn.active, .filter-btn:hover{ background:var(--ink); color:var(--paper); }

.folio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.folio-card{
  border-radius:3px; overflow:hidden; position:relative;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  display:block; background:var(--ink);
}
.folio-card:hover{ transform:translateY(-8px); box-shadow:0 34px 60px -28px rgba(18,20,15,.35); }
.folio-card.hide{ display:none; }

/* ---------- Portfolio image — real <img> tag, swap src for your own project screenshots.
   Fixed, generous height + object-fit:cover so every card is the same size no matter
   the screenshot's own proportions. object-position keeps the top of the page (logo,
   nav, headline) in view. ---------- */
.folio-img{
  position:relative; display:block; width:100%; height:240px;
  object-fit:cover; object-position:center top;
  filter:saturate(1.05);
  transition:transform .9s var(--ease);
}
.folio-card:hover .folio-img{ transform:scale(1.05); }
@media (max-width:1080px){ .folio-img{ height:210px; } }
@media (max-width:820px){ .folio-img{ height:230px; } }
@media (max-width:560px){ .folio-img{ height:200px; } }

.folio-overlay{
  position:absolute; inset:0; padding:26px; display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(180deg, rgba(18,20,15,0.05) 0%, rgba(18,20,15,0.15) 35%, rgba(18,20,15,0.92) 100%);
  transition:background .3s ease;
}
.folio-cat{
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--lime); background:rgba(18,20,15,0.55); border:1px solid rgba(243,245,238,0.25);
  padding:5px 12px; border-radius:100px; width:fit-content; backdrop-filter:blur(4px);
}
.folio-title{ font-family:var(--font-display); font-size:1.5rem; color:var(--white); font-weight:600; margin-top:14px; line-height:1.15; }
.folio-sub{ font-family:var(--font-body); font-size:13px; color:rgba(243,245,238,0.75); margin-top:8px; max-width:88%; line-height:1.5; }

/* Plain overlay — used on real-image cards that show only a "Visit site" button on hover,
   with no category tag / title / subtitle text over the image. */
.folio-overlay-plain{
  position:absolute; inset:0; padding:22px; display:flex; align-items:flex-end;
  background:linear-gradient(180deg, rgba(18,20,15,0) 60%, rgba(18,20,15,0.7) 100%);
  opacity:0; transition:opacity .3s ease;
}
.folio-card:hover .folio-overlay-plain{ opacity:1; }

.folio-btn{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink); background:var(--white); padding:9px 18px; border-radius:100px;
  display:inline-flex; align-items:center; gap:8px;
  transform:translateY(6px); transition:transform .35s var(--ease), background .3s ease, color .3s ease;
}
.folio-card:hover .folio-btn{ transform:translateY(0); }
.folio-btn:hover{ background:var(--coral); color:var(--white); }
.folio-btn i{ transition:transform .3s ease; }
.folio-btn:hover i{ transform:translate(2px,-2px); }

/* modal */
.folio-modal .modal-content{ background:var(--ink); color:var(--paper); border-radius:var(--radius-md); border:none; }
.folio-modal .modal-header{ border-bottom:1px solid var(--ink-line); padding:24px 28px; }
.folio-modal .modal-body{ padding:28px; }
.folio-modal .btn-close{ filter:invert(1); }
.folio-modal-visual{ height:220px; border-radius:14px; margin-bottom:20px; }

/* ==========================================================================
   LOGO PORTFOLIO — client logo wall with creative hover tooltips
   ========================================================================== */
.logo-grid{
  display:grid; grid-template-columns:repeat(6,1fr);
  border-top:1px solid #E2E6D8; border-left:1px solid #E2E6D8;
  border-radius:var(--radius-md); overflow:visible;
}
.logo-tile{
  position:relative; background:var(--white);
  border-right:1px solid #E2E6D8; border-bottom:1px solid #E2E6D8;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:32px 18px; min-height:150px; cursor:default;
  transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.logo-tile:hover{ background:var(--paper-dim); transform:translateY(-3px); z-index:3; box-shadow:0 20px 40px -24px rgba(18,20,15,.3); }
.logo-img{
  max-width:100%; max-height:52px; width:auto; height:auto;
  /* filter:grayscale(1) opacity(0.55); */
  transition:filter .4s ease, transform .4s var(--ease);
}
.logo-tile:hover .logo-img{ filter:grayscale(0) opacity(1); transform:scale(1.06); }
.menu-button{padding: 11px 21px !important; border-radius: 2px !important;}
/* creative CSS-only tooltip, no JS needed */
.logo-tile::before{
  content:attr(data-tooltip);
  position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--ink); color:var(--paper); font-family:var(--font-mono); font-size:11px; letter-spacing:.02em;
  white-space:nowrap; padding:9px 16px; border-radius:8px;
  opacity:0; visibility:hidden; pointer-events:none; z-index:6;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  box-shadow:0 16px 30px -14px rgba(18,20,15,.4);
}
.logo-tile::after{
  content:""; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(4px);
  border:6px solid transparent; border-top-color:var(--ink);
  opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s var(--ease), visibility .25s; z-index:6;
}
.logo-tile:hover::before, .logo-tile:hover::after{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

@media (max-width:820px){ .logo-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){
  .logo-grid{ grid-template-columns:repeat(2,1fr); }
  .logo-tile{ padding:24px 14px; min-height:120px; }
  .logo-img{ max-height:42px; }
  .logo-tile::before{ white-space:normal; max-width:160px; text-align:center; }
}

/* ==========================================================================
   PRICING — three website packages
   ========================================================================== */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.price-card{
  background:var(--white); border-radius:var(--radius-md); padding:38px 32px;
  border:1px solid #E2E6D8; display:flex; flex-direction:column; gap:22px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
}
.price-card:hover{ transform:translateY(-8px); box-shadow:0 30px 55px -28px rgba(18,20,15,0.22); }
.price-card.featured{ background:var(--ink); color:var(--paper); border-color:var(--ink); transform:scale(1.045); position:relative; z-index:2; }
.price-card.featured:hover{ transform:scale(1.045) translateY(-8px); }
.price-badge{
  align-self:flex-start; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  background:var(--coral); color:var(--white); padding:6px 14px; border-radius:100px;
}
.price-plan{ font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--coral); }
.price-card.featured .price-plan{ color:var(--lime); }
.price-amount{ font-family:var(--font-display); font-size:2.6rem; font-weight:700; }
.price-amount span{ font-family:var(--font-mono); font-size:13px; font-weight:400; color:var(--muted); }
.price-card.featured .price-amount span{ color:var(--muted-lt); }
.price-desc{ font-size:14px; color:var(--muted); line-height:1.6; }
.price-card.featured .price-desc{ color:var(--muted-lt); }
.price-feats{ display:flex; flex-direction:column; gap:12px; flex:1; }
.price-feats li{ display:flex; align-items:center; gap:10px; font-size:14px; }
.price-feats li i{ color:var(--coral); flex-shrink:0; }
.price-card.featured .price-feats li i{ color:var(--lime); }
.price-card .btn{ width:100%; }
@media (max-width:960px){
  .pricing-grid{ grid-template-columns:1fr; }
  .price-card.featured{ transform:none; order:-1; }
  .price-card.featured:hover{ transform:translateY(-8px); }
}

/* ==========================================================================
   TESTIMONIALS — auto-sliding marquee of cards, its own tinted section so it
   reads as a distinct block rather than blending into the CTA/footer stack
   ========================================================================== */
.section.on-tint{ background:linear-gradient(180deg, #FBF6EE 0%, #F7ECE3 100%); }

.testi-marquee{
  overflow:hidden; position:relative;
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testi-track{
  display:flex; gap:24px; width:max-content;
  animation:testiScroll 34s linear infinite;
}
.testi-marquee:hover .testi-track{ animation-play-state:paused; }
@keyframes testiScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.testi-card{
  width:380px; flex-shrink:0; background:var(--white); border-radius:var(--radius-md);
  padding:34px 32px; box-shadow:0 30px 60px -35px rgba(18,20,15,0.25);
  display:flex; flex-direction:column; gap:16px;
}
.testi-mark{ font-family:var(--font-display); font-size:2.4rem; color:var(--coral); line-height:1; opacity:.9; }
.testi-stars{ color:var(--lime); background:var(--ink); display:inline-flex; gap:3px; padding:6px 12px; border-radius:100px; font-size:10px; width:fit-content; }
.testi-quote{ font-family:var(--font-display); font-size:1.15rem; font-weight:500; line-height:1.5; }
.testi-person{ display:flex; align-items:center; gap:14px; margin-top:auto; }
.testi-avatar{
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:var(--ink); flex-shrink:0; font-size:14px;
}
.testi-name{ font-weight:700; font-size:14.5px; }
.testi-role{ font-family:var(--font-mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
@media (max-width:600px){ .testi-card{ width:300px; padding:28px 24px; } }


/* ==========================================================================
   CTA BANNER
   ========================================================================== */
.cta-banner{ background:var(--ink); color:var(--paper); padding:100px 0; text-align:center; position:relative; overflow:hidden; }
.cta-banner .h-xl{ max-width:820px; margin-inline:auto; }
.cta-banner .btn{ margin-top:38px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--ink); color:var(--paper); padding-top:90px; position:relative; overflow:hidden; }

.footer-grid{ display:grid; grid-template-columns:1.4fr .8fr .8fr 1fr; gap:40px; padding:70px 0 50px; }
.footer-brand p{ color:var(--muted-lt); font-size:14.5px; margin-top:16px; max-width:280px; line-height:1.6; }
.footer-col h5{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-lt); margin-bottom:20px; }
.footer-col li{ margin-bottom:12px; }
.footer-col a{ font-size:14.5px; transition:color .25s ease, padding .25s ease; }
.footer-col a:hover{ color:var(--lime); padding-left:6px; }
.footer-socials{ display:flex; gap:10px; margin-top:22px; }
.footer-socials a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--ink-line); display:flex; align-items:center; justify-content:center; }
.footer-socials a:hover{ background:var(--lime); color:var(--ink); border-color:var(--lime); }

.footer-bottom{ border-top:1px solid var(--ink-line); padding:26px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.footer-bottom p{ font-size:13px; color:var(--muted-lt); }
.footer-bottom .made{ font-family:var(--font-mono); font-size:12px; color:var(--muted-lt); display:flex; align-items:center; gap:8px; }
.footer-bottom .made i{ color:var(--coral); }

.footer-big-word{
  font-family:var(--font-display); font-weight:700; font-size:min(22vw,260px); line-height:.8;
  color:transparent; -webkit-text-stroke:1px rgba(243,245,238,0.14); text-align:center; margin-top:20px; user-select:none;
}

/* back to top */
.to-top{
  position:fixed; right:26px; bottom:26px; z-index:900;
  width:52px; height:52px; border-radius:50%; background:var(--coral); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
  border:none;
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--ink); }

/* floating talk pill */
.talk-pill{
  position:fixed; left:26px; bottom:26px; z-index:900;
  display:flex; align-items:center; gap:10px; padding:12px 20px 12px 14px; border-radius:100px;
  background:var(--ink); color:var(--paper); box-shadow:0 20px 40px -18px rgba(18,20,15,0.5);
  font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em;
}
.talk-pill .pulse{ width:10px; height:10px; border-radius:50%; background:var(--lime); position:relative; }
.talk-pill .pulse::after{
  content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--lime);
  animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{ 0%{ transform:scale(.6); opacity:1;} 100%{ transform:scale(1.8); opacity:0;} }
.talk-pill:hover{ background:var(--coral); }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(28px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:.15s; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:.25s; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:.35s; }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay:.45s; }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay:.55s; }

/* ==========================================================================
   PAGE HERO (inner pages)
   ========================================================================== */
.page-hero{ padding:170px 0 90px; position:relative; }
.page-hero .h-xl{ margin-top:20px; }
.page-hero-meta{ display:flex; gap:40px; margin-top:44px; flex-wrap:wrap; }
.crumb{ font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:flex; align-items:center; gap:8px; }
.crumb i{ font-size:10px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .main-nav{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-foot{ grid-template-columns:1fr; gap:28px; }
  .about-preview-grid{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .tile-row{ grid-template-columns:repeat(2,1fr); }
  .folio-grid{ grid-template-columns:repeat(2,1fr); }
  .trio{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:560px){
  .tile-row{ grid-template-columns:1fr; }
  .folio-grid{ grid-template-columns:1fr; }
  .hero{ padding-top:130px; }
  .page-hero{ padding:140px 0 60px; }
  .section{ padding:80px 0; }
  .about-preview{ padding:80px 0; }
  .talk-pill span.label{ display:none; }
  .talk-pill{ padding:14px; }
  .footer-big-word{ font-size:20vw; }
}


/* ==========================================================================
   SERVICES — "Crafted in Black" (scoped to .design-thirteen)
   ========================================================================== */
.design-thirteen{ --amber:#00cdff; --flare:#00cdff; position:relative; background:#000; color:var(--white); overflow:hidden; }
.design-thirteen .eyebrow{ color:var(--amber); }
.design-thirteen .eyebrow::before{ background:var(--amber); }
.design-thirteen .container{ position:relative; }
.design-thirteen .head-wrap{ position:relative; z-index:3; max-width:640px; margin:0 auto 64px; text-align:center; }
.design-thirteen .head-wrap h2{ margin-top:18px; }
.design-thirteen .head-wrap p{ margin-top:14px; font-size:1.05rem; line-height:1.6; color:rgba(255,255,255,.55); }
.grad-accent{ background:linear-gradient(90deg,#00cdff,#b8f2ff); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }

.ob-grain{ position:absolute; inset:0; pointer-events:none; opacity:.05; z-index:2; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ob-spotlight{ position:absolute; inset:0; pointer-events:none; z-index:1; background:radial-gradient(560px circle at var(--mx,50%) var(--my,20%), rgba(0,205,255,.10), transparent 45%); }
.ob-grid{ position:relative; z-index:3; }
.ob-card{
  position:relative; height:100%; padding:36px 30px 32px; border-radius:20px; overflow:hidden; will-change:transform;
  background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border:1px solid rgba(0,205,255,.15);
  transition:border-color .4s ease, box-shadow .4s ease, transform .25s ease-out;
}
.ob-card:hover{ border-color:rgba(0,205,255,.5); box-shadow:0 30px 60px -22px rgba(0,0,0,.8), 0 0 40px -12px rgba(0,205,255,.18); }
.ob-card::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(115deg, transparent, rgba(0,205,255,.14), transparent); transform:skewX(-15deg); transition:left .75s ease; pointer-events:none; }
.ob-card:hover::after{ left:130%; }
.ob-num{ position:absolute; top:14px; right:22px; font-family:var(--font-display); font-weight:700; font-size:3.1rem; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(0,205,255,.28); pointer-events:none; }
.ob-icon{ position:relative; width:56px; height:56px; border-radius:50%; border:1.5px solid var(--amber); display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:var(--amber); margin-bottom:24px; transition:background .4s, color .4s; }
.ob-card:hover .ob-icon{ background:var(--amber); color:#000; }
.ob-card h3{ position:relative; font-size:1.1rem; font-weight:700; line-height:1.25; margin-bottom:12px; letter-spacing:.01em; }
.ob-desc{ position:relative; color:rgba(255,255,255,.62); font-size:.92rem; line-height:1.65; }
.ob-btn{ position:relative; margin-top:26px; display:inline-flex; align-items:center; gap:10px; background:none; border:none; padding:0; color:var(--amber); font-family:var(--font-body); font-weight:600; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; }
.ob-btn::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--amber); transition:width .35s ease; }
.ob-btn:hover::after{ width:100%; }
.ob-btn i{ font-size:.78rem; transition:transform .35s; }
.ob-btn:hover i{ transform:translateX(5px); }
.ob-btn:focus-visible{ outline:2px solid var(--amber); outline-offset:6px; }

/* service detail modal */
.svc-modal-backdrop{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(10,8,6,.6); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s ease; }
.svc-modal-backdrop.open{ opacity:1; pointer-events:auto; }
.svc-modal{ position:relative; width:100%; max-width:480px; padding:40px 36px; border-radius:24px; background:#fff; color:#221c1c; transform:translateY(18px) scale(.97); transition:transform .3s ease; }
.svc-modal-backdrop.open .svc-modal{ transform:none; }
.svc-modal-close{ position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%; border:none; background:rgba(34,28,28,.06); color:#221c1c; display:flex; align-items:center; justify-content:center; transition:background .3s; }
.svc-modal-close:hover{ background:rgba(34,28,28,.12); }
.svc-modal-icon{ width:56px; height:56px; border-radius:16px; margin-bottom:20px; background:linear-gradient(135deg,#00cdff,#7fe6ff); color:#0a0a0f; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.svc-modal h3{ font-size:1.35rem; font-weight:700; margin-bottom:14px; }
.svc-modal p{ color:#4f4540; line-height:1.7; margin-bottom:10px; }
.svc-modal p:last-of-type{ margin-bottom:0; }

/* ==========================================================================
   CLOSING CTA — standalone lime band directly above the footer
   ========================================================================== */
.cta-band{ padding:64px 0; background:var(--coral); color:var(--white); }
.cta-band + .site-footer{ padding-top:0; }
.cta-band-grid{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:28px 48px; }
.cta-band .eyebrow{ color:var(--ink); }
.cta-band .eyebrow::before{ background:var(--ink); }
.cta-band h2{ margin-top:12px; max-width:18em; font-size:clamp(1.7rem,3.2vw,2.6rem); font-weight:600; line-height:1.1; letter-spacing:-.02em; text-wrap:balance; }
.cta-band .btn{ background:var(--white); color:var(--ink); }
.cta-band .btn:hover{ background:var(--ink); color:var(--paper); }
.cta-band a:focus-visible{ outline-color:var(--ink); }
@media (max-width:820px){ .cta-band{ padding:52px 0; } }
@media (max-width:767px){
  .design-thirteen .ob-card:hover{ transform:none !important; }
  .ob-num{ font-size:2.4rem; }
  .svc-modal{ padding:32px 24px; }
}


/* ==========================================================================
   PAGE BANNER — image breadcrumb header for every inner page
   One photo, cropped + tinted differently per page (set --pos / --zoom / data-tone
   on the section). Glass breadcrumb pill, staircase title, outlined watermark word.
   ========================================================================== */
.page-banner{
  --tone:var(--coral); --pos:50% 50%; --zoom:1.5;
  position:relative; isolation:isolate; overflow:hidden;
  padding:172px 0 124px; margin-bottom:clamp(20px,3vw,44px);
  color:var(--paper); background:var(--ink);
}
.page-banner[data-tone="cobalt"]{ --tone:var(--cobalt); }
.page-banner[data-tone="lime"]{ --tone:var(--lime); }

.banner-bg{ position:absolute; inset:0; z-index:-5; overflow:hidden; animation:bannerDrift 28s ease-in-out infinite alternate; }
.banner-bg img{
  width:100%; height:100%; object-fit:cover; object-position:var(--pos);
  transform:scale(var(--zoom)); transform-origin:var(--pos);
}
@keyframes bannerDrift{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
.banner-shade{
  position:absolute; inset:0; z-index:-4;
  background:
    linear-gradient(0deg, rgba(18,20,15,.8) 0, rgba(18,20,15,0) 58%),
    linear-gradient(90deg, rgba(18,20,15,.93) 0%, rgba(18,20,15,.68) 48%, rgba(18,20,15,.38) 100%);
}
.banner-glow{
  position:absolute; inset:0; z-index:-3; mix-blend-mode:screen; opacity:.42;
  background:radial-gradient(46% 92% at 92% 6%, var(--tone) 0%, transparent 72%);
}
.banner-dots{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:radial-gradient(rgba(243,245,238,.20) 1px, transparent 1px); background-size:24px 24px;
  -webkit-mask-image:linear-gradient(90deg, transparent 34%, #000 100%); mask-image:linear-gradient(90deg, transparent 34%, #000 100%);
}
.banner-word{
  position:absolute; right:-.5vw; bottom:clamp(6px,1.2vw,20px); z-index:-1; pointer-events:none; user-select:none; white-space:nowrap;
  font-family:var(--font-display); font-weight:700; font-size:clamp(4.4rem,15vw,14rem); line-height:.8; letter-spacing:-.03em; text-transform:uppercase;
  color:transparent; -webkit-text-stroke:1.5px rgba(243,245,238,.2);
}
.banner-inner{ position:relative; }
.banner-inner > *{ animation:bannerIn .9s var(--ease) both; }
.banner-inner > *:nth-child(2){ animation-delay:.08s; }
.banner-inner > *:nth-child(3){ animation-delay:.16s; }
.banner-inner > *:nth-child(4){ animation-delay:.26s; }
.banner-inner > *:nth-child(5){ animation-delay:.34s; }
.banner-inner > *:nth-child(6){ animation-delay:.42s; }
@keyframes bannerIn{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

/* breadcrumb — glass pill */
.crumbs{
  list-style:none; margin:0 0 26px; padding:9px 18px 9px 14px; width:fit-content;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border-radius:100px; background:rgba(18,20,15,.46); border:1px solid rgba(243,245,238,.22);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:rgba(243,245,238,.78);
}
.crumbs li{ display:inline-flex; align-items:center; gap:12px; }
.crumbs li + li::before{ content:"\F285"; font-family:"bootstrap-icons"; font-size:9px; opacity:.55; }
.crumbs a{ display:inline-flex; align-items:center; gap:7px; transition:color .25s ease; }
.crumbs a:hover{ color:var(--lime); }
.crumbs [aria-current="page"]{ color:var(--lime); }

.banner-title{ margin-top:22px; font-size:clamp(2.5rem,5.6vw,4.9rem); font-weight:600; color:var(--paper); }
.banner-title .line{ display:block; }
.banner-title .step-2{ padding-left:clamp(0px,6vw,104px); }
.banner-title .step-3{ padding-left:clamp(0px,12vw,208px); }
.banner-title .accent{ color:var(--coral); font-style:italic; }
.banner-sub{ margin-top:26px; max-width:540px; font-size:1.05rem; line-height:1.6; color:rgba(243,245,238,.84); }
.banner-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.banner-stats{ display:flex; gap:46px; flex-wrap:wrap; margin-top:40px; }
.banner-stats .stat-num{ font-family:var(--font-display); font-size:2.1rem; font-weight:700; line-height:1; color:var(--lime); }
.banner-stats .stat-item:nth-child(2) .stat-num{ color:var(--coral); }
.banner-stats .stat-lbl{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; line-height:1.4; max-width:150px; margin-top:8px; color:rgba(243,245,238,.7); }
.banner-ticker{ margin-top:54px; }
.banner-ticker .marquee{ background:rgba(18,20,15,.5); border-color:rgba(243,245,238,.16); }

/* work-page banner: tilted project thumbnails */
.banner-stack{ position:absolute; right:7%; top:50%; width:min(34vw,470px); height:300px; transform:translateY(-46%); pointer-events:none; z-index:0; }
.banner-stack img{
  position:absolute; width:62%; aspect-ratio:16/10; object-fit:cover; object-position:center top; border-radius:3px;
  border:1px solid rgba(243,245,238,.28); box-shadow:0 30px 60px -24px rgba(0,0,0,.7);
}
.banner-stack img:nth-child(1){ left:0; top:0; transform:rotate(-7deg); }
.banner-stack img:nth-child(2){ left:26%; top:26%; transform:rotate(3deg); z-index:1; }
.banner-stack img:nth-child(3){ left:14%; top:56%; transform:rotate(-3deg); z-index:2; }
@media (max-width:1080px){ .banner-stack{ display:none; } }

/* small "hiring" chip */
.hiring-chip{
  display:inline-flex; align-items:center; gap:10px; margin-left:14px; padding:6px 14px; border-radius:100px;
  background:rgba(212,255,92,.12); border:1px solid rgba(212,255,92,.4); color:var(--lime);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}
.hiring-chip .pulse{ width:8px; height:8px; border-radius:50%; background:var(--lime); position:relative; }
.hiring-chip .pulse::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--lime); animation:pulse 1.8s ease-out infinite; }

@media (max-width:820px){
  .page-banner{ padding:138px 0 100px; }
  .banner-stats{ gap:28px; }
}
@media (max-width:560px){
  .page-banner{ padding:122px 0 84px; }
  .crumbs{ font-size:11px; padding:8px 14px 8px 12px; }
  .banner-sub{ font-size:1rem; }
  .hiring-chip{ margin-left:0; margin-top:12px; }
  .banner-ticker{ margin-top:40px; }
}


/* ==========================================================================
   PORTFOLIO PAGE — captioned cards + closing "your project" tile
   ========================================================================== */
.folio-grid.is-page{ gap:34px 20px; }
.folio-item{ margin:0; display:flex; flex-direction:column; gap:14px; }
.folio-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:0 2px; }
.folio-name{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; }
.folio-type{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.folio-cta{
  grid-column:span 2; position:relative; overflow:hidden; border-radius:3px; padding:40px 44px;
  display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  background:var(--coral); color:var(--white);
}
.folio-cta::before{
  content:"YOU"; position:absolute; right:-14px; bottom:-40px; pointer-events:none; user-select:none;
  font-family:var(--font-display); font-weight:700; font-size:11rem; line-height:1; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.5px rgba(252,253,249,.3);
}
.folio-cta .eyebrow{ color:var(--ink); }
.folio-cta .eyebrow::before{ background:var(--ink); }
.folio-cta h3{ font-size:clamp(1.8rem,3vw,2.6rem); font-weight:600; line-height:1.08; letter-spacing:-.02em; max-width:12em; position:relative; }
.folio-cta .btn{ position:relative; width:fit-content; background:var(--white); color:var(--ink); }
.folio-cta .btn:hover{ background:var(--ink); color:var(--paper); }
@media (max-width:560px){ .folio-cta{ grid-column:auto; padding:32px 26px; min-height:300px; } .folio-cta::before{ font-size:8rem; } }


/* ==========================================================================
   CAREER PAGE
   ========================================================================== */
/* --- why join: bento grid --- */
.perk-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(230px,auto); gap:18px; }
.perk{
  position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:32px 30px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:12px;
  background:var(--white); color:var(--ink);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.perk:hover{ transform:translateY(-6px); box-shadow:0 32px 50px -30px rgba(18,20,15,.35); }
.perk-icon{
  position:absolute; top:28px; left:30px; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:21px;
  background:var(--ink); color:var(--lime);
}
.perk-num{
  position:absolute; top:12px; right:24px; font-family:var(--font-display); font-weight:700; font-size:3.4rem; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(18,20,15,.22);
}
.perk h3{ font-size:1.45rem; font-weight:600; line-height:1.12; letter-spacing:-.01em; position:relative; }
.perk p{ font-size:14.5px; line-height:1.6; color:var(--muted); position:relative; max-width:34em; }
.perk-own{ grid-column:span 2; grid-row:span 2; background:var(--ink); color:var(--paper); }
.perk-own .perk-icon{ background:var(--coral); color:var(--white); }
.perk-own .perk-num{ -webkit-text-stroke-color:rgba(243,245,238,.2); font-size:5rem; }
.perk-own h3{ font-size:clamp(2rem,3.4vw,2.9rem); line-height:1.02; letter-spacing:-.02em; }
.perk-own p{ color:var(--muted-lt); font-size:16px; }
.perk-name{ background:var(--coral); color:var(--white); }
.perk-name .perk-icon{ background:var(--white); color:var(--coral); }
.perk-name .perk-num{ -webkit-text-stroke-color:rgba(252,253,249,.4); }
.perk-name p{ color:rgba(252,253,249,.86); }
.perk-flat{ background:var(--lime); }
.perk-flat p{ color:rgba(18,20,15,.72); }
.perk-flat .perk-num{ -webkit-text-stroke-color:rgba(18,20,15,.3); }
.perk-learn{ grid-column:span 2; background:var(--cobalt); color:var(--white); }
.perk-learn .perk-icon{ background:var(--lime); color:var(--ink); }
.perk-learn .perk-num{ -webkit-text-stroke-color:rgba(252,253,249,.35); }
.perk-learn p{ color:rgba(252,253,249,.82); }
.perk-learn .perk-link{
  position:relative; width:fit-content; margin-top:6px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--lime);
}
.perk-learn .perk-link i{ transition:transform .35s var(--ease); }
.perk-learn .perk-link:hover i{ transform:translateX(5px); }
.perk-photo{ grid-column:span 2; padding:0; justify-content:flex-start; background:var(--ink); }
.perk-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 60%; transition:transform 1s var(--ease); }
.perk-photo:hover img{ transform:scale(1.05); }
.perk-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(18,20,15,.75) 0, rgba(18,20,15,0) 60%); }
.perk-chips{ position:absolute; left:22px; bottom:22px; z-index:1; display:flex; gap:10px; flex-wrap:wrap; }
.perk-chips span{
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:100px;
  background:rgba(252,253,249,.92); color:var(--ink); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em;
}
.perk-chips i{ color:var(--coral); }
.perk-ship{ grid-column:span 2; }
@media (max-width:1080px){
  .perk-grid{ grid-template-columns:repeat(2,1fr); }
  .perk-own{ grid-column:span 2; grid-row:auto; min-height:340px; }
  .perk-learn, .perk-photo, .perk-ship{ grid-column:span 2; }
}
@media (max-width:560px){
  .perk-grid{ grid-template-columns:1fr; }
  .perk-own, .perk-learn, .perk-photo, .perk-ship{ grid-column:auto; }
  .perk{ padding:28px 24px; }
}

/* --- open roles --- */
.role-filters{ display:flex; flex-wrap:wrap; gap:10px; }
.role-filter{
  font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em;
  padding:11px 18px; border-radius:100px; border:1px solid var(--ink); background:transparent; color:var(--ink);
  display:inline-flex; align-items:center; gap:9px; transition:background .3s ease, color .3s ease;
}
.role-filter b{ font-weight:500; font-size:10.5px; min-width:20px; height:20px; padding:0 6px; border-radius:100px; display:inline-flex; align-items:center; justify-content:center; background:rgba(18,20,15,.1); }
.role-filter:hover, .role-filter.active{ background:var(--ink); color:var(--paper); }
.role-filter.active b, .role-filter:hover b{ background:var(--coral); color:var(--white); }

.role-list{ display:flex; flex-direction:column; gap:14px; }
.role{
  background:var(--white); border-radius:var(--radius-md); border:1px solid #E2E6D8; overflow:hidden;
  transition:border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.role[hidden]{ display:none; }
.role:hover{ border-color:var(--ink); }
.role.open{ background:var(--ink); color:var(--paper); border-color:var(--ink); box-shadow:0 34px 56px -32px rgba(18,20,15,.5); }
.role-head{
  width:100%; border:0; background:none; color:inherit; text-align:left;
  display:grid; grid-template-columns:48px 1fr auto 48px; align-items:center; gap:20px; padding:26px 28px;
}
.role-idx{ font-family:var(--font-mono); font-size:12px; color:var(--coral); }
.role-title{ font-family:var(--font-display); font-size:clamp(1.3rem,2.2vw,1.8rem); font-weight:600; letter-spacing:-.01em; line-height:1.15; }
.role-tags{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.role-tag{
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:100px; white-space:nowrap;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid #DCE0D2; color:var(--muted); transition:border-color .3s ease, color .3s ease;
}
.role.open .role-tag{ border-color:rgba(243,245,238,.25); color:var(--muted-lt); }
.role-toggle{
  width:46px; height:46px; border-radius:50%; border:1px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:16px;
  transition:transform .45s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
}
.role-head:hover .role-toggle{ background:var(--coral); border-color:var(--coral); color:var(--white); }
.role.open .role-toggle{ transform:rotate(45deg); background:var(--lime); border-color:var(--lime); color:var(--ink); }
.role-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); }
.role.open .role-panel{ grid-template-rows:1fr; }
.role-panel-inner{ overflow:hidden; min-height:0; }
.role-body{ padding:4px 28px 34px 96px; }
.role-lead{ font-size:1.05rem; line-height:1.65; color:var(--muted-lt); max-width:46em; }
.role-cols{ display:grid; grid-template-columns:1fr 1fr; gap:34px; margin:28px 0 30px; }
.role-cols h4{ font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--lime); margin-bottom:14px; }
.role-cols ul{ display:flex; flex-direction:column; gap:11px; }
.role-cols li{ display:flex; gap:11px; font-size:14.5px; line-height:1.55; color:rgba(243,245,238,.86); }
.role-cols li::before{ content:""; flex-shrink:0; width:6px; height:6px; border-radius:50%; background:var(--coral); margin-top:.6em; }
.role-empty{ display:none; padding:40px; text-align:center; color:var(--muted); border:1px dashed #C9CEBF; border-radius:var(--radius-md); }
.role-empty.show{ display:block; }
.role-note{ margin-top:34px; text-align:center; font-size:14px; color:var(--muted); }
.role-note a{ color:var(--coral); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:900px){
  .role-head{ grid-template-columns:34px 1fr 46px; gap:14px; padding:22px 20px; }
  .role-tags{ grid-column:2 / 3; grid-row:2; justify-content:flex-start; }
  .role-toggle{ grid-column:3; grid-row:1 / span 2; }
  .role-body{ padding:4px 20px 30px; }
  .role-cols{ grid-template-columns:1fr; gap:26px; }
}

/* --- hiring process --- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
.steps::before{ content:""; position:absolute; left:6%; right:6%; top:27px; height:1px; background:repeating-linear-gradient(90deg, #B9BFAE 0 6px, transparent 6px 12px); }
.step{ position:relative; }
.step-badge{
  position:relative; z-index:1; width:54px; height:54px; border-radius:50%; margin-bottom:22px;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:13px;
  background:var(--ink); color:var(--lime); border:6px solid var(--paper-dim);
  box-sizing:content-box; margin-left:-6px; margin-top:-6px;
  transition:background .35s ease, color .35s ease, transform .45s var(--ease);
}
.step:hover .step-badge{ background:var(--coral); color:var(--white); transform:scale(1.08) rotate(-6deg); }
.step h3{ font-size:1.25rem; margin-bottom:8px; }
.step p{ font-size:14.5px; line-height:1.6; color:var(--muted); max-width:22em; }
@media (max-width:900px){
  .steps{ grid-template-columns:1fr 1fr; gap:36px 24px; }
  .steps::before{ display:none; }
}
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }

/* --- apply --- */
.apply-section{ position:relative; overflow:hidden; background:var(--ink); color:var(--paper); }
.apply-section::before{
  content:""; position:absolute; top:-140px; right:-100px; width:460px; height:460px; border-radius:50%;
  background:var(--coral); opacity:.16; filter:blur(90px); pointer-events:none;
}
.apply-section::after{
  content:""; position:absolute; bottom:-160px; left:-120px; width:420px; height:420px; border-radius:50%;
  background:var(--cobalt); opacity:.2; filter:blur(100px); pointer-events:none;
}
.apply-grid{ position:relative; z-index:1; display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; }
.apply-copy h2{ margin-top:18px; }
.apply-copy > p{ margin-top:20px; max-width:30em; font-size:16px; line-height:1.7; color:var(--muted-lt); }
.apply-alt{ margin-top:34px; padding-top:26px; border-top:1px solid var(--ink-line); display:flex; flex-direction:column; gap:14px; }
.apply-alt a{ display:inline-flex; align-items:center; gap:12px; width:fit-content; font-family:var(--font-display); font-size:1.2rem; font-weight:600; transition:color .3s ease; }
.apply-alt a i{ width:40px; height:40px; border-radius:50%; background:rgba(243,245,238,.08); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--lime); transition:background .3s ease, color .3s ease; }
.apply-alt a:hover{ color:var(--lime); }
.apply-alt a:hover i{ background:var(--lime); color:var(--ink); }
.apply-alt small{ font-size:13px; color:var(--muted-lt); }

.apply-panel{ background:var(--ink-soft); border:1px solid var(--ink-line); border-radius:var(--radius-lg); padding:40px; position:relative; }
.apply-panel h3{ font-size:1.5rem; font-weight:600; }
.apply-panel .apply-sub{ font-size:13.5px; color:var(--muted-lt); margin:8px 0 28px; }
.apply-fields{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.apply-field{ display:flex; flex-direction:column; gap:8px; position:relative; }
.apply-field.wide{ grid-column:1 / -1; }
.apply-field label{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-lt); }
.apply-field label em{ font-style:normal; color:var(--coral); }
.apply-field input, .apply-field select, .apply-field textarea{
  width:100%; padding:13px 16px; border-radius:12px; border:1px solid var(--ink-line);
  background:var(--ink); color:var(--paper); font-family:var(--font-body); font-size:14.5px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.apply-field select{ appearance:none; -webkit-appearance:none; padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%23A7ACA0'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.apply-field select option{ background:var(--ink); color:var(--paper); }
.apply-field textarea{ resize:vertical; min-height:110px; }
.apply-field input::placeholder, .apply-field textarea::placeholder{ color:#6F7469; }
.apply-field input:focus, .apply-field select:focus, .apply-field textarea:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,75,51,.2); }
.apply-msg{ display:none; font-size:12.5px; color:#FF7F6E; }
.apply-field.has-error input, .apply-field.has-error select, .apply-field.has-error textarea{ border-color:var(--coral); }
.apply-field.has-error .apply-msg{ display:block; }
.apply-submit{ grid-column:1 / -1; width:100%; margin-top:6px; }
.apply-note{ grid-column:1 / -1; text-align:center; font-size:12.5px; color:var(--muted-lt); }
.apply-success{ display:none; text-align:center; padding:56px 12px; }
.apply-success.show{ display:block; animation:bannerIn .7s var(--ease) both; }
.apply-success i{ font-size:52px; color:var(--lime); }
.apply-success h3{ margin-top:18px; }
.apply-success p{ margin-top:12px; color:var(--muted-lt); line-height:1.7; }
@media (max-width:960px){
  .apply-grid{ grid-template-columns:1fr; gap:44px; }
  .apply-panel{ padding:30px 24px; }
}
@media (max-width:560px){ .apply-fields{ grid-template-columns:1fr; } }

/* --- about page: compact careers teaser --- */
.career-teaser{ position:relative; overflow:hidden; }
.career-teaser-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.career-teaser .role-pills{ display:flex; flex-direction:column; gap:12px; }
.career-teaser .role-pill{
  display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; border-radius:16px;
  background:var(--ink-soft); border:1px solid var(--ink-line);
  transition:border-color .3s ease, transform .4s var(--ease), background .3s ease;
}
.career-teaser .role-pill:hover{ border-color:var(--lime); transform:translateX(6px); background:#20241a; }
.career-teaser .role-pill b{ display:block; font-family:var(--font-display); font-size:1.1rem; font-weight:600; }
.career-teaser .role-pill small{ display:block; margin-top:5px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-lt); }
.career-teaser .role-pill i{ color:var(--lime); font-size:18px; transition:transform .35s var(--ease); }
.career-teaser .role-pill:hover i{ transform:translate(3px,-3px); }
@media (max-width:1080px){ .career-teaser-grid{ grid-template-columns:1fr; gap:38px; } }


/* ==========================================================================
   BUG FIX — contact/apply form validation messages never appeared.
   Bootstrap's ".was-validated :invalid ~ .invalid-feedback" rule requires the
   message to be a direct sibling of the invalid input — but every field here
   wraps its input in a .field-wrap (for the icon), so the message ends up a
   sibling of .field-wrap instead and Bootstrap's own rule never matches.
   ========================================================================== */
.needs-validation.was-validated .field-wrap:has(:invalid) ~ .invalid-feedback{ display:block; }


/* ==========================================================================
   BUSINESS CHALLENGES — creative professional scroll-progress timeline
   (scoped to .challenge-timeline; page: challenges.html)
   A left-hand spine with a real fill line that grows on scroll (--progress,
   set from JS) runs past five full case-style cards — reads as a journey
   rather than a picker.
   ========================================================================== */
.challenge-timeline .section-tag{ max-width:640px; }

/* accent tokens, set per stage via data-accent */
[data-accent="coral"]{ --accent:var(--coral); }
[data-accent="amber"]{ --accent:var(--amber); }
[data-accent="cobalt"]{ --accent:var(--cobalt); }
[data-accent="lime"]{ --accent:var(--lime); }

.ch-track{ position:relative; margin-top:64px; --progress:0; }
.ch-track::before{
  content:""; position:absolute; left:35px; top:8px; bottom:8px; width:3px;
  border-radius:3px; opacity:.18;
  background:linear-gradient(180deg, var(--coral), var(--amber), var(--cobalt), var(--lime), var(--coral));
}
.ch-track::after{
  content:""; position:absolute; left:35px; top:8px; width:3px;
  height:calc(var(--progress) * 1%); max-height:calc(100% - 8px);
  border-radius:3px; transition:height .12s linear;
  background:linear-gradient(180deg, var(--coral), var(--amber), var(--cobalt), var(--lime), var(--coral));
}

.ch-item{ position:relative; display:grid; grid-template-columns:72px 1fr; column-gap:28px; padding-bottom:44px; }
.ch-item:last-child{ padding-bottom:0; }

.ch-node{
  position:relative; z-index:2; width:72px; height:72px; border-radius:50%;
  background:var(--ink); color:var(--accent); border:3px solid var(--paper);
  box-shadow:0 0 0 2px var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.ch-pulse{
  position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--accent);
  animation:chPulse 2.6s ease-out infinite;
}
@keyframes chPulse{ 0%{ transform:scale(.85); opacity:.65; } 100%{ transform:scale(1.5); opacity:0; } }

.ch-card{
  position:relative; overflow:hidden; background:var(--white); border-radius:var(--radius-lg);
  padding:clamp(26px,3vw,40px); border-top:4px solid var(--accent);
  box-shadow:0 26px 50px -32px rgba(18,20,15,.3);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ch-card:hover{ transform:translateY(-4px); box-shadow:0 34px 60px -28px rgba(18,20,15,.25); }

.ch-num{
  position:absolute; top:-6px; right:14px; z-index:0; font-family:var(--font-display); font-weight:700;
  font-size:5.5rem; line-height:1; color:transparent; -webkit-text-stroke:1.3px rgba(18,20,15,.08);
  pointer-events:none;
}
.ch-stage{ position:relative; z-index:1; display:inline-block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.ch-card h3{ position:relative; z-index:1; font-size:clamp(1.3rem,2.2vw,1.7rem); margin-bottom:16px; }
.ch-card > p{ position:relative; z-index:1; color:var(--muted); font-size:15px; line-height:1.7; margin-bottom:12px; }
.ch-card a{ color:var(--coral); text-decoration:underline; text-underline-offset:3px; }

.ch-stat{
  position:relative; z-index:1; margin:22px 0; padding:18px 22px; border-radius:var(--radius-sm);
  background:var(--paper-dim); border-left:4px solid var(--accent);
}
.ch-stat-num{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.25rem; color:var(--ink); }
.ch-stat-desc{ margin-top:6px; color:var(--ink-soft); font-size:14px; line-height:1.55; }
.ch-stat-by{ display:block; margin-top:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.ch-stat-by::before{ content:"— "; }

.ch-how{ position:relative; z-index:1; margin-top:22px; padding-top:22px; border-top:1px solid var(--paper-dim); }
.ch-how-tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:10px; }
.ch-how p{ color:var(--muted); font-size:14px; line-height:1.7; margin-bottom:9px; }
.ch-how p:last-child{ margin-bottom:0; }

@media (max-width:820px){
  .ch-track{ margin-top:48px; }
  .ch-track::before, .ch-track::after{ left:22px; }
  .ch-item{ grid-template-columns:44px 1fr; column-gap:18px; padding-bottom:36px; }
  .ch-node{ width:44px; height:44px; font-size:1.1rem; }
  .ch-num{ font-size:4rem; top:-2px; right:10px; }
  .ch-card{ padding:22px 20px; }
}
@media (max-width:560px){ .ch-card{ padding:20px 18px; } }