/* =========================================================================
   Custom builds page styles (dark, warm, to match the rest of the site)

   1. Tokens: colours, type sizes, spacing, motion. Tune these first.
   2. Base: plain element styles.
   3. Pieces: header, hero, the open-and-close cards, add-on dropdown, and so on.
   4. Motion: the animations, with a switch-off for people who ask for less movement.

   SCOPING: every rule here starts with .page-builds, a class on the <html> tag of
   builds.html. Even the colour tokens live on that class, and the animation names
   start with builds-. So this file cannot change any other page, and no other
   stylesheet in the services folder (such as the audit page's) can change this one,
   even if both are ever loaded together by mistake.

   If you change this file, bump the number in builds.html (builds.css?v=5)
   so visitors do not see the old copy.
   ========================================================================= */

/* 1. TOKENS */
.page-builds {
  --bg: #0d0a08;           /* page background, the same warm black as the portfolio */
  --panel: #1c1611;        /* cards and panels */
  --panel-raised: #241c15; /* dropdown list */
  --line: #3a2e24;         /* thin borders */
  --line-strong: #5a4733;  /* borders when something is hovered or open */
  --text: #f5ede1;         /* main text, warm cream */
  --muted: #b9ab97;        /* secondary text (passes 4.5:1 on the background) */
  --amber: #f4a65a;        /* the button, numbers and links */
  --on-amber: #1a120b;     /* text that sits on the amber button */

  /* The same three fonts the portfolio loads (the Google Fonts link in builds.html) */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;   /* headings, names, prices */
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* body text */
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;  /* small labels */

  /* Five text sizes, and only these */
  --t-sm: 0.875rem;                                /* 14px: hints and small mono text */
  --t-base: 1rem;                                  /* 16px: body */
  --t-md: 1.25rem;                                 /* 20px: lead text, step and question titles */
  --t-lg: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);    /* section titles, card titles, prices */
  --t-xl: clamp(2.5rem, 1.5rem + 4.5vw, 4rem);     /* the main heading */

  /* Spacing: the 8px scale, and only these */
  --s1: 0.25rem;  /* 4px  */
  --s2: 0.5rem;   /* 8px  */
  --s3: 1rem;     /* 16px */
  --s4: 1.5rem;   /* 24px */
  --s5: 2rem;     /* 32px */
  --s6: 3rem;     /* 48px */
  --s7: 4rem;     /* 64px */

  --radius: 12px;
  --radius-sm: 8px;

  /* Motion. Small feedback is quick, cards and menus a little slower, nothing over half a second.
     Things leave faster than they arrive. */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);   /* arriving */
  --ease-in: cubic-bezier(0.5, 0, 0.9, 0.6);    /* leaving */
  --d-quick: 150ms;
  --d-std: 250ms;
  --d-enter: 400ms;
  --d-exit: 250ms;

  --page-width: 62rem;
}

/* 2. BASE */
.page-builds *, .page-builds *::before, .page-builds *::after { box-sizing: border-box; }

/* No grey or blue flash when a finger taps something on a phone */
.page-builds * { -webkit-tap-highlight-color: transparent; }

.page-builds { scroll-behavior: smooth; scroll-padding-top: 5rem; color-scheme: dark; }

.page-builds body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

.page-builds h1, .page-builds h2, .page-builds h3, .page-builds h4 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.page-builds h4 { font-size: var(--t-base); letter-spacing: 0; line-height: 1.5; }
.page-builds p { margin: 0; }
.page-builds ul, .page-builds ol { margin: 0; padding: 0; list-style: none; }
.page-builds a { color: var(--amber); }
.page-builds button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; touch-action: manipulation; }

/* Selected text uses the site's amber instead of the browser's blue */
.page-builds ::selection { background: var(--amber); color: var(--on-amber); }

/* Focus ring: shows for keyboard users only, never after a mouse click or a tap.
   Keep it, because people who cannot use a mouse need to see where they are. */
.page-builds :focus { outline: none; }
.page-builds :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.page-builds [hidden] { display: none !important; }

.page-builds .wrap { width: min(100% - 2 * var(--s4), var(--page-width)); margin-inline: auto; }

