/* ==========================================================================
   Pixelated Past — stylesheet
   --------------------------------------------------------------------------
   This file controls how the website LOOKS. index.html controls what it SAYS.

   It reads top to bottom in the same order as the page. Anything between
   a slash-star and a star-slash is a comment — a note for humans. The browser
   ignores comments completely, so write whatever helps you remember.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. COLOURS AND FONTS (our "design tokens")
   --------------------------------------------------------------------------
   These are nicknames for our colours. Set a colour ONCE here, and every
   place that uses the nickname updates automatically. Change --coral below
   and every button on the site changes colour. That's the whole trick.
   -------------------------------------------------------------------------- */

:root {
  /* The official Pixelated Past brand palette (see the brand guide). */
  --cream: #F6E7C8;          /* warm background, like old paper */
  --parchment: #EED9B5;      /* slightly deeper cream, for soft contrast */
  --card-cream: #FFF8E9;     /* the pale cream used on cards and photo borders */
  --navy: #062F5B;           /* logo and major headings */
  --navy-deep: #03284E;      /* darker navy, for backgrounds */
  --teal: #167C82;           /* buttons, icons, dividers — the workhorse colour */
  --teal-dark: #0D626B;      /* button hover state */
  --coral: #D85A3A;          /* hearts and small highlights — used sparingly */
  --rust: #B94C32;           /* deeper coral, small touches */
  --sepia: #7A5A3A;          /* vintage photo browns */
  --charcoal: #24333A;       /* body text */

  /* The three brand fonts. The names after each comma are backups in case
     Google Fonts fails to load — the page still works, just plainer. */
  --font-headline: 'DM Serif Display', Georgia, serif;
  --font-body: 'Source Sans 3', Arial, sans-serif;
  --font-script: 'Allura', cursive;

  /* A shadow we reuse in several places, so it stays consistent. */
  --shadow-soft: 0 12px 30px rgba(54, 37, 20, 0.10);
}


/* --------------------------------------------------------------------------
   2. PAGE BASICS
   -------------------------------------------------------------------------- */

/* border-box makes sizing predictable: when you say "this box is 300px wide",
   it stays 300px even after adding padding. Almost every website sets this. */
* {
  box-sizing: border-box;
}

html {
  /* Makes the "See how it works" button glide down the page instead of
     jumping instantly. This is why that button needs no JavaScript. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;      /* stops any tilted photo causing sideways scroll */
}

h1, h2, h3 {
  font-family: var(--font-headline);
  font-weight: 400;              /* DM Serif Display only comes in one weight */
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--navy);
  margin-top: 0;
}

/* Keeps text from stretching too wide on big screens (long lines are hard to
   read) and adds breathing room on phones. */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

section {
  padding: 60px 0;
}

.section-title {
  text-align: center;
  font-size: 30px;
  margin-bottom: 10px;
}

.section-intro {
  text-align: center;
  color: var(--charcoal);
  max-width: 600px;
  margin: 0 auto 40px auto;
}


/* --------------------------------------------------------------------------
   3. ANIMATIONS
   --------------------------------------------------------------------------
   A @keyframes block is a recipe for movement: "start like this, end like
   that." Nothing moves until something calls the recipe by name, further down.
   -------------------------------------------------------------------------- */

/* Fade in while sliding up slightly. Used when the page first loads. */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* A slow drift up and down, so the hero photos feel alive.
   Each polaroid is tilted a different amount, so each gets its own recipe
   to keep its tilt while floating. */
@keyframes floatLeft {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50%      { transform: rotate(-7deg) translateY(-10px); }
}

@keyframes floatCenter {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(-13px); }
}

@keyframes floatRight {
  0%, 100% { transform: rotate(6deg) translateY(0); }
  50%      { transform: rotate(6deg) translateY(-8px); }
}


/* --------------------------------------------------------------------------
   3b. THE HAMBURGER MENU
   --------------------------------------------------------------------------
   No JavaScript here. The hamburger is a link pointing at "#menu", and the
   :target rule below means "show the panel when the address bar points at it".
   Every link inside points somewhere else, so tapping one closes the menu
   automatically.
   -------------------------------------------------------------------------- */

/* The button itself. "fixed" means it stays put in the corner while the rest
   of the page scrolls underneath it. */
.hamburger {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;                   /* sits above everything else on the page */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(245, 239, 227, 0.94);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(16, 34, 54, 0.25);
  transition: transform 0.18s ease;
}

.hamburger:hover {
  transform: scale(1.06);
}

.hamburger svg {
  width: 24px;
  height: 24px;
}

/* The panel. Hidden by default — "translateX(100%)" parks it exactly its own
   width off the right edge of the screen, and "visibility: hidden" makes sure
   it can't be tabbed into while closed. */
.menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 84vw);       /* 320px, or 84% of screen on small phones */
  z-index: 60;
  background-color: var(--navy);
  color: var(--cream);
  padding: 70px 30px 30px 30px;
  box-shadow: -8px 0 30px rgba(10, 22, 36, 0.35);

  display: flex;
  flex-direction: column;

  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0.28s;
}

/* THE KEY RULE: when the address bar points at #menu, slide it into view. */
.menu:target {
  transform: translateX(0);
  visibility: visible;
}

.menu__close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(245, 239, 227, 0.10);
}

