/* Solstack Studio homepage styles */

/* ---------- Font ----------
   Inter Tight is hosted with the site (weights 400 to 600, Latin characters), so
   no request goes to Google. The fallback is Arial resized to Inter Tight's
   proportions, so text barely moves when the web font arrives. */
@font-face {
  font-family: "Inter Tight";
  src: url("assets/fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 96.71%;
  ascent-override: 100.17%;
  descent-override: 24.94%;
  line-gap-override: 0%;
}

:root {
  /* Colours */
  --bg: #F9F9F9;
  --surface: #FFFFFF;
  --ink: #000000;
  --ink-soft: #3F444B;
  --muted: #5E646C;
  --line: #E0E0E0;
  --line-soft: #EFEFEF;
  --placeholder: #BABABA;
  --sun: #F5F7B8;          /* main accent: change this one value to retint the site */
  --lavender: #E4D3FF;
  --pink: #F9DBFF;
  --on-dark-muted: #C9CDD2;

  /* Shape */
  --radius-sm: 16px;
  --radius-md: 22px;
  --radius-lg: 28px;
  --radius-xl: 32px;
  --radius-2xl: 36px;
  --pill: 999px;

  /* Layout */
  --container: 1200px;
  --gutter: 40px;

  /* Type */
  --font: "Inter Tight", "Inter Tight Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { display: block; flex-shrink: 0; }

a { color: inherit; }
a:hover { color: var(--ink-soft); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

html:has(.site-header) { scroll-padding-top: 96px; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: var(--pill);
  text-decoration: none;
  font-weight: 500;
}
.skip-link:focus { top: 12px; color: #FFFFFF; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 112px; }

.band {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

/* ---------- Type ---------- */

.h1 { font-size: 60px; line-height: 64px; font-weight: 600; letter-spacing: -0.03em; }
.h2 { font-size: 44px; line-height: 52px; font-weight: 600; letter-spacing: -0.02em; }
.h3 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; }
.lead { font-size: 19px; line-height: 30px; color: var(--muted); }
.body { font-size: 16px; line-height: 26px; color: var(--muted); }

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--sm { min-height: 48px; padding: 0 22px; font-size: 15px; line-height: 20px; }

.btn--dark { background: var(--ink); color: #FFFFFF; }
.btn--dark:hover { background: #2A2D32; color: #FFFFFF; }

.btn--outline { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #FFFFFF; }

.btn--sun { min-height: 56px; padding: 0 28px; background: var(--sun); color: var(--ink); font-weight: 600; }
.btn--sun:hover { background: #FFFFFF; color: var(--ink); }

.text-link {
  display: inline-block;
  padding-block: 10px;
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  text-underline-offset: 4px;
}

/* Menu and footer links: on hover, a line draws in under the link from the
   left. Each group of links sets how far below the words the line sits. */
.nav a,
.footer-links a,
.footer-link-button { position: relative; }
.nav a::after,
.footer-links a::after,
.footer-link-button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:hover::after,
.nav a:focus-visible::after,
.footer-links a:hover::after,
.footer-links a:focus-visible::after,
.footer-link-button:hover::after,
.footer-link-button:focus-visible::after { transform: none; }

/* ---------- Pills and tags ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-size: 14px;
  line-height: 20px;
}
.pill--dark {
  padding: 7px 14px;
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .22);
  color: #FFFFFF;
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: var(--pill);
  font-size: 14px;
  line-height: 20px;
}
.tag--muted {
  padding: 4px 12px;
  background: var(--bg);
  border-color: var(--line);
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-soft);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(249, 249, 249, .92);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  transition: box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }

.header-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 92px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand svg { flex-shrink: 0; width: 40px; height: 40px; }
.brand__sun { fill: var(--sun); }
.brand__name { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; }

.site-menu { flex: 1; display: flex; align-items: center; gap: 32px; }

.nav { display: flex; align-items: center; gap: 36px; margin-inline: auto; }
.nav a { padding-block: 10px; font-size: 16px; line-height: 24px; font-weight: 500; text-decoration: none; }
.nav a:hover { color: var(--ink); }
.nav a::after { bottom: 8px; }
/* The current page keeps its line, so hovering shows where a click will take you */
.nav a[aria-current="page"]::after { transform: none; }

.nav-toggle { display: none; }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 88px;
}

.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.hero__copy .h1 { max-width: 7em; } /* breaks as "Websites that / bring in clients." at every size */
.hero__lead { max-width: 560px; }
/* Page titles: each .h1__line stays together and breaks onto its own line when the title doesn't fit;
   a line too long for a phone wraps evenly inside itself. */
.h1__line { display: inline-block; text-wrap: balance; }
.nowrap { white-space: nowrap; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-soft);
}
.trust li { display: flex; align-items: center; gap: 8px; }
.trust .check { color: var(--ink); }

.hero__visual {
  position: relative;
  height: 560px;
  overflow: hidden;
  background: var(--sun);
  border-radius: var(--radius-xl);
}

.sunrise { position: absolute; inset: 0; pointer-events: none; }

.ring,
.sun-disc {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}
.ring--1 { width: 920px; height: 920px; bottom: -480px; border: 1px solid rgba(0, 0, 0, .08); }
.ring--2 { width: 720px; height: 720px; bottom: -380px; border: 1px solid rgba(0, 0, 0, .10); }
.ring--3 { width: 520px; height: 520px; bottom: -280px; border: 1px solid rgba(0, 0, 0, .12); }
.sun-disc {
  width: 320px;
  height: 320px;
  bottom: -180px;
  background: var(--surface);
  border: 1.5px solid var(--ink);
}

.report {
  position: absolute;
  top: 36px;
  left: 32px;
  right: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.report__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.report__title { min-width: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.report__head .tag { white-space: nowrap; }
.report__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 15px;
  line-height: 22px;
}
.report__item { display: flex; align-items: center; gap: 10px; }
.report__status { color: var(--muted); }
.report__highlight {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  background: var(--sun);
  border-radius: 14px;
}
.report__label { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.report__value { font-size: 15px; line-height: 22px; font-weight: 600; }

.founder-chip {
  position: absolute;
  right: 28px;
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 8px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--pill);
}
.founder-chip__text { display: flex; flex-direction: column; }
.founder-chip__name { font-size: 14px; line-height: 20px; font-weight: 600; }
.founder-chip__role { font-size: 13px; line-height: 18px; color: var(--muted); }

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--lavender);
  font-size: 16px;
  font-weight: 600;
}
.avatar--placeholder {
  width: 48px;
  height: 48px;
  background: var(--surface);
  border: 1px dashed rgba(0, 0, 0, .35);
}

/* ---------- Clients ---------- */

.clients { display: flex; flex-direction: column; gap: 18px; padding-bottom: 96px; }
.clients__label { font-size: 14px; line-height: 20px; color: var(--muted); }
.logo-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  border: 1px dashed var(--placeholder);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

/* ---------- Two paths ---------- */

.paths { display: flex; flex-direction: column; gap: 40px; padding-top: 16px; padding-bottom: 112px; }
.path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.path-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-height: 400px;
  padding: 40px;
  border-radius: var(--radius-lg);
}
.path-card--business { background: var(--sun); }
.path-card--agency { background: var(--lavender); }
.path-card__title { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; }
.path-card__text { max-width: 440px; font-size: 17px; line-height: 27px; color: var(--ink-soft); }
.path-card .btn { margin-top: auto; }

.icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--ink);
}
.icon-circle--soft { background: var(--bg); border-color: var(--line); }

/* ---------- Recent work ---------- */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}

.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.work-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.work-card__title { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; }

.shot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 280px;
  margin-bottom: 6px;
  background: var(--bg);
  border: 1px dashed var(--placeholder);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

.testimonial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: end;
  margin-top: 48px;
  padding: 48px 56px;
  background: var(--pink);
  border-radius: var(--radius-lg);
}
.testimonial blockquote { font-size: 30px; line-height: 40px; font-weight: 500; letter-spacing: -0.02em; }
.testimonial figcaption { display: flex; align-items: center; gap: 12px; }
.person { display: flex; flex-direction: column; }
.person__name { font-size: 16px; line-height: 24px; font-weight: 600; }
.person__role { font-size: 14px; line-height: 20px; color: var(--ink-soft); }