.page-builds .skip {
  position: absolute; left: var(--s3); top: -4rem; z-index: 20;
  background: var(--amber); color: var(--on-amber); padding: var(--s2) var(--s3); border-radius: var(--radius-sm);
}
.page-builds .skip:focus { top: var(--s2); }

/* The warm glow behind everything, and a few slow embers. It never takes clicks. */
.page-builds .ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(50rem 34rem at 88% -8%, rgb(130 84 40 / 0.30), transparent 62%),
    radial-gradient(36rem 28rem at -6% 102%, rgb(90 55 26 / 0.22), transparent 62%); }
.page-builds .ambient::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 140%;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 12%, rgb(244 166 90 / 0.5), transparent),
    radial-gradient(1px 1px at 22% 38%, rgb(245 237 225 / 0.3), transparent),
    radial-gradient(2px 2px at 37% 22%, rgb(244 166 90 / 0.35), transparent),
    radial-gradient(1px 1px at 51% 64%, rgb(245 237 225 / 0.25), transparent),
    radial-gradient(1.5px 1.5px at 63% 30%, rgb(244 166 90 / 0.45), transparent),
    radial-gradient(1px 1px at 74% 78%, rgb(245 237 225 / 0.3), transparent),
    radial-gradient(2px 2px at 86% 46%, rgb(244 166 90 / 0.35), transparent),
    radial-gradient(1px 1px at 93% 14%, rgb(245 237 225 / 0.25), transparent);
  background-size: 100% 50%;
  animation: builds-embers 70s linear infinite;
}

.page-builds main, .page-builds .site-header, .page-builds .site-footer { position: relative; z-index: 1; }

/* 3. PIECES */

/* Header */
.page-builds .site-header { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.page-builds .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 4rem; }
.page-builds .brand { color: var(--text); text-decoration: none; font-family: var(--font-display); font-weight: 600; }
.page-builds .head-link { color: var(--muted); text-decoration: none; padding: var(--s3) 0; transition: color var(--d-quick); }
.page-builds .head-link:hover { color: var(--amber); }

/* The one primary button, and a plain link beside it */
.page-builds .btn {
  display: inline-flex; align-items: center; justify-content: center; width: fit-content;
  min-height: 3.5rem; padding: 0 var(--s5); border-radius: var(--radius-sm);
  background: var(--amber); color: var(--on-amber); font-weight: 600; text-decoration: none;
  transition: transform var(--d-quick) var(--ease-out), background-color var(--d-quick);
}
.page-builds .btn:hover { transform: translateY(-2px); background: #f8b671; }
.page-builds .btn:active { transform: scale(0.98); }
.page-builds .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }

/* A link with an underline that draws in from the left */
.page-builds .text-link { position: relative; display: inline-block; color: var(--amber); text-decoration: none; padding: var(--s2) 0; }
.page-builds .text-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--d-std) var(--ease-out); }
.page-builds .text-link:hover::after, .page-builds .text-link:focus-visible::after { transform: scaleX(1); }

.page-builds .mono { font-family: var(--mono); }

/* Hero: what it is, for whom, and the price, then one button */
.page-builds .hero { padding: var(--s7) 0 var(--s6); }
.page-builds .hero h1 { font-size: var(--t-xl); max-width: 16ch; margin-bottom: var(--s4); }
.page-builds .lead { font-size: var(--t-md); line-height: 1.5; color: var(--muted); max-width: 36rem; margin-bottom: var(--s5); }

/* Sections. The padding changes from one to the next on purpose. */
.page-builds .section { padding: var(--s6) 0; }
.page-builds .section.roomy { padding: var(--s7) 0; }
.page-builds .section h2 { font-size: var(--t-lg); }
.page-builds .section-intro { margin-top: var(--s3); max-width: 38rem; color: var(--muted); }
.page-builds .stack { margin-top: var(--s5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }

/* THE OPEN-AND-CLOSE CARD
   Used for the builds, the steps and the questions. When JavaScript works, the details start hidden and
   open when you tap the card. When it does not, everything simply shows. */
.page-builds .fold-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  transition: border-color var(--d-std), transform var(--d-std) var(--ease-out); }
@media (hover: hover) {
  .page-builds .fold-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
}
.page-builds .fold-card.is-open { border-color: var(--amber); }