.menu__close svg {
  width: 22px;
  height: 22px;
}

.menu__brand {
  font-family: var(--font-headline);
  font-size: 22px;
  margin: 0 0 22px 0;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(245, 239, 227, 0.18);
}

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

.menu__list a {
  display: block;
  font-family: var(--font-headline);
  font-size: 20px;
  color: var(--cream);
  text-decoration: none;
  padding: 13px 0;
  border-bottom: 1px solid rgba(245, 239, 227, 0.10);
  transition: color 0.15s ease, padding-left 0.15s ease;
}

/* Nudges the item right and turns it coral when you point at it, so it's
   obvious which one you're about to tap. */
.menu__list a:hover {
  color: #FF9E8C;
  padding-left: 8px;
}

.menu__email {
  display: block;
  text-align: center;
  background-color: var(--teal);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  padding: 13px 20px;
  border-radius: 10px;
  margin-top: 26px;
}

/* The phone number below the email button in the menu. */
.menu__phone {
  display: block;
  text-align: center;
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
  padding: 12px 20px;
  margin-top: 10px;
  border: 1px solid rgba(246, 231, 200, 0.4);
  border-radius: 10px;
}

/* margin-top: auto pushes the tagline down to the bottom of the panel. */
.menu__tagline {
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 15px;
  opacity: 0.65;
  text-align: center;
}

/* Stops a section from being hidden underneath the fixed hamburger button
   when you jump to it from the menu. */
section, header {
  scroll-margin-top: 20px;
}


/* --------------------------------------------------------------------------
   4. POLAROID PHOTO FRAMES
   --------------------------------------------------------------------------
   A polaroid is just a white box with a thick bottom edge, holding a picture
   and a handwritten-looking caption. The pictures themselves are SVG drawings
   written directly in index.html.
   -------------------------------------------------------------------------- */

.polaroid {
  background-color: #FFFFFF;
  padding: 10px 10px 0 10px;    /* thin frame on three sides... */
  margin: 0;
  border-radius: 3px;
  box-shadow: 0 8px 22px rgba(27, 58, 92, 0.18);

  /* clamp() picks a size that grows with the screen but never goes outside
     the limits: at least 110px, ideally 26% of screen width, at most 165px.
     This is what keeps the photos from crowding a narrow phone. */
  width: clamp(110px, 26vw, 165px);
}

.polaroid__art {
  display: block;
  width: 100%;
  border-radius: 2px;
}

/* When a real photo is added, it needs to be square like the drawings.
   object-fit: cover crops the middle of the photo to fit the square neatly,
   instead of squashing it out of shape. */
img.polaroid__art {
  height: auto;                  /* cancels the height attribute in the HTML,
                                    which would otherwise stretch the photo */
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* The clever bit: "img + svg" means "an svg that comes straight after an img".
   So the moment a real photo is switched on, the backup drawing beneath it
   hides itself. Nothing else to edit. */
img.polaroid__art + svg.polaroid__art {
  display: none;
}

/* ...and a taller gap underneath, where a real polaroid has its white strip. */
.polaroid__caption {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 14px;
  color: var(--charcoal);
  text-align: center;
  padding: 10px 4px 12px 4px;
}

/* The three overlapping photos at the top of the page. */
.photo-cluster {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 36px;
}

/* Each photo is tilted differently and drifts at its own speed, so the
   cluster never looks mechanical. The negative margins make them overlap. */
.polaroid--left {
  animation: floatLeft 7s ease-in-out infinite;
  margin-right: -18px;
  z-index: 1;
}

.polaroid--center {
  animation: floatCenter 6s ease-in-out infinite;
  z-index: 3;                   /* highest number sits on top */
}

.polaroid--right {
  animation: floatRight 8s ease-in-out infinite;
  margin-left: -18px;
  z-index: 2;
}

/* The single polaroid in the contact section. */
.polaroid--contact {
  margin: 0 auto 30px auto;
  transform: rotate(-3deg);
  width: clamp(130px, 30vw, 170px);
}


/* --------------------------------------------------------------------------
   5. FILM STRIP DIVIDER
   --------------------------------------------------------------------------
   A neat trick: repeating-linear-gradient paints the same pattern over and
   over across the strip. Here it paints a pale square, then a gap, forever —
   which reads as the sprocket holes along a piece of camera film.
   -------------------------------------------------------------------------- */

.filmstrip {
  height: 36px;
  background-color: var(--navy-deep);
  position: relative;            /* anchor for the two rows of holes below */
}

/* ::before draws the top row of holes, ::after the bottom row. Both use the
   same repeating pattern: a 9px pale block, then a 13px gap, over and over. */
.filmstrip::before,
.filmstrip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 7px;
  background-image:
    repeating-linear-gradient(to right,
      var(--cream) 0 9px,
      transparent 9px 22px);
}

.filmstrip::before { top: 7px; }
.filmstrip::after  { bottom: 7px; }

.filmstrip--footer {
  margin-bottom: 30px;
}


/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */

.button {
  display: inline-block;         /* lets a link accept padding like a box */
  background-color: var(--teal);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;         /* removes the default link underline */
  padding: 14px 22px;
  border-radius: 10px;           /* the brand's soft-cornered button shape */
  box-shadow: 0 4px 14px rgba(22, 124, 130, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

/* :hover means "when the mouse is over it". The button lifts and its shadow
   grows, so it feels like it's rising off the page towards you. */
.button:hover {
  background-color: var(--teal-dark);
  transform: translateY(-3px);
  box-shadow: 0 9px 22px rgba(22, 124, 130, 0.35);
}

/* A quieter version: outlined instead of filled. Used on the two side
   pricing cards, so the middle one stands out. */
.button--outline {
  background-color: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  box-shadow: none;
}

.button--outline:hover {
  background-color: var(--navy);
  color: #FFFFFF;
  box-shadow: 0 9px 22px rgba(6, 47, 91, 0.25);
}


/* --------------------------------------------------------------------------
   7. HERO (the welcome area at the top)
   -------------------------------------------------------------------------- */

.hero {
  text-align: center;
  padding: 90px 0 80px 0;
  position: relative;
  color: var(--cream);

  /* TWO layers stacked here, and order matters — the first one sits on top.
     Layer 1 is a dark navy tint. Layer 2 is the photograph underneath it.
     Without the tint, cream text on a busy photo would be unreadable. */
  background-image:
    linear-gradient(rgba(3, 40, 78, 0.72), rgba(3, 40, 78, 0.80)),
    url("images/hero-shoebox.jpg");

  background-size: cover;      /* fill the area, cropping rather than squashing */
  background-position: center;
}


/* Each hero element fades up in turn. "backwards" means it stays invisible
   during its delay instead of flashing on screen first. */
.hero__logo,
.hero__tagline,
.hero__intro,
.hero .button {
  animation: fadeUp 0.7s ease backwards;
}

.hero__logo    { animation-delay: 0.05s; }
.hero__tagline { animation-delay: 0.18s; }
.hero__intro   { animation-delay: 0.30s; }
.hero .button  { animation-delay: 0.42s; }

.hero__logo {
  font-size: 44px;
  margin-bottom: 8px;
  /* Headings are navy everywhere else, but on the dark photo the title must
     be cream or it disappears into the background. */
  color: var(--cream);
}

/* On the dark photo the tagline needs to be brighter than the coral used
   elsewhere on the site, or it sinks into the background. */
.hero__tagline {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 20px;
  color: #FF9E8C;
  margin: 0 0 20px 0;
}

.hero__intro {
  max-width: 520px;
  margin: 0 auto 30px auto;
  color: rgba(245, 239, 227, 0.94);
  font-size: 18px;
}

/* A soft dark halo behind the headline text. On a photo background this is
   what keeps words legible even where the picture underneath is pale. */
.hero__logo,
.hero__tagline,
.hero__intro {
  text-shadow: 0 2px 14px rgba(10, 22, 36, 0.55);
}


/* --------------------------------------------------------------------------
   7b. FEATURE PHOTO
   --------------------------------------------------------------------------
   A single wide photograph with a caption, used to break up the page.
   -------------------------------------------------------------------------- */

.feature-photo {
  margin: 0 0 40px 0;
  border-radius: 16px;
  overflow: hidden;              /* clips the photo's corners to the rounding */
  box-shadow: var(--shadow-soft);
  background-color: #FFFFFF;
}

.feature-photo img {
  display: block;
  width: 100%;
  height: auto;                  /* keeps the photo's proportions correct */
  aspect-ratio: 3 / 2;
  object-fit: cover;             /* crops to fill rather than squashing */
}

.feature-photo figcaption {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 16px;
  color: var(--charcoal);
  text-align: center;
  padding: 14px 18px;
}


/* A shorter hero for inner pages (FAQ, comparison). Less padding, no button. */
.hero--small {
  padding: 60px 0 50px 0;
}

.hero--small .hero__logo {
  font-size: 36px;
}

/* The row of little fact pills in the hero. */
.trust-chips {
  display: flex;
  flex-wrap: wrap;               /* pills drop to a new line on tiny screens */
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 26px 0;
}

.trust-chips li {
  border: 1px solid rgba(246, 231, 200, 0.45);
  background-color: rgba(246, 231, 200, 0.10);
  color: var(--cream);
  border-radius: 30px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 600;
}

/* A narrower container for text-heavy inner pages — long lines are tiring. */
.container--narrow {
  max-width: 760px;
}

/* Each inner page gets its own hero photograph, for variety. These reuse
   images already on the site, so nothing extra downloads. */
.hero--faq {
  background-image:
    linear-gradient(rgba(3, 40, 78, 0.78), rgba(3, 40, 78, 0.84)),
    url("images/album.jpg");
}

.hero--local {
  background-image:
    linear-gradient(rgba(3, 40, 78, 0.78), rgba(3, 40, 78, 0.84)),
    url("images/trust-table.jpg");
}

/* The little ornament under section titles: a heart between two thin lines,
   straight from the brand guide. The heart is a text character; the lines
   are the two empty <span>s stretched by flex. */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--coral);
  font-size: 15px;
  margin: -2px auto 18px auto;
  max-width: 240px;
}

.divider span {
  flex: 1;
  height: 1px;
  background-color: var(--teal);
  opacity: 0.45;
}

/* Alternating section backgrounds give the page a gentle rhythm instead of
   one long run of the same cream. */
.included-section,
.no-surprises {
  background-color: var(--parchment);
}