/* ---------- How it works ---------- */

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--ink);
}
.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sun);
  border: 1px solid var(--ink);
  font-size: 16px;
  font-weight: 600;
}

/* ---------- Why clients stay ---------- */

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.reasons { border-bottom: 1px solid var(--line); }
.reason {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 24px;
  padding-block: 28px;
  border-top: 1px solid var(--line);
}
.reason__body { display: flex; flex-direction: column; gap: 6px; }

/* ---------- About ---------- */

.about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
/* Photo of Nikos: the image fills the frame, keeping faces (upper middle) in view */
.photo {
  position: relative;
  overflow: hidden;
  height: 480px;
  background: var(--line);   /* close to the photo's sky, shown while it loads */
  border-radius: var(--radius-lg);
}
.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.about__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.about__copy .lead { max-width: 500px; }

/* ---------- Final call to action ---------- */

.cta-wrap { padding-bottom: 112px; }
/* Right after a grey band, the call to action needs its own space above */
.band + .cta-wrap { padding-top: 112px; }

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 96px 72px;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: var(--radius-2xl);
}
.cta__sunrise { z-index: -1; }
.cta__ring,
.cta__sun { position: absolute; border-radius: 50%; }
.cta__ring--1 { width: 1000px; height: 1000px; right: -300px; bottom: -520px; border: 1px solid rgba(255, 255, 255, .14); }
.cta__ring--2 { width: 800px; height: 800px; right: -200px; bottom: -420px; border: 1px solid rgba(255, 255, 255, .18); }
.cta__sun { width: 520px; height: 520px; right: -60px; bottom: -280px; background: var(--sun); }