.page-builds .fold-heading { margin: 0; font-family: var(--font); font-weight: 400; font-size: var(--t-base); letter-spacing: 0; line-height: 1.6; }
.page-builds .fold-toggle { display: block; position: relative; width: 100%; padding: var(--s4); border-radius: var(--radius); }

/* The plus sign turns into a cross when the card opens */
.page-builds .fold-icon { position: absolute; right: var(--s4); bottom: var(--s4); width: 1.5rem; height: 1.5rem; transition: transform var(--d-std) var(--ease-out); }
.page-builds .fold-icon::before, .page-builds .fold-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 2px; margin: -1px 0 0 -0.5rem; background: var(--amber); border-radius: 1px; }
.page-builds .fold-icon::after { transform: rotate(90deg); }
.page-builds .fold-card.is-open .fold-icon { transform: rotate(135deg); }
.page-builds:not(.js) .fold-icon, .page-builds:not(.js) .fold-hint { display: none; }
.page-builds:not(.js) .fold-toggle { cursor: default; }

.page-builds .fold-hint { display: block; margin-top: var(--s3); padding-right: var(--s6); font-family: var(--mono); font-size: var(--t-sm); color: var(--muted); transition: color var(--d-quick); }
.page-builds .fold-card:hover .fold-hint { color: var(--amber); }
.page-builds .fold-hint .when-open { display: none; }
.page-builds .fold-card.is-open .fold-hint .when-open { display: inline; }
.page-builds .fold-card.is-open .fold-hint .when-closed { display: none; }

/* The hidden part. The row grows from nothing to its full height, which makes it slide open.
   Opening takes 400ms and closing 250ms, so things leave faster than they arrive.
   visibility keeps links inside a closed card out of the Tab order. */
.page-builds.js .fold-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--d-exit) var(--ease-in), visibility 0s var(--d-exit); }
.page-builds.js .fold-card.is-open .fold-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--d-enter) var(--ease-out); }
.page-builds .fold-inner { min-height: 0; overflow: hidden; }
.page-builds .fold-body { padding: 0 var(--s4) var(--s4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }

/* Each piece inside rises one after another, 40ms apart. builds.js numbers them (--i). */
.page-builds.js .fold-body > *, .page-builds.js .plain li, .page-builds.js .timeline li { transition: opacity var(--d-enter) var(--ease-out), transform var(--d-enter) var(--ease-out); transition-delay: calc(min(var(--i, 0), 6) * 40ms + 100ms); }
.page-builds.js .fold-card:not(.is-open) .fold-body > *, .page-builds.js .fold-card:not(.is-open) .plain li, .page-builds.js .fold-card:not(.is-open) .timeline li { opacity: 0; transform: translateY(8px); transition-duration: var(--d-exit); transition-timing-function: var(--ease-in); transition-delay: 0s; }

/* BUILD CARDS (custom builds and template builds share one layout):
   the name, then the time on the left and the price on the right, then one line about who it is for. */
.page-builds .build-name { display: block; font-family: var(--font-display); padding-right: var(--s6); font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.page-builds .build-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s3); margin-top: var(--s2); }
.page-builds .build-days { font-family: var(--mono); font-size: var(--t-sm); color: var(--muted); }
.page-builds .build-price { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.page-builds .build-price .from { font-family: var(--mono); font-size: var(--t-sm); font-weight: 400; letter-spacing: 0; color: var(--muted); margin-right: var(--s1); }
.page-builds .build-for { display: block; margin-top: var(--s2); color: var(--muted); max-width: 36rem; }

.page-builds .build-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.page-builds .build-cols h4 { margin-bottom: var(--s2); }
.page-builds .build-note { color: var(--muted); font-size: var(--t-sm); margin-top: var(--s3); max-width: 32rem; }
.page-builds .build-open { margin: 0 var(--s4) var(--s3); }

/* A plain list: just lines of text with a thin rule between them */
.page-builds .plain li { padding: var(--s2) 0; border-top: 1px solid var(--line); }
.page-builds .plain li:first-child { border-top: 0; padding-top: 0; }

/* The day-by-day timeline. A line draws down, and a dot appears for each stage. */
.page-builds .timeline { position: relative; padding-left: var(--s5); }
.page-builds .timeline::before { content: ""; position: absolute; left: 5px; top: 0.7rem; bottom: 0.7rem; width: 1px; background: var(--line-strong); transform-origin: top; transition: transform var(--d-enter) var(--ease-out) 100ms; }
.page-builds.js .fold-card:not(.is-open) .timeline::before { transform: scaleY(0); transition-duration: var(--d-exit); transition-delay: 0s; }
.page-builds .timeline li { position: relative; padding: 0 0 var(--s3); }
.page-builds .timeline li:last-child { padding-bottom: 0; }
.page-builds .timeline li::before { content: ""; position: absolute; left: calc(-1 * var(--s5)); top: 0.35rem; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--amber); transition: transform var(--d-std) var(--ease-out) calc(min(var(--i, 0), 6) * 40ms + 150ms); }
.page-builds.js .fold-card:not(.is-open) .timeline li::before { transform: scale(0); transition-delay: 0s; transition-duration: var(--d-quick); }
.page-builds .when { display: block; font-family: var(--mono); font-size: var(--t-sm); color: var(--amber); }