/* --------------------------------------------------------------------------
   7c. GALLERY — tilted polaroids spread like prints on a table
   -------------------------------------------------------------------------- */

.gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;    /* two across, even on phones */
  gap: 26px 18px;
  justify-items: center;
  max-width: 780px;
  margin: 0 auto;
}

/* Gallery polaroids are wider than the hero ones and each leans its own way,
   so the grid reads as a casual pile rather than a rigid table. */
.gallery__item {
  width: 100%;
  max-width: 340px;
  transition: transform 0.25s ease;
}

.gallery__item--1 { transform: rotate(-2.5deg); }
.gallery__item--2 { transform: rotate(1.8deg); }
.gallery__item--3 { transform: rotate(2.2deg); }
.gallery__item--4 { transform: rotate(-1.6deg); }

/* Straighten up and lift slightly when pointed at — like picking it up. */
.gallery__item:hover {
  transform: rotate(0deg) translateY(-6px);
}

/* Gallery photos keep their natural shape rather than the square crop the
   hero polaroids use. */
.gallery__item img.polaroid__art {
  aspect-ratio: 4 / 3;
}


/* --------------------------------------------------------------------------
   7d. OUR STORY
   -------------------------------------------------------------------------- */

.story__text {
  font-size: 18px;
  text-align: center;
  color: var(--charcoal);
  margin: 0 0 18px 0;
}

/* The sign-off, in the handwritten script — the brand's one flourish gets
   a second, small appearance here. */
.story__sign {
  font-family: var(--font-script);
  font-size: 30px;
  text-align: center;
  color: var(--teal-dark);
  margin: 0;
}


/* --------------------------------------------------------------------------
   8. HOW IT WORKS (the 4 numbered steps)
   -------------------------------------------------------------------------- */

.steps {
  display: grid;                 /* grid = arrange children in a layout */
  gap: 24px;
  list-style: none;              /* remove the default bullet points */
  padding: 0;
  margin: 0;
  counter-reset: step;           /* start our own numbering at 0 */
}

.step {
  background-color: var(--card-cream);
  border: 1px solid rgba(6, 47, 91, 0.12);
  border-radius: 16px;
  padding: 26px 24px 26px 72px;  /* extra left padding leaves room for the
                                    number circle positioned below */
  position: relative;            /* anchor for the number circle */
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(27, 58, 92, 0.14);
}

/* This draws the numbered circle. ::before adds a little decoration before
   the step's text — the number comes from CSS counters, so we never type
   1, 2, 3, 4 by hand. Add a step and it renumbers itself. */
.step::before {
  counter-increment: step;       /* add 1 to our counter */
  content: counter(step);        /* show that number */
  position: absolute;
  left: 22px;
  top: 24px;
  width: 34px;
  height: 34px;
  background-color: var(--teal);
  color: #FFFFFF;
  border-radius: 50%;            /* 50% turns a square into a circle */
  font-family: var(--font-headline);
  font-weight: 700;
  display: flex;                 /* these three lines centre the number */
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(22, 124, 130, 0.3);
}

.step h3 {
  margin: 0 0 6px 0;
  font-size: 19px;
}

.step p {
  margin: 0;
  color: var(--charcoal);
}


/* --------------------------------------------------------------------------
   9. WHAT'S INCLUDED
   -------------------------------------------------------------------------- */

.included {
  display: grid;
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.included__item {
  background-color: var(--card-cream);
  border: 1px solid rgba(6, 47, 91, 0.12);
  border-radius: 14px;
  padding: 20px;
  display: flex;                 /* puts the icon and text side by side */
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease;
}

.included__item:hover {
  transform: translateY(-3px);
}

.included__item h3 {
  margin: 0 0 3px 0;
  font-size: 17px;
}

.included__item p {
  margin: 0;
  font-size: 15px;
  color: var(--charcoal);
}

/* The soft circle behind each icon drawing. */
.included__icon {
  flex-shrink: 0;                /* stops the circle squashing on narrow screens */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--parchment);
  color: var(--teal);            /* the SVG lines use currentColor, so they
                                    pick up this colour automatically */
  display: flex;
  align-items: center;
  justify-content: center;
}

.included__icon svg {
  width: 24px;
  height: 24px;
}


/* --------------------------------------------------------------------------
   10. WHY TRUST US
   -------------------------------------------------------------------------- */

.trust {
  color: var(--cream);
  text-align: center;

  /* Same two-layer trick as the hero: dark tint on top, photo underneath.
     This tint is heavier because this section has more text to read. */
  background-image:
    linear-gradient(rgba(13, 98, 107, 0.88), rgba(3, 40, 78, 0.92)),
    url("images/trust-table.jpg");

  background-size: cover;
  background-position: center;
  background-color: var(--navy);   /* fallback colour if the photo is missing */
}

.trust .section-title {
  color: var(--cream);
}

.badges {
  display: flex;
  flex-wrap: wrap;               /* badges drop to a new line if too narrow */
  justify-content: center;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0 0 26px 0;
}

.badges li {
  border: 1px solid rgba(245, 239, 227, 0.30);
  background-color: rgba(245, 239, 227, 0.06);
  border-radius: 30px;
  padding: 9px 20px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
}

.badges svg {
  width: 17px;
  height: 17px;
  color: var(--coral);
}