.cta__title { max-width: 620px; font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.03em; }
.cta__text { max-width: 540px; font-size: 19px; line-height: 30px; color: var(--on-dark-muted); }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 8px; }
.cta__link {
  padding-block: 16px;
  color: #FFFFFF;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-underline-offset: 4px;
}
.cta__link:hover { color: var(--sun); }
.cta :focus-visible { outline-color: #FFFFFF; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line); }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr);
  gap: 40px;
  padding-top: 64px;
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-brand p { max-width: 320px; font-size: 16px; line-height: 26px; color: var(--muted); }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.footer-links a { padding-block: 6px; font-size: 15px; line-height: 22px; text-decoration: none; }
.footer-links a:hover { color: var(--ink); }
.footer-links a::after,
.footer-link-button::after { bottom: 3px; }

.footer-bottom {
  margin-top: 56px;
  padding-block: 24px 40px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

/* ---------- Scroll animations ----------
   Hidden states apply only when JavaScript is running (html.js), so the page
   stays fully visible without it. script.js adds .is-visible as elements enter
   the viewport; data-stagger groups get a --delay per child. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--delay, 0s);
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="left"] { transform: translateX(-32px); }
.js [data-reveal="scale"] { transform: scale(.96); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* About photo: wipes upward */
.js [data-reveal="wipe"] {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0 round var(--radius-lg));
  transition: clip-path 1.1s var(--ease);
}
.js [data-reveal="wipe"].is-visible { clip-path: inset(0 0 0 0 round var(--radius-lg)); }

/* ---------- Opening animations ----------
   The first section of each page (data-intro) animates with CSS alone, so it
   starts the moment the page appears instead of waiting for script.js.
   Same movements and timings as the scroll animations. */

@keyframes intro-up { from { opacity: 0; transform: translateY(28px); } }
@keyframes intro-fade { from { opacity: 0; } }
@keyframes intro-left { from { opacity: 0; transform: translateX(-32px); } }
@keyframes intro-scale { from { opacity: 0; transform: scale(.96); } }
@keyframes intro-stage { from { opacity: 0; transform: scale(.97); } }
@keyframes intro-wipe {
  from { clip-path: inset(100% 0 0 0 round var(--radius-lg)); }
  to { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
}

[data-intro] { animation: intro-up .8s var(--ease) var(--delay, 0s) backwards; }
[data-intro="fade"] { animation-name: intro-fade; }
[data-intro="left"] { animation-name: intro-left; }
[data-intro="scale"] { animation-name: intro-scale; }
[data-intro="wipe"] { animation: intro-wipe 1.1s var(--ease) var(--delay, 0s) both; }

/* Hero: one orchestrated sunrise. Panel fades in, rings open, sun rises,
   report card arrives, checks tick one by one, highlight and founder chip follow. */
[data-intro="stage"] { animation: intro-stage .9s var(--ease) .15s backwards; }

@keyframes intro-ring {
  from { opacity: 0; transform: translateX(-50%) scale(.82); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
[data-intro="stage"] .ring { animation: intro-ring 1.3s var(--ease) backwards; }
[data-intro="stage"] .ring--3 { animation-delay: .35s; }
[data-intro="stage"] .ring--2 { animation-delay: .5s; }
[data-intro="stage"] .ring--1 { animation-delay: .65s; }

@keyframes intro-sun {
  from { transform: translateX(-50%) translateY(110px); }
  to { transform: translateX(-50%) translateY(0); }
}
[data-intro="stage"] .sun-disc { animation: intro-sun 1.5s var(--ease) .3s backwards; }

@keyframes intro-card { from { opacity: 0; transform: translateY(20px); } }
[data-intro="stage"] .report { animation: intro-card .7s var(--ease) .6s backwards; }

.report__list li:nth-child(1) { --row-delay: .9s; }
.report__list li:nth-child(2) { --row-delay: 1.05s; }
.report__list li:nth-child(3) { --row-delay: 1.2s; }
.report__list li:nth-child(4) { --row-delay: 1.35s; }
@keyframes intro-row { from { opacity: 0; transform: translateX(-8px); } }
@keyframes intro-tick {
  from { stroke-dasharray: 20; stroke-dashoffset: 20; }
  to { stroke-dasharray: 20; stroke-dashoffset: 0; }
}
[data-intro="stage"] .report__list li { animation: intro-row .45s var(--ease) var(--row-delay, 0s) backwards; }
[data-intro="stage"] .report__list li path { animation: intro-tick .5s var(--ease) calc(var(--row-delay, 0s) + .15s) backwards; }

@keyframes intro-pop { from { opacity: 0; transform: scale(.95); } }
[data-intro="stage"] .report__highlight { transform-origin: left center; animation: intro-pop .5s var(--ease) 1.6s backwards; }

@keyframes intro-chip { from { opacity: 0; transform: translateY(14px); } }
[data-intro="stage"] .founder-chip { animation: intro-chip .6s var(--ease) 1.85s backwards; }

/* How it works: each step's line draws across, then its number pops in */
.js .step { position: relative; border-top-color: transparent; }
.js .step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s var(--ease);
  transition-delay: var(--delay, 0s);
}
.js .step.is-visible::before { transform: scaleX(1); }
.js .step .step__num {
  opacity: 0;
  transform: scale(.4);
  transition: opacity .3s ease, transform .55s cubic-bezier(.3, 1.6, .5, 1);
  transition-delay: calc(var(--delay, 0s) + .4s);
}
.js .step.is-visible .step__num { opacity: 1; transform: none; }

/* Final call to action: rings open as the panel arrives */
.js .cta .cta__ring {
  opacity: 0;
  transform: scale(.9);
  transition: opacity 1.2s var(--ease) .3s, transform 1.4s var(--ease) .3s;
}
.js .cta.is-visible .cta__ring { opacity: 1; transform: none; }

/* ---------- Tablet ---------- */

@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero__visual { width: 100%; max-width: 560px; height: 540px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .about { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .photo { height: 420px; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobile menu: full screen, with a gentle fade and slide ---------- */

@media (max-width: 1080px) {
  .header-bar { min-height: 76px; justify-content: space-between; }
  html:has(.site-header) { scroll-padding-top: 84px; }

  /* A solid header on smaller screens: a blurred background would trap the
     full-screen menu inside the header's box. */
  .site-header {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .brand,
  .nav-toggle { position: relative; z-index: 2; }

  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 48px;
    height: 48px;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--pill);
    cursor: pointer;
  }
  .nav-toggle__bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform .25s var(--ease);
  }
  .site-header.is-open .nav-toggle__bar:first-child { transform: translateY(4px) rotate(45deg); }
  .site-header.is-open .nav-toggle__bar:last-child { transform: translateY(-4px) rotate(-45deg); }

  .site-menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 100px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    background: var(--bg);
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s var(--ease), visibility 0s linear .3s;
  }
  .site-header.is-open .site-menu {
    visibility: visible;
    opacity: 1;
    transition: opacity .3s var(--ease), visibility 0s linear 0s;
  }

  .nav { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .nav a {
    padding-block: 18px;
    border-bottom: 1px solid var(--line);
    font-size: 30px;
    line-height: 36px;
    font-weight: 600;
    letter-spacing: -0.02em;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .35s var(--ease), transform .45s var(--ease);
  }
  /* Menu rows fill the screen's width, so the drawn line would too: a plain
     underline under the words marks hover and the current page instead. */
  .nav a::after { content: none; }
  .nav a:hover,
  .nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
  .site-menu .btn {
    width: 100%;
    min-height: 56px;
    margin-top: auto;
    font-size: 17px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .35s var(--ease), transform .45s var(--ease);
  }

  .site-header.is-open .nav a,
  .site-header.is-open .site-menu .btn { opacity: 1; transform: none; }
  .site-header.is-open .nav a:nth-child(1) { transition-delay: .06s; }
  .site-header.is-open .nav a:nth-child(2) { transition-delay: .1s; }
  .site-header.is-open .nav a:nth-child(3) { transition-delay: .14s; }
  .site-header.is-open .nav a:nth-child(4) { transition-delay: .18s; }
  .site-header.is-open .nav a:nth-child(5) { transition-delay: .22s; }
  .site-header.is-open .site-menu .btn { transition-delay: .28s; }

  /* Stop the page scrolling behind the open menu. Only the root element is
     locked: locking body too would unstick the header on a scrolled page. */
  html.menu-open { overflow: hidden; }
  .site-menu { overscroll-behavior: contain; }
}

@media (max-width: 720px) {
  .site-menu { padding-top: 92px; }
  .nav a { font-size: 26px; line-height: 32px; padding-block: 16px; }
}

/* ---------- Mobile ---------- */

@media (max-width: 720px) {
  :root { --gutter: 20px; }

  .section { padding-block: 72px; }
  .h1 { font-size: 40px; line-height: 44px; }
  .h2 { font-size: 32px; line-height: 38px; }
  .lead { font-size: 17px; line-height: 28px; }

  .hero { padding-top: 24px; padding-bottom: 64px; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { width: 100%; }
  .hero__visual { height: 520px; }
  .report { top: 16px; left: 16px; right: 16px; padding: 18px; }
  .founder-chip { right: 16px; bottom: 16px; }

  .clients { padding-bottom: 64px; }
  .logo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .paths { padding-bottom: 72px; }
  .path-grid,
  .work-grid,
  .steps { grid-template-columns: minmax(0, 1fr); }
  .path-card { min-height: 0; padding: 28px; }
  .path-card__title { font-size: 26px; line-height: 32px; }

  .section-head { flex-direction: column; align-items: flex-start; }

  .testimonial { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px; }
  .testimonial blockquote { font-size: 22px; line-height: 31px; }

  .photo { height: 360px; }

  .cta-wrap { padding-bottom: 72px; }
  .band + .cta-wrap { padding-top: 72px; }
  .cta { padding: 56px 28px 132px; border-radius: var(--radius-lg); }
  .cta__title { font-size: 36px; line-height: 40px; }
  .cta__text { font-size: 17px; line-height: 28px; }
  .cta__sun { width: 240px; height: 240px; right: -70px; bottom: -150px; }

  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { transition: none !important; animation: none !important; }
}

/* =====================================================================
   Inner pages
   ===================================================================== */

[hidden] { display: none !important; }

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

.section-title { margin-bottom: 48px; }
.section--flush-top { padding-top: 0; }
.body--ink { color: var(--ink-soft); }

.section-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
  margin-bottom: 48px;
}
.section-intro--flush { margin-bottom: 0; }

.btn--icon { gap: 8px; }

/* ---------- Page hero ---------- */

.page-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 56px;
  padding-bottom: 72px;
}
.page-hero .h1 { max-width: 880px; }
.page-hero .lead { max-width: 640px; }

.page-hero--split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: center;
}
.page-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }

.page-hero--case { gap: 20px; padding-bottom: 48px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 10px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Plans ---------- */

.plans,
.benefits,
.work-list { padding-bottom: 112px; }

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 36px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.plan-card--featured { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }

.plan-card__head { display: flex; flex-direction: column; gap: 20px; }
.plan-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.plan-card__name { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; }
.plan-card__desc { font-size: 16px; line-height: 26px; color: var(--muted); }
.plan-card__desc + .price__note { margin-top: -8px; }
/* Side by side, the cards share rows (head, features, button), so the
   dividers and buttons line up whatever the length of each description. */
@media (min-width: 1081px) {
  @supports (grid-template-rows: subgrid) {
    .plan-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 20px; }
  }
  @supports not (grid-template-rows: subgrid) {
    .plan-card__desc { min-height: 78px; }
  }
}
.plan-card--featured .plan-card__desc { color: var(--on-dark-muted); }
.plan-card__sub { font-size: 15px; line-height: 22px; font-weight: 600; }

.badge {
  padding: 4px 12px;
  background: var(--sun);
  color: var(--ink);
  border-radius: var(--pill);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.price__amount { font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.03em; }
.price__from,
.price__period { font-size: 16px; line-height: 24px; color: var(--muted); }
.plan-card--featured .price__from,
.plan-card--featured .price__period { color: var(--on-dark-muted); }

.features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.plan-card--featured .features { border-top-color: rgba(255, 255, 255, .18); }
.features li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 22px; }
.features svg { margin-top: 2px; }

.plan-card .btn { width: 100%; margin-top: auto; }
.plan-card--featured .btn--sun:hover { background: #FFFFFF; }
.plan-card--featured :focus-visible { outline-color: #FFFFFF; }

.plan-note { max-width: 760px; margin-top: 24px; font-size: 14px; line-height: 22px; color: var(--muted); }

/* ---------- Comparison table ---------- */

.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.compare { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.compare th,
.compare td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { background: var(--bg); font-size: 14px; line-height: 20px; font-weight: 600; }
.compare tbody th { font-weight: 500; }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
.compare .is-featured { background: rgba(245, 247, 184, .45); }
.compare thead .is-featured { background: var(--sun); }
.dash { color: var(--muted); }

/* ---------- Card grids ---------- */

.grid-2,
.grid-3,
.grid-4 { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.feature-card .h3 { margin-top: 6px; }
.feature-card--sun { background: var(--sun); border-color: transparent; }
.feature-card--lavender { background: var(--lavender); border-color: transparent; }
.feature-card--pink { background: var(--pink); border-color: transparent; }
.feature-card--sun .body,
.feature-card--lavender .body,
.feature-card--pink .body { color: var(--ink-soft); }
.feature-card--sun .icon-circle--soft,
.feature-card--lavender .icon-circle--soft,
.feature-card--pink .icon-circle--soft { background: var(--surface); border-color: transparent; }

/* ---------- Hours list ---------- */

.hours { border-top: 1px solid var(--ink); }
.hours li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  line-height: 26px;
}
.hours strong { font-weight: 600; white-space: nowrap; }

/* ---------- Details ---------- */

.details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 48px;
  max-width: 1000px;
}
.details li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 26px;
  color: var(--ink-soft);
}
.details li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sun);
  border: 1px solid var(--ink);
}

