/* =============================================================
   SQUARE & LEVEL — MAIN STYLESHEET
   -------------------------------------------------------------
   This one file controls the look of every page.
   It's split into numbered sections. Use Ctrl+F to jump to one.

   1.  Colours, fonts and sizes   (change brand settings here)
   2.  Basics
   3.  Layout helpers
   4.  Header and navigation
   5.  Logo
   6.  Buttons and links
   7.  Labels and section headings
   8.  Home: hero
   9.  Home: how it works
   10. Work / project cards
   11. Pricing
   12. About
   13. Contact
   14. Footer
   15. Mobile "sticky" button
   16. Gentle fade-in on scroll
   17. Inner page headings
   18. Call-to-action band
   19. Pricing page
   20. About page
   21. FAQ page
   22. Contact form
   23. Text pages (privacy policy)
   ============================================================= */


/* -------------------------------------------------------------
   1. COLOURS, FONTS AND SIZES
   Change a value here and it changes everywhere on the site.
   ------------------------------------------------------------- */
:root {
  /* Brand colours */
  --ink: #1C2321;            /* text and dark sections */
  --plaster: #F3EFE6;        /* main background */
  --bubble: #E3A824;         /* yellow accent: use sparingly */
  --grey: #4A524F;           /* secondary text */

  /* Supporting shades (made from the brand colours) */
  --plaster-deep: #E9E4D8;   /* slightly darker plaster, for placeholders */
  --paper: #FBF9F4;          /* lighter plaster, for the drawn "screens" */
  --rule: #CFC9BC;           /* thin lines on light backgrounds */
  --rule-dark: #3A433F;      /* thin lines on dark backgrounds */
  --muted-on-dark: #BDBAB0;  /* secondary text on dark backgrounds */

  /* Fonts */
  --font-sans: "Archivo", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  /* Sizes */
  --page-width: 1200px;      /* widest the content gets */
  --gutter: 20px;            /* space at the left and right edges */
  --header-height: 68px;
  --section-space: 72px;     /* space above and below each section */
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --header-height: 80px;
    --section-space: 120px;
  }
}


/* -------------------------------------------------------------
   2. BASICS
   ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* stops the sticky header covering headings when you jump to a section */
  scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
  margin: 0;
  background: var(--plaster);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.6;
}

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

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 8vw, 4.6rem); }
h2 { font-size: clamp(2rem, 5vw, 3.1rem); }
h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; }

p {
  margin: 0 0 1em;
  max-width: 62ch;           /* keeps lines a comfortable length to read */
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Keyboard focus outline: shows people using Tab where they are */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.section--dark :focus-visible,
.site-footer :focus-visible,
.sticky-cta:focus-visible {
  outline-color: var(--bubble);
}

/* "Skip to content" link: hidden until a keyboard user presses Tab */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 100;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--plaster);
  font-weight: 600;
}

.skip-link:focus {
  top: 12px;
}

/* Hides text visually but keeps it for screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* -------------------------------------------------------------
   3. LAYOUT HELPERS
   ------------------------------------------------------------- */

/* Keeps content centred and not too wide */
.container {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A standard page section, with a thin line along the top */
.section {
  padding-block: var(--section-space);
  border-top: 1px solid var(--rule);
}

.section--dark {
  background: var(--ink);
  color: var(--plaster);
  border-top-color: var(--ink);
}

.section--dark p {
  color: var(--muted-on-dark);
}

/* The spirit level sitting on a section's top line.
   Add class="section section--level" to use it. */
.section--level {
  position: relative;
}

.section--level::before,
.section--level::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.section--level::before {        /* the level's body */
  top: -10px;
  width: 60px;
  height: 20px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--plaster);
}

.section--level::after {         /* the yellow bubble */
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bubble);
}

/* Two columns on big screens: a narrow intro on the left, content on the right */
.split {
  display: grid;
  gap: 40px;
}