/* ADD-ON DROPDOWN
   Built by hand instead of using the browser's own list, so it matches the site and has no blue highlight.
   builds.js makes it work with the keyboard too. */
.page-builds .addon { margin-top: var(--s5); max-width: 36rem; }
.page-builds .addon-label { display: block; margin-bottom: var(--s2); font-family: var(--mono); font-size: var(--t-sm); color: var(--muted); }
.page-builds .dd { position: relative; }
.page-builds .dd-button { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; min-height: 3.5rem; padding: 0 var(--s4);
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); transition: border-color var(--d-quick); }
.page-builds .dd-button:hover, .page-builds .dd.open .dd-button { border-color: var(--amber); }
.page-builds .dd-caret { width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--amber); border-bottom: 2px solid var(--amber); transform: translateY(-2px) rotate(45deg); transition: transform var(--d-std) var(--ease-out); }
.page-builds .dd.open .dd-caret { transform: translateY(2px) rotate(225deg); }
.page-builds .dd-list { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + var(--s2)); max-height: 20rem; overflow: auto;
  background: var(--panel-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transform-origin: top;
  transition: opacity var(--d-exit) var(--ease-in), transform var(--d-exit) var(--ease-in), visibility 0s var(--d-exit); }
.page-builds .dd.open .dd-list { opacity: 1; visibility: visible; transform: none; transition: opacity var(--d-std) var(--ease-out), transform var(--d-std) var(--ease-out); }
.page-builds .dd-option { display: flex; justify-content: space-between; gap: var(--s3); min-height: 3rem; align-items: center; padding: var(--s2) var(--s4); cursor: pointer; transition: background-color var(--d-quick); }
.page-builds .dd-option .dd-price { font-family: var(--mono); font-size: var(--t-sm); color: var(--muted); white-space: nowrap; }
.page-builds .dd-option.is-active { background: rgb(244 166 90 / 0.14); }
.page-builds .dd-option[aria-selected="true"] { color: var(--amber); font-weight: 600; }