/* ---------- Case study ---------- */

.cs-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 40px;
  padding-block: 24px;
  border-block: 1px solid var(--line);
}
.cs-meta dt { font-size: 13px; line-height: 18px; color: var(--muted); }
.cs-meta dd { margin: 4px 0 0; font-size: 16px; line-height: 24px; font-weight: 500; }

.shot--hero { height: 560px; margin-bottom: 0; }
.shot--tall { height: 420px; margin-bottom: 0; }
.shot--portrait { height: 340px; margin-bottom: 6px; }

.cs-body { padding-block: 72px 24px; }
.cs-section {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 64px;
  padding-block: 48px;
  border-top: 1px solid var(--line);
}
.cs-section__title { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; }

.results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  background: var(--sun);
  border-radius: var(--radius-md);
}
.result--lavender { background: var(--lavender); }
.result--pink { background: var(--pink); }
.result__value { font-size: 32px; line-height: 38px; font-weight: 600; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.result__label { font-size: 15px; line-height: 22px; color: var(--ink-soft); }

.testimonial--flush { margin-top: 0; }
.gallery { margin-top: 24px; }

.cs-services {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.next-project {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-block: 72px 112px;
  padding: 36px 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color .15s ease;
}
.next-project:hover { border-color: var(--ink); color: var(--ink); }
.next-project__label { font-size: 15px; line-height: 22px; color: var(--muted); }
.next-project__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---------- About ---------- */

.photo--hero { height: 520px; }
.person-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* ---------- Prose ---------- */

.prose { max-width: 720px; }
.prose h2 {
  margin-top: 48px;
  margin-bottom: 12px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.prose h2:first-child { margin-top: 0; }
.prose p,
.prose li { font-size: 17px; line-height: 28px; color: var(--ink-soft); }
.prose p + p { margin-top: 16px; }
.prose ul { margin-top: 12px; padding-left: 22px; list-style: disc; }
.prose ul + p { margin-top: 16px; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--ink); }
.prose a { text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose--large p { font-size: 19px; line-height: 31px; }

/* ---------- Contact ---------- */

.contact { padding-bottom: 112px; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px;
  align-items: start;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 15px; line-height: 22px; font-weight: 500; }
.optional { font-weight: 400; color: var(--muted); }

.input {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .15s ease, background-color .15s ease;
}
.input::placeholder { color: #8A9098; }
.input:hover { border-color: var(--placeholder); }
.input:focus { background: var(--surface); }
.input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
textarea.input { min-height: 140px; resize: vertical; }
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

.field__error { min-height: 0; font-size: 14px; line-height: 20px; color: #B42318; }
.field__error:empty { display: none; }
.field.has-error .input { border-color: #B42318; background: #FFFBFA; }

.form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form__note { flex: 1; min-width: 220px; font-size: 14px; line-height: 20px; color: var(--muted); }
.form__note a { color: var(--ink); text-underline-offset: 3px; }

.form-status:empty { display: none; }
.form-status {
  padding: 14px 16px;
  font-size: 15px;
  line-height: 22px;
  border-radius: 14px;
  background: #FEF3F2;
  color: #912018;
  border: 1px solid #FECDCA;
}

.form-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 48px 40px;
  background: var(--sun);
  border-radius: var(--radius-lg);
}
.form-success[hidden] { display: none; }
.form-success .icon-circle { background: var(--surface); }

.contact-side { display: flex; flex-direction: column; gap: 16px; }
.side-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.side-card--lavender { background: var(--lavender); border-color: transparent; }
.side-card--sun { background: var(--sun); border-color: transparent; }
.side-card .icon-circle { background: var(--surface); border-color: transparent; }
.side-card .text-link { padding-block: 4px; font-size: 17px; }

.mini-steps { counter-reset: step; display: flex; flex-direction: column; gap: 12px; }
.mini-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-soft);
}
.mini-steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--ink);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- Inner pages: tablet ---------- */

@media (max-width: 1080px) {
  .page-hero--split { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .photo--hero { height: 440px; }
  .plan-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .grid-3,
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-section { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cs-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot--hero { height: 440px; }
}

/* ---------- Inner pages: mobile ---------- */

@media (max-width: 720px) {
  .page-hero { padding-top: 24px; padding-bottom: 48px; }
  .plans,
  .benefits,
  .work-list,
  .contact { padding-bottom: 72px; }
  .section-title,
  .section-intro { margin-bottom: 32px; }

  .grid-2,
  .grid-3,
  .grid-4,
  .results,
  .details,
  .form-row { grid-template-columns: minmax(0, 1fr); }

  .plan-card { padding: 28px 24px; }
  .price__amount { font-size: 46px; line-height: 50px; }
  .feature-card,
  .side-card { padding: 24px; }

  .hours li { flex-direction: column; gap: 2px; }

  .form { padding: 24px; }
  .form-success { padding: 32px 24px; }
  .form__footer .btn { width: 100%; }

  .shot--hero { height: 280px; }
  .shot--tall { height: 300px; }
  .cs-body { padding-top: 40px; }
  .cs-section { padding-block: 32px; }
  .cs-section__title { font-size: 24px; line-height: 32px; }
  .cs-services { margin-top: 48px; }
  .next-project { flex-direction: column; align-items: flex-start; gap: 8px; margin-block: 48px 72px; padding: 24px; }
  .next-project__title { font-size: 22px; line-height: 30px; }
  .photo--hero { height: 360px; }
}


/* =====================================================================
   New websites and three-path homepage
   ===================================================================== */

.path-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.path-grid--3 .path-card { padding: 36px 28px; }
.path-grid--3 .tag { padding: 5px 12px; font-size: 13px; line-height: 18px; }
.path-grid--3 .path-card__title { font-size: 26px; line-height: 32px; }
.path-card--existing { background: var(--pink); }

.link-note { font-size: 15px; line-height: 22px; color: var(--muted); }
.link-note a { color: var(--ink); font-weight: 500; text-underline-offset: 4px; }

/* Key facts under the page hero */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}
.facts li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 24px 24px 0;
}
.facts li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.facts .icon-circle { width: 44px; height: 44px; }
.facts__title { display: block; font-size: 16px; line-height: 24px; font-weight: 600; }
.facts__text { display: block; font-size: 15px; line-height: 22px; color: var(--muted); }

.price__note { font-size: 14px; line-height: 20px; color: var(--muted); }
.plan-card--featured .price__note { color: var(--on-dark-muted); }

/* Payment options */
.pay-card .h3 { font-size: 24px; line-height: 32px; }
.pay-card__price { font-size: 17px; line-height: 26px; font-weight: 600; }

/* After launch */
.after-launch {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
  padding: 56px;
  background: var(--sun);
  border-radius: var(--radius-lg);
}
.after-launch__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.after-launch__copy .lead { color: var(--ink-soft); }
.after-launch__plans { display: flex; flex-direction: column; gap: 12px; }
.after-launch__plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: var(--surface);
  border-radius: var(--radius-md);
}
.after-launch__plan strong { font-size: 17px; line-height: 24px; }
.after-launch__plan span { font-size: 15px; line-height: 22px; color: var(--muted); text-align: right; }

/* FAQ */
.faq { max-width: 880px; border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: 19px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat center;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--ink-soft); }
.faq__answer { padding: 0 56px 24px 0; font-size: 17px; line-height: 28px; color: var(--ink-soft); }