@media (min-width: 960px) {
  .split {
    grid-template-columns: 4fr 8fr;
    gap: 72px;
    align-items: start;
  }

  /* The intro stays in view while you scroll past the content */
  .split-intro {
    position: sticky;
    top: calc(var(--header-height) + 40px);
  }
}

/* Faint lines down the page edges, like a drawing frame (big screens only) */
.page-lines {
  display: none;
}

@media (min-width: 1280px) {
  .page-lines {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
  }

  .page-lines::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: var(--page-width);
    transform: translateX(-50%);
    border-left: 1px solid rgba(28, 35, 33, 0.12);
    border-right: 1px solid rgba(28, 35, 33, 0.12);
  }
}

/* Grey boxes standing in for real photos and screenshots */
.placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: 16px;
  border: 1px solid var(--rule);
  background:
    repeating-linear-gradient(-45deg, transparent 0 10px, rgba(28, 35, 33, 0.05) 10px 11px),
    var(--plaster-deep);
  color: var(--grey);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-align: center;
}


/* -------------------------------------------------------------
   4. HEADER AND NAVIGATION
   ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--plaster);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-height);
}

/* The "Menu" button (phones and small tablets only) */
.menu-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.menu-icon,
.menu-icon::before,
.menu-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.menu-icon {
  position: relative;
}

.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-icon::before { top: -6px; }
.menu-icon::after  { top: 6px; }

/* When the menu is open, the three lines become a cross */
.nav-open .menu-icon { background: transparent; }
.nav-open .menu-icon::before { top: 0; transform: rotate(45deg); }
.nav-open .menu-icon::after  { top: 0; transform: rotate(-45deg); }

/* The navigation links: a drop-down panel on phones */
.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 4px var(--gutter) 28px;
  background: var(--plaster);
  border-bottom: 1px solid var(--rule);
}

.nav-open .site-nav {
  display: block;
}

.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ":not(.btn)" means: style the plain links, but leave the button alone */
.site-nav a:not(.btn) {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.375rem;
  font-weight: 700;
  text-decoration: none;
}

.site-nav .nav-cta {
  margin-top: 24px;
}

.site-nav .nav-cta .btn {
  width: 100%;
}

/* Big screens: links sit in a row in the header */
@media (min-width: 960px) {
  .menu-button {
    display: none;
  }

  .site-nav {
    display: block;
    position: static;
    padding: 0;
    border: 0;
    background: none;
  }

  .site-nav ul {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .site-nav a:not(.btn) {
    position: relative;
    padding: 8px 0;
    border: 0;
    font-size: 0.95rem;
    font-weight: 500;
  }

  .site-nav a:not(.btn):hover {
    text-decoration: underline;
  }

  /* The current page gets a small yellow bubble underneath */
  .site-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bubble);
    transform: translateX(-50%);
  }

  .site-nav .nav-cta {
    margin: 0 0 0 8px;
  }

  .site-nav .nav-cta .btn {
    width: auto;
    min-height: 46px;          /* a little slimmer to fit the header */
    padding: 0 20px;
    font-size: 0.9rem;
  }
}


/* -------------------------------------------------------------
   5. LOGO
   Icon on the left, name and "WEB DESIGN" built from real text.
   ------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.logo img {
  width: 38px;
  height: 38px;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-name {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.logo-amp {
  font-weight: 500;
}

.logo-tag {
  margin-top: 6px;
  color: var(--grey);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

/* Light version of the logo, for dark backgrounds */
.logo--light .logo-amp { color: var(--bubble); }
.logo--light .logo-tag { color: var(--muted-on-dark); }

@media (min-width: 768px) {
  .logo img { width: 44px; height: 44px; }
  .logo-name { font-size: 1.5rem; }
  .logo-tag { font-size: 0.62rem; }
}


/* -------------------------------------------------------------
   6. BUTTONS AND LINKS
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 54px;          /* big enough to tap easily */
  padding: 0 24px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--plaster);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn:hover {
  background: #000;
  border-color: #000;
}