.page-builds .addon-panel { margin-top: var(--s3); padding: var(--s4); min-height: 9rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.page-builds .addon-panel.swap > * { animation: builds-swap var(--d-enter) var(--ease-out) backwards; }
.page-builds .addon-panel.swap > *:nth-child(2) { animation-delay: 40ms; }
.page-builds .addon-panel.swap > *:nth-child(3) { animation-delay: 80ms; }
.page-builds .addon-panel.swap > *:nth-child(4) { animation-delay: 120ms; }
.page-builds .addon-title { font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; letter-spacing: -0.01em; }
.page-builds .addon-facts { margin-top: var(--s1); font-family: var(--mono); color: var(--amber); font-size: var(--t-sm); }
.page-builds .addon-text { margin-top: var(--s2); color: var(--muted); }
.page-builds .addon-panel .text-link { margin-top: var(--s2); }
.page-builds .addon-hint { color: var(--muted); }

.page-builds .addon-table { margin-top: var(--s4); width: 100%; border-collapse: collapse; }
.page-builds .addon-table th, .page-builds .addon-table td { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }

/* STEPS AND QUESTIONS: rows in a list */
.page-builds .rows { margin-top: var(--s5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); max-width: 46rem; }
.page-builds .rows .fold-toggle { display: flex; align-items: center; gap: var(--s3); min-height: 3.5rem; padding: var(--s3) calc(var(--s4) + var(--s5)) var(--s3) var(--s4); }
.page-builds .rows .fold-icon { top: 50%; bottom: auto; margin-top: -0.75rem; }
.page-builds .step-num { flex: none; width: 1.5rem; font-family: var(--mono); color: var(--amber); }
.page-builds .step-title, .page-builds .q-title { font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; transition: transform var(--d-std) var(--ease-out); }
@media (hover: hover) {
  .page-builds .rows .fold-card:hover { transform: none; }
  .page-builds .rows .fold-toggle:hover .step-title, .page-builds .rows .fold-toggle:hover .q-title { transform: translateX(4px); }
}
.page-builds .rows .fold-body { padding: 0 var(--s4) var(--s4); color: var(--muted); }
.page-builds .step .fold-body { padding-left: calc(var(--s4) + 1.5rem + var(--s3)); }

.page-builds .need { margin-top: var(--s6); max-width: 36rem; }
.page-builds .need h3 { font-size: var(--t-md); margin-bottom: var(--s3); }

/* CLOSING CALL TO ACTION */
.page-builds .closing { padding: var(--s7) 0; }
.page-builds .closing h2 { font-size: var(--t-xl); max-width: 14ch; }
.page-builds .closing p { margin: var(--s3) 0 var(--s5); color: var(--muted); max-width: 34rem; }

.page-builds .site-footer { padding: var(--s4) 0 var(--s5); border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--muted); }
.page-builds .site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between; }
.page-builds .site-footer a { color: var(--muted); display: inline-block; padding: var(--s1) 0; }

/* 4. MOTION */
@keyframes builds-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes builds-embers { from { transform: translateY(0); } to { transform: translateY(-35%); } }
@keyframes builds-swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* The first screen plays in order: heading, text, button. --d is the step number each element sets in the HTML. */
.page-builds .rise { animation: builds-rise 500ms var(--ease-out) backwards; animation-delay: calc(var(--d, 0) * 60ms + 60ms); }

/* Things further down fade up once, when they scroll into view.
   Without JavaScript they simply show, so nobody loses content. */
.page-builds.js .reveal { opacity: 0; }
.page-builds.js .reveal.in { opacity: 1; animation: builds-rise var(--d-enter) var(--ease-out) backwards; animation-delay: calc(min(var(--i, 0), 8) * 40ms); }

/* WIDE SCREENS: tablets and up */
@media (min-width: 54rem) {
  .page-builds .hero { padding: calc(var(--s7) + var(--s5)) 0 var(--s7); }
  .page-builds .section { padding: var(--s7) 0; }
  .page-builds .section.roomy { padding: calc(var(--s7) + var(--s3)) 0; }
  .page-builds .fold-toggle { padding: var(--s5); }
  .page-builds .fold-icon { right: var(--s5); bottom: var(--s5); }
  .page-builds .fold-body { padding: 0 var(--s5) var(--s5); }
  .page-builds .build-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); }
  .page-builds .build-open { margin: 0 var(--s5) var(--s4); }
  .page-builds .stack.two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* If a visitor's device asks for less movement, everything still works but nothing animates */
@media (prefers-reduced-motion: reduce) {
  .page-builds { scroll-behavior: auto; }
  .page-builds *, .page-builds *::before, .page-builds *::after { animation: none !important; transition: none !important; }
  .page-builds.js .reveal { opacity: 1; }
  .page-builds .ambient::before { display: none; }
}