@media (max-width: 1080px) {
  .path-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .path-grid--3 .path-card { min-height: 0; }
  .after-launch { grid-template-columns: minmax(0, 1fr); padding: 40px; }
}

@media (max-width: 720px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts li,
  .facts li + li { padding: 18px 0; border-left: 0; }
  .facts li + li { border-top: 1px solid var(--line); }
  .path-grid--3 .path-card { padding: 28px; }
  .after-launch { padding: 28px 24px; }
  .after-launch__plan { flex-direction: column; align-items: flex-start; gap: 4px; }
  .after-launch__plan span { text-align: left; }
  .faq summary { font-size: 17px; line-height: 26px; }
  .faq__answer { padding-right: 0; font-size: 16px; line-height: 26px; }
}

/* Payment milestones */
.milestones { width: 100%; margin-top: 2px; border-top: 1px solid var(--line); }
.milestones li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
}
.milestones__pct { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; }
.milestones__body { display: flex; flex-direction: column; }
.milestones__body strong { font-size: 16px; line-height: 24px; font-weight: 600; }
.milestones__when { font-size: 14px; line-height: 20px; color: var(--muted); }

/* Two-column comparison (template or custom) */
.compare--two { min-width: 560px; }
.compare--two th[scope="row"] { width: 22%; }

/* =====================================================================
   Homepage hero: two services, each with its own checks
   ===================================================================== */

.hero-stack {
  position: absolute;
  top: 32px;
  left: 32px;
  right: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hero-stack .report { position: relative; inset: auto; gap: 10px; padding: 18px 22px 20px; }
.hero-stack .report__list li { padding-block: 9px; }


/* Sequence: the website card and its checks, then the care card and its checks */
.report--care .report__list li:nth-child(1) { --row-delay: 1.75s; }
.report--care .report__list li:nth-child(2) { --row-delay: 1.9s; }
.report--care .report__list li:nth-child(3) { --row-delay: 2.05s; }
[data-intro="stage"] .report--care { animation-delay: 1.45s; }

@media (max-width: 720px) {
  .hero-stack { top: 16px; left: 16px; right: 16px; gap: 12px; }
}

/* Reassurance line under the hero buttons */
.hero__note { margin-top: -12px; font-size: 14px; line-height: 20px; color: var(--muted); }

/* Lavender pills on the two service cards (same size as the muted tag) */
.tag--lavender { background: var(--lavender); border-color: transparent; color: var(--ink); }

/* =====================================================================
   Images: every slot fills its box automatically
   ===================================================================== */

/* Screenshots: fill the frame, keep the top of the page in view */
.shot { position: relative; overflow: hidden; border-style: solid; border-color: var(--line); }
.shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Desktop page screenshots in narrow frames: keep the left edge (logo and headline) in view */
.shot--left img { object-position: top left; }

/* Logos: shown whole (contain), never cropped */
.logo-slot { position: relative; padding: 14px 22px; background: var(--surface); border-style: solid; border-color: var(--line); }
.logo-slot img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Client logos sit together in grey and show their own colours on hover.
   Add logo-slot--color to a slot if a client's brand rules don't allow a grey version. */
.logo-slot img { filter: grayscale(1); opacity: .72; transition: filter .35s var(--ease), opacity .35s var(--ease); }
.logo-slot:hover img,
.logo-slot--color img { filter: none; opacity: 1; }

/* General image frame (blog and article images) */
.media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   Blog
   ===================================================================== */

.blog-list { padding-bottom: 112px; }

.post-featured {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px;
  align-items: center;
  margin-bottom: 80px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color .15s ease;
}
.post-featured:hover { border-color: var(--ink); color: var(--ink); }
.post-featured__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-right: 20px; }
.post-featured__title { font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; }

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.post-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-decoration: none; }
.post-card:hover { color: var(--ink); }
.post-card .media { width: 100%; margin-bottom: 6px; }
.post-card .media img,
.post-featured .media img { transition: transform .5s var(--ease); }
.post-card:hover .media img,
.post-featured:hover .media img { transform: scale(1.03); }
.post-card__title { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; }
.post-card:hover .post-card__title { text-decoration: underline; text-underline-offset: 4px; }
.post-card__excerpt { font-size: 16px; line-height: 26px; color: var(--muted); }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; line-height: 20px; color: var(--muted); }

/* Article */
.article-head { padding-bottom: 48px; }
.article-meta { display: flex; align-items: center; gap: 12px; }
.article-meta__text { display: flex; flex-direction: column; }
.article-meta__name { font-size: 15px; line-height: 22px; font-weight: 600; }

.article-hero { aspect-ratio: 16 / 8; border-radius: var(--radius-lg); }

.article-wrap { padding-top: 72px; padding-bottom: 96px; }
.article { max-width: 720px; margin: 0 auto; }
.article > * + * { margin-top: 20px; }
.article p,
.article li { font-size: 18px; line-height: 31px; color: var(--ink-soft); }
.article h2 { margin-top: 52px; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.article h3 { margin-top: 36px; font-size: 21px; line-height: 29px; font-weight: 600; color: var(--ink); }
.article ul { padding-left: 24px; list-style: disc; }
.article ol { padding-left: 24px; list-style: decimal; }
.article li + li { margin-top: 8px; }
.article li::marker { color: var(--ink); font-weight: 600; }
.article a { color: var(--ink); text-underline-offset: 3px; }
.article strong { color: var(--ink); font-weight: 600; }
.article blockquote {
  margin-block: 40px;
  padding: 32px 36px;
  background: var(--pink);
  border-radius: var(--radius-lg);
  font-size: 24px;
  line-height: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.article figure { margin-block: 40px; }
.article figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--muted); }
.callout { padding: 22px 26px; background: var(--sun); border-radius: var(--radius-md); }
.callout p { color: var(--ink); }

.author-box {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 720px;
  margin: 64px auto 0;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.author-box > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.author-box__name { font-size: 17px; line-height: 24px; font-weight: 600; }
.avatar--large { flex-shrink: 0; width: 56px; height: 56px; font-size: 20px; }

/* Six menu items: a little less space between them on smaller laptops */
@media (min-width: 1081px) and (max-width: 1240px) {
  .header-bar,
  .site-menu,
  .nav { gap: 24px; }
}

@media (max-width: 1080px) {
  .site-header.is-open .nav a:nth-child(6) { transition-delay: .26s; }
  .site-header.is-open .site-menu .btn { transition-delay: .32s; }
  .post-featured { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .post-featured__body { padding: 0 8px 12px; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .blog-list { padding-bottom: 72px; }
  .post-featured { margin-bottom: 56px; padding: 12px; }
  .post-featured__title { font-size: 26px; line-height: 32px; }
  .post-grid { grid-template-columns: minmax(0, 1fr); }
  .article-hero { aspect-ratio: 4 / 3; }
  .article-wrap { padding-top: 48px; padding-bottom: 72px; }
  .article p,
  .article li { font-size: 17px; line-height: 29px; }
  .article h2 { margin-top: 40px; font-size: 24px; line-height: 32px; }
  .article blockquote { padding: 24px; font-size: 20px; line-height: 29px; }
  .author-box { flex-direction: column; padding: 24px; }
}

/* =====================================================================
   Support guarantee, cookie banner, thank-you and 404 pages
   ===================================================================== */

.support-note {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 760px;
  margin-top: 28px;
  padding: 24px 28px;
  background: var(--sun);
  border-radius: var(--radius-lg);
}
.support-note .icon-circle { background: var(--surface); border-color: transparent; }
.support-note__title { font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; }
.support-note__text { margin-top: 4px; font-size: 16px; line-height: 26px; color: var(--ink-soft); }

/* Cookie banner */
.cookie-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(420px, calc(100vw - 48px));
  padding: 20px 22px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .10);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.cookie-banner.is-visible { opacity: 1; transform: none; }
.cookie-banner__title { font-size: 16px; line-height: 22px; font-weight: 600; }
.cookie-banner__text { font-size: 14px; line-height: 21px; color: var(--ink-soft); }
.cookie-banner__text a { color: var(--ink); text-underline-offset: 3px; }
.cookie-banner__actions { display: flex; gap: 10px; }
.cookie-banner__actions .btn { flex: 1; }
html.menu-open .cookie-banner { display: none; }

.footer-link-button {
  padding: 6px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 15px;
  line-height: 22px;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* Thank-you and 404 pages */
.status-page { padding-top: 72px; }
.status-page__icon { background: var(--sun); border-color: transparent; }
.status-next {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px;
  align-items: start;
  padding-bottom: 112px;
}
.status-links { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  margin-bottom: 64px;
}
.status-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color .15s ease;
}
.status-link:hover { border-color: var(--ink); color: var(--ink); }
.status-link strong { font-size: 17px; line-height: 24px; font-weight: 600; }
.status-link span { font-size: 14px; line-height: 20px; color: var(--muted); }

@media (max-width: 1080px) {
  .status-next { grid-template-columns: minmax(0, 1fr); }
  .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .support-note { flex-direction: column; padding: 22px; }
  .status-page { padding-top: 32px; }
  .status-next { padding-bottom: 72px; }
  .status-grid { grid-template-columns: minmax(0, 1fr); margin-bottom: 40px; }
}

/* Spam trap on the contact form: hidden from people, visible to bots */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Project cards: a 16:10 frame, the usual shape of a website screenshot, so nothing important is cropped */
.work-card .shot { height: auto; aspect-ratio: 16 / 10; }
/* Recently launched (homepage): the browser-framed screenshot fills the card's width */
.work-card .site-shot__card { align-self: stretch; }
/* Each card there is one link to the live site, like the blog cards: on hover
   (or keyboard focus) the picture zooms in a little and the name is underlined. */
a.work-card { text-decoration: none; }
a.work-card:hover { color: inherit; }
a.work-card .text-link { text-decoration: underline; }
a.work-card .site-shot__frame img { transition: transform .5s var(--ease); }
a.work-card:hover .site-shot__frame img,
a.work-card:hover .site-shot__frame video,
a.work-card:focus-visible .site-shot__frame img,
a.work-card:focus-visible .site-shot__frame video { transform: scale(1.03); }
a.work-card:hover .work-card__title,
a.work-card:focus-visible .work-card__title { text-decoration: underline; text-underline-offset: 4px; }
/* A project's hover clip (script.js plays it) sits over the picture and fades in once it's playing */
.site-shot__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease, transform .5s var(--ease);
}
.site-shot__frame video.is-playing { opacity: 1; }

/* =====================================================================
   Websites we've built (homepage): a carousel that scrolls by itself
   ===================================================================== */

.site-carousel { position: relative; }
.site-carousel__track { display: flex; width: max-content; }
.site-shot { flex: 0 0 auto; width: min(460px, 78vw); margin-right: 24px; }

/* Without the script, or with reduced motion: a still row visitors can scroll sideways */
.site-carousel:not(.is-running) {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  padding-bottom: 12px;
}
.site-carousel:not(.is-running) .site-shot { scroll-snap-align: start; }

/* With the script: edge to edge, with soft edges */
.site-carousel.is-running {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.site-shot__card {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.site-shot__bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.site-shot__bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.site-shot__frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg); }
.site-shot__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 720px) {
  .site-shot { margin-right: 16px; }
}