/* ------------------------------------------------------------------
   Up & Booked — site stylesheet
   Base layer is the approved "Confident Local" concept, verbatim.
   Additions for inner pages live in the "Inner pages" section below.
   No build step: this file is served as-is from /public/assets/css/.
   ------------------------------------------------------------------ */

/* --- Noto Sans (variable, self-hosted) ---------------------------
   The concept's stack asked for Inter and fell back to the system UI
   font, which on the machine the design was approved on is Noto Sans
   with only Regular and Bold installed. That is the rendering that was
   signed off, so it is the one we ship — self-hosted, so every visitor
   sees it rather than whatever their own machine happens to have.

   The face is declared as `font-weight: 400 700`, which clamps the
   concept's 750–1000 weights to Bold exactly as the approved render
   did. That keeps the concept CSS below untouched.                    */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/noto-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==================================================================
   1. Concept baseline (unchanged from the approved mockup)
   ================================================================== */
:root {
  --paper: #f8f4e9;
  --paper-2: #eee8da;
  --white: #fffdf7;
  --ink: #15363b;
  --ink-soft: #536b6c;
  --night: #0c2b31;
  --green: #1e665c;
  --mint: #cce9dc;
  --orange: #f36b46;
  --orange-deep: #d95031;
  --yellow: #f5d260;
  --sky: #b9dfea;
  --line: rgba(21, 54, 59, .17);
  --light-line: rgba(255, 255, 255, .17);
  --shadow: 0 24px 70px rgba(13, 54, 56, .15);
  --max: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { width: min(var(--max), calc(100% - 44px)); margin-inline: auto; }
.skip { position: fixed; z-index: 100; left: 18px; top: -90px; padding: 12px 16px; background: var(--night); color: white; border-radius: 8px; }
.skip:focus { top: 18px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { margin-bottom: 22px; letter-spacing: -.055em; line-height: .95; }
h1 { max-width: 780px; font-size: clamp(3.7rem, 7.7vw, 7.5rem); font-weight: 850; }
h2 { font-size: clamp(2.65rem, 5.2vw, 5rem); font-weight: 790; }
h1 em, h2 em { color: var(--orange); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
h3 { margin-bottom: 9px; font-size: 1.15rem; line-height: 1.2; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; font-size: .71rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 5px; border-radius: 999px; background: var(--orange); }
.eyebrow.light { color: var(--yellow); }
.eyebrow.light::before { background: var(--yellow); }
.lead { max-width: 690px; color: var(--ink-soft); font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.67; }
.button {
  display: inline-flex;
  min-height: 55px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 22px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--orange);
  color: white;
  font-size: .84rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover { transform: translate(2px, 2px); background: var(--orange-deep); box-shadow: 3px 3px 0 var(--ink); }
.button.secondary { background: transparent; color: var(--ink); box-shadow: none; }
.button.secondary:hover { background: var(--white); transform: translateY(-2px); }
a:focus-visible, summary:focus-visible { outline: 4px solid var(--yellow); outline-offset: 4px; }

.top-note { padding: 8px 14px; background: var(--night); color: rgba(255,255,255,.7); font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-align: center; }
.top-note strong { color: var(--yellow); }
header { position: relative; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(248,244,233,.91); backdrop-filter: blur(15px); }
.nav { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-size: 1.23rem; font-weight: 950; letter-spacing: -.045em; text-decoration: none; }
.brand-mark { position: relative; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px 11px 11px 3px; background: var(--green); color: white; font-size: 1.15rem; transform: rotate(-2deg); }
.brand-mark::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); }
.nav-links { display: flex; align-items: center; gap: 27px; }
.nav-links > a:not(.nav-cta) { color: var(--ink-soft); font-size: .77rem; font-weight: 800; text-decoration: none; }
.nav-links > a:not(.nav-cta):hover { color: var(--orange); }
.nav-cta { padding: 10px 14px; border-radius: 9px; background: var(--ink); color: white; font-size: .73rem; font-weight: 900; text-decoration: none; }
.nav-cta:hover { background: var(--orange); }
.mobile-menu { display: none; position: relative; }
.mobile-menu summary { padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-size: .74rem; font-weight: 900; list-style: none; text-transform: uppercase; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-links { position: absolute; top: 47px; right: 0; display: grid; width: 235px; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: var(--shadow); }
.mobile-links a { padding: 10px; border-radius: 8px; text-decoration: none; font-size: .8rem; font-weight: 800; }
.mobile-links a:hover { background: var(--paper-2); }

.hero { position: relative; overflow: hidden; padding: 78px 0 90px; }
.hero::before { content: ""; position: absolute; right: -190px; top: -210px; width: 590px; height: 590px; border: 85px solid rgba(245,210,96,.45); border-radius: 50%; }
.hero::after { content: ""; position: absolute; left: -110px; bottom: -230px; width: 390px; height: 390px; border-radius: 50%; background: rgba(204,233,220,.5); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(48px, 7vw, 90px); }
.hero h1 .line { display: block; }
.hero-copy .lead { max-width: 650px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.micro { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 23px; color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.micro span::before { content: "✓"; margin-right: 7px; color: var(--green); font-weight: 1000; }

.hero-visual { position: relative; min-width: 0; padding: 33px 0 28px; }
.visual-back { position: absolute; inset: 0 18px 0 -12px; border-radius: 40px 8px 40px 8px; background: var(--green); transform: rotate(-2deg); }
.browser { position: relative; overflow: hidden; border: 7px solid white; border-radius: 19px; background: white; box-shadow: 0 35px 85px rgba(15,54,57,.25); transform: rotate(1.3deg); }
.browser-top { display: flex; height: 34px; align-items: center; gap: 6px; padding: 0 11px; background: #edf1ed; }
.browser-top i { width: 7px; height: 7px; border-radius: 50%; background: #bdc8c2; }
.browser-top span { width: 44%; height: 12px; margin-left: 7px; border-radius: 999px; background: white; }
.demo-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 17px; font-size: .58rem; font-weight: 900; }
.demo-logo { display: flex; align-items: center; gap: 6px; font-size: .72rem; }
.demo-logo b { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 7px; background: var(--green); color: white; }
.demo-links { display: flex; gap: 11px; color: #698078; }
.demo-call { padding: 7px 9px; border-radius: 7px; background: var(--orange); color: white; }
.demo-hero { display: grid; min-height: 278px; grid-template-columns: 1.08fr .92fr; background: #e3f1eb; }
.demo-copy { align-self: center; padding: 29px 17px 30px 28px; }
.demo-copy small { color: var(--orange-deep); font-size: .52rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.demo-copy h3 { max-width: 300px; margin: 9px 0 10px; font-size: clamp(1.6rem, 3vw, 2.45rem); letter-spacing: -.05em; line-height: .95; }
.demo-copy p { max-width: 260px; color: #58706a; font-size: .65rem; line-height: 1.48; }
.demo-actions { display: flex; gap: 7px; margin-top: 15px; }
.demo-actions span { padding: 8px 9px; border-radius: 6px; background: var(--ink); color: white; font-size: .53rem; font-weight: 900; }
.demo-actions span:last-child { border: 1px solid #9db5ac; background: transparent; color: var(--ink); }
.demo-art { position: relative; overflow: hidden; background: var(--yellow); }
.demo-art::before { content: ""; position: absolute; left: -58px; bottom: -85px; width: 260px; height: 260px; border: 46px solid rgba(21,54,59,.19); border-radius: 50%; }
.demo-art::after { content: "24/7"; position: absolute; right: 18px; top: 18px; display: grid; width: 62px; height: 62px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); font-size: .75rem; font-weight: 950; transform: rotate(7deg); }
.demo-trust { display: grid; grid-template-columns: repeat(3, 1fr); }
.demo-trust div { padding: 12px 8px; border-right: 1px solid #e5ebe7; text-align: center; }
.demo-trust div:last-child { border: 0; }
.demo-trust b { display: block; color: var(--green); font-size: .56rem; }
.demo-trust small { color: #74837e; font-size: .49rem; }
.preview-stamp { position: absolute; right: -24px; top: -7px; display: grid; width: 114px; height: 114px; place-items: center; padding: 15px; border: 4px solid var(--paper); border-radius: 50%; background: var(--orange); color: white; font-size: .68rem; font-weight: 950; line-height: 1.1; text-align: center; text-transform: uppercase; transform: rotate(9deg); box-shadow: 0 15px 35px rgba(21,54,59,.2); }
.result-note { position: absolute; left: -27px; bottom: -5px; width: 205px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 11px; background: var(--yellow); box-shadow: 6px 6px 0 var(--ink); transform: rotate(-2deg); }
.result-note b { display: block; margin-bottom: 2px; font-size: .78rem; }
.result-note span { display: block; color: #536255; font-size: .65rem; line-height: 1.35; }

.offer-strip { border-block: 2px solid var(--ink); background: var(--yellow); }
.offer-grid { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); }
.offer-item { min-height: 92px; display: flex; align-items: center; gap: 11px; padding: 18px 24px; border-right: 1px solid rgba(21,54,59,.24); }
.offer-item:last-child { border: 0; }
.offer-item:first-child { padding-left: 0; font-weight: 900; line-height: 1.25; }
.offer-item strong { display: block; font-size: .8rem; }
.offer-item small { display: block; color: #5b6855; font-size: .65rem; }
.offer-icon { display: grid; flex: 0 0 32px; height: 32px; place-items: center; border: 1px solid var(--ink); border-radius: 9px; font-size: .78rem; font-weight: 950; }

section { padding: 108px 0; }
.section-head { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 76px; margin-bottom: 53px; }
.section-head > * { margin-bottom: 0; }

.journey { display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr; align-items: stretch; }
.journey-card { min-height: 265px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; border: 2px solid var(--ink); border-radius: 17px; background: var(--white); }
.journey-card:nth-of-type(2) { background: var(--mint); }
.journey-card:nth-of-type(3) { background: var(--night); color: white; }
.journey-card:nth-of-type(3) p { color: rgba(255,255,255,.62); }
.journey-label { color: var(--orange); font-size: .64rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.journey-card:nth-of-type(3) .journey-label { color: var(--yellow); }
.journey-card h3 { margin: 43px 0 9px; font-size: 1.4rem; letter-spacing: -.03em; }
.journey-card p { margin: 0; color: var(--ink-soft); font-size: .82rem; }
.journey-arrow { display: grid; place-items: center; color: var(--orange); font-size: 1.8rem; font-weight: 900; }

.benefits { background: var(--paper-2); }
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); }
.benefit { min-height: 285px; padding: 27px 22px 24px 0; border-right: 1px solid var(--line); }
.benefit + .benefit { padding-left: 22px; }
.benefit:last-child { border: 0; }
.benefit-num { margin-bottom: 65px; color: var(--orange); font-family: Georgia, serif; font-size: 1.5rem; font-style: italic; }
.benefit h3 { font-size: 1.18rem; }
.benefit p { margin: 0; color: var(--ink-soft); font-size: .8rem; }

.work { background: var(--night); color: white; }
.work .lead { color: rgba(255,255,255,.65); }
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px; }
.project { overflow: hidden; border: 1px solid var(--light-line); border-radius: 18px; background: rgba(255,255,255,.06); }
.project-screen { position: relative; min-height: 300px; padding: 25px; overflow: hidden; color: var(--ink); }
.project:nth-child(1) .project-screen { background: #d6eee5; }
.project:nth-child(2) .project-screen { background: #f2d569; }
.project:nth-child(3) .project-screen { background: #c9e2ec; }
.project-nav { display: flex; justify-content: space-between; font-size: .56rem; font-weight: 950; text-transform: uppercase; }
.project-copy { position: relative; z-index: 2; margin-top: 70px; }
.project-copy small { color: var(--orange-deep); font-size: .55rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.project-copy h3 { max-width: 290px; margin: 10px 0 13px; font-size: 2.25rem; letter-spacing: -.05em; line-height: .93; }
.project-copy span { display: inline-block; padding: 7px 9px; border-radius: 6px; background: var(--ink); color: white; font-size: .55rem; font-weight: 900; }
.project-art { position: absolute; right: -65px; bottom: -85px; width: 220px; height: 220px; border: 36px solid rgba(21,54,59,.15); border-radius: 50%; }
.project:nth-child(2) .project-art { border-radius: 18px; transform: rotate(20deg); }
.project:nth-child(3) .project-art { border-color: rgba(243,107,70,.2); }
.project-info { padding: 21px 22px 24px; }
.project-title { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.project-title h3 { margin: 0; font-size: .94rem; }
.tag { flex: 0 0 auto; padding: 4px 7px; border: 1px solid var(--light-line); border-radius: 999px; color: rgba(255,255,255,.55); font-size: .51rem; font-weight: 900; text-transform: uppercase; }
.project-info p { margin: 9px 0 0; color: rgba(255,255,255,.55); font-size: .72rem; }
.disclosure { margin: 25px 0 0; color: rgba(255,255,255,.4); font-size: .68rem; }

.price-section { position: relative; overflow: hidden; }
.price-section::before { content: ""; position: absolute; z-index: -1; left: -220px; bottom: -250px; width: 520px; height: 520px; border: 80px solid rgba(204,233,220,.5); border-radius: 50%; }
.price-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 46px; align-items: start; }
.price-copy { padding-top: 17px; }
.price-copy ul { display: grid; gap: 11px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: .82rem; }
.price-copy li::before { content: "✓"; margin-right: 9px; color: var(--green); font-weight: 1000; }
.price-board { overflow: hidden; border: 2px solid var(--ink); border-radius: 18px; background: var(--white); box-shadow: 11px 11px 0 var(--mint); }
.price-top { display: grid; grid-template-columns: 1fr 1fr; background: var(--green); color: white; }
.price-block { padding: 34px; border-right: 1px solid rgba(255,255,255,.24); }
.price-block:last-child { border: 0; }
.price-block small { display: block; color: var(--yellow); font-size: .61rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.amount { margin: 10px 0 7px; font-size: clamp(3.6rem, 6vw, 5.8rem); font-weight: 900; letter-spacing: -.065em; line-height: .86; }
.amount sup { position: relative; top: -2.2em; margin-right: 5px; font-size: .14em; letter-spacing: .05em; }
.price-block p { margin: 0; color: rgba(255,255,255,.63); font-size: .7rem; }
.price-includes { display: grid; grid-template-columns: 1fr 1fr; }
.include { padding: 28px 34px; border-right: 1px solid var(--line); }
.include:last-child { border: 0; }
.include h3 { color: var(--orange); font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; }
.include ul { display: grid; gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: .74rem; }
.include li::before { content: "—"; margin-right: 7px; }
.price-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 21px 34px 27px; border-top: 1px solid var(--ink); background: var(--paper); }
.price-foot p { max-width: 440px; margin: 0; color: var(--ink-soft); font-size: .66rem; }

.process { background: var(--yellow); }
.process .eyebrow::before { background: var(--ink); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.step { min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; border: 2px solid var(--ink); border-radius: 16px; background: var(--white); }
.step:nth-child(2) { background: var(--night); color: white; }
.step:nth-child(2) p { color: rgba(255,255,255,.62); }
.step-num { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: var(--orange); font-family: Georgia, serif; }
.step:nth-child(2) .step-num { color: var(--yellow); }
.step small { color: var(--orange); font-size: .61rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.step:nth-child(2) small { color: var(--yellow); }
.step h3 { margin: 35px 0 8px; font-size: 1.3rem; }
.step p { margin: 0; color: var(--ink-soft); font-size: .82rem; }

.proof-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 22px; }
.testimonial { position: relative; display: flex; min-height: 410px; flex-direction: column; justify-content: space-between; padding: 39px; overflow: hidden; border-radius: 19px; background: var(--green); color: white; }
.testimonial::after { content: "“"; position: absolute; right: 10px; top: -65px; color: rgba(255,255,255,.08); font-family: Georgia, serif; font-size: 17rem; }
.placeholder { position: relative; z-index: 1; align-self: flex-start; padding: 6px 9px; border: 1px solid rgba(255,255,255,.27); border-radius: 999px; color: var(--yellow); font-size: .57rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
blockquote { position: relative; z-index: 1; margin: 35px 0; font-family: Georgia, serif; font-size: clamp(1.75rem, 3.3vw, 3rem); line-height: 1.16; letter-spacing: -.035em; }
.byline { position: relative; z-index: 1; color: rgba(255,255,255,.59); font-size: .72rem; }
.proof-side { display: grid; gap: 14px; }
.proof-card { padding: 24px; border: 1px solid var(--line); border-radius: 15px; background: var(--white); }
.proof-card span { display: block; margin-bottom: 14px; color: var(--orange); font-family: Georgia, serif; font-size: 1.2rem; }
.proof-card h3 { margin-bottom: 5px; font-size: .92rem; }
.proof-card p { margin: 0; color: var(--ink-soft); font-size: .75rem; }

.about { background: var(--paper-2); }
.about-grid { display: grid; grid-template-columns: .74fr 1.26fr; gap: 72px; align-items: center; }
.about-card { position: relative; display: grid; aspect-ratio: 1 / 1.08; place-items: center; overflow: hidden; border-radius: 48% 48% 18px 18px; background: var(--night); color: rgba(255,255,255,.13); font-family: Georgia, serif; font-size: clamp(9rem, 20vw, 16rem); }
.about-card::after { content: "Building websites since 1997"; position: absolute; left: 22px; right: 22px; bottom: 21px; padding: 12px; border-radius: 10px; background: var(--yellow); color: var(--ink); font-family: "Noto Sans", sans-serif; font-size: .67rem; font-weight: 900; text-align: center; text-transform: uppercase; }
.about-copy .lead { max-width: 720px; }
.ownership { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 30px; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; }
.ownership div { padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ownership div:nth-child(2n) { border-right: 0; }
.ownership div:nth-last-child(-n+2) { border-bottom: 0; }
.ownership b { display: block; margin-bottom: 3px; font-size: .79rem; }
.ownership small { color: var(--ink-soft); font-size: .66rem; }

.faq { padding-top: 46px; }
.faq-grid { display: grid; grid-template-columns: .64fr 1.36fr; gap: 72px; }
.questions { border-top: 2px solid var(--ink); }
.questions details { border-bottom: 1px solid var(--line); }
.questions summary { position: relative; padding: 23px 45px 23px 0; cursor: pointer; list-style: none; font-weight: 850; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; position: absolute; right: 4px; top: 17px; color: var(--orange); font-size: 1.55rem; }
.questions details[open] summary::after { content: "−"; }
.questions details p { max-width: 690px; margin: -5px 45px 23px 0; color: var(--ink-soft); font-size: .84rem; }

.closing { padding: 50px 0 30px; }
.closing-card { position: relative; overflow: hidden; padding: 63px; border-radius: 24px; background: var(--night); color: white; }
.closing-card::after { content: "↗"; position: absolute; right: -30px; bottom: -120px; color: rgba(255,255,255,.06); font-size: 23rem; line-height: 1; }
.closing-card h2 { position: relative; z-index: 1; max-width: 820px; }
.closing-card p { position: relative; z-index: 1; max-width: 620px; color: rgba(255,255,255,.65); }
.closing-card .button { position: relative; z-index: 1; margin-top: 15px; border-color: var(--yellow); background: var(--yellow); color: var(--ink); box-shadow: 5px 5px 0 var(--orange); }
.closing-card .button:hover { background: white; }
footer { padding: 29px 0 43px; color: var(--ink-soft); font-size: .71rem; }
.footer-grid { display: flex; justify-content: space-between; gap: 25px; padding-top: 26px; border-top: 1px solid var(--line); }
.footer-links { display: flex; flex-wrap: wrap; gap: 17px; }
.footer-links a { text-decoration: none; }

@media (max-width: 1000px) {
  .hero-grid, .section-head, .price-layout, .about-grid, .faq-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 810px; }
  .hero-visual { width: min(670px, 92%); margin: 20px auto 0; }
  .offer-grid { grid-template-columns: 1fr 1fr; }
  .offer-item:first-child { padding-left: 24px; }
  .offer-item:nth-child(2) { border-right: 0; }
  .section-head { gap: 10px; }
  .benefit-grid { grid-template-columns: 1fr 1fr; }
  .benefit:nth-child(2) { border-right: 0; }
  .projects { grid-template-columns: 1fr 1fr; }
  .project:last-child { grid-column: 1 / span 2; width: calc(50% - 10px); margin-inline: auto; }
  .price-copy { max-width: 760px; }
  .about-grid { max-width: 800px; }
  .about-card { width: min(420px, 88%); }
  .faq-grid { gap: 27px; }
}
@media (max-width: 760px) {
  .wrap { width: min(var(--max), calc(100% - 28px)); }
  .nav-links { display: none; }
  .mobile-menu { display: block; }
  .hero { padding: 58px 0 72px; }
  h1 { font-size: clamp(3.45rem, 17vw, 5.4rem); }
  h2 { font-size: clamp(2.55rem, 13vw, 4.3rem); }
  section { padding: 80px 0; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-visual { width: 100%; padding-top: 66px; }
  .preview-stamp { right: -3px; top: 4px; width: 100px; height: 100px; }
  .result-note { display: none; }
  .demo-links { display: none; }
  .offer-grid, .benefit-grid, .projects, .price-top, .price-includes, .steps, .proof-grid { grid-template-columns: 1fr; }
  .offer-item { border-right: 0; border-bottom: 1px solid rgba(21,54,59,.24); }
  .offer-item:last-child { border-bottom: 0; }
  .journey { grid-template-columns: 1fr; gap: 0; }
  .journey-arrow { height: 49px; transform: rotate(90deg); }
  .journey-card { min-height: 230px; }
  .benefit, .benefit + .benefit { min-height: 230px; padding: 25px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .benefit:last-child { border-bottom: 0; }
  .benefit-num { margin-bottom: 38px; }
  .project:last-child { grid-column: auto; width: auto; }
  .price-block, .include { border-right: 0; border-bottom: 1px solid var(--line); }
  .price-block:last-child, .include:last-child { border-bottom: 0; }
  .price-block { padding: 29px 24px; }
  .include { padding: 25px 24px; }
  .price-foot { align-items: stretch; flex-direction: column; padding: 22px 24px 27px; }
  .testimonial { min-height: 390px; padding: 31px; }
  .ownership { grid-template-columns: 1fr; }
  .ownership div, .ownership div:nth-child(2n), .ownership div:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .ownership div:last-child { border-bottom: 0; }
  .closing-card { padding: 43px 27px; }
  .footer-grid { flex-direction: column; }
}
@media (max-width: 470px) {
  .demo-art { display: none; }
  .demo-hero { grid-template-columns: 1fr; }
  .demo-copy { padding: 25px 20px; }
  .demo-copy h3 { font-size: 1.65rem; }
  .demo-trust { grid-template-columns: 1fr; }
  .demo-trust div { border-right: 0; border-bottom: 1px solid #e5ebe7; }
  .amount { font-size: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ==================================================================
   2. Inner pages — components the single-page concept did not need.
      Same language: 2px ink borders, 12–19px radii, offset shadows.
   ================================================================== */

/* --- Navigation state -------------------------------------------- */
.nav-links > a[aria-current="page"] { color: var(--orange); }
.mobile-links a[aria-current="page"] { background: var(--paper-2); color: var(--orange); }
.brand-mark span { line-height: 1; }

/* --- Inner-page hero --------------------------------------------- */
.page-hero { position: relative; overflow: hidden; padding: 72px 0 62px; border-bottom: 1px solid var(--line); }
.page-hero::before { content: ""; position: absolute; right: -170px; top: -190px; width: 470px; height: 470px; border: 68px solid rgba(245,210,96,.42); border-radius: 50%; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { max-width: 900px; font-size: clamp(3rem, 6.2vw, 5.4rem); }
.page-hero .lead { max-width: 660px; }
.page-hero .hero-actions { margin-top: 26px; }
.page-hero.tight { padding: 60px 0 50px; }

/* --- Long-form prose (terms, privacy, written answers) ----------- */
.prose { max-width: 740px; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 52px 0 14px; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.prose h3 { margin: 34px 0 8px; font-size: 1.08rem; }
.prose p, .prose li { color: var(--ink-soft); font-size: .93rem; line-height: 1.75; }
.prose p { margin-bottom: 17px; }
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li::before { content: "—"; margin-right: 10px; color: var(--orange); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.prose a:hover { color: var(--orange-deep); }
.prose strong { color: var(--ink); font-weight: 850; }
.prose hr { margin: 44px 0; border: 0; border-top: 1px solid var(--line); }
.prose blockquote { margin: 26px 0; padding: 18px 22px; border-left: 4px solid var(--orange); background: var(--white); font-family: inherit; font-size: .93rem; letter-spacing: normal; line-height: 1.7; }
.updated { margin-bottom: 30px; color: var(--ink-soft); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }

/* --- Generic split layout ---------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.split.narrow-first { grid-template-columns: .8fr 1.2fr; }
.split.wide-first { grid-template-columns: 1.2fr .8fr; }
.sticky-side { position: sticky; top: 28px; }

/* --- Callouts ----------------------------------------------------- */
.callout { padding: 24px 26px; border: 2px solid var(--ink); border-radius: 15px; background: var(--mint); }
.callout.warm { background: var(--yellow); }
.callout.plain { background: var(--white); }
.callout h3 { margin-bottom: 7px; font-size: 1rem; }
.callout p { margin: 0; color: var(--ink-soft); font-size: .84rem; }
.callout p + p { margin-top: 11px; }

/* --- Definition rows (scope, inclusions, comparisons) ------------- */
.rows { overflow: hidden; border: 2px solid var(--ink); border-radius: 18px; background: var(--white); }
.row { display: grid; grid-template-columns: .82fr 1.18fr; gap: 26px; padding: 22px 26px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row b { font-size: .88rem; }
.row p { margin: 0; color: var(--ink-soft); font-size: .84rem; }
.row .no { color: var(--ink-soft); }
.rows-head { padding: 16px 26px; border-bottom: 2px solid var(--ink); background: var(--paper-2); font-size: .67rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }

/* --- Timeline (how it works) -------------------------------------- */
.timeline { border-top: 2px solid var(--ink); }
.timeline-item { display: grid; grid-template-columns: 148px 1fr; gap: 34px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.timeline-marker { color: var(--orange); font-family: Georgia, serif; font-size: 1.4rem; font-style: italic; }
.timeline-marker small { display: block; margin-top: 6px; color: var(--ink-soft); font-family: "Noto Sans", sans-serif; font-size: .64rem; font-style: normal; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.timeline-body h3 { font-size: 1.35rem; letter-spacing: -.03em; }
.timeline-body p { margin: 0 0 12px; max-width: 660px; color: var(--ink-soft); font-size: .88rem; }
.timeline-body p:last-child { margin-bottom: 0; }
.timeline-body ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 7px; color: var(--ink-soft); font-size: .82rem; }
.timeline-body li::before { content: "✓"; margin-right: 9px; color: var(--green); font-weight: 1000; }

/* --- Example / work detail rows (light background) ---------------- */
.example-list { display: grid; gap: 26px; }
.example-row { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 34px; padding: 26px; border: 2px solid var(--ink); border-radius: 19px; background: var(--white); }
.example-row:nth-child(even) { background: var(--paper-2); }
.example-row:nth-child(even) .example-body { order: -1; }
.example-body h3 { font-size: 1.6rem; letter-spacing: -.04em; }
.example-body p { color: var(--ink-soft); font-size: .85rem; }
.example-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; color: var(--ink-soft); font-size: .7rem; font-weight: 800; }
.example-meta span::before { content: "•"; margin-right: 8px; color: var(--orange); }
.example-meta span:first-child::before { display: none; }
.example-row .project-screen { border-radius: 14px; }

/* --- Forms --------------------------------------------------------- */
.form-card { padding: 34px; border: 2px solid var(--ink); border-radius: 19px; background: var(--white); box-shadow: 11px 11px 0 var(--mint); }
.field { display: grid; gap: 7px; margin-bottom: 19px; }
.field > label { font-size: .71rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.field .optional { color: var(--ink-soft); font-weight: 800; letter-spacing: .04em; text-transform: none; }
.field input, .field textarea, .field select { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; font-size: .9rem; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--ink); outline: 3px solid var(--yellow); outline-offset: 1px; }
.field-hint { color: var(--ink-soft); font-size: .72rem; }
.field-error { color: var(--orange-deep); font-size: .74rem; font-weight: 800; }
.field.has-error input, .field.has-error textarea { border-color: var(--orange-deep); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-top: 26px; }
.form-actions .button { border-width: 2px; }
.form-note { max-width: 320px; color: var(--ink-soft); font-size: .7rem; }
.honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-success { padding: 26px 28px; border: 2px solid var(--ink); border-radius: 15px; background: var(--mint); }
.form-success h3 { font-size: 1.15rem; }
.form-success p { margin: 0; color: var(--ink-soft); font-size: .86rem; }
.form-errors { margin-bottom: 24px; padding: 18px 22px; border: 2px solid var(--orange-deep); border-radius: 13px; background: #fdeae4; }
.form-errors p { margin: 0 0 7px; font-size: .82rem; font-weight: 850; }
.form-errors ul { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: .8rem; }

/* --- Contact detail list ------------------------------------------ */
.detail-list { display: grid; gap: 2px; margin-top: 26px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; }
.detail-list div { padding: 17px 19px; background: var(--white); }
.detail-list b { display: block; margin-bottom: 3px; font-size: .8rem; }
.detail-list small { color: var(--ink-soft); font-size: .72rem; }

/* --- Section tint variants ---------------------------------------- */
.tint { background: var(--paper-2); }
.tint-mint { background: var(--mint); }
.band { padding: 74px 0; }

/* --- FAQ page ------------------------------------------------------ */
.faq-page .questions { border-top: 2px solid var(--ink); }
.faq-group + .faq-group { margin-top: 54px; }
.faq-group > h2 { margin-bottom: 18px; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }

/* --- Footer -------------------------------------------------------- */
.footer-cols { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 34px; padding-top: 30px; border-top: 1px solid var(--line); }
.footer-brand strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: .95rem; }
.footer-brand p { max-width: 320px; margin: 0; font-size: .72rem; }
.footer-col h4 { margin: 0 0 12px; color: var(--ink); font-size: .64rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.footer-col ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.footer-col a { font-size: .75rem; text-decoration: none; }
.footer-col a:hover { color: var(--orange); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .68rem; }

/* --- Responsive additions ------------------------------------------ */
@media (max-width: 1000px) {
  .split, .split.narrow-first, .split.wide-first { grid-template-columns: 1fr; gap: 34px; }
  .sticky-side { position: static; }
  .example-row { grid-template-columns: 1fr; gap: 24px; }
  .example-row:nth-child(even) .example-body { order: 0; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .page-hero { padding: 52px 0 46px; }
  .page-hero h1 { font-size: clamp(2.7rem, 12.5vw, 4rem); }
  .band { padding: 60px 0; }
  .row { grid-template-columns: 1fr; gap: 8px; padding: 20px 22px; }
  .timeline-item { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
  .form-card { padding: 26px 22px; box-shadow: 7px 7px 0 var(--mint); }
  .form-actions .button { width: 100%; }
  .form-note { max-width: none; }
  .footer-cols { grid-template-columns: 1fr; gap: 26px; }
}

/* --- Example cards: palette per entry ------------------------------
   The concept had exactly three fixed cards styled by position. Entries
   now carry their own palette, so any number or order renders correctly.
   These sit after the :nth-child rules above and override them.        */
.project.palette-mint .project-screen { background: #d6eee5; }
.project.palette-mint .project-art { border-radius: 50%; border-color: rgba(21,54,59,.15); transform: none; }
.project.palette-yellow .project-screen { background: #f2d569; }
.project.palette-yellow .project-art { border-radius: 18px; border-color: rgba(21,54,59,.15); transform: rotate(20deg); }
.project.palette-sky .project-screen { background: #c9e2ec; }
.project.palette-sky .project-art { border-radius: 50%; border-color: rgba(243,107,70,.2); transform: none; }
.project.palette-coral .project-screen { background: #f8cfc0; }
.project.palette-coral .project-art { border-radius: 24px; border-color: rgba(21,54,59,.15); transform: rotate(-12deg); }

/* On a light page the card frame needs ink borders instead of white-on-night. */
.example-row .project { border: 0; background: none; border-radius: 14px; overflow: hidden; }
.example-row .project-screen { min-height: 268px; }

/* --- "Read the whole thing" links out of a homepage section -------- */
.more-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; padding-bottom: 4px; border-bottom: 2px solid var(--orange); color: var(--ink); font-size: .78rem; font-weight: 900; text-decoration: none; }
.more-link:hover { color: var(--orange); }
.work .more-link, .closing-card .more-link { color: white; }
.more-link.on-tint { margin-top: 28px; }