.btn-arrow {
  transition: transform 0.2s ease;
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* Outline button */
.btn--ghost {
  background: transparent;
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--plaster);
}

/* Yellow button: only use on dark sections */
.btn--bubble {
  background: var(--bubble);
  border-color: var(--bubble);
  color: var(--ink);
}

.btn--bubble:hover {
  background: var(--plaster);
  border-color: var(--plaster);
}

/* Outline button for dark sections */
.btn--ghost-light {
  background: transparent;
  border-color: var(--plaster);
  color: var(--plaster);
}

.btn--ghost-light:hover {
  background: var(--plaster);
  border-color: var(--plaster);
  color: var(--ink);
}

/* A row of buttons that wraps on small screens */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

@media (max-width: 479px) {
  .actions .btn {
    flex: 1 1 100%;
  }
}

/* A plain text link with an arrow, e.g. "See all work →" */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
}


/* -------------------------------------------------------------
   7. LABELS AND SECTION HEADINGS
   ------------------------------------------------------------- */

/* Small monospace label above headings, e.g. "01 / How it works" */
.label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  color: var(--grey);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.label::before {
  content: "";
  flex: none;
  width: 24px;
  height: 1px;
  background: currentColor;
}

.section--dark .label {
  color: var(--muted-on-dark);
}

/* Bigger intro text under a main heading */
.lead {
  color: var(--grey);
  font-size: clamp(1.125rem, 2.2vw, 1.3rem);
  line-height: 1.55;
}

/* Small monospace note, e.g. under a button */
.note {
  margin-top: 16px;
  color: var(--grey);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.section--dark .note {
  color: var(--muted-on-dark);
}


/* -------------------------------------------------------------
   8. HOME: HERO (the top of the home page)
   ------------------------------------------------------------- */
.hero {
  padding-top: 48px;
}

@media (min-width: 768px) {
  .hero {
    padding-top: 88px;
  }
}

.hero-grid {
  display: grid;
  gap: 48px;
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: 7fr 5fr;
    gap: 64px;
    align-items: center;
  }
}

.hero h1 {
  max-width: 13ch;
}

.hero .lead {
  max-width: 36em;
}

/* The drawing of a website on the right (big screens only) */
.hero-visual {
  display: none;
}

@media (min-width: 960px) {
  .hero-visual {
    display: block;
  }
}

.drawing {
  position: relative;
  padding: 24px 40px 24px 24px;
  border: 1px solid var(--rule);
  /* graph-paper background */
  background-image:
    linear-gradient(rgba(28, 35, 33, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 35, 33, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* tape-measure marks along the top */
.drawing-ruler {
  height: 12px;
  margin-bottom: 14px;
  background-image:
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 60px);
  background-size: 100% 5px, 100% 12px;
  background-position: left bottom, left bottom;
  background-repeat: no-repeat;
  opacity: 0.45;
}

.screen {
  border: 2px solid var(--ink);
  background: var(--paper);
}

.screen-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 2px solid var(--ink);
}

.screen-bar > i {
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--ink);
}

.screen-url {
  flex: 1;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--rule);
  color: var(--grey);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.screen-body {
  display: grid;
  gap: 10px;
  padding: 22px;
}

.screen-line {
  height: 9px;
  background: #DDD8CC;
}

.screen-line--title { height: 20px; width: 82%; background: var(--ink); }
.screen-line--title2 { height: 20px; width: 56%; background: var(--ink); margin-bottom: 6px; }
.screen-line--short { width: 72%; }

.screen-button {
  width: 118px;
  height: 28px;
  margin-top: 8px;
  background: var(--ink);
}

.screen-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.screen-cols > i {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  background: repeating-linear-gradient(45deg, #E4DFD3 0 6px, transparent 6px 12px);
}

/* the phone overlapping the bottom corner */
.phone {
  position: absolute;
  right: 0;
  bottom: 56px;
  width: 112px;
  padding: 14px 10px 18px;
  border: 2px solid var(--ink);
  background: var(--paper);
}

.phone .screen-line--title { height: 10px; width: 90%; }
.phone .screen-line--title2 { height: 10px; width: 60%; }
.phone .screen-line { height: 5px; }
.phone .screen-button { width: 56px; height: 14px; margin-top: 4px; }
.phone .screen-body { gap: 6px; padding: 0; }

.phone-bubble {
  width: 7px;
  height: 7px;
  margin: 12px auto 0;
  border-radius: 50%;
  background: var(--bubble);
}

.drawing-caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0 0;
  color: var(--grey);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* The row of key facts under the hero, like a spec sheet */
.spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 56px 0 0;
  border-top: 1px solid var(--rule);
}

.spec > div {
  padding: 20px 16px 22px 0;
}

.spec > div:nth-child(-n + 2) {
  border-bottom: 1px solid var(--rule);
}

.spec > div:nth-child(even) {
  padding-left: 16px;
  border-left: 1px solid var(--rule);
}

.spec dt {
  margin-bottom: 6px;
  color: var(--grey);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.spec dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .spec {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 88px;
  }

  .spec > div,
  .spec > div:nth-child(-n + 2) {
    padding: 24px 24px 28px;
    border-bottom: 0;
    border-left: 1px solid var(--rule);
  }

  .spec > div:first-child {
    padding-left: 0;
    border-left: 0;
  }
}


/* Three-item version (pricing page promises): one per row on phones */
.spec--three {
  grid-template-columns: 1fr;
}

.spec--three > div,
.spec--three > div:nth-child(even) {
  padding: 18px 0 20px;
  border-left: 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 768px) {
  .spec--three {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 64px;
    border-bottom: 1px solid var(--rule);
  }

  .spec--three > div,
  .spec--three > div:nth-child(even) {
    padding: 24px 24px 28px;
    border-bottom: 0;
    border-left: 1px solid var(--rule);
  }

  .spec--three > div:first-child {
    padding-left: 0;
    border-left: 0;
  }
}


/* -------------------------------------------------------------
   9. HOME: HOW IT WORKS
   ------------------------------------------------------------- */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 4px 16px;
  padding: 28px 0 30px;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 768px) {
  .step {
    grid-template-columns: 120px 1fr;
    padding: 36px 0 40px;
  }
}

.step-num {
  padding-top: 5px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.step-num span {
  color: var(--grey);
}

.step h3 {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
}

.step p {
  color: var(--grey);
}

.step-who {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* "The small print, in big print" box */
.notice {
  position: relative;
  margin-top: 48px;
  padding: 32px 24px 24px;
  border: 2px solid var(--ink);
}

@media (min-width: 768px) {
  .notice {
    padding: 36px 36px 28px;
  }
}

.notice-tag {
  position: absolute;
  top: -0.75em;
  left: 18px;
  padding: 0 8px;
  background: var(--plaster);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.notice h3 {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
}

.notice p:last-child {
  margin-bottom: 0;
}


/* -------------------------------------------------------------
   10. WORK / PROJECT CARDS
   ------------------------------------------------------------- */
.section-top {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: 48px;
}

.section-top > div {
  max-width: 640px;
}

.section-top p:last-child {
  margin-bottom: 0;
}

.work-grid {
  display: grid;
  gap: 56px;
}

@media (min-width: 768px) {
  .work-grid {
    grid-template-columns: 7fr 5fr;
    gap: 40px;
    align-items: start;
  }

  /* The second card sits lower, so it doesn't look like a template grid */
  .work-grid .project:nth-child(2) {
    margin-top: 96px;
  }

  /* Work page: equal columns, every second card sits lower */
  .work-grid--list {
    grid-template-columns: 1fr 1fr;
    row-gap: 72px;
  }

  .work-grid--list .project:nth-child(even) {
    margin-top: 96px;
  }
}

/* Screenshot on a project card (clickable) */
.project-shot {
  display: block;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.project-shot img {
  width: 100%;
  transition: opacity 0.2s ease;
}

.project-shot:hover img {
  opacity: 0.9;
}

/* A real client project, shown large at the top of the Work page */
.project--featured {
  display: grid;
  gap: 24px;
}

@media (min-width: 900px) {
  .project--featured {
    grid-template-columns: 7fr 5fr;
    gap: 48px;
    align-items: center;
  }
}

.project--featured .project-meta {
  margin-top: 0;
}

.project--featured .review {
  margin-top: 24px;
}

.project--featured .review blockquote {
  font-size: 1.15rem;
}

/* "Example design" label on a project card */
.project-meta .tag {
  padding: 0 6px;
  border: 1px solid var(--ink);
  color: var(--ink);
}

.project-meta .tag--client {
  background: var(--ink);
  color: var(--plaster);
}

.project .h3-size {
  margin-bottom: 8px;
  font-size: 1.5rem;
  line-height: 1.2;
}

.project {
  margin: 0;
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 20px 0 8px;
  color: var(--grey);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.project h3 {
  margin-bottom: 8px;
  font-size: 1.5rem;
}

.project p {
  color: var(--grey);
}


/* -------------------------------------------------------------
   11. PRICING
   ------------------------------------------------------------- */
.price-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--plaster);
}

.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 24px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule-dark);
}

.price-row h3 {
  margin: 0;
  font-size: 1.375rem;
}

.price-row p {
  grid-column: 1 / -1;
  margin: 0;
}

.price {
  grid-column: 2;            /* on phones: on the same line as the name */
  grid-row: 1;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.price small {
  display: block;
  margin-bottom: 6px;
  color: var(--muted-on-dark);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.price-unit {
  font-size: 0.95rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .price-row {
    grid-template-columns: 200px 1fr auto;
    padding: 30px 0;
  }

  .price-row p {
    grid-column: 2;
  }

  .price {
    grid-column: 3;
  }
}


/* -------------------------------------------------------------
   12. ABOUT
   ------------------------------------------------------------- */
.about-grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 768px) {
  .about-grid {
    grid-template-columns: 5fr 7fr;
    gap: 72px;
    align-items: center;
  }
}

.placeholder--portrait {
  aspect-ratio: 4 / 5;
  max-width: 440px;
}

/* Josh's photo: square corners, thin frame, like a pinned-up print */
.portrait {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--ink);
  padding: 8px;
  background: var(--paper);
}

.about-grid .lead {
  color: var(--ink);
}


/* -------------------------------------------------------------
   13. CONTACT
   ------------------------------------------------------------- */
.contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.contact-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 16px;
  min-height: 72px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}

.contact-key {
  color: var(--grey);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-value {
  grid-column: 1;
  font-size: 1.15rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.contact-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  transition: transform 0.2s ease;
}

.contact-list a:hover .contact-value {
  text-decoration: underline;
}

.contact-list a:hover .contact-arrow {
  transform: translateX(4px);
}

@media (min-width: 768px) {
  .contact-list a {
    grid-template-columns: 180px 1fr auto;
  }

  .contact-value {
    grid-column: 2;
  }

  .contact-arrow {
    grid-column: 3;
    grid-row: auto;
  }
}


/* -------------------------------------------------------------
   14. FOOTER
   ------------------------------------------------------------- */
.site-footer {
  padding-block: 64px 104px;    /* extra bottom space for the phone button */
  background: var(--ink);
  color: var(--plaster);
}

@media (min-width: 960px) {
  .site-footer {
    padding-bottom: 32px;
  }
}

.footer-grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.footer-about p {
  margin-top: 20px;
  color: var(--muted-on-dark);
}

.footer-heading {
  margin: 0 0 12px;
  color: var(--muted-on-dark);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-block;
  padding: 7px 0;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-dark);
  color: var(--muted-on-dark);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
}

.footer-bottom p {
  margin: 0;
  max-width: none;
}


/* -------------------------------------------------------------
   15. MOBILE "STICKY" BUTTON
   Appears at the bottom of phone screens once you scroll past
   the main button, so it's always one tap away.
   ------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 20px;
  /* light edge so it still stands out over dark sections */
  border: 2px solid var(--plaster);
  outline: 1px solid var(--ink);
  background: var(--ink);
  color: var(--plaster);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(calc(100% + 24px));
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.sticky-cta::before {        /* small yellow bubble */
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bubble);
}

.sticky-cta.is-shown {
  transform: none;
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s;
}

@media (min-width: 960px) {
  .sticky-cta {
    display: none;
  }
}


/* -------------------------------------------------------------
   16. GENTLE FADE-IN ON SCROLL
   Add class="reveal" to anything you want to fade in.
   If someone's device is set to "reduce motion", nothing moves.
   ------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

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

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .sticky-cta,
  .btn-arrow,
  .contact-arrow {
    transition: none;
  }
}


/* -------------------------------------------------------------
   17. INNER PAGE HEADINGS
   The big title at the top of Work, Pricing, About, etc.
   ------------------------------------------------------------- */
.page-head {
  padding-block: 48px 64px;
}

@media (min-width: 768px) {
  .page-head {
    padding-block: 88px 96px;
  }
}

.page-head h1 {
  max-width: 16ch;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
}

.page-head .lead {
  max-width: 38em;
}


/* -------------------------------------------------------------
   18. CALL-TO-ACTION BAND
   The "get your free example" strip near the bottom of pages.
   ------------------------------------------------------------- */
.cta-band {
  display: grid;
  gap: 8px 48px;
}

@media (min-width: 768px) {
  .cta-band {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.cta-band h2 {
  max-width: 18ch;
}

.cta-band p {
  margin-bottom: 0;
}

.cta-band .actions {
  margin-top: 24px;
}


/* -------------------------------------------------------------
   19. PRICING PAGE
   ------------------------------------------------------------- */

/* The three packages, set out like columns in a table */
.packages {
  display: grid;
  border-top: 2px solid var(--ink);
}

.package {
  display: flex;
  flex-direction: column;
  padding: 32px 0 40px;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 960px) {
  .packages {
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--rule);
  }

  .package {
    padding: 36px 32px 40px;
    border-bottom: 0;
    border-left: 1px solid var(--rule);
  }

  .package:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .package:last-child {
    padding-right: 0;
  }
}

.package h2 {
  margin-bottom: 0;
  font-size: 1.6rem;
}

.package-price {
  margin: 20px 0 12px;
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.package-price small {
  display: block;
  margin-bottom: 8px;
  color: var(--grey);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.package-for {
  color: var(--grey);
}

.package .actions {
  margin-top: auto;
  padding-top: 24px;
}

.package .btn {
  width: 100%;
}

/* Lists with drawn tick marks */
.ticks {
  margin: 8px 0 24px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.ticks li {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--rule);
  line-height: 1.45;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.95em;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}

.section--dark .ticks {
  border-top-color: var(--rule-dark);
}

.section--dark .ticks li {
  border-bottom-color: var(--rule-dark);
}

.section--dark .ticks li::before {
  border-color: var(--bubble);
}

/* Small facts under each package (turnaround, changes) */
.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 0;
}

.facts dt {
  padding-top: 3px;
  color: var(--grey);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.facts dd {
  margin: 0;
  font-weight: 600;
}

/* "What's included and what isn't" table */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--ink);
}

.spec-table th,
.spec-table td {
  padding: 18px 24px 18px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.spec-table thead th {
  padding-block: 12px;
  color: var(--grey);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.spec-table tbody th {
  width: 30%;
  font-weight: 700;
}

.spec-table td:last-child {
  padding-right: 0;
  color: var(--grey);
}

/* "Included" / "Not included" labels: words, not just colours */
.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid var(--ink);
}

.status--yes::before {
  background: var(--ink);
}

/* On phones the table stacks into blocks */
@media (max-width: 639px) {
  .spec-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .spec-table tr {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
  }

  .spec-table tbody th,
  .spec-table td {
    display: block;
    width: auto;
    padding: 2px 0;
    border: 0;
  }

  .spec-table td {
    margin-top: 6px;
  }
}


/* -------------------------------------------------------------
   20. ABOUT PAGE
   ------------------------------------------------------------- */

/* Numbered list of points with thin lines between */
.points {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
  counter-reset: point;
}

.points li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--rule);
  counter-increment: point;
}

.points li::before {
  content: counter(point, decimal-leading-zero);
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
}

.points h3 {
  margin-bottom: 6px;
  font-size: 1.25rem;
}

.points p {
  margin: 0;
  color: var(--grey);
}

/* A client review (only use real ones) */
.review {
  margin: 48px 0 0;
  padding: 8px 0 8px 24px;
  border-left: 2px solid var(--ink);
}

.review blockquote {
  margin: 0 0 12px;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
}

.review figcaption {
  color: var(--grey);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}


/* -------------------------------------------------------------
   21. FAQ PAGE
   Each question opens and closes without any JavaScript.
   ------------------------------------------------------------- */
.faq {
  border-top: 2px solid var(--ink);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding: 18px 0;
  font-size: clamp(1.125rem, 2.4vw, 1.3rem);
  font-weight: 700;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* the square + / − box on the right */
.faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 400;
}

.faq details[open] summary::after {
  content: "−";
  background: var(--ink);
  color: var(--plaster);
}

.faq summary:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.faq-answer {
  padding: 0 56px 28px 0;
  color: var(--grey);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}


/* -------------------------------------------------------------
   22. CONTACT FORM
   ------------------------------------------------------------- */
.contact-layout {
  display: grid;
  gap: 64px;
}

@media (min-width: 960px) {
  .contact-layout {
    grid-template-columns: 7fr 5fr;
    gap: 80px;
    align-items: start;
  }
}

.form {
  display: grid;
  gap: 24px;
}

.form-row {
  display: grid;
  gap: 24px;
}

@media (min-width: 640px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: grid;
  gap: 8px;
  align-content: start;
}

.field label {
  font-weight: 700;
}

.optional {
  color: var(--grey);
  font-weight: 400;
}

.hint {
  margin: 0;
  color: var(--grey);
  font-size: 0.9rem;
}

.field input,
.field textarea {
  width: 100%;
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid var(--grey);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  appearance: none;
}

.field textarea {
  min-height: 180px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  outline: 3px solid var(--ink);
  outline-offset: 0;
  border-color: var(--ink);
}

/* Hidden box that catches spam robots. Real people never see it. */
.form-trap {
  position: absolute;
  left: -9999px;
}

.form .btn {
  justify-self: start;
}

@media (max-width: 479px) {
  .form .btn {
    justify-self: stretch;
  }
}

.form-status {
  padding: 18px 20px;
  border: 2px solid var(--ink);
  font-weight: 600;
}

.form-status p {
  margin: 0;
}

.side-panel h2 {
  font-size: 1.5rem;
}

.side-panel + .side-panel {
  margin-top: 56px;
}

.mini-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.mini-steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.mini-steps p {
  margin: 0;
}

.mini-steps span {
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
}


/* -------------------------------------------------------------
   23. TEXT PAGES (privacy policy)
   ------------------------------------------------------------- */
.prose {
  max-width: 720px;
}

.prose h2 {
  margin-top: 2.2em;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose ul {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

.prose li {
  margin-bottom: 0.5em;
}

.prose li::marker {
  color: var(--grey);
}