.trust__note {
  max-width: 520px;
  margin: 0 auto;
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 19px;
  opacity: 0.92;                 /* slightly see-through = softer look */
}


/* --------------------------------------------------------------------------
   11. PRICING CARDS
   -------------------------------------------------------------------------- */

.pricing-cards {
  display: grid;
  gap: 24px;
}

.card {
  background-color: var(--card-cream);
  border: 1px solid rgba(6, 47, 91, 0.12);
  border-radius: 18px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  display: flex;                 /* lets us push the button to the bottom */
  flex-direction: column;
  position: relative;            /* anchor for the "Most popular" ribbon */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(27, 58, 92, 0.15);
}

/* The middle card, made to stand out with a coral outline. */
.card--featured {
  border: 2px solid var(--coral);
}

/* The little "Most popular" tag sitting on the featured card's top edge. */
.card__ribbon {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);   /* nudges it back by half its own width,
                                    which is what truly centres it */
  background-color: var(--coral);
  color: var(--cream);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 20px;
  white-space: nowrap;           /* keeps it on one line */
}

.card h3 {
  font-size: 23px;
  margin-bottom: 4px;
}

.card__count {
  color: var(--charcoal);
  margin: 0 0 16px 0;
}

.card__price {
  font-family: var(--font-headline);
  font-size: 40px;
  color: var(--coral);
  margin: 0;
}

/* The "PLACEHOLDER" warning label under each price. Deliberately loud so
   nobody mistakes these for real prices. Delete once real prices are in. */
.card__placeholder {
  display: inline-block;
  background-color: #FFF3CD;
  color: #7A5B00;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 6px;
  padding: 4px 10px;
  margin: 10px 0 22px 0;
}

/* margin-top: auto pushes the button down so all three buttons line up
   neatly along the bottom, even if the cards have different text lengths. */
.card .button {
  margin-top: auto;
}


/* --------------------------------------------------------------------------
   11b. FULL PRICE LIST TABLE
   -------------------------------------------------------------------------- */

.pricelist {
  margin-top: 56px;
  background-color: #FFFFFF;
  border-radius: 18px;
  padding: 28px 22px;
  box-shadow: var(--shadow-soft);
}

/* The loud yellow banner reminding everyone these numbers are fake.
   Delete this whole block from index.html once real prices are in. */
.pricelist__warning {
  background-color: #FFF3CD;
  color: #7A5B00;
  border: 1px dashed #C9A227;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
  margin: 0 0 24px 0;
}

.pricelist__title {
  text-align: center;
  font-size: 24px;
  margin: 0 0 4px 0;
}

.pricelist__note {
  text-align: center;
  color: var(--charcoal);
  font-size: 15px;
  margin: 0 0 22px 0;
}

/* The price calculator box. */
.calc {
  background-color: var(--parchment);
  border-radius: 14px;
  padding: 22px 20px;
  text-align: center;
  margin-bottom: 30px;
}

.calc__label {
  display: block;
  font-family: var(--font-headline);
  font-size: 20px;
  color: var(--navy);
  margin-bottom: 12px;
}

.calc__input {
  font-family: var(--font-body);
  font-size: 18px;
  text-align: center;
  color: var(--charcoal);
  background-color: #FFFFFF;
  border: 2px solid var(--teal);
  border-radius: 10px;
  padding: 12px 16px;
  width: min(220px, 100%);
}

/* The teal outline browsers add on focus clashes with ours, so we thicken
   our own border colour instead — still an obvious focus signal. */
.calc__input:focus {
  outline: none;
  border-color: var(--navy);
}

.calc__result {
  margin: 14px auto 0 auto;
  max-width: 420px;
  font-size: 16px;
  color: var(--charcoal);
}

.calc__result strong {
  color: var(--teal-dark);
}

.calc__result a {
  color: var(--rust);
  font-weight: 600;
}

/* The list of buyable rows. */
.pricelist__rows {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Each row lays out left to right: photo count, price, Buy button. */
.pricerow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border-bottom: 1px solid var(--parchment);
  transition: background-color 0.15s ease;
}

/* Every other row gets a faint tint, which makes a long list much easier to
   read across on a phone. "odd" means the 1st, 3rd, 5th row and so on. */
.pricerow:nth-child(odd) {
  background-color: #FCFAF6;
}

.pricerow:hover {
  background-color: var(--parchment);
}

/* flex: 1 tells the count to soak up all the leftover space, which pushes
   the price and the Buy button over to the right edge. */
.pricerow__count {
  flex: 1;
  font-size: 15px;
}

.pricerow__price {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 19px;
  min-width: 62px;               /* keeps every price starting at the same
                                    spot, so the column looks tidy */
  text-align: right;
}

/* The small Buy button on each row. */
.pricerow__buy {
  flex-shrink: 0;                /* never let it squash on a narrow phone */
  background-color: var(--teal);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  padding: 9px 20px;
  border-radius: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pricerow__buy:hover {
  background-color: var(--teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(22, 124, 130, 0.32);
}

/* The three rows that match the package cards above get a coral outline
   and bolder text, so they stand out from the rest of the list. */
.pricerow--highlight {
  background-color: #FFF6F4 !important;
  border: 1px solid rgba(214, 69, 51, 0.35);
}

.pricerow--highlight .pricerow__count,
.pricerow--highlight .pricerow__price {
  color: var(--coral);
  font-weight: 700;
}

/* The reassuring padlock line under the list. */
.pricelist__secure {
  text-align: center;
  font-size: 14px;
  color: var(--charcoal);
  background-color: var(--cream);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 22px 0 0 0;
}

/* The small "Starter" / "Family" / "Legacy" label inside those rows. */
.pricelist__tag {
  display: inline-block;
  background-color: var(--coral);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 20px;
  padding: 3px 9px;
  margin-left: 7px;
  vertical-align: middle;
}

.pricelist__more {
  text-align: center;
  color: var(--charcoal);
  font-size: 15px;
  margin: 22px 0 0 0;
}

.pricelist__more a {
  color: var(--coral);
  font-weight: 700;
}


/* --------------------------------------------------------------------------
   11c. TRUST EXTRAS, NO-SURPRISES, FAQ, COMPARISON
   -------------------------------------------------------------------------- */

/* The two concrete promises under the trust badges. */
.trust__promises {
  max-width: 520px;
  margin: 24px auto 0 auto;
}

.trust__promises p {
  margin: 0 0 10px 0;
  font-size: 16px;
  opacity: 0.95;
}

.trust__link {
  display: inline-block;
  color: #FF9E8C;
  font-weight: 600;
  margin-top: 14px;
}

/* The "no surprises" promise list — each line gets a teal check drawn by
   CSS, so there are no icons to manage. */
.promises {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 640px;
}

.promises li {
  background-color: var(--card-cream);
  border: 1px solid rgba(6, 47, 91, 0.12);
  border-radius: 12px;
  padding: 14px 18px 14px 46px;
  margin-bottom: 12px;
  position: relative;            /* anchor for the checkmark */
  font-size: 16px;
}

/* The checkmark, drawn with a rotated border corner — an old CSS trick. */
.promises li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 19px;
  width: 12px;
  height: 6px;
  border-left: 3px solid var(--teal);
  border-bottom: 3px solid var(--teal);
  transform: rotate(-45deg);
}

/* FAQ accordions. <details> is interactive all by itself — this is just
   how it looks. */
.faq {
  background-color: var(--card-cream);
  border: 1px solid rgba(6, 47, 91, 0.12);
  border-radius: 12px;
  margin: 0 auto 12px auto;
  max-width: 640px;
  overflow: hidden;
}

/* The clickable question line. */
.faq summary {
  cursor: pointer;
  font-family: var(--font-headline);
  font-size: 18px;
  color: var(--navy);
  padding: 16px 44px 16px 18px;
  position: relative;
  list-style: none;              /* hides the browser's default triangle */
}

.faq summary::-webkit-details-marker {
  display: none;                 /* Safari's version of the same triangle */
}

/* Our own chevron, which flips when the box is open. */
.faq summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 22px;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--teal);
  border-bottom: 2.5px solid var(--teal);
  transform: rotate(45deg);      /* points down */
  transition: transform 0.2s ease;
}

.faq[open] summary::after {
  transform: rotate(225deg);     /* points up when open */
  top: 26px;
}

.faq p {
  margin: 0;
  padding: 0 18px 16px 18px;
  color: var(--charcoal);
}

.faq-teaser__more {
  text-align: center;
  margin: 26px 0 0 0;
}

.faq-teaser__more a {
  color: var(--teal-dark);
  font-weight: 600;
}

.faq-teaser__more a.button,
.faq-teaser__more a.button--outline {
  color: inherit;
}

/* The comparison layout. Phone-first: each row is a stacked card. */
.compare {
  max-width: 760px;
  margin: 0 auto;
}

.compare__row {
  background-color: var(--card-cream);
  border: 1px solid rgba(6, 47, 91, 0.12);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
}

/* The header row only makes sense as columns, so hide it on phones. */
.compare__row--head {
  display: none;
}

.compare__label {
  font-family: var(--font-headline);
  font-size: 17px;
  color: var(--navy);
  margin-bottom: 8px;
}

.compare__us {
  color: var(--teal-dark);
  font-weight: 600;
  margin-bottom: 6px;
}

.compare__them {
  color: var(--charcoal);
  opacity: 0.75;
  font-size: 15px;
}

.compare__note {
  max-width: 640px;
  margin: 26px auto 0 auto;
  text-align: center;
  color: var(--charcoal);
  font-style: italic;
  font-size: 15px;
}

/* The calculator's "Book this size" button. */
.calc__book {
  display: inline-block;
  background-color: var(--teal);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 10px;
  margin-left: 8px;
}

.calc__book:hover {
  background-color: var(--teal-dark);
}


/* --------------------------------------------------------------------------
   12. CONTACT
   -------------------------------------------------------------------------- */

.contact {
  text-align: center;
}

.contact__email {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  color: var(--coral);
  margin-top: 6px;
  padding: 12px 26px;
  border-radius: 40px;
  background-color: #FFFFFF;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  word-break: break-word;        /* long emails wrap instead of overflowing */
  transition: transform 0.18s ease;
}

.contact__email:hover {
  transform: translateY(-3px);
}

/* The phone number under the email. tel: links let phones dial in one tap. */
.contact__phone {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin: 14px auto 0 auto;
  padding: 10px 22px;
  border: 2px solid var(--teal);
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.contact__phone:hover {
  background-color: var(--teal);
  color: #FFFFFF;
}


/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  background-color: var(--navy-deep);
  color: var(--cream);
  text-align: center;
  padding: 0 20px 40px 20px;
}

/* The handwritten flourish. Script fonts are hard to read, so this is the
   only place on the whole site Allura is used — and it's large on purpose,
   because script fonts fall apart at small sizes. */
.footer__script {
  font-family: var(--font-script);
  font-size: 34px;
  color: var(--cream);
  margin: 0 0 10px 0;
}

.footer__name {
  margin: 0 0 8px 0;
  font-weight: 600;
}

/* The row of links at the bottom of every page. */
.footer__nav {
  display: flex;
  flex-wrap: wrap;               /* wraps to multiple lines on phones */
  justify-content: center;
  gap: 8px 22px;
  list-style: none;
  padding: 0;
  margin: 14px 0 18px 0;
}

.footer__nav a {
  color: var(--cream);
  opacity: 0.85;
  font-size: 15px;
  text-decoration: none;
}

.footer__nav a:hover {
  opacity: 1;
  text-decoration: underline;
}

.footer__note {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 19px;
  margin: 0;
  opacity: 0.85;
}


/* --------------------------------------------------------------------------
   14. BIGGER SCREENS
   --------------------------------------------------------------------------
   Everything above is written for PHONES first — that's "mobile-first", and
   it matters because most customers will find this on a phone.

   The rule below means: "IF the screen is at least 700px wide, ALSO apply
   these changes." Narrow phones never see any of it. All we do here is
   spread things into columns, since wide screens have room to spare.
   -------------------------------------------------------------------------- */

@media (min-width: 700px) {

  body {
    font-size: 18px;
  }

  .hero {
    padding: 70px 0 80px 0;
  }

  .hero__logo {
    font-size: 64px;
  }

  .hero__tagline {
    font-size: 24px;
  }

  .section-title {
    font-size: 36px;
  }

  section {
    padding: 80px 0;
  }

  .photo-cluster {
    margin-bottom: 46px;
  }

  /* Wider overlap now that there's room. */
  .polaroid--left  { margin-right: -26px; }
  .polaroid--right { margin-left: -26px; }

  /* Two steps side by side instead of a single stack.
     "1fr 1fr" means two equal-width columns. */
  .steps {
    grid-template-columns: 1fr 1fr;
  }

  .included {
    grid-template-columns: 1fr 1fr;
  }

  /* All three pricing cards in a row. */
  .pricing-cards {
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
  }

  /* The featured card sits slightly taller than its neighbours. */
  .card--featured {
    padding: 42px 24px;
  }

  /* Comparison becomes a proper 3-column table on wide screens. */
  .compare__row {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 18px;
    align-items: center;
  }

  .compare__row--head {
    display: grid;                 /* the header row reappears */
    background: none;
    border: none;
    padding-bottom: 4px;
  }

  .compare__row--head .compare__us,
  .compare__row--head .compare__them {
    font-family: var(--font-headline);
    font-size: 18px;
    color: var(--navy);
    opacity: 1;
  }

  .compare__label {
    margin-bottom: 0;
  }

  .compare__us,
  .compare__them {
    margin-bottom: 0;
  }
}


/* --------------------------------------------------------------------------
   14b. THE SCAN DEMO — a memory coming back to life
   --------------------------------------------------------------------------
   Two copies of the same photo are stacked. The bottom copy is washed out
   with filters; the top copy is full quality but clipped away, and an
   animation wipes it into view while a glowing beam sweeps across in sync.
   -------------------------------------------------------------------------- */

.scan-demo {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;              /* clips the beam and photos to the rounding */
  box-shadow: 0 14px 36px rgba(54, 37, 20, 0.22);
}

.scan-demo img {
  display: block;
  width: 100%;
  height: auto;
}

/* The "before": washed out, yellowed, low contrast — a print left in the sun. */
.scan-demo__faded {
  filter: sepia(0.55) contrast(0.75) brightness(1.12) saturate(0.6);
}

/* The "after": the same image at full strength, laid exactly on top... */
.scan-demo__crisp {
  position: absolute;
  inset: 0;
  filter: contrast(1.06) saturate(1.12);

  /* ...but clipped to nothing on the right side. The animation below opens
     this clip from left to right, revealing the restored photo. */
  clip-path: inset(0 100% 0 0);
  animation: scanReveal 7s ease-in-out infinite;
}

/* The glowing scan line that sweeps across, timed to match the reveal. */
.scan-demo__beam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3%;
  width: 3px;
  background: linear-gradient(180deg,
    rgba(122, 219, 226, 0.0), rgba(122, 219, 226, 0.95), rgba(122, 219, 226, 0.0));
  box-shadow: 0 0 18px 5px rgba(52, 178, 186, 0.55);
  animation: scanBeam 7s ease-in-out infinite;
}

/* Timing for both: sweep for the first 40%, rest fully revealed until 75%,
   then snap back and rest faded until the loop restarts. */
@keyframes scanReveal {
  0%   { clip-path: inset(0 100% 0 0); }
  40%  { clip-path: inset(0 0% 0 0); }
  75%  { clip-path: inset(0 0% 0 0); }
  82%  { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}

@keyframes scanBeam {
  0%   { left: -3%; opacity: 1; }
  40%  { left: 101%; opacity: 1; }
  41%  { opacity: 0; }
  81%  { left: -3%; opacity: 0; }
  82%  { left: -3%; opacity: 1; }
  100% { left: -3%; opacity: 1; }
}

.scan-demo__caption {
  text-align: center;
  font-size: 14px;
  color: var(--charcoal);
  opacity: 0.7;
  margin: 14px 0 0 0;
}


/* --------------------------------------------------------------------------
   14c. HERO DECORATION POLAROIDS (wide screens only)
   -------------------------------------------------------------------------- */

/* Hidden on phones — the hero stays a clean centered column. */
.hero__deco {
  display: none;
}

@media (min-width: 1000px) {
  .hero {
    overflow: hidden;            /* tilted photos never cause sideways scroll */
  }

  .hero__deco {
    display: block;
    position: absolute;
    width: 190px;
    opacity: 0.92;
  }

  .hero__deco--left {
    left: 3%;
    bottom: 30px;
    transform: rotate(-8deg);
    animation: floatLeft 9s ease-in-out infinite;
  }

  .hero__deco--right {
    right: 3%;
    top: 70px;
    transform: rotate(7deg);
    animation: floatRight 8s ease-in-out infinite;
  }
}


/* --------------------------------------------------------------------------
   14d. BACK-TO-TOP BUTTON
   -------------------------------------------------------------------------- */

.to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--teal);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(13, 98, 107, 0.4);
  transition: transform 0.15s ease;
}

.to-top:hover {
  transform: translateY(-3px);
}

.to-top svg {
  width: 20px;
  height: 20px;
}

/* On browsers that support scroll-driven animations, the button stays
   invisible until you've scrolled a bit — no point offering "back to top"
   at the top. Older browsers just always show it, which is fine too. */
@supports (animation-timeline: scroll()) {
  .to-top {
    animation: toTopFade linear both;
    animation-timeline: scroll();
    animation-range: 0 600px;
  }

  @keyframes toTopFade {
    from { opacity: 0; pointer-events: none; transform: translateY(8px); }
    60%  { opacity: 0; pointer-events: none; }
    to   { opacity: 1; pointer-events: auto; transform: translateY(0); }
  }
}


/* --------------------------------------------------------------------------
   14e. SCROLL-REVEAL — content gently rises as it enters the screen
   --------------------------------------------------------------------------
   animation-timeline: view() ties an animation to an element's journey into
   the viewport instead of to a clock. Browsers that don't know it yet simply
   show everything immediately — nothing breaks.
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  .step,
  .included__item,
  .card,
  .gallery__item,
  .promises li,
  .compare__row,
  .feature-photo {
    animation: riseIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }

  @keyframes riseIn {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Gallery items keep their casual tilt after rising. */
  .gallery__item--1 { animation-name: riseIn1; }
  .gallery__item--2 { animation-name: riseIn2; }
  .gallery__item--3 { animation-name: riseIn3; }
  .gallery__item--4 { animation-name: riseIn4; }

  @keyframes riseIn1 { from { opacity: 0; transform: rotate(-2.5deg) translateY(26px); } to { opacity: 1; transform: rotate(-2.5deg) translateY(0); } }
  @keyframes riseIn2 { from { opacity: 0; transform: rotate(1.8deg)  translateY(26px); } to { opacity: 1; transform: rotate(1.8deg)  translateY(0); } }
  @keyframes riseIn3 { from { opacity: 0; transform: rotate(2.2deg)  translateY(26px); } to { opacity: 1; transform: rotate(2.2deg)  translateY(0); } }
  @keyframes riseIn4 { from { opacity: 0; transform: rotate(-1.6deg) translateY(26px); } to { opacity: 1; transform: rotate(-1.6deg) translateY(0); } }
}


/* --------------------------------------------------------------------------
   14f. MICRO-POLISH — the tiny details that make a site feel finished
   -------------------------------------------------------------------------- */

/* Text you highlight with the mouse gets brand colours instead of the
   browser's default blue. */
::selection {
  background-color: var(--teal);
  color: #FFFFFF;
}

/* The page scrollbar, tinted to match (browsers that support styling it). */
html {
  scrollbar-color: var(--teal) var(--parchment);
}

/* Menu and footer links get a little underline that slides in on hover,
   instead of appearing abruptly. */
.footer__nav a,
.menu__list a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.25s ease;
}

.footer__nav a:hover,
.menu__list a:hover {
  background-size: 100% 1px;
  text-decoration: none;
}

/* The film strip's sprocket holes drift slowly sideways, like film being
   wound through a projector. Subtle on purpose. */
.filmstrip::before,
.filmstrip::after {
  animation: filmRoll 14s linear infinite;
}

@keyframes filmRoll {
  from { background-position: 0 0; }
  to   { background-position: 44px 0; }   /* exactly two hole-widths = seamless loop */
}


/* --------------------------------------------------------------------------
   15. RESPECTING "REDUCE MOTION"
   --------------------------------------------------------------------------
   Some people get dizzy or unwell from moving things on screen, and set their
   phone or computer to "reduce motion". This block listens for that setting
   and switches all our animation off for them. The site still looks the same,
   it just holds still. It's a small kindness and the polite thing to do.
   -------------------------------------------------------------------------- */

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