/* ============================================
   Frame It — Homepage
   Structure/layout reference: Figma clone of Eloqwnt homepage
   Brand: Frame It (purple CTA #9149FF, yellow highlight #FFC72F)
   Font: Urbanist
   ============================================ */

:root{
  --purple:#9149FF;
  --purple-dark:#7A2FE0;
  --yellow:#FFC72F;
  --ink:#1C1D20;
  --ink-2:#2D2D32;
  --gray:#767676;
  --gray-light:#A9ACAD;
  --porcelain:#F3F5F6;
  --porcelain-2:#E5E9EB;
  --paper:#FFFFFF;
  --border:rgba(0,0,0,0.1);
  --border-strong:rgba(0,0,0,0.16);
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:10px;
  --pill:100px;
  --container:1320px;
  --gap:24px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Urbanist',sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
img,svg{display:block;max-width:100%;}
i.ti{line-height:1;}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 40px;
}

h1,h2,h3,h4{
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.02em;
  color:var(--ink);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--purple);
  margin-bottom:16px;
}
.eyebrow::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--purple);
}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:15px 28px;
  border-radius:8px;
  font-weight:700;
  font-size:16px;
  transition:transform .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--ink);
  color:#fff;
  transition:background .2s ease, color .2s ease, transform .18s ease;
}
/* Same fix as .btn-frame: scope :hover to real hover-capable devices so the
   pressed look doesn't stick on mobile after a tap, use :active for touch
   feedback instead (clears itself on release). Hover matches .btn-frame's
   yellow treatment for a consistent CTA hover language across the site. */
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--yellow); color:var(--ink); transform:translateY(-1px);}
  .btn-primary:hover .frame-outline,
  .btn-primary:hover .frame-corner{opacity:1;}
}
.btn-primary:active{background:var(--yellow);color:var(--ink);}
.btn-primary:active .frame-outline,
.btn-primary:active .frame-corner{opacity:1;}

/* "Frame it" button — grey by default; on hover it turns yellow with a purple
   stroke and four small corner handles, like a design-tool selection frame
   around the button. Handles are positioned relative to the button's own box
   (not fixed pixels), so it works at any text length/width. */
.btn-frame{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 28px;
  border-radius:8px;
  background:var(--porcelain-2);
  color:var(--ink);
  font-weight:700;
  font-size:16px;
  white-space:nowrap;
  transition:background .2s ease;
}
/* Touch devices simulate :hover on tap and it can stay "stuck" until the user
   taps elsewhere — scope the yellow/frame effect to devices that have real
   hover (mouse/trackpad) so it never sticks on mobile. Use :active instead for
   touch, which is inherently momentary and clears itself on release. */
@media (hover:hover) and (pointer:fine){
  .btn-frame:hover{background:var(--yellow);}
  .btn-frame:hover .frame-outline,
  .btn-frame:hover .frame-corner{opacity:1;}
}
.btn-frame:active{background:var(--yellow);}
.btn-frame:active .frame-outline,
.btn-frame:active .frame-corner{opacity:1;}

/* Tertiary — plain purple text + arrow, no fill/border of its own; the frame
   only appears on hover, same as the other two buttons. */
.btn-tertiary{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:8px;
  color:var(--purple);
  font-weight:700;
  font-size:16px;
  white-space:nowrap;
}
.btn-tertiary i{width:16px;height:16px;transition:transform .18s ease;}
@media (hover:hover) and (pointer:fine){
  .btn-tertiary:hover .frame-outline,
  .btn-tertiary:hover .frame-corner{opacity:1;}
  .btn-tertiary:hover i{transform:translate(2px,-2px);}
}
.btn-tertiary:active .frame-outline,
.btn-tertiary:active .frame-corner{opacity:1;}

.frame-outline{
  position:absolute;
  top:-6px;left:-6px;right:-6px;bottom:-6px;
  border:1.5px solid var(--purple);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.frame-corner{
  position:absolute;
  width:9px;height:9px;
  border:1.5px solid var(--purple);
  background:#fff;
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.frame-corner.tl{top:-6px;left:-6px;transform:translate(-50%,-50%);}
.frame-corner.tr{top:-6px;right:-6px;transform:translate(50%,-50%);}
.frame-corner.bl{bottom:-6px;left:-6px;transform:translate(-50%,50%);}
.frame-corner.br{bottom:-6px;right:-6px;transform:translate(50%,50%);}

mark{
  background:var(--yellow);
  color:var(--ink);
  padding:0 8px;
  border-radius:6px;
  font-weight:700;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* Hero rotating word — "We Frame your [product/design/AI Agent/...]".
   Uses the same purple frame-outline/frame-corner system as the button hover
   effect, but permanently visible (.always-on) instead of hover-triggered. */
.word-rotator{
  position:relative;
  display:inline-block;
  padding:2px 12px;
  color:var(--purple);
  vertical-align:bottom;
}
.word-rotator-inner{
  display:inline-block;
  opacity:1;
  transform:translateY(0);
  transition:opacity .35s ease, transform .35s ease;
}
.word-rotator-inner.is-swapping{
  opacity:0;
  transform:translateY(10px);
}
.frame-outline.always-on,
.frame-corner.always-on{opacity:1;}

/* ---------- Nav ---------- */
header.nav{
  position:sticky;
  top:0;
  z-index:100;
  /* Solid background (no backdrop-filter): backdrop-filter/filter/transform on an
     ancestor makes it the containing block for position:fixed descendants, which
     was breaking the mobile nav overlay (it collapsed into the header's own box
     instead of covering the viewport). */
  background:#ffffff;
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 40px;
  max-width:var(--container);
  margin:0 auto;
}
.nav-logo img{height:38px;width:auto;}
.nav-links{
  display:flex;
  align-items:center;
  gap:4px;
}
.nav-link{
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  font-family:inherit;
  padding:10px 16px;
  border-radius:8px;
  transition:background .15s ease;
}
.nav-link:hover{background:var(--porcelain-2);}
.nav-link i{width:15px;height:15px;transition:transform .2s ease;}

/* Services mega menu */
.nav-services{position:relative;}
/* .services-menu is the hoverable hit-area: it sits flush against the trigger
   (top:100%, no gap) and uses padding-top instead of a margin/offset gap, so the
   pointer never leaves a hoverable box while moving from the trigger down into
   the menu. The visible card (background/border/shadow) lives on the inner
   wrapper, which sits below that padding — visually identical spacing, but no
   more "dead zone" that closes the menu mid-travel. */
.services-menu{
  display:none;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  width:640px;
  padding-top:20px;
  z-index:50;
}
.services-menu-inner{
  background:var(--porcelain);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;
  box-shadow:0 24px 60px rgba(0,0,0,0.1);
}
.nav-services.open .services-menu{display:block;}
.nav-services.open .nav-services-trigger i{transform:rotate(180deg);color:var(--purple);}
@media (min-width:901px){
  .nav-services:hover .services-menu{display:block;}
  .nav-services:hover .nav-services-trigger i{transform:rotate(180deg);color:var(--purple);}
}
.services-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.services-col{display:flex;flex-direction:column;gap:4px;}
.services-col-head{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:11px 18px;
  border-radius:var(--pill);
  font-weight:700;
  font-size:14px;
  margin-bottom:14px;
  color:var(--ink);
}
.services-col-head i{width:15px;height:15px;}
.services-col-head.services{background:#DCF3FF;}
.services-col-head.retainer{background:#EFE6FF;}
.service-menu-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:9px 8px;
  border-radius:var(--radius-sm);
  text-align:left;
}
.service-menu-item:hover{background:rgba(0,0,0,0.04);}
.service-menu-icon{
  width:40px;height:40px;flex-shrink:0;
  border-radius:11px;
  background:var(--paper);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
}
.service-menu-icon i{width:18px;height:18px;color:var(--ink);}
.service-menu-text{display:flex;flex-direction:column;gap:2px;}
.service-menu-text .title{font-size:14px;font-weight:600;color:var(--ink);}
.service-menu-text .desc{font-size:12px;color:var(--gray);}

/* Nav actions: "Let's chat" (shared .btn-frame component) + circular menu toggle (always visible, all breakpoints) */
.nav-actions{display:flex;align-items:center;gap:14px;}
.nav-actions .btn-frame{padding:12px 22px;}
.nav-menu-toggle{
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid var(--border-strong);
  background:transparent;
  display:none; /* hidden on web nav — shown again only in the mobile media query */
  align-items:center;justify-content:center;
  flex-shrink:0;
}
.nav-menu-toggle:hover{background:var(--porcelain);}
.nav-menu-toggle i{width:18px;height:18px;}
/* Two pre-rendered icons, toggled with CSS instead of re-writing data-lucide at
   runtime — Lucide replaces <i data-lucide="..."> with an <svg> on first render,
   so swapping the attribute afterwards has no element left to update. */
.nav-menu-toggle .icon-close{display:none;}
.nav-menu-toggle.is-open .icon-open{display:none;}
.nav-menu-toggle.is-open .icon-close{display:block;}

/* Trailing arrow shown only in the mobile nav overlay (hidden inline on desktop) */
.nav-link-arrow{display:none;}

/* Current-page indicator on top-level nav items (interior pages) */
.nav-link.active{color:var(--purple);background:rgba(145,73,255,0.08);}

/* ---------- Hero ---------- */
.hero{
  padding:96px 40px 64px;
  max-width:var(--container);
  margin:0 auto;
  text-align:center;
}
.hero h1{
  font-size:64px;
  max-width:900px;
  margin:0 auto 28px;
  letter-spacing:-0.03em;
}
.hero p.sub{
  font-size:19px;
  color:var(--gray);
  max-width:560px;
  margin:0 auto 36px;
}
.hero-ctas{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
}
/* ---------- Hero screens ticker (replaces video) ---------- */
.screens-ticker{
  margin-top:64px;
  padding:16px 0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.screens-track{
  display:flex;
  align-items:center;
  gap:28px;
  width:max-content;
  animation:scroll-left-screens 28s linear infinite;
}
.screen-card{
  flex:none;
  height:280px;
  border-radius:14px;
  overflow:hidden;
  background:var(--porcelain-2);
  box-shadow:0 16px 36px rgba(0,0,0,0.14);
  border:1px solid var(--border);
}
.screen-card.web{aspect-ratio:16/10.2;}
.screen-card.mobile{aspect-ratio:9/19.5;}
.screen-card img{display:block;width:100%;height:100%;object-fit:cover;}
@keyframes scroll-left-screens{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (max-width:900px){
  .screens-ticker{margin-top:48px;}
  .screens-track{gap:18px;}
  .screen-card{height:200px;}
}
@media (max-width:419px){
  .screen-card{height:240px;}
}

/* ---------- Marquee ---------- */
.marquee-wrap{
  background:none;
  color:var(--ink);
  padding:32px 0;
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:scroll-left 32s linear infinite;
}
.marquee-track span{
  display:inline-flex;
  align-items:center;
  gap:16px;
  padding:0 32px;
  font-size:32px;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}
.marquee-track span b{color:var(--ink);font-weight:700;}
@keyframes scroll-left{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- Section shell ---------- */
section{padding:100px 40px;}
section.clients{padding-top:80px;padding-bottom:80px;}
.section-inner{max-width:var(--container);margin:0 auto;}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:56px;
}
.section-head-copy{max-width:640px;}
.section-head-copy .eyebrow{display:inline-flex;}
.section-head h2{font-size:40px;max-width:640px;}
.section-head p{color:var(--gray);font-size:16px;max-width:380px;}

/* ---------- Positioning (Who we are) ---------- */
.positioning{background:var(--porcelain);}
.positioning-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:72px;
  align-items:center;
}
.positioning-grid h2{font-size:36px;margin-bottom:20px;}
.positioning-grid p{color:var(--gray);font-size:16px;margin-bottom:16px;}
.positioning-visual{
  aspect-ratio:4/3;
  border-radius:var(--radius-lg);
  background:var(--ink);
  position:relative;
  overflow:hidden;
}
.positioning-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- Interior page hero (About/Work/Services/For Startups) ---------- */
.page-hero{
  padding:64px 40px 56px;
  max-width:var(--container);
  margin:0 auto;
  text-align:center;
}
.page-hero .eyebrow{justify-content:center;}
.page-hero h1{
  font-size:52px;
  max-width:820px;
  margin:0 auto 20px;
  letter-spacing:-0.03em;
}
.page-hero p.sub{
  font-size:19px;
  color:var(--gray);
  max-width:600px;
  margin:0 auto;
}
@media (max-width:900px){
  .page-hero{padding:40px 20px 40px;}
  .page-hero h1{font-size:32px;}
  .page-hero p.sub{font-size:16px;}
}

/* ---------- Contact page hero (full-bleed grey band + single-line rotator) ---------- */
.contact-hero{
  background:var(--porcelain);
  max-width:none;
  width:100%;
  margin:0;
}
.contact-hero-inner{
  max-width:var(--container);
  margin:0 auto;
}
.contact-hero h1{
  white-space:nowrap;
  max-width:none;
}
@media (max-width:900px){
  .contact-hero h1{
    white-space:normal;
    line-height:1.35;
  }
  .contact-hero h1 .word-rotator{margin-top:10px;}
}

/* ---------- Value cards (About "why us" / For Startups reasons) ---------- */
.value-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.value-card{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--paper);
  padding:32px;
}
.value-icon{
  width:48px;height:48px;
  border-radius:12px;
  background:rgba(145,73,255,0.1);
  color:var(--purple);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
}
.value-icon i{width:22px;height:22px;}
.value-card h3{font-size:18px;margin-bottom:10px;}
.value-card p{font-size:14px;color:var(--gray);line-height:1.6;}

/* ---------- Process steps (About "how we work") ---------- */
.process-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}
.process-step{
  padding-top:24px;
  border-top:2px solid var(--border);
}
.process-step .step-num{
  display:block;
  font-size:14px;
  font-weight:700;
  color:var(--purple);
  margin-bottom:14px;
}
.process-step h3{font-size:19px;margin-bottom:10px;}
.process-step p{font-size:14px;color:var(--gray);line-height:1.6;}

/* ---------- Case studies ---------- */
/* Simple stacked list — each case study is a plain row separated by an
   end-to-end stroke divider, no card box, no sticky/overlap interaction. */
.case-stack{border-top:1px solid var(--border);}
.case-study{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  padding:56px 0;
  border-bottom:1px solid var(--border);
}
@media (min-width:901px){
  /* Alternate sides row to row — 1st image right, 2nd image left, etc.
     (mobile/tablet always puts the image on top — see max-width:900px below). */
  .case-stack .case-study:nth-child(even) .case-media{order:-1;}
}
.case-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.case-tag{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--purple);
  background:rgba(145,73,255,0.08);
  padding:6px 14px;
  border-radius:var(--pill);
}
.case-tag-word{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:6px 14px;
  border-radius:var(--pill);
}
.case-tag-word.c0{background:rgba(145,73,255,0.1);color:#6B2FD6;}
.case-tag-word.c1{background:rgba(255,199,47,0.24);color:#8A6400;}
.case-tag-word.c2{background:rgba(52,168,83,0.14);color:#1E7A3E;}
.case-tag-word.c3{background:rgba(59,130,246,0.12);color:#1D4ED8;}
.case-tag-word.c4{background:rgba(236,72,153,0.12);color:#BE185D;}
.case-tag-word.c5{background:rgba(20,184,166,0.12);color:#0F766E;}
.case-content h3{font-size:26px;margin-bottom:16px;line-height:1.25;}
.case-content p{color:var(--gray);font-size:15px;margin-bottom:28px;}
.case-stats{
  display:flex;
  gap:32px;
  margin-bottom:28px;
}
.case-stat b{display:block;font-size:24px;font-weight:700;}
.case-stat span{font-size:13px;color:var(--gray);}
.case-media{
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--porcelain-2),var(--porcelain));
  display:flex;align-items:center;justify-content:center;
  color:var(--gray-light);
  font-size:13px;
  font-weight:600;
  overflow:hidden;
}
.case-media img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- Home page work preview: sticky, self-stacking card deck ----------
   Home (index.html) keeps the original card-based interaction: each card
   sticks at the same "top" offset so the next one scrolls up and fully
   covers the one behind it. Scoped to .case-stack-sticky so it only applies
   on the home page — work.html's listing stays the plain divider list above. */
.work-cta{text-align:center;margin-top:32px;}
@media (min-width:901px){
  .work-cta{margin-top:80px;}
}
.case-stack-sticky{position:relative;}
.case-stack-sticky .case-study{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--paper);
  padding:48px;
  margin-bottom:24px;
}
.case-stack-sticky .case-study:nth-child(even) .case-media{order:-1;}
@media (min-width:901px){
  .case-stack-sticky .case-study{
    position:sticky;
    top:120px;
    box-shadow:0 30px 70px rgba(0,0,0,0.05);
    margin-bottom:64px;
  }
  .case-stack-sticky .case-study:nth-child(1){z-index:1;}
  .case-stack-sticky .case-study:nth-child(2){z-index:2;}
  .case-stack-sticky .case-study:nth-child(3){z-index:3;}
  .case-stack-sticky .case-study:nth-child(4){z-index:4;}
  .case-stack-sticky .case-study:last-child{margin-bottom:0;}
}

/* ---------- Work detail (generic case-study template, populated from
   work-data.js by script.js — see the "Work case studies" block there) ---------- */
.wd-back-row{max-width:var(--container);margin:0 auto;padding:32px 40px 0;}
.wd-back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--gray);
}
.wd-back i{width:16px;height:16px;}
.wd-back:hover{color:var(--purple);}

.wd-hero-media,
.wd-image-frame,
.wd-next-media{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:linear-gradient(135deg,var(--porcelain-2),var(--porcelain));
}
.wd-hero-media img,
.wd-image-frame img,
.wd-next-media img{width:100%;height:100%;object-fit:cover;display:block;}
.wd-hero-media{aspect-ratio:16/7;}
.wd-image-frame{aspect-ratio:4/3;}
.wd-next-media{aspect-ratio:16/10;}

.wd-hero-media.wd-img-missing::after,
.wd-image-frame.wd-img-missing::after,
.wd-next-media.wd-img-missing::after,
.case-media.wd-img-missing::after{
  content:"Image placeholder";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--gray-light);font-size:13px;font-weight:600;
}

.wd-about-heading{font-size:40px;letter-spacing:-0.02em;margin-bottom:48px;}
.wd-about-layout{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:60px;
  margin-bottom:48px;
}
.wd-about-side{
  display:flex;flex-direction:column;gap:24px;
  height:fit-content;
}
.wd-about-field{display:flex;flex-direction:column;gap:8px;}
.wd-about-field span{font-size:13px;color:var(--gray);}
.wd-about-field b{font-size:18px;font-weight:700;}
.wd-about-row{
  display:flex;
  gap:32px;
  padding-top:24px;
  border-top:1px solid var(--border);
}
.wd-about-duration b{font-size:44px;font-weight:800;line-height:1;display:flex;align-items:baseline;gap:6px;}
.wd-about-duration .unit{font-size:14px;font-weight:600;color:var(--gray);}
.wd-tag-list{display:flex;flex-wrap:wrap;gap:8px;}
.wd-tag{
  display:inline-block;
  padding:6px 14px;
  border-radius:var(--pill);
  background:rgba(145,73,255,0.1);
  color:var(--purple);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.wd-about-main p{color:var(--ink);font-size:17px;line-height:1.7;margin-bottom:28px;}
.wd-about-ctas{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}

.wd-images-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.wd-challenge-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.wd-challenge-card{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--paper);
  padding:40px;
}
.wd-challenge-num{display:block;font-size:14px;font-weight:700;color:var(--purple);margin-bottom:16px;}
.wd-challenge-card h3{font-size:22px;margin-bottom:14px;}
.wd-challenge-card p{color:var(--gray);font-size:15px;line-height:1.7;}

.wd-takeaways-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  list-style:none;
  padding:0;margin:0;
}
.wd-takeaways-grid li{
  display:flex;align-items:flex-start;gap:14px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:22px 24px;
  background:var(--paper);
}
.wd-takeaways-grid li i{width:20px;height:20px;color:var(--purple);flex-shrink:0;margin-top:2px;}
.wd-takeaways-grid li span{font-size:15px;color:var(--ink);line-height:1.6;}

.wd-next-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--paper);
  padding:40px;
  text-decoration:none;
  color:inherit;
  transition:box-shadow .3s ease, transform .3s ease;
}
.wd-next-card:hover{box-shadow:0 30px 70px rgba(0,0,0,0.08);transform:translateY(-4px);}
.wd-next-content .eyebrow{margin-bottom:16px;}
.wd-next-content h3{font-size:28px;margin-bottom:24px;line-height:1.3;}

@media (max-width:900px){
  .wd-back-row{padding:24px 20px 0;}
  .wd-about-heading{font-size:28px;margin-bottom:28px;}
  .wd-about-layout{grid-template-columns:1fr;gap:28px;margin-bottom:32px;}
  .wd-about-duration b{font-size:36px;}
  .wd-images-grid{grid-template-columns:1fr;}
  .wd-hero-media{aspect-ratio:4/3;}
  .wd-challenge-grid{grid-template-columns:1fr;}
  .wd-takeaways-grid{grid-template-columns:1fr;}
  .wd-next-card{grid-template-columns:1fr;padding:28px;gap:24px;}
  .wd-next-content h3{font-size:22px;}
}

/* ---------- Client logos (moving ticker, same pattern as the hero screens
   ticker: track duplicated once for a seamless loop, edges fade via mask) ---------- */
.logo-strip{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.logo-track{
  display:flex;
  gap:16px;
  width:max-content;
  animation:scroll-left 30s linear infinite;
}
.logo-cell{
  flex:none;
  width:200px;
  min-height:96px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  color:var(--gray-light);
  font-weight:700;
  font-size:15px;
  letter-spacing:0.02em;
  padding:16px;
}
.logo-cell img{max-width:100%;max-height:48px;object-fit:contain;}

/* ---------- Services (flip cards: front = number/icon/title, back = title/description) ---------- */
.services{background:var(--paper);}
.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.services-grid.retainer-grid{grid-template-columns:repeat(3,1fr);}
.service-card{
  aspect-ratio:4/3.6;
  perspective:1400px;
}
.service-card-inner{
  position:relative;
  width:100%;
  height:100%;
  transition:transform .6s cubic-bezier(.4,.15,.2,1);
  transform-style:preserve-3d;
}
/* Desktop: flip on hover. Touch devices flip via tap (JS toggles .is-flipped
   since :hover would otherwise get stuck after tap on touchscreens). */
@media (hover:hover) and (pointer:fine){
  .service-card:hover .service-card-inner{transform:rotateY(180deg);}
}
.service-card-inner.is-flipped{transform:rotateY(180deg);}
.service-card-front,.service-card-back{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:var(--radius-md);
  padding:32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.service-card-front{
  background:var(--porcelain);
  color:var(--ink);
}
.service-card-back{
  background:var(--yellow);
  color:var(--ink);
  transform:rotateY(180deg);
  justify-content:flex-end;
}
/* Desktop: transparent to layout so .service-num/.service-icon act as direct
   flex children of .service-card-front (keeps the num/icon/title 3-way
   vertical spread). Becomes a real row only on mobile/tablet — see below. */
.service-top-row{display:contents;}
.service-num{font-size:14px;font-weight:700;color:var(--gray);}
.service-icon{
  width:60px;height:60px;
  border-radius:14px;
  background:rgba(145,73,255,0.12);
  color:var(--purple);
  display:flex;align-items:center;justify-content:center;
}
.service-icon i{width:30px;height:30px;}
.service-card-front h3{font-size:24px;font-weight:600;line-height:1.25;}
.service-card-back h3{font-size:24px;font-weight:600;margin-bottom:10px;color:var(--ink);}
.service-card-back p{font-size:15px;line-height:1.6;color:rgba(28,29,32,0.75);}

/* ---------- Services (Services page): icon/title/description rows with a
   tag cloud on the right, one service per row — used on services.html only.
   The homepage keeps the flip-card grid above (.service-card). ---------- */
.service-list{border-top:1px solid var(--border);}
.service-row{
  display:flex;
  gap:32px;
  padding:48px 0;
  border-bottom:1px solid var(--border);
  align-items:flex-start;
}
.service-row-left{flex:0 0 40%;}
.service-row-icon{
  width:56px;height:56px;
  background:rgba(145,73,255,0.12);
  color:var(--purple);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
}
.service-row-icon i{width:26px;height:26px;}
.service-row-left h3{font-size:26px;font-weight:800;letter-spacing:-0.01em;margin-bottom:14px;}
.service-row-left p{font-size:16px;color:var(--gray);line-height:1.6;}
.service-row-cta{margin-top:24px;}
/* Tag "playground": a physics box. Tags fall from above with gravity, land
   on the floor, and never overlap each other or cross the walls (script.js
   runs a tiny AABB collision simulation). The frame-outline/frame-corner
   pair is the same purple "always-on" frame used on the hero word-rotator —
   here it decorates the outer wrap so it can bleed slightly past the edge
   without being clipped by the inner box's overflow:hidden. */
.service-row-tags-wrap{position:relative;flex:0 0 60%;width:60%;}
.service-row-tags{
  position:relative;
  min-height:260px;
  border-radius:0;
  background:var(--porcelain);
  overflow:hidden;
}
/* Retainer section already sits on a porcelain page background — keep the
   tag box white there so it still reads as a distinct container. */
.retainer-services .service-row-tags{background:var(--paper);}
/* No-JS fallback: tags just wrap normally, bottom-aligned. */
.service-row-tags{display:flex;flex-wrap:wrap;align-content:flex-end;gap:12px;padding:16px;}
.js-ready .service-row-tags{display:block;}
.service-tag{
  padding:10px 20px;
  border:none;
  border-radius:var(--pill);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.03em;
  white-space:nowrap;
  cursor:grab;
  user-select:none;
  touch-action:none;
}
/* Cycles a light tint / darker-shade-of-the-same-hue text pairing across
   the tags so a container full of pills reads as varied, not uniform. */
.service-tag:nth-child(6n+1){background:rgba(145,73,255,0.14);color:#6B2FD6;}
.service-tag:nth-child(6n+2){background:rgba(255,199,47,0.28);color:#8A6400;}
.service-tag:nth-child(6n+3){background:rgba(52,168,83,0.16);color:#1E7A3E;}
.service-tag:nth-child(6n+4){background:rgba(59,130,246,0.14);color:#1D4ED8;}
.service-tag:nth-child(6n+5){background:rgba(236,72,153,0.14);color:#BE185D;}
.service-tag:nth-child(6n+6){background:rgba(20,184,166,0.14);color:#0F766E;}
.service-tag.dragging{
  cursor:grabbing;
  z-index:5;
  box-shadow:0 10px 24px rgba(0,0,0,0.14);
}
@media (max-width:900px){
  .service-row{flex-direction:column;gap:24px;padding:32px 0;}
  .service-row-left{flex:none;width:100%;}
  .service-row-icon{width:48px;height:48px;margin-bottom:18px;}
  .service-row-icon i{width:22px;height:22px;}
  .service-row-left h3{font-size:22px;margin-bottom:10px;}
  .service-row-left p{font-size:15px;}
  .service-row-tags-wrap{flex:none;width:100%;}
  .service-row-tags{min-height:280px;}
  .service-tag{padding:8px 16px;font-size:12px;}
}

/* ---------- FAQ (two-column: heading left, card accordion right) ---------- */
.faq-layout{
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:60px;
  align-items:start;
}
.faq-layout .section-head-copy h2{font-size:40px;margin-top:16px;}
.faq-list{
  /* Bleed the list out by the same amount as .faq-item's horizontal padding,
     so the question text lines up with the heading column by default, and
     the hover/open background reveals that padding as a floating card. */
  margin:0 -24px;
}
.faq-item{
  border-radius:var(--radius-md);
  padding:0 24px;
  margin:2px 0;
  cursor:pointer;
  transition:background .2s ease;
}
.faq-item:hover,
.faq-item.open{background:var(--porcelain-2);}
.faq-row{
  display:flex;
  align-items:center;
  gap:24px;
  padding:28px 0;
  border-bottom:1px solid var(--border);
  transition:border-color .2s ease;
}
.faq-item:hover .faq-row,
.faq-item.open .faq-row{border-bottom-color:transparent;}
.faq-item:last-child .faq-row{border-bottom:none;}
.faq-num{font-size:13px;font-weight:700;color:var(--gray);min-width:22px;}
.faq-q{flex:1;}
.faq-q span{font-size:18px;font-weight:600;}
.faq-icon-ring{
  width:44px;height:44px;
  border-radius:50%;
  background:var(--porcelain-2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .25s ease, transform .25s ease;
}
.faq-item:hover .faq-icon-ring{background:#fff;}
.faq-icon-ring i{width:18px;height:18px;color:var(--ink);}
.faq-item.open .faq-icon-ring{background:#fff;transform:rotate(45deg);}
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.faq-a p{color:var(--gray);font-size:15px;line-height:1.55;padding:0 68px 28px 46px;}
.faq-item.open .faq-a{max-height:320px;}

/* ---------- Testimonials (draggable card carousel) ---------- */
.testimonials{background:var(--porcelain);color:var(--ink);overflow:hidden;}
.testimonials .eyebrow{margin-bottom:16px;}
.testimonials h2{font-size:40px;max-width:640px;margin-bottom:40px;}
.testimonial-carousel-wrap{overflow:visible;}
.testimonial-track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
  scrollbar-width:none;
  outline:none;
}
.testimonial-track::-webkit-scrollbar{display:none;}
.testimonial-card{
  scroll-snap-align:start;
  flex:0 0 auto;
  width:380px;
  min-height:280px;
  background:var(--paper);
  border-radius:var(--radius-md);
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.testimonial-card p{font-size:16px;color:var(--ink);line-height:1.6;}
.testimonial-who{display:flex;align-items:center;gap:12px;margin-top:24px;}
.testimonial-avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--purple);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:#fff;
  flex-shrink:0;
  overflow:hidden;
}
.testimonial-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.testimonial-who-text{flex:1;min-width:0;}
.testimonial-who .name{font-size:15px;font-weight:600;color:var(--ink);}
.testimonial-who .role{font-size:13px;color:var(--gray);}
.testimonial-linkedin{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);
  flex-shrink:0;
  transition:background .2s ease;
}
.testimonial-linkedin svg{width:16px;height:16px;}
@media (hover:hover) and (pointer:fine){
  .testimonial-linkedin:hover{background:var(--porcelain-2);}
}
.testimonial-controls{display:flex;align-items:center;gap:24px;margin-top:36px;}
.testimonial-scrollbar{
  flex:1;
  height:3px;
  background:var(--border-strong);
  border-radius:var(--pill);
  position:relative;
  cursor:pointer;
}
.testimonial-scrollbar-thumb{
  position:absolute;
  top:50%;
  left:0;
  height:5px;
  background:var(--ink);
  border-radius:var(--pill);
  transform:translateY(-50%);
  cursor:grab;
}
.testimonial-scrollbar-thumb:active{cursor:grabbing;}
.testimonial-arrows{display:flex;gap:10px;flex-shrink:0;}
.testimonial-arrow{
  width:48px;height:48px;border-radius:50%;
  background:var(--paper);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);
  transition:background .2s ease;
}
.testimonial-arrow i{width:18px;height:18px;}
@media (hover:hover) and (pointer:fine){
  .testimonial-arrow:hover{background:var(--porcelain-2);}
}
.testimonial-arrow:disabled{opacity:0.35;cursor:default;}

/* ---------- Contact ---------- */
#contact{background:var(--porcelain);}
.contact-block{
  background:var(--paper);
  border-radius:var(--radius-lg);
  padding:72px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
}
.contact-block h2{font-size:36px;margin-bottom:16px;}
.contact-block p{color:var(--gray);margin-bottom:8px;}
.contact-info{display:flex;flex-direction:column;gap:16px;margin-top:32px;}
.contact-info-item{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  width:fit-content;
}
.contact-info-icon{
  width:40px;height:40px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--purple);
  flex-shrink:0;
}
.contact-info-icon i{width:17px;height:17px;}
@media (hover:hover) and (pointer:fine){
  .contact-info-item:hover .contact-info-icon{background:var(--purple);color:#fff;border-color:var(--purple);}
}
.contact-form{display:flex;flex-direction:column;gap:32px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.field label{
  display:block;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:14px;
}
.contact-form input,.contact-form textarea{
  width:100%;
  padding:0 0 12px;
  border:none;
  border-bottom:1px solid var(--border-strong);
  border-radius:0;
  background:transparent;
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--gray-light);}
.contact-form textarea{min-height:90px;resize:vertical;}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none;
  border-bottom-color:var(--purple);
}
.pill-select{display:flex;flex-wrap:wrap;gap:12px;}
.pill-option{
  padding:12px 22px;
  border-radius:var(--pill);
  border:1px solid var(--border-strong);
  background:transparent;
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
  font-weight:500;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .pill-option:hover:not(.selected){border-color:var(--ink);}
}
.pill-option.selected{background:var(--ink);color:#fff;border-color:var(--ink);}
/* Shown only once the "Others" pill is selected — reuses the same
   underline input styling as the rest of the form (.contact-form input). */
.other-service-input{display:none;margin-top:16px;}
.other-service-input.show{display:block;}
.contact-submit{width:100%;justify-content:center;margin-top:8px;}
.contact-submit.is-success{background:var(--purple);}
.contact-submit.is-sending{opacity:.7;pointer-events:none;}
/* Honeypot: present in the DOM for bots to fill, invisible to real users
   (kept off-screen rather than display:none, which some bots skip). */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}
.form-error{display:none;color:#E0455F;font-size:14px;font-weight:600;margin-top:14px;}

/* ---------- Footer ---------- */
footer{background:var(--porcelain);padding:80px 40px 40px;}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:64px;
}
.footer-logo{height:44px;width:auto;}
.footer-brand p{color:var(--gray);font-size:14px;margin:20px 0;max-width:280px;line-height:1.6;}
.footer-col h4{font-size:14px;font-weight:700;margin-bottom:20px;}
.footer-col ul{display:flex;flex-direction:column;gap:12px;}
.footer-col a,
.footer-bottom a{
  position:relative;
  display:inline-block;
  width:fit-content;
}
.footer-col a{font-size:14px;color:var(--gray);}
.footer-col a::after,
.footer-bottom a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .25s ease, color .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .footer-col a:hover{color:var(--purple);}
  .footer-col a:hover::after,
  .footer-bottom a:hover::after{transform:scaleX(1);transform-origin:left;}
  .footer-bottom a:hover{color:var(--ink);}
}
.footer-col a.social-link{display:inline-flex;align-items:center;gap:10px;}
.social-icon-text{
  width:20px;height:20px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;letter-spacing:-0.02em;
  border-radius:5px;
  border:1px solid var(--border);
  color:var(--gray);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .social-link:hover .social-icon-text{background:var(--purple);color:#fff;border-color:var(--purple);}
}
.footer-bottom{
  border-top:1px solid var(--border);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:var(--gray);
}

/* ---------- Floating scroll-to-top button ---------- */
.scroll-top-wrap{
  position:fixed;
  right:32px;
  bottom:32px;
  z-index:60;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.scroll-top-wrap.visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.scroll-top-btn{
  width:52px;height:52px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--border);
  box-shadow:0 14px 32px rgba(0,0,0,0.14);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);
  animation:float-y 2.4s ease-in-out infinite;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.scroll-top-btn i{width:20px;height:20px;}
@media (hover:hover) and (pointer:fine){
  .scroll-top-btn:hover{background:var(--purple);color:#fff;border-color:var(--purple);}
}
@keyframes float-y{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}
@media (max-width:900px){
  .scroll-top-wrap{right:20px;bottom:20px;}
  .scroll-top-btn{width:46px;height:46px;}
}

/* ---------- Scroll reveal (progressive enhancement: only hides content once JS confirms it's running) ---------- */
.js-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease;}
.js-ready .reveal.in{opacity:1;transform:translateY(0);}

/* Generic stagger steps for heading/subheading/tag/CTA groups — apply
   alongside .reveal so the eyebrow, heading, paragraph(s), and CTA within a
   section fade in one after another instead of all at once. */
.reveal.reveal-1{transition-delay:0ms;}
.reveal.reveal-2{transition-delay:140ms;}
.reveal.reveal-3{transition-delay:280ms;}
.reveal.reveal-4{transition-delay:420ms;}
.reveal.reveal-5{transition-delay:560ms;}

/* Staggered cascade for grid/list items: each card in these grids fades in
   slightly after the one before it, instead of the whole row popping in at
   once. Individual .faq-item / .case-study reveals already stagger
   naturally via scroll timing, so they don't need this. */
.services-grid .service-card:nth-child(1){transition-delay:0ms;}
.services-grid .service-card:nth-child(2){transition-delay:90ms;}
.services-grid .service-card:nth-child(3){transition-delay:180ms;}
.services-grid .service-card:nth-child(4){transition-delay:270ms;}
.services-grid .service-card:nth-child(5){transition-delay:360ms;}
.services-grid .service-card:nth-child(6){transition-delay:450ms;}
.services-grid .service-card:nth-child(7){transition-delay:540ms;}
.services-grid .service-card:nth-child(8){transition-delay:630ms;}


.faq-list .faq-item:nth-child(1){transition-delay:0ms;}
.faq-list .faq-item:nth-child(2){transition-delay:80ms;}
.faq-list .faq-item:nth-child(3){transition-delay:160ms;}
.faq-list .faq-item:nth-child(4){transition-delay:240ms;}
.faq-list .faq-item:nth-child(5){transition-delay:320ms;}
.faq-list .faq-item:nth-child(6){transition-delay:400ms;}
.faq-list .faq-item:nth-child(7){transition-delay:480ms;}
.faq-list .faq-item:nth-child(8){transition-delay:560ms;}


/* ---------- Mobile ---------- */
@media (max-width:900px){
  .container,.nav-inner,.hero,section{padding-left:20px;padding-right:20px;}
  section{padding-top:64px;padding-bottom:64px;}
  section.clients{padding-top:44px;padding-bottom:44px;}
  .marquee-wrap{padding:20px 0;}
  .marquee-track span{font-size:18px;padding:0 18px;gap:10px;}
  .nav-links{position:fixed;top:69px;left:0;right:0;bottom:0;z-index:90;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 24px;overflow-y:auto;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;}
  .nav-links.open{opacity:1;transform:translateY(0);pointer-events:auto;}
  .nav-links > a.nav-link{
    padding:20px 0;
    border-bottom:1px solid var(--border);
    width:100%;
    justify-content:space-between;
    font-size:20px;
    font-weight:600;
  }
  .nav-link-arrow{display:block;width:24px;height:24px;color:var(--gray);}
  /* Flat, full-width hover/open highlight instead of the desktop pill shape —
     border-radius rounds the border-bottom line too (not just the hover fill),
     which was showing up as a curved underline even at rest. Zero it out
     unconditionally on mobile, not just on :hover. */
  .nav-link{border-radius:0;}
  .nav-services{border-bottom:1px solid var(--border);}
  .nav-services-trigger{width:100%;justify-content:space-between;padding:20px 12px;margin:0 -12px;border-bottom:none;font-size:20px;font-weight:600;border-radius:0;}
  .nav-services-trigger:hover,
  .nav-services.open .nav-services-trigger{background:var(--porcelain-2);}
  /* Breathing room between the trigger row and the opened services content */
  .services-menu{position:static;transform:none;width:100%;padding-top:12px;}
  .services-menu-inner{background:transparent;border:none;border-radius:0;box-shadow:none;padding:0 0 16px;}
  .services-menu-grid{grid-template-columns:1fr;gap:20px;}
  .nav-menu-toggle{display:flex;}
  .hero{padding-top:56px;text-align:center;}
  .hero h1{font-size:34px;margin:0 auto 20px;}
  .hero p.sub{margin:0 auto 28px;font-size:16px;}
  /* Default (true mobile, <420px, see override below for 420-900px "tablet"
     range): stacked, full-width CTAs. */
  .hero-ctas{flex-direction:column;align-items:stretch;}
  .hero-ctas .btn,.hero-ctas .btn-tertiary,.hero-ctas .btn-frame{width:100%;justify-content:center;text-align:center;}
  .section-head{flex-direction:column;align-items:flex-start;gap:16px;}
  .section-head h2{font-size:28px;}
  .testimonials h2{font-size:28px;margin-bottom:24px;}
  .positioning-grid{grid-template-columns:1fr;gap:32px;}
  .faq-layout{grid-template-columns:1fr;gap:24px;}
  .faq-layout .section-head-copy h2{font-size:28px;}
  .faq-list{margin:0 -12px;}
  .faq-item{padding:0 12px;}
  .faq-a p{padding:0 12px 24px 40px;}
  .case-study{grid-template-columns:1fr;padding:40px 0;gap:24px;}
  .case-study .case-media{order:-1;}
  .case-stack-sticky .case-study{padding:28px;}
  .case-stack-sticky .case-study .case-media{order:0;}
  .case-stats{gap:20px;flex-wrap:wrap;}
  .logo-cell{width:140px;min-height:72px;font-size:13px;}
  .logo-track{gap:12px;animation-duration:22s;}
  .services-grid{grid-template-columns:1fr;}
  /* No flip on mobile/tablet — show icon, title, and description together
     on one static card instead of relying on hover/tap to flip. */
  .service-card{aspect-ratio:auto;perspective:none;}
  .service-card-inner{transform:none !important;height:auto;}
  .service-card-front,.service-card-back{
    position:static;
    transform:none;
    backface-visibility:visible;
    border-radius:0;
  }
  .service-card-front{
    background:var(--porcelain);
    border-radius:var(--radius-md) var(--radius-md) 0 0;
    padding-bottom:20px;
  }
  /* Number + icon sit on one row (icon on the right), title below. */
  .service-top-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
  }
  .service-card-back{
    background:var(--porcelain);
    border-radius:0 0 var(--radius-md) var(--radius-md);
    justify-content:flex-start;
    padding-top:0;
  }
  .service-card-back h3{display:none;}
  .service-card-back p{color:var(--gray);}
  /* Exactly one full-width card visible at a time; snap handles the rest. */
  .testimonial-card{width:100%;}
  .testimonial-controls{margin-top:24px;gap:16px;}
  .testimonial-arrow{width:42px;height:42px;}
  .contact-block{grid-template-columns:1fr;padding:32px;gap:36px;}
  .form-row{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  footer{padding:40px 20px 20px;}
  .value-grid{grid-template-columns:1fr;}
  .process-steps{grid-template-columns:1fr;gap:28px;}
  .services-grid.retainer-grid{grid-template-columns:1fr;}
}

/* Tablet (420-900px): keep the hero laid out like desktop — centered text,
   CTAs side by side instead of stretched full-width. Only true mobile
   (<420px, block below) gets the stacked/full-width treatment. */
@media (min-width:420px) and (max-width:900px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .value-grid{grid-template-columns:1fr 1fr;}
  .process-steps{grid-template-columns:1fr 1fr;}
  .services-grid.retainer-grid{grid-template-columns:1fr 1fr;}
  .hero-ctas{
    flex-direction:row;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
  }
  .hero-ctas .btn,.hero-ctas .btn-tertiary,.hero-ctas .btn-frame{
    width:auto;
  }
}

/* True mobile (<420px): force "We Frame your" onto its own line, rotating
   word centered on the line below — hidden on tablet/desktop where it isn't
   needed. */
.hero-break{display:none;}
@media (max-width:419px){
  .hero-break{display:block;}
  .word-rotator{margin-top:14px;}
}

/* ============================================
   Editorial About page — slower, calmer, typography-led.
   Distinct rhythm from the homepage: narrower reading columns, generous
   vertical whitespace, alternating light/dark sections, minimal chrome.
   ============================================ */

/* Inverted eyebrow for use on dark (ink) sections */
.eyebrow.eyebrow-invert{color:var(--yellow);}
.eyebrow.eyebrow-invert::before{background:var(--yellow);}

/* ---------- Story hero (opening statement) ---------- */
.story-hero{
  padding:120px 40px 48px;
  max-width:var(--container);
  margin:0 auto;
  text-align:center;
}
.story-hero .eyebrow{justify-content:center;}
.story-heading{
  font-size:56px;
  max-width:880px;
  margin:0 auto;
  letter-spacing:-0.03em;
  line-height:1.15;
}
.story-heading-muted{color:var(--gray-light);}

/* ---------- Story body (text left, image right on desktop) ---------- */
.story-body{padding:32px 40px 120px;}
.story-body-inner{max-width:var(--container);margin:0 auto;}
.story-split{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:72px;
  align-items:start;
}
.story-split-text p{
  font-size:19px;
  line-height:1.8;
  color:var(--gray);
  margin-bottom:28px;
}
.story-split-text .story-emphasis{
  font-size:28px;
  line-height:1.35;
  color:var(--ink);
  font-weight:700;
  letter-spacing:-0.01em;
  margin:44px 0;
}
.story-split-text .story-closing{
  font-size:34px;
  line-height:1.3;
  color:var(--ink);
  font-weight:700;
  letter-spacing:-0.02em;
  margin:56px 0 0;
}
.story-split-visual{
  position:sticky;
  top:120px;
  aspect-ratio:4/3;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--porcelain-2);
}
.story-split-visual img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- Philosophy (sticky-pinned, scroll-linked word highlight + parallax bg) ----------
   IMPORTANT: .philosophy-pin itself must NOT have overflow:hidden — any ancestor of a
   position:sticky element with overflow other than visible breaks the sticky behavior.
   The oversized/clipped image lives one level down instead, as a sibling of
   .philosophy-pin-wrap rather than an ancestor of the sticky .philosophy-pin-inner. */
.philosophy-pin{background:var(--ink);position:relative;}
.philosophy-pin-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.philosophy-pin-bg img{
  position:absolute;
  top:-15%;left:0;
  width:100%;height:130%;
  object-fit:cover;
  display:block;
  will-change:transform;
}
.philosophy-pin-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(28,29,32,0.45) 0%,rgba(28,29,32,0.6) 45%,rgba(28,29,32,0.8) 100%);
  pointer-events:none;
}
.philosophy-pin-wrap{height:300vh;position:relative;z-index:2;}
.philosophy-pin-inner{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:0 24px;
  text-align:center;
}
.philosophy-pin-inner .eyebrow{color:var(--yellow);justify-content:center;}
.philosophy-pin-text{
  max-width:920px;
  font-size:44px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:-0.01em;
}
.phil-word{color:#fff;}
.js-ready .phil-word{color:rgba(255,255,255,0.16);transition:color .2s ease;}
.js-ready .phil-word.active{color:#fff;}
@media (prefers-reduced-motion:reduce){
  .js-ready .phil-word{color:#fff;transition:none;}
  .philosophy-pin-bg{transform:none !important;}
}

/* ---------- The Frame Principles (self-stacking scroll deck) ----------
   Reuses the same sticky self-stacking mechanic as .case-stack on the Work
   page (each card sticks at the same top offset so the next one covers the
   last), plus a JS-driven entrance: every card slides in from the right
   (translateX only) as it approaches its stacking point, so the natural
   upward scroll motion reads as "in from the right, then up into the
   stack." See the principle-card IIFE in script.js. Desktop only — mobile
   falls back to a plain stacked list via the shared .reveal fade-up. */
.principles-layout{
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:60px;
  align-items:start;
}
.principles-layout .section-head-copy h2{font-size:40px;margin-top:16px;}
@media (min-width:901px){
  .principles-layout .section-head-copy{position:sticky;top:120px;}
}
.principle-stack{position:relative;}
.principle-card{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:48px;
  margin-bottom:24px;
}
.principle-stack .principle-card:nth-child(even){background:var(--porcelain);}
.principle-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:56px;
}
.principle-icon{
  width:64px;height:64px;
  border-radius:16px;
  background:rgba(145,73,255,0.12);
  color:var(--purple);
  display:flex;align-items:center;justify-content:center;
}
.principle-icon i{width:28px;height:28px;}
.principle-card .principle-num{font-size:20px;font-weight:700;color:var(--purple);}
.principle-card h3{font-size:24px;font-weight:700;letter-spacing:-0.01em;margin-bottom:16px;}
.principle-card p{font-size:17px;color:var(--gray);line-height:1.7;max-width:640px;}
@media (min-width:901px){
  /* Same mechanic as .case-stack on the Work page: sticky siblings at the
     same top offset, each one's own margin-bottom is the runway the next
     card scrolls through before it catches up and covers the last. */
  .principle-card{
    position:sticky;
    top:140px;
    margin-bottom:130px;
  }
  .principle-stack .principle-card:last-child{margin-bottom:0;}
  .principle-stack .principle-card:nth-child(1){z-index:1;}
  .principle-stack .principle-card:nth-child(2){z-index:2;}
  .principle-stack .principle-card:nth-child(3){z-index:3;}
  .principle-stack .principle-card:nth-child(4){z-index:4;}
  .principle-stack .principle-card:nth-child(5){z-index:5;}
  .principle-stack .principle-card:nth-child(6){z-index:6;}
  .principle-stack .principle-card:nth-child(7){z-index:7;}
  .principle-stack .principle-card:nth-child(8){z-index:8;}
  /* JS drives transform every scroll frame — a CSS transition here would
     lag behind the scroll position instead of tracking it precisely. */
  .js-ready .principle-card.reveal{transition:opacity .6s ease;transform:translateX(280px);}
}
@media (max-width:900px){
  .principle-card{padding:32px;}
  .principle-card-top{margin-bottom:32px;}
  .principle-card h3{font-size:22px;}
  .principle-card p{font-size:15px;}
}


/* ---------- The Frame Difference (photo + stat mosaic) ---------- */
.why-bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-areas:
    "p1 s1 p2 p2"
    "p3 p3 s2 p4";
  gap:20px;
}
.why-bento > *{
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  min-height:300px;
}
.bento-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.bento-photo-1{grid-area:p1;}
.bento-photo-2{grid-area:p2;}
.bento-photo-3{grid-area:p3;}
.bento-photo-4{grid-area:p4;}
.bento-stat{
  background:linear-gradient(160deg,#FFF6E0,#FFEAB3);
  padding:40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.bento-stat-1{grid-area:s1;}
.bento-stat-2{grid-area:s2;}
.bento-stat-blob{
  position:absolute;
  top:-30px;right:-30px;
  width:120px;height:120px;
  border-radius:50%;
  background:rgba(255,199,47,0.55);
  filter:blur(2px);
}
.bento-stat h3{position:relative;font-size:19px;font-weight:700;letter-spacing:-0.01em;margin-bottom:18px;}
.bento-num{position:relative;display:block;font-size:52px;font-weight:800;letter-spacing:-0.02em;color:var(--ink);line-height:1;}
.bento-num-label{position:relative;display:block;font-size:14px;font-weight:600;color:rgba(28,29,32,0.6);margin-top:8px;margin-bottom:18px;}
.bento-stat p{position:relative;font-size:15px;color:rgba(28,29,32,0.72);line-height:1.6;max-width:260px;}
/* Tablet + mobile: 4 rows — photo+stat side by side, then the two full-width
   photos stacked, then stat+photo side by side again. */
@media (max-width:900px){
  .why-bento{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "p1 s1"
      "p2 p2"
      "p3 p3"
      "s2 p4";
  }
  .why-bento > *{min-height:240px;}
  .bento-stat{padding:28px;}
  .bento-num{font-size:34px;}
  .bento-stat h3{font-size:16px;margin-bottom:12px;}
  .bento-num-label{font-size:12px;margin-bottom:12px;}
  .bento-stat p{font-size:13px;}
}
@media (max-width:600px){
  .why-bento{gap:12px;}
  .why-bento > *{min-height:180px;}
  .bento-stat{padding:20px;}
  .bento-num{font-size:26px;}
  .bento-stat h3{font-size:14px;margin-bottom:8px;}
  .bento-num-label{font-size:11px;margin-bottom:8px;}
  .bento-stat p{font-size:12px;line-height:1.5;}
  .bento-stat-blob{width:80px;height:80px;top:-20px;right:-20px;}
}


@media (max-width:900px){
  .story-hero{padding:56px 20px 32px;}
  .story-heading{font-size:32px;}
  .story-body{padding:24px 20px 64px;}
  .story-split{grid-template-columns:1fr;gap:32px;}
  .story-split-visual{position:static;aspect-ratio:16/10;order:2;}
  .story-split-text{order:1;}
  .story-split-text p{font-size:16px;}
  .story-split-text .story-emphasis{font-size:22px;margin:32px 0;}
  .story-split-text .story-closing{font-size:24px;margin-top:40px;}
  .philosophy-pin-wrap{height:220vh;}
  .philosophy-pin-text{font-size:26px;line-height:1.5;}
  .principles-layout{grid-template-columns:1fr;gap:24px;}
  .principles-layout .section-head-copy h2{font-size:28px;}
}

/* ---------- Process loop (three-circle diagram, dedicated Process page) ---------- */
.process-loop-desktop{max-width:900px;margin:0 auto;}
.process-loop-svg{width:100%;height:auto;display:block;overflow:visible;}
.loop-circle{fill:none;stroke:var(--border-strong);stroke-width:1.25;}
.loop-label{font-family:'Urbanist',sans-serif;font-size:22px;font-weight:700;fill:var(--ink);letter-spacing:0.02em;}
.loop-connector{fill:none;stroke:var(--border-strong);stroke-width:1.25;}
.loop-dot{fill:var(--ink);}
.loop-dash{stroke:var(--border-strong);stroke-width:1.25;stroke-dasharray:4 5;}
.loop-box{fill:var(--paper);stroke:var(--border-strong);stroke-width:1.25;}
.loop-box-label{font-family:'Urbanist',sans-serif;font-size:15px;font-weight:700;fill:var(--ink);letter-spacing:0.02em;}
.loop-callout{font-family:'Urbanist',sans-serif;}
.loop-callout h4{font-size:16px;font-weight:700;margin:0 0 10px;color:var(--ink);}
.loop-callout p{font-size:14px;line-height:1.55;color:var(--gray);margin:0;}

/* Diagram "forms" on scroll-in: circles draw first, then connectors, then the
   center mark and value box, then the text fades up last. Gated behind
   .js-ready (progressive enhancement — no-JS users just see the finished
   diagram immediately) and .process-loop-desktop.in (the same scroll-reveal
   observer already used across the site adds .in once this section scrolls
   into view). */
.js-ready .loop-circle,
.js-ready .loop-connector,
.js-ready .loop-dash,
.js-ready .loop-box{
  stroke-dasharray:100;
  stroke-dashoffset:100;
}
.js-ready .loop-dot,
.js-ready .loop-label,
.js-ready .loop-box-label,
.js-ready .loop-foreign{opacity:0;}
.js-ready .loop-dot{transform-box:fill-box;transform-origin:center;transform:scale(0);}
.js-ready .loop-foreign{transform:translateY(10px);}

@keyframes loop-draw{to{stroke-dashoffset:0;}}
@keyframes loop-fade{to{opacity:1;}}
@keyframes loop-pop{to{opacity:1;transform:scale(1);}}
@keyframes loop-rise{to{opacity:1;transform:translateY(0);}}

.process-loop-anim.in .loop-circle-1{animation:loop-draw 1.1s cubic-bezier(.65,0,.35,1) forwards;}
.process-loop-anim.in .loop-circle-2{animation:loop-draw 1.1s cubic-bezier(.65,0,.35,1) .15s forwards;}
.process-loop-anim.in .loop-circle-3{animation:loop-draw 1.1s cubic-bezier(.65,0,.35,1) .3s forwards;}

.process-loop-anim.in .loop-label-1{animation:loop-fade .5s ease 1.4s forwards;}
.process-loop-anim.in .loop-label-2{animation:loop-fade .5s ease 1.55s forwards;}
.process-loop-anim.in .loop-label-3{animation:loop-fade .5s ease 1.7s forwards;}

.process-loop-anim.in .loop-connector-1{animation:loop-draw .7s ease 1.0s forwards;}
.process-loop-anim.in .loop-connector-2{animation:loop-draw .7s ease 1.15s forwards;}
.process-loop-anim.in .loop-connector-3{animation:loop-draw .7s ease 1.3s forwards;}

.process-loop-anim.in .loop-dot{animation:loop-pop .4s ease 1.9s forwards;}
.process-loop-anim.in .loop-dash{animation:loop-draw .5s ease 2.05s forwards;}
.process-loop-anim.in .loop-box{animation:loop-draw .6s ease 2.3s forwards;}
.process-loop-anim.in .loop-box-label{animation:loop-fade .5s ease 2.7s forwards;}

.process-loop-anim.in .loop-foreign-1{animation:loop-rise .6s ease 2.5s forwards;}
.process-loop-anim.in .loop-foreign-2{animation:loop-rise .6s ease 2.65s forwards;}
.process-loop-anim.in .loop-foreign-3{animation:loop-rise .6s ease 2.8s forwards;}

@media (prefers-reduced-motion:reduce){
  .js-ready .loop-circle,.js-ready .loop-connector,.js-ready .loop-dash,.js-ready .loop-box{stroke-dashoffset:0;}
  .js-ready .loop-dot,.js-ready .loop-label,.js-ready .loop-box-label,.js-ready .loop-foreign{opacity:1;transform:none;}
  .process-loop-anim.in *{animation:none !important;}
}

/* Mobile: same three-circle diagram (own viewBox, no connectors/callouts so
   text stays legible at narrow widths) keeping the draw-in animation, then
   the three steps written out below as plain text. */
.process-loop-mobile{display:none;}
.process-loop-svg-mobile{width:100%;max-width:340px;height:auto;display:block;margin:0 auto;overflow:visible;}
.process-loop-svg-mobile .loop-label{font-size:18px;}
.process-loop-svg-mobile .loop-box-label{font-size:12px;}
.loop-steps-list{margin-top:36px;}
.loop-step-item{padding:22px 0;border-top:1px solid var(--border);}
.loop-step-item:last-child{border-bottom:1px solid var(--border);}
.loop-step-item h4{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:10px;color:var(--ink);}
.loop-step-item p{font-size:15px;color:var(--gray);line-height:1.6;}
@media (max-width:900px){
  .process-loop-desktop{display:none;}
  .process-loop-mobile{display:block;}
}

/* ---------- Process comparison (average agency vs. the Frame process) ---------- */
.process-compare-block{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:40px;
  margin-bottom:32px;
}
.process-compare-block:last-child{margin-bottom:0;}
.process-compare-block-highlight{position:relative;border-color:var(--ink);}
.process-compare-ribbon{
  position:absolute;
  top:32px;right:-1px;
  background:var(--paper);
  border:1.5px solid var(--ink);
  border-right:none;
  padding:10px 22px 10px 26px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;
  clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%);
}
.process-compare-head{display:flex;gap:20px;align-items:flex-start;margin-bottom:32px;}
.process-compare-icon{
  width:52px;height:52px;flex-shrink:0;
  border-radius:50%;
  border:1.5px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);
}
.process-compare-icon i{width:22px;height:22px;}
.process-compare-icon-highlight{border-color:var(--ink);background:var(--ink);color:#fff;}
.process-compare-head h3{font-size:22px;margin-bottom:8px;}
.process-compare-head p{font-size:15px;color:var(--gray);line-height:1.6;max-width:520px;}
.process-compare-cells{
  display:grid;
  border:1px solid var(--border);
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  overflow:hidden;
}
.process-compare-cells.cells-3{grid-template-columns:repeat(3,1fr);}
.process-compare-cells.cells-9{grid-template-columns:repeat(9,1fr);}
.process-compare-cell{
  padding:20px 10px;
  text-align:center;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;
  color:var(--ink);
  border-right:1px solid var(--border);
}
.process-compare-cell:last-child{border-right:none;}
.process-compare-bars{display:grid;gap:2px;}
.process-compare-bars.bars-1{grid-template-columns:1fr;}
.process-compare-bars.bars-3{grid-template-columns:repeat(3,1fr);}
.process-compare-bar{
  color:var(--ink);
  text-align:center;
  padding:12px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;
}
.process-compare-bars.bars-1 .process-compare-bar{background:var(--porcelain-2);}
.process-compare-bars.bars-3 .process-compare-bar:nth-child(1){background:rgba(255,199,47,0.32);}
.process-compare-bars.bars-3 .process-compare-bar:nth-child(2){background:rgba(145,73,255,0.14);}
.process-compare-bars.bars-3 .process-compare-bar:nth-child(3){background:rgba(52,168,83,0.16);}
.process-compare-loopback{
  position:relative;
  height:28px;
  margin:0 20px;
  border-left:1.5px solid var(--border-strong);
  border-bottom:1.5px solid var(--border-strong);
  border-right:1.5px solid var(--border-strong);
}
.process-compare-loopback::before{
  content:"";position:absolute;left:-5px;top:-7px;
  width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:7px solid var(--border-strong);
}
.process-compare-loopback::after{
  content:"";position:absolute;right:-4px;top:-4px;
  width:8px;height:8px;border-radius:50%;background:var(--ink);
}
/* Mobile: cells/bars grid replaced with a vertical sidebar-rail layout —
   each phase gets a rotated-label bar bracketing its three steps, with a
   chevron divider marking the flow into the next phase. */
.compare-mobile{display:none;}
.compare-mobile-group{display:flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;}
.compare-mobile-bar{
  flex-shrink:0;
  width:38px;
  display:flex;align-items:center;justify-content:center;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--ink);
  padding:14px 0;
}
.compare-mobile-bar-launch{background:var(--porcelain-2);}
.compare-mobile-bar-learn{background:rgba(255,199,47,0.32);}
.compare-mobile-bar-build{background:rgba(145,73,255,0.14);}
.compare-mobile-bar-measure{background:rgba(52,168,83,0.16);}
.compare-mobile-cells{flex:1;display:flex;flex-direction:column;}
.compare-mobile-cell{
  padding:16px;
  text-align:center;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.03em;
  color:var(--ink);
  border-bottom:1px solid var(--border);
}
.compare-mobile-cell:last-child{border-bottom:none;}
.compare-mobile-chevron{
  display:flex;align-items:center;justify-content:center;
  height:22px;
}
.compare-mobile-chevron::before{
  content:"";display:block;width:9px;height:9px;
  border-right:1.5px solid var(--border-strong);border-bottom:1.5px solid var(--border-strong);
  transform:rotate(45deg);
}
@media (max-width:900px){
  .process-compare-block{padding:28px 24px;}
  .process-compare-head{flex-direction:column;gap:16px;}
  .process-compare-ribbon{position:static;display:inline-block;clip-path:none;margin-bottom:16px;border-right:1.5px solid var(--ink);}
  .process-compare-cells,.process-compare-bars,.process-compare-loopback{display:none;}
  .compare-mobile{display:block;}
}

/* ---------- Process scroll (sticky visual synced to left-column steps) ---------- */
.process-scroll-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
}
.process-scroll-steps{display:flex;flex-direction:column;}
.scroll-step{padding:64px 0;border-top:1px solid var(--border);}
.scroll-step:last-child{border-bottom:1px solid var(--border);}
.scroll-step-group{
  display:block;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--purple);
  margin-bottom:14px;
}
.scroll-step h3{font-size:30px;margin-bottom:8px;letter-spacing:-0.01em;}
.scroll-step-sub{
  display:block;
  font-size:17px;
  font-weight:600;
  color:var(--gray);
  margin-bottom:18px;
}
.scroll-step p{font-size:16px;color:var(--gray);line-height:1.65;max-width:420px;}

.process-scroll-visual{position:relative;height:100%;}
.scroll-visual-sticky{position:sticky;top:120px;height:460px;}
.scroll-visual-panel{
  position:absolute;
  inset:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
}
.scroll-visual-panel.active{opacity:1;}
.scroll-visual-panel img{width:100%;height:100%;object-fit:cover;display:block;}
.scroll-visual-panel[data-panel="learn"]{background:rgba(255,199,47,0.22);}
.scroll-visual-panel[data-panel="build"]{background:rgba(145,73,255,0.1);}
.scroll-visual-panel[data-panel="measure"]{background:rgba(52,168,83,0.16);}

@media (max-width:900px){
  .process-scroll-grid{grid-template-columns:1fr;gap:0;}
  .process-scroll-visual{display:none;}
  .scroll-step{padding:40px 0;}
  .scroll-step h3{font-size:22px;}
}


/* ---------- Page transition (branded curtain wipe between pages) ---------- */
/* Default (no JS / before js-ready): stays off-screen so nothing is ever
   stuck covering the page if script.js somehow fails to run. */
.page-transition{
  position:fixed;
  inset:0;
  background:var(--yellow);
  z-index:9998;
  pointer-events:none;
  transform:translateY(-100%);
}
/* Once JS is confirmed running, it sits ready to cover the viewport — the
   entering keyframe animates it away a beat later so the page "reveals". */
.js-ready .page-transition{transform:translateY(0);}
.page-transition.is-entering{animation:page-enter .6s cubic-bezier(.65,0,.35,1) forwards;}
.page-transition.is-exiting{animation:page-exit .45s cubic-bezier(.6,0,.4,1) forwards;}
@keyframes page-enter{from{transform:translateY(0);}to{transform:translateY(-100%);}}
@keyframes page-exit{from{transform:translateY(100%);}to{transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){
  .page-transition{transition:none;animation:none !important;transform:translateY(-100%) !important;}
}

/* ---------- Custom cursor (dot + trailing ring) ---------- */
/* Only on real pointer devices — touch keeps the default/no cursor entirely. */
@media (hover:hover) and (pointer:fine){
  body.custom-cursor-active,
  body.custom-cursor-active *{
    cursor:none;
  }
}
.cursor-dot,.cursor-ring{
  position:fixed;
  top:0;
  left:0;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .25s ease;
}
.cursor-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--purple);
}
.cursor-ring{
  width:36px;
  height:36px;
  border-radius:6px;
  border:1.5px solid var(--purple);
  background:rgba(145,73,255,0.08);
}
.cursor-dot.is-visible,.cursor-ring.is-visible{
  opacity:1;
}