@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  /* Three page colours, in order of weight: cream, sand, dark.
     --paper is the panel colour used INSIDE a cream or sand section. */
  --bg: #f7f5ef;
  --sand: #ede8da;
  --paper: #fdfcf8;
  --ink: #201c17;
  --muted: #4a443a;
  --faint: #6f6858;
  --rule: #ddd8cb;
  --sand-rule: #d2ccbb;
  --accent: #2742c9;
  --accent-dark: #1a2e96;
  --dark: #201c17;
  --dark-rule: #453f33;
  --on-dark: #f7f5ef;
  --on-dark-muted: #d8d2c2;
  --on-dark-faint: #a89f8a;
  --field-rule: #c9c3b2;
  --field-bg: #fdfcf8;
  --body-alt: #34302a;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --hatch: repeating-linear-gradient(-45deg, #eeeade, #eeeade 10px, #f3f0e6 10px, #f3f0e6 20px);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }
::selection { background: var(--accent); color: var(--bg); }

img { display: block; max-width: 100%; }

h1, h2, h3 { font-family: var(--display); letter-spacing: -0.02em; margin: 0; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--display);
  font-weight: 500;
  font-size: 16.5px;
  padding: 15px 28px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--ink); color: var(--bg); text-decoration: none; }
.btn-sm { font-size: 15px; padding: 10px 18px; }
.btn-block { width: 100%; margin-top: 6px; font-size: 16px; padding: 15px 26px; }

.link-lg { font-size: 15.5px; font-weight: 500; }
.link-sm { font-size: 14.5px; font-weight: 500; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #f7f5efee;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.nav-logo:hover { color: var(--ink); text-decoration: none; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
}
.nav-links > a { color: var(--ink); }
.nav-links > a.btn { color: var(--bg); }
.nav-phone { font-family: var(--mono); font-size: 14px; font-weight: 500; }
.nav-phone-mobile { display: none; color: var(--ink); margin-left: auto; }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--field-rule);
  background: var(--bg);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); }
.nav-toggle:hover { border-color: var(--ink); }

/* ---------- Section index rail ---------- */
.section-index {
  display: none;
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  flex-direction: column;
  gap: 12px;
}
.section-index a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: #a89f8a;
  border-left: 2px solid transparent;
  padding-left: 8px;
}
.section-index a:hover { color: var(--ink); text-decoration: none; }
/* The rail is fixed in the left margin and scrolls past cream, sand and dark
   bands alike, so both states use colours that hold up on all three. */
.section-index a.is-active { color: var(--accent); border-left-color: var(--accent); }

@media (min-width: 1100px) {
  .section-index { display: flex; }
}

/* Between 1100px and 1375px the centred 1200px column reaches the rail,
   so give the content extra left padding to keep the labels in the margin. */
@media (min-width: 1100px) and (max-width: 1375px) {
  .wrap, .nav-inner { padding-left: 116px; }
}

/* ---------- Sections and the colour rhythm ----------

   The page is built from three background colours: cream (--bg, the default),
   sand (--sand) and dark (--dark). The rhythm is deliberate, not decorative:

     cream   plain sections, the resting state
     sand    .section-alt, exactly one or two blocks per page, 80px padding
     dark    .pricing, .cta-band and .footer, 88px padding

   ONE RULE ABOUT RULES: a 1px --rule line only ever separates two sections of
   the SAME colour. Where the colour changes, the colour change IS the
   separator, so the rule is dropped (see the :has() block below, which strips
   the bottom rule from any section that sits directly above a sand or dark
   band). Never add a rule by hand next to a colour change.

   Sand and dark sections are full bleed: the <section> carries the background
   and spans the viewport, the content stays inside a .wrap child. That means
   they live OUTSIDE the page-level .wrap in the markup, like .pricing does. */
.section {
  padding: 68px 0 76px 0;
  border-bottom: 1px solid var(--rule);
}
.section-plain { border-bottom: none; }

/* No rule where the colour changes. A full-bleed band is a sibling of the
   .wrap it follows, not of the section inside it, so both shapes are matched:
   the last block in the closing .wrap, and a band nested in the same .wrap.
   Where neither applies (the band sits after </main>) put .section-plain on
   the last cream section by hand. */
.wrap:has(+ .section-alt) > :last-child,
.wrap:has(+ .pricing) > :last-child,
.wrap:has(+ .cta-band) > :last-child,
.section:has(+ .section-alt),
.section:has(+ .pricing),
.section:has(+ .cta-band),
.page-hero:has(+ .section-alt) { border-bottom: none; }

/* ---------- Sand band ---------- */
.section-alt {
  background: var(--sand);
  border: none;
  /* Rules and field borders inside a sand block need a darker tone to read. */
  --rule: var(--sand-rule);
  --field-rule: #bfb8a4;
  --hatch: repeating-linear-gradient(-45deg, #e4dfd0, #e4dfd0 10px, #eae5d7 10px, #eae5d7 20px);
}
.section-alt-inner { padding-top: 80px; padding-bottom: 80px; }
/* A second heading inside the same sand band (two related blocks, one colour). */
.section-alt-h2 { margin-top: 52px; }

/* ---------- Dark bands ----------
   Flipping the ink / muted / faint / rule tokens inside a dark band means every
   shared component below keeps working without a dark-mode variant of its own. */
.pricing, .cta-band, .footer {
  background: var(--dark);
  color: var(--on-dark);
  --ink: #f7f5ef;
  --muted: var(--on-dark-muted);
  --faint: var(--on-dark-faint);
  --body-alt: #e6e1d3;
  --rule: var(--dark-rule);
  --field-rule: var(--dark-rule);
  --field-bg: #2a251e;
  --paper: #2a251e;
}
.pricing .btn:hover, .cta-band .btn:hover, .footer .btn:hover {
  background: var(--on-dark);
  color: var(--dark);
}
.section-title { font-size: 30px; font-weight: 700; margin: 0 0 40px 0; }
.section-title-tight { margin-bottom: 32px; }
.section-foot { margin-top: 40px; }
.section-foot-cta { margin-top: 44px; }

/* ---------- Frames ---------- */
.frame { border: 1px solid var(--rule); background: var(--hatch); overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.frame-hero { height: 400px; }
.frame-card { width: 100%; aspect-ratio: 16 / 10; }
.caption { margin-top: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--faint); }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 76px 0 72px 0;
  border-bottom: 1px solid var(--rule);
}
.hero h1 {
  font-size: 46px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
.hero-lead { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 24px 0 0 0; max-width: 520px; }
.hero-actions { display: flex; flex-direction: column; gap: 18px; margin-top: 34px; align-items: flex-start; }
.hero-meta { margin-top: 44px; font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: 0.02em; }

/* ---------- Selected work ---------- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 38px;
  gap: 20px;
  flex-wrap: wrap;
}
.section-head h2 { font-size: 30px; font-weight: 700; }
.section-head-tools { display: flex; align-items: center; gap: 20px; }
.mono-note { font-family: var(--mono); font-size: 12px; color: var(--faint); text-align: right; }
.work-nav { display: flex; gap: 8px; }
.work-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--field-rule);
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  cursor: pointer;
  border-radius: 3px;
}
.work-btn:hover { border-color: var(--ink); }

.work-scroll {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  cursor: grab;
  padding-bottom: 6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.work-scroll::-webkit-scrollbar { display: none; }
.work-card {
  flex: 0 0 420px;
  max-width: 84vw;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.work-tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.05em; color: var(--accent); }
.work-name { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.work-line { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ---------- Benefits ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* On sand the columns are numbered instead of ruled: the numeral does the
   separating work the top rule used to do. */
.benefits { gap: 36px; }
.benefit { display: flex; flex-direction: column; gap: 10px; }
.benefit-n {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.benefit-h { font-family: var(--display); font-size: 17.5px; font-weight: 700; }
.benefit p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted); }

/* ---------- Who you work with ---------- */
.who { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
.who-card { display: flex; flex-direction: column; gap: 14px; }
.who-photo {
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: top;
  border-top: 3px solid var(--accent);
}
.who-name { font-family: var(--display); font-size: 18px; font-weight: 700; }
.who-role { font-family: var(--mono); font-size: 11.5px; color: var(--faint); letter-spacing: 0.03em; margin-top: 4px; }
.who-text {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--body-alt);
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.who-text p { margin: 0; }

/* ---------- Process ---------- */
/* Big numerals instead of an accent top rule: this section carries its own
   shape so it does not read like the benefits block above it. */
.steps { gap: 32px; }
.step { display: flex; flex-direction: column; gap: 10px; }
.step-n {
  font-family: var(--display);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 6px;
}
.step-week { font-family: var(--mono); font-size: 11.5px; color: var(--faint); letter-spacing: 0.04em; }
.step-name { font-family: var(--display); font-size: 18px; font-weight: 700; }
.step p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ---------- Pricing band (dark, full bleed) ---------- */
.pricing-inner { padding-top: 88px; padding-bottom: 88px; }
.pricing .section-title { margin-bottom: 28px; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.pricing-col {
  padding: 26px 32px 28px 32px;
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pricing-col:first-child { border-left: none; padding-left: 0; }
.pricing-col:last-child { padding-right: 0; }
.pricing-col-label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--faint);
}
.pricing-col-price {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  white-space: nowrap;
}
.pricing-col-price-sm { font-size: 24px; }
.pricing-col-desc { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.pricing-note { margin: 26px 0 0 0; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 620px; }
.pricing-link {
  display: inline-block;
  margin-top: 28px;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
}
.pricing-link:hover { color: var(--on-dark-muted); text-decoration: none; border-bottom-color: var(--on-dark); }

/* ---------- Fit ----------
   Two bordered paper cards, so the section reads as a comparison and not as
   two more lists on the same cream. */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 960px; }
.fit-card {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  background: var(--paper);
  padding: 28px;
}
.fit-card-no { border-top-color: var(--ink); }
.fit-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; margin-bottom: 18px; }
.fit-label-yes { color: var(--accent); }
.fit-label-no { color: var(--faint); }
.fit-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--body-alt);
}
.fit-list li { position: relative; padding-left: 22px; }
.fit-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
}
.fit-list-yes li::before { content: "+"; color: var(--accent); }
.fit-list-no li::before { content: "\2212"; color: var(--ink); }

/* ---------- FAQ section foot (accordion styling lives in the shared block below) ---------- */
.faq-foot { margin-top: 28px; }

/* ---------- Contact ---------- */
.contact { padding: 76px 0 88px 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.contact-title { font-size: 34px; line-height: 1.15; font-weight: 700; text-wrap: pretty; }
.contact-lead { margin: 22px 0 0 0; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 480px; }
.contact-card { margin-top: 30px; display: flex; flex-direction: column; gap: 4px; }
.contact-name { font-family: var(--display); font-size: 17px; font-weight: 700; }
.contact-details { font-family: var(--mono); font-size: 13px; line-height: 2; color: var(--muted); }
.contact-details a { color: var(--ink); }

/* ---------- Footer ---------- */
/* The footer is always dark and closes the page. After a cream section the
   colour change is the separator, so there is no rule. After a dark .cta-band
   the two blocks touch, so a single --dark-rule hairline keeps them apart. */
.footer { border-top: none; }
.cta-band + .footer { border-top: 1px solid var(--dark-rule); }
.footer-inner {
  padding-top: 56px;
  padding-bottom: 48px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.footer-logo { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.footer-about { margin: 0; max-width: 300px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: var(--ink); }
.footer-col a:hover { color: var(--on-dark-muted); }
.footer-h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--faint); margin-bottom: 4px; }
.footer-legal { font-family: var(--mono); font-size: 12px; color: var(--faint); }

.botcheck { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { margin: 12px 0 0 0; font-size: 14px; line-height: 1.5; color: #9b2c1f; }
.popup-form .form-error { color: #f0b8ae; }

/* ---------- Exit-intent popup ---------- */
.popup { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.popup[hidden] { display: none; }
.popup-backdrop { position: absolute; inset: 0; background: #201c17b3; }
.popup-box {
  position: relative;
  background: var(--dark);
  color: var(--bg);
  max-width: 480px;
  width: 100%;
  padding: 40px;
  border: 1px solid var(--dark-rule);
}
.popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  color: #a89f8a;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}
.popup-close:hover { color: var(--bg); }
.popup-title { font-family: var(--display); font-size: 23px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.popup-lead { margin: 14px 0 22px 0; font-size: 15px; line-height: 1.65; color: #d8d2c2; }
.popup-form { display: flex; flex-direction: column; gap: 10px; }
.popup-form input[type="url"], .popup-form input[type="email"] {
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--dark-rule);
  background: #2a251e;
  color: var(--bg);
  border-radius: 2px;
  outline: none;
  width: 100%;
}
.popup-row { display: flex; gap: 10px; }
.popup-row input { flex: 1; }
.popup-submit {
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 2px;
  font-size: 18px;
  padding: 0 20px;
  cursor: pointer;
}
.popup-submit:hover { background: var(--accent-dark); }
.popup-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: #a89f8a;
  cursor: pointer;
}
.popup-check input { margin-top: 3px; }
.popup-fine { margin: 14px 0 0 0; font-size: 12px; color: var(--faint); }
.popup-thanks { margin: 18px 0 0 0; font-size: 15px; line-height: 1.6; color: #d8d2c2; }
.popup-thanks[hidden], .popup-form[hidden] { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 56px 0 56px 0; }
  .hero h1 { font-size: 40px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .contact-grid { gap: 48px; }
}

@media (max-width: 768px) {
  .wrap, .nav-inner { padding-left: 20px; padding-right: 20px; }
  .nav-inner { flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
  .nav-toggle { display: flex; flex-shrink: 0; }
  .nav-phone-mobile { display: inline-block; }
  .nav-inner { gap: 16px; }
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    padding: 12px 0 4px 0;
    order: 3;
  }
  .nav-links.is-open { display: flex; }
  .grid-4 { grid-template-columns: 1fr; }
  .who { grid-template-columns: 1fr; gap: 32px; }
  .who-card { max-width: 260px; }
  .fit { grid-template-columns: 1fr; gap: 20px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .hero h1 { font-size: 32px; }
  .contact-title { font-size: 27px; }
  .section-title, .section-head h2 { font-size: 25px; }
  .section, .contact { padding: 48px 0 52px 0; }
  .hero { padding: 40px 0 44px 0; }
  .frame-hero { height: 260px; }
  .work-card { flex-basis: 300px; }
  .section-head-tools { width: 100%; justify-content: space-between; }
  .pricing-row { font-size: 18px; gap: 10px 24px; }
  /* Sand and dark bands stay blocks on mobile, just shorter ones. */
  .section-alt-inner, .pricing-inner { padding-top: 56px; padding-bottom: 56px; }
  .footer-inner { padding-top: 44px; padding-bottom: 40px; }
  .fit-card { padding: 22px 20px 24px 20px; }
  .panel { padding: 20px; }
  .who-photo { height: 300px; }
  .step-n { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Hero shot rotator ---------- */
.hero-shot { display: block; }
.hero-frame { position: relative; display: block; }
.hero-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 600ms ease;
}
.hero-frame img.is-active { opacity: 1; }
a.hero-frame:hover { border-color: var(--ink); text-decoration: none; }
a.hero-frame:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.hero-shot-foot {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-shot-caption { flex: 1 1 auto; min-width: 0; }
.hero-dots { display: flex; gap: 6px; flex: 0 0 auto; }
.hero-dot {
  width: 18px;
  height: 4px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: var(--rule);
  cursor: pointer;
}
.hero-dot:hover { background: var(--faint); }
.hero-dot[aria-current="true"] { background: var(--accent); }
.hero-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero-count { flex: 0 0 auto; }

/* =======================================================================
   SHARED SUBPAGE COMPONENTS

   Everything below is meant to be reused on subpages (/kaina, /darbai,
   /duk, /auditas, /perkelimas-is-wordpress, /webflow-ar-wordpress).
   Do not edit this file when building a page. Page-specific CSS goes in
   css/<page>.css, linked after style.css. See TEMPLATE.md.

   .page-hero         top of a subpage: cream, optional .page-hero-kicker, h1, .page-hero-lead
   .page-hero--illu   the same hero in two columns: .page-hero-text left, illustration right
   .post-illu         wide illustration above a blog post body, prose width
   .post-item--illu   blog index card with a thumbnail column (see css/article.css)
   .section-alt       full-bleed SAND band, one per page, .wrap.section-alt-inner inside
   .panel             --paper block with a rule border, used to hold forms
   .prose             article body: h2 / h3 / p / ul / ol / blockquote / a
   .cta-band          closing CTA section (DARK, full bleed, footer straight below)
   .cards-3 > .card   three equal bordered cards; .card.is-featured adds an accent top rule
   .numbered          numbered steps: .numbered-item with .numbered-n, .numbered-h, p
   .accordion         Q/A accordion, any number per page, add data-open-first to open item 1
   .chips             filter chip row (.chip, .chip.is-active)
   .work-grid         project grid, 3 / 2 / 1 columns, same card anatomy as the home page
   .form              form block: .field, .field-label, .form-note, .checkbox, .form-sent
   ======================================================================= */

/* ---------- Page hero ---------- */
.page-hero {
  padding: 64px 0 52px 0;
  border-bottom: 1px solid var(--rule);
}
.page-hero-kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.07em;
  color: var(--accent);
  margin-bottom: 18px;
}
.page-hero h1 {
  font-size: 42px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.025em;
  max-width: 760px;
  text-wrap: pretty;
}
.page-hero-lead {
  margin: 22px 0 0 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 760px;
}

/* ---------- Iliustracijos ---------- */
/* The flat illustrations in images/illustrations/ are exported on the cream
   #f7f5ef background, so they sit straight on a cream section: no frame, no
   border, no shadow, no radius. manifest.json holds the slug, the alt text and
   which page each one belongs to. See TEMPLATE.md.
   .page-hero--illu  two-column subpage hero, text left and illustration right
   .page-hero-illu   the figure in that hero
   .page-hero-video  the /kaina/ loop, styled exactly like the figure image
   .post-illu        illustration above a blog post body, aligned with .prose
   .post-item--illu  blog index card, thumbnail column plus .post-body text */
/* The illustrations are rendered on a near-white ground, a few shades lighter
   than the page. mix-blend-mode: darken keeps the page colour wherever the image
   is lighter, so the rectangle disappears; the container is isolated with its own
   cream background so the blend never touches overlays such as the consent banner. */
.page-hero-illu, .post-illu, .post-thumb { isolation: isolate; background: var(--bg); }
.page-hero-illu img, .page-hero-video, .post-illu img, .post-thumb img { mix-blend-mode: darken; }

.page-hero--illu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 56px;
  align-items: center;
}
.page-hero-illu { margin: 0; }
.page-hero-illu img,
.page-hero-video {
  display: block;
  width: 100%;
  height: auto;
}

.post-illu {
  max-width: 720px;
  margin: 0 0 40px 0;
}
.post-illu img {
  display: block;
  width: 100%;
  height: auto;
}

.post-item--illu {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.post-thumb { margin: 0; }
.post-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Prose ---------- */
.prose { max-width: 720px; font-size: 17px; line-height: 1.7; color: var(--body-alt); }
.prose h2 { font-size: 26px; font-weight: 700; margin: 44px 0 16px 0; }
.prose h3 { font-size: 19px; font-weight: 700; margin: 32px 0 12px 0; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 18px 0; }
.prose ul, .prose ol { margin: 0 0 18px 0; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose a { text-decoration: underline; }

/* ---------- CTA band ---------- */
/* Dark, full bleed, and the footer sits straight underneath it: together they
   are the closing block of every subpage. */
.cta-band { border-top: none; }
.cta-band-inner { padding-top: 88px; padding-bottom: 88px; }
.cta-band h2, .cta-band p { max-width: 720px; }
.cta-band h2 { font-size: 30px; font-weight: 700; margin: 0; text-wrap: pretty; }
.cta-band p { margin: 18px 0 0 0; font-size: 16px; line-height: 1.65; color: var(--muted); }
.cta-band .btn { margin-top: 28px; }
.cta-band-link {
  display: inline-block;
  margin-top: 20px;
  margin-left: 22px;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px;
}
.cta-band-link:hover { color: var(--on-dark-muted); text-decoration: none; border-bottom-color: var(--on-dark); }

/* ---------- Three cards ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
  padding: 28px 26px 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--paper);
}
.card.is-featured { border-top-color: var(--accent); }
.card-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--faint); }
.card.is-featured .card-label { color: var(--accent); }
.card-title {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
}
.card-title-sm { font-size: 23px; }
.card-lead { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.card .check {
  margin: 6px 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body-alt);
}
.card .check li { padding-left: 20px; position: relative; }
.card .check li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: -1px;
  font-family: var(--mono);
  color: var(--accent);
}
.card-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--faint);
  margin-top: auto;
  padding-top: 14px;
}
.card .btn { margin-top: 8px; }

/* ---------- Numbered steps ---------- */
.numbered { max-width: 720px; display: flex; flex-direction: column; gap: 30px; margin: 0; padding: 0; list-style: none; }
.numbered-item { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--rule); padding-top: 16px; }
.numbered-n { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--accent); }
.numbered-h { font-family: var(--display); font-size: 18px; font-weight: 700; }
.numbered-item p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.numbered-2col { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 48px; }

/* ---------- Accordion ---------- */
.accordion { max-width: 780px; border-top: 1px solid var(--rule); }
.accordion-item { border-bottom: 1px solid var(--rule); }
.accordion-h { margin: 0; font-family: var(--display); font-size: inherit; letter-spacing: normal; }
.accordion-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: var(--display);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--ink);
}
.accordion-mark { font-family: var(--mono); font-size: 16px; font-weight: 400; color: var(--accent); }
.accordion-a p { margin: 0 0 14px 0; padding: 0 40px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.accordion-a p:last-child { margin-bottom: 22px; }
.accordion-a[hidden] { display: none; }

/* ---------- Filter chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: none;
  border: 1px solid var(--field-rule);
  border-radius: 2px;
  padding: 8px 14px;
  cursor: pointer;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { border-color: var(--accent); color: var(--accent); }

/* ---------- Work grid ---------- */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.work-grid .work-card { flex: none; max-width: none; }

/* ---------- Panel ----------
   A --paper block inside a cream or sand section. Used for the contact and
   audit forms: it lifts the form off the page colour without a colour band. */
.panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 28px;
}
.panel .field input, .panel .field textarea, .panel .field select { background: var(--bg); }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--faint); }
.field input, .field textarea, .field select {
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--field-rule);
  background: var(--field-bg);
  color: var(--ink);
  border-radius: 2px;
  outline: none;
  width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.form-alt { text-align: center; }
.form-note { font-size: 12.5px; line-height: 1.55; color: var(--faint); margin: 0; }
.checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  cursor: pointer;
}
.checkbox input { margin-top: 3px; flex: 0 0 auto; }
.form-sent {
  border: 1px solid var(--accent);
  padding: 24px;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.form-sent[hidden], .form[hidden] { display: none; }

/* ---------- Shared responsive ---------- */
@media (max-width: 1024px) {
  .cards-3 { grid-template-columns: 1fr; gap: 20px; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero h1 { font-size: 36px; }
  .page-hero--illu { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
}

@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-col {
    border-left: none;
    border-top: 1px solid var(--rule);
    padding: 22px 0 24px 0;
  }
  .pricing-col:first-child { border-top: none; padding-top: 4px; }
  .pricing-col-price { font-size: 30px; }
  .pricing-col-price-sm { font-size: 22px; }
  .page-hero { padding: 44px 0 36px 0; }
  .page-hero h1 { font-size: 30px; }
  .page-hero-lead { font-size: 16.5px; }
  .page-hero--illu { grid-template-columns: 1fr; gap: 28px; }
  .page-hero-illu { max-width: 420px; }
  .post-illu { margin-bottom: 28px; }
  .post-item--illu { grid-template-columns: 1fr; gap: 16px; }
  .prose { font-size: 16px; }
  .prose h2 { font-size: 23px; }
  .cta-band-inner { padding-top: 56px; padding-bottom: 56px; }
  .cta-band h2 { font-size: 25px; }
  .cta-band-link { margin-left: 0; display: block; }
  .numbered-2col { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .hero-shot-foot { flex-wrap: wrap; gap: 10px 12px; }
}

/* ---------- Slapukų juosta ---------- */
.consent {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 90;
  width: calc(100% - 32px);
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 6px 24px rgba(32, 28, 23, 0.14);
  padding: 16px 18px;
  animation: consent-in 0.18s ease-out;
}
.consent-text {
  margin: 0;
  flex: 1;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.consent-row { display: flex; gap: 10px; flex-shrink: 0; }
.consent-btn {
  font-family: var(--display);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  padding: 11px 18px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.consent-btn-yes { background: var(--accent); color: var(--bg); border: 1px solid var(--accent); }
.consent-btn-yes:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.consent-btn-no { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.consent-btn-no:hover { background: var(--ink); color: var(--bg); }

@keyframes consent-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 768px) {
  .consent { flex-direction: column; align-items: stretch; gap: 12px; bottom: 12px; }
  .consent-row { gap: 10px; }
  .consent-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .consent { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-frame img { transition: none; }
}

/* Iššokančio lango smulkus tekstas yra ant tamsaus fono. */
.popup .form-note { color: var(--on-dark-faint); margin-top: 4px; }
.popup .form-note a { color: var(--on-dark-muted); text-decoration: underline; }
.popup .form-note a:hover { color: var(--on-dark); }