/* Relief Studio · styles. Fonts are served from this site (no third-party requests). */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(media/fonts/archivo.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;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(media/fonts/instrument-serif-italic.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;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(media/fonts/instrument-serif.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;
}
@font-face {
  font-family: 'Mr Dafoe';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(media/fonts/mr-dafoe.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;
}

/* Friendlier for older readers: big sentence-case type, high contrast, plain words,
   the phone number always visible, large buttons, almost no motion. */
:root {
  --olive: #1F2318; --lime: #D4F24A; --bone: #ECEAE1; --paper: #F6F4EE; --ink: #16180F; --body: #33352B;
  --line: #D9D6CA; --sec: clamp(80px, 9vw, 128px); --wrap: 1440px; --g: 0px; --grot: "Archivo", system-ui, sans-serif; --serif: "Instrument Serif", Georgia, serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0E100B; font-family: var(--grot); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
section.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
section.hero + section.hero { border-top: 8px solid #0E100B; }
.tag { position: absolute; z-index: 20; left: 50%; bottom: 14px; transform: translateX(-50%); font: 600 11px/1 var(--grot); letter-spacing: .14em; text-transform: uppercase; padding: 7px 12px; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; }

/* Shared nav: logo, plain links, the phone number in full. */
nav { display: flex; align-items: center; gap: 34px; padding: 22px calc(44px + var(--g)); width: 100%; max-width: calc(var(--wrap) + 2 * var(--g)); margin: 0 auto; font: 600 17px var(--grot); }
nav .logo { margin-right: auto; } nav .logo img { height: 46px; width: auto; display: block; }
nav .phone { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
nav .phone svg, .btn svg { width: 20px; height: 20px; flex: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 62px; padding: 0 30px; border-radius: 14px; font: 700 19px/1.1 var(--grot); transition: transform .2s, box-shadow .2s, scale .15s; }
.btn:active { scale: .97; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(0,0,0,.4); }
.btn:focus-visible, nav a:focus-visible { outline: 3px solid #2B6BE0; outline-offset: 3px; }
.btn-ink { background: var(--ink); color: #fff; } .btn-lime { background: var(--lime); color: var(--ink); }
.btn-out { border: 2px solid var(--ink); color: var(--ink); }
.btn small { display: block; font: 500 14px/1.2 var(--grot); opacity: .75; }
.ph { position: relative; display: grid; place-items: center; text-align: center; background: repeating-linear-gradient(135deg, #E2DFD3 0 12px, #DAD7CA 12px 24px); color: #6A685D; font: 600 14px/1.4 var(--grot); }
.ph span { background: var(--paper); padding: 6px 10px; border-radius: 8px; }

/* ============ 01 · Hello (light, the person first) ============ */
#v1 { background: var(--paper); }
#v1 nav, #v1 .body { position: relative; }
#v1 .body { flex: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; padding: 20px calc(44px + var(--g)) var(--sec); width: 100%; max-width: calc(var(--wrap) + 2 * var(--g)); margin: 0 auto; }
#v1 .hi { display: inline-flex; align-items: center; gap: 14px; font: 600 18px var(--grot); color: var(--body); margin-bottom: 26px; }
#v1 .hi .face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line); }
#v1 h1 { font: 800 clamp(42px, 5.2vw, 80px)/1.05 var(--grot); letter-spacing: -.02em; }
#v1 h1 em { font: italic 400 1.1em/1 var(--serif); letter-spacing: 0; background-image: linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 92%, transparent 92%); padding: 0 .06em; }
#v1 .lede { font: 400 21px/1.55 var(--grot); color: var(--body); max-width: 560px; margin: 26px 0 34px; }
#v1 .ctas { display: flex; flex-wrap: wrap; gap: 14px; }
#v1 .ticks { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 36px; font: 600 17px var(--grot); color: var(--body); }
#v1 .ticks li { display: flex; align-items: center; gap: 10px; }
#v1 .ticks li::before { content: "✓"; width: 26px; height: 26px; border-radius: 50%; background: var(--olive); color: var(--lime); display: grid; place-items: center; font: 800 14px var(--grot); }
#v1 .card { background: #fff; border: 1.5px solid var(--line); border-radius: 26px; padding: 34px; box-shadow: 0 30px 60px -40px rgba(31,35,24,.45); }
#v1 .card h2 { font: 800 24px/1.2 var(--grot); margin-bottom: 22px; }
#v1 .steps { list-style: none; display: grid; gap: 18px; counter-reset: s; }
#v1 .steps li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; font: 400 18px/1.45 var(--grot); color: var(--body); counter-increment: s; }
#v1 .steps li::before { content: counter(s); width: 52px; height: 52px; border-radius: 14px; background: var(--lime); color: var(--ink); display: grid; place-items: center; font: 800 22px var(--grot); }
#v1 .steps b { display: block; color: var(--ink); font-weight: 700; font-size: 19px; }
#v1 .card .price { margin-top: 26px; padding-top: 22px; border-top: 1.5px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; font: 500 17px var(--grot); color: var(--body); }
#v1 .card .price b { font: 800 32px/1 var(--grot); color: var(--ink); }

/* ============ 02 · My work (three real Hawkesbury projects joined by a map trail) ============ */
.work { position: relative; background: var(--bone); padding: var(--sec) calc(44px + var(--g)); overflow: hidden; }
.work-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: end; max-width: 1352px; margin: 0 auto 72px; }
.work-head h2 { text-wrap: balance; }
.work-head h2 { font: 800 clamp(38px, 4.6vw, 70px)/1.04 var(--grot); letter-spacing: -.02em; }
.work-head h2 em { display: block; font: italic 400 1.1em/1.05 var(--serif); letter-spacing: 0; }
.work-head p { font: 400 20px/1.55 var(--grot); color: var(--body); max-width: 440px; }
.projs { position: relative; max-width: 1352px; margin: 0 auto; }
.projs .list { list-style: none; display: grid; gap: 88px; }
/* The trail: one contour line that draws itself as the section scrolls past, from farm to gym. */
.trail { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trail path { fill: none; stroke: var(--olive); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; stroke-linecap: round; }
.trail .ghost { stroke: #C9C6B8; stroke-dasharray: 2 7; stroke-width: 2; }
.trail .live { stroke-dashoffset: var(--left, 0); }
.proj .stop { transition: background .4s, transform .4s; }
.js .proj .stop { background: var(--bone); }
.js .proj .stop.reached { background: var(--lime); transform: scale(1.15); }
.proj { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
/* MacBook Pro rendered at three-quarter view (model+model, rendered in logo/gen/macbook-render.html).
   The screen in the image is a transparent hole; the video sits behind it, warped to the screen corners in JS. */
.proj .device { grid-column: 1 / span 6; position: relative; width: 100%; }
.mac { position: relative; aspect-ratio: 1569 / 1309; }
.mac img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; filter: drop-shadow(0 40px 40px rgba(31,35,24,.22)); }
.mac video { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; transform-origin: 0 0; object-fit: cover; object-position: top; background: #111; }
.proj .info { grid-column: 8 / span 5; }
.proj:nth-child(even) .device { grid-column: 7 / span 6; grid-row: 1; }
.proj:nth-child(even) .info { grid-column: 1 / span 5; grid-row: 1; }
.projs .proj .stop { left: 54.2%; }
.projs .proj:nth-child(even) .stop { left: 45.8%; }
.proj .stop { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--lime); border: 4px solid var(--olive); z-index: 1; }
.proj .info { position: relative; background: rgba(255,255,255,.88); border: 1.5px solid var(--line); border-radius: 28px; padding: 36px 38px 34px; box-shadow: 0 40px 70px -50px rgba(31,35,24,.45); }
.proj .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.proj .chips li { font: 600 15px/1 var(--grot); padding: 9px 13px; border-radius: 99px; background: var(--bone); color: var(--ink); border: 1.5px solid #DCD9CC; }
.proj mark { background-image: linear-gradient(transparent 48%, var(--lime) 48%, var(--lime) 96%, transparent 96%); color: var(--ink); font-weight: 600; padding: 0 .08em; }
.proj dl dd { color: var(--body); }
.proj .top { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.proj .top img { width: 64px; height: 64px; border-radius: 16px; object-fit: contain; background: #fff; border: 1.5px solid var(--line); padding: 6px; }
.proj .where { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 600 17px var(--grot); color: var(--body); }
.proj .where svg { width: 18px; height: 18px; color: var(--olive); }
.status { font: 700 14px/1 var(--grot); padding: 7px 11px; border-radius: 99px; background: #fff; border: 1.5px solid var(--line); color: var(--body); }
.status.live { background: var(--olive); border-color: var(--olive); color: var(--lime); }
.proj h3 { font: 800 clamp(30px, 3.2vw, 46px)/1.08 var(--grot); letter-spacing: -.015em; margin-bottom: 14px; }
.proj .what { font: 400 21px/1.5 var(--grot); color: var(--body); margin-bottom: 26px; max-width: 520px; }
.proj dl { display: grid; gap: 16px; border-top: 1.5px solid var(--line); padding-top: 22px; }
.proj dl div { display: grid; grid-template-columns: 128px 1fr; gap: 16px; font: 400 18px/1.5 var(--grot); color: var(--body); }
.proj dt { font: 700 15px/1.6 var(--grot); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.work-end { max-width: 1352px; margin: 96px auto 0; padding: 44px 48px; border-radius: 26px; background: var(--olive); color: var(--bone); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; }
.work-end p { font: 800 clamp(28px, 3vw, 42px)/1.15 var(--grot); letter-spacing: -.015em; }
.work-end p em { font: italic 400 1.12em/1 var(--serif); color: var(--lime); }
.work-end .ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.work-end .btn-out { border-color: var(--bone); color: var(--bone); }

/* ============ Mobile ============ */
@media (max-width: 860px) {
  nav { padding: 16px calc(16px + var(--g)); gap: 16px; } nav .logo img { height: 38px; } nav .lnk { display: none; }
  nav .phone span { display: none; }
  nav .phone { flex: none; width: 48px; height: 48px; border-radius: 12px; justify-content: center; background: var(--lime); color: var(--ink); }
  .btn { width: 100%; min-height: 60px; font-size: 18px; }
  #v1 .card { padding: 24px; }
  #v1 .body { grid-template-columns: 1fr; gap: 34px; padding: 10px calc(16px + var(--g)) 72px; }
  #v1 .lede { font-size: 19px; }
  .work { padding: 72px calc(16px + var(--g)); }
  .work-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 56px; }
  .work-head p { font-size: 19px; }
  .projs { padding-left: 30px; } .projs .list { gap: 72px; }
  .proj, .proj:nth-child(even) { grid-template-columns: 1fr; gap: 30px; }
  .proj .device, .proj:nth-child(even) .device { grid-column: 1; grid-row: 1; width: 100%; }
  .proj .info, .proj:nth-child(even) .info { grid-column: 1; grid-row: 2; }
  .projs .proj .stop, .projs .proj:nth-child(even) .stop { left: -21px; top: 0; margin: 0 0 0 -11px; }
  .proj .what { font-size: 19px; }
  .proj .info { padding: 26px 22px; border-radius: 22px; }
  .proj dl div { grid-template-columns: 1fr; gap: 2px; font-size: 17px; }
  .work-end { padding: 30px 22px; margin-top: 72px; }
}

/* ============ 03 · Prices (one plan leads, two sit beside it, then what every site gets) ============ */
.prices { position: relative; padding: var(--sec) calc(44px + var(--g)); }
.prices > * { max-width: 1352px; margin-left: auto; margin-right: auto; }
.pr-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: end; margin-bottom: 64px; }
.pr-head h2 { font: 800 clamp(38px, 4.6vw, 70px)/1.04 var(--grot); letter-spacing: -.02em; text-wrap: balance; }
.pr-head h2 em { display: block; font: italic 400 1.1em/1.05 var(--serif); letter-spacing: 0; }
.pr-head p { font: 400 20px/1.55 var(--grot); color: var(--body); max-width: 440px; }
.plans { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: stretch; }
.plan-main { position: relative; display: flex; flex-direction: column; border-radius: 28px; padding: 44px; color: var(--bone); background: url(media/topo-lime.svg) -500px -260px / 1200px repeat, var(--olive); box-shadow: 0 40px 70px -45px rgba(31,35,24,.7); }
.plan-main .pick { align-self: flex-start; font: 700 15px/1 var(--grot); padding: 9px 14px; border-radius: 99px; background: var(--lime); color: var(--ink); margin-bottom: 30px; }
.plan h3 { font: 800 clamp(30px, 3vw, 42px)/1.05 var(--grot); letter-spacing: -.015em; }
.plan .tl { font: 400 19px/1.45 var(--grot); margin-top: 8px; }
.plan-main .tl { color: #C9CCBC; }
.plan-main .amt { display: flex; align-items: baseline; gap: 14px; margin: 30px 0 28px; }
.plan-main .amt b { font: 800 clamp(64px, 7vw, 104px)/.9 var(--grot); letter-spacing: -.035em; color: var(--lime); }
.plan .amt span { font: 500 17px var(--grot); }
.plan .amt small { font: 600 17px var(--grot); }
.plan-main .amt small { color: #C9CCBC; }
.plan.row .amt small { display: block; color: var(--body); font-size: 15px; margin-bottom: 4px; }
.plan-main .feat { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; padding-top: 26px; border-top: 1.5px solid rgba(236,234,225,.18); margin-bottom: 36px; }
.plan .feat li { display: flex; gap: 12px; align-items: flex-start; font: 500 18px/1.4 var(--grot); }
.plan .feat li::before { content: "✓"; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--grot); background: var(--lime); color: var(--ink); }
.plan-main .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: auto; }
.plan-main .btn-out { border-color: var(--bone); color: var(--bone); }
.plan-side { display: grid; gap: 24px; }
.plan.row { background: #fff; border: 1.5px solid var(--line); border-radius: 24px; padding: 32px 34px; display: flex; flex-direction: column; }
.plan.row .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.plan.row .tl { color: var(--body); }
.plan.row .amt { text-align: right; flex: none; }
.plan.row .amt b { display: block; font: 800 clamp(36px, 3.4vw, 48px)/1 var(--grot); letter-spacing: -.025em; }
.plan.row .amt span { color: var(--body); font-size: 15px; }
.plan.row .feat { list-style: none; display: grid; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1.5px solid var(--line); }
.plan.row .feat li { font-size: 17px; color: var(--body); }
.plan.row .feat li::before { background: var(--olive); color: var(--lime); width: 24px; height: 24px; font-size: 13px; }
.incl { margin-top: 72px; display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
.incl h3 { font: 800 clamp(26px, 2.4vw, 34px)/1.15 var(--grot); letter-spacing: -.01em; }
.incl h3 em { font: italic 400 1.12em/1 var(--serif); letter-spacing: 0; background-image: linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 92%, transparent 92%); }
.incl ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 36px; }
.incl li { display: flex; gap: 14px; align-items: flex-start; font: 400 19px/1.45 var(--grot); color: var(--body); padding-bottom: 18px; border-bottom: 1.5px solid var(--line); }
.incl li b { color: var(--ink); font-weight: 700; }
.incl li::before { content: "✓"; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--olive); color: var(--lime); display: grid; place-items: center; font: 800 14px var(--grot); margin-top: 1px; }
.care { margin-top: 64px; display: grid; grid-template-columns: auto 1fr auto; gap: 34px; align-items: center; padding: 30px 36px; border-radius: 24px; border: 2px dashed #B9B6A6; background: rgba(236, 234, 225, .7); }
.care .tagc { font: 700 14px/1.3 var(--grot); letter-spacing: .06em; text-transform: uppercase; color: var(--body); }
.care .tagc b { display: block; font: 800 26px/1.1 var(--grot); letter-spacing: -.01em; text-transform: none; color: var(--ink); margin-top: 4px; }
.care p { font: 400 18px/1.5 var(--grot); color: var(--body); max-width: 620px; }
.care .amt { font: 800 36px/1 var(--grot); letter-spacing: -.02em; white-space: nowrap; }
.care .amt span { font: 500 16px var(--grot); color: var(--body); }
.pr-note { margin-top: 22px; font: 400 16px/1.5 var(--grot); color: var(--body); }
@media (max-width: 960px) {
  .prices { padding: 72px calc(16px + var(--g)); }
  .pr-head, .plans, .incl { grid-template-columns: 1fr; }
  .pr-head { gap: 18px; margin-bottom: 44px; } .pr-head p { font-size: 19px; }
  .plan-main { padding: 30px 24px; } .plan-main .feat { grid-template-columns: 1fr; }
  .plan.row { padding: 26px 22px; }
  .incl { gap: 24px; margin-top: 56px; } .incl ul { grid-template-columns: 1fr; gap: 14px; } .incl li { font-size: 18px; padding-bottom: 14px; }
  .care { grid-template-columns: 1fr; gap: 14px; padding: 24px 22px; margin-top: 48px; }
}

/* ============ 04 · About me (dark map: same contour lines, lime on olive, lined up with the page) ============ */
.about { position: relative; color: var(--bone); padding: var(--sec) calc(44px + var(--g)); background: linear-gradient(rgba(31,35,24,.4), rgba(31,35,24,.4)), url(media/topo-lime.svg) 0 var(--topo-y, 0) / 1200px repeat, var(--olive); }
.about > * { max-width: 1352px; margin-left: auto; margin-right: auto; }
.ab-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; }
.ab-photo { position: relative; justify-self: center; width: min(440px, 100%); }
.ab-photo figure { background: var(--bone); padding: 14px 14px 18px; border-radius: 22px; transform: rotate(-2.5deg); box-shadow: 0 40px 70px -35px rgba(0,0,0,.7); }
.ab-photo img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 832; object-fit: cover; border-radius: 12px; }
.ab-photo figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 6px 0; font: 600 16px var(--grot); color: var(--body); }
.ab-photo figcaption b { font: 400 34px/1 "Mr Dafoe", cursive; color: var(--ink); }
.ab-photo .pin { position: absolute; right: -14px; top: 26px; transform: rotate(6deg); background: var(--lime); color: var(--ink); font: 700 15px/1 var(--grot); padding: 10px 14px; border-radius: 99px; display: inline-flex; gap: 8px; align-items: center; box-shadow: 0 10px 20px -10px rgba(0,0,0,.6); }
.ab-photo .pin svg { width: 16px; height: 16px; }
.ab-text h2 { font: 800 clamp(38px, 4.6vw, 70px)/1.04 var(--grot); letter-spacing: -.02em; text-wrap: balance; }
.ab-text h2 em { display: block; font: italic 400 1.1em/1.05 var(--serif); letter-spacing: 0; color: var(--lime); }
.ab-text p { font: 400 21px/1.6 var(--grot); color: #D5D7C8; max-width: 600px; margin-top: 24px; }
.ab-text p b { color: var(--bone); font-weight: 700; }
.ab-text .sign { display: flex; align-items: baseline; gap: 16px; margin-top: 30px; }
.ab-text .sign span { font: 400 54px/1 "Mr Dafoe", cursive; color: var(--lime); }
.ab-text .sign small { font: 500 15px var(--grot); color: #A9AC9B; }
.ab-facts { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 88px; border-top: 1.5px solid rgba(236,234,225,.18); }
.ab-facts li { padding: 30px 30px 0 0; }
.ab-facts li + li { padding-left: 30px; border-left: 1.5px solid rgba(236,234,225,.18); }
.ab-facts b { display: block; font: 800 clamp(24px, 2.2vw, 30px)/1.15 var(--grot); letter-spacing: -.01em; margin-bottom: 10px; }
.ab-facts span { font: 400 18px/1.5 var(--grot); color: #C9CCBC; }
.ab-facts a { color: var(--lime); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) {
  .about { padding: 72px calc(16px + var(--g)); }
  .ab-grid { grid-template-columns: 1fr; gap: 44px; }
  .ab-photo { width: min(330px, 86%); } .ab-photo .pin { right: -8px; }
  .ab-photo figcaption b { font-size: 26px; } .ab-text .sign span { font-size: 42px; }
  .ab-text p { font-size: 19px; }
  .ab-facts { grid-template-columns: 1fr; margin-top: 56px; }
  .ab-facts li, .ab-facts li + li { padding: 22px 0; border-left: 0; border-bottom: 1.5px solid rgba(236,234,225,.18); }
}

/* ============ Mobile menu ============ */
.menu-btn, .mnav { display: none; }
/* ============ 05 · Questions (heading holds still on the left, answers open on the right) ============ */
.faq { position: relative; padding: var(--sec) calc(44px + var(--g)); }
.faq-in { max-width: 1352px; margin: 0 auto; display: grid; grid-template-columns: 4fr 8fr; gap: 72px; align-items: start; }
.faq-side { position: sticky; top: 40px; }
.faq-side h2 { font: 800 clamp(38px, 4.2vw, 64px)/1.04 var(--grot); letter-spacing: -.02em; }
.faq-side h2 em { display: block; font: italic 400 1.1em/1.05 var(--serif); letter-spacing: 0; }
.faq-side p { font: 400 19px/1.55 var(--grot); color: var(--body); margin-top: 22px; max-width: 360px; }
.faq-side p a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 4px; text-underline-offset: 3px; }
.faq-list { border-top: 1.5px solid var(--line); }
.faq details { border-bottom: 1.5px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 4px; font: 700 clamp(20px, 1.8vw, 24px)/1.3 var(--grot); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 500 28px/1 var(--grot); background: #fff; border: 1.5px solid var(--line); transition: transform .5s cubic-bezier(.16, 1, .3, 1), background .25s; }
.faq details[open] summary::after { content: "−"; background: var(--lime); border-color: var(--lime); }
.faq summary:hover::after { background: var(--lime); border-color: var(--lime); }
.faq summary:focus-visible { outline: 3px solid #2B6BE0; outline-offset: 2px; border-radius: 8px; }
.faq details p { font: 400 19px/1.6 var(--grot); color: var(--body); padding: 0 70px 28px 4px; max-width: 760px; }
.faq details p b { color: var(--ink); }
/* ============ 06 · Contact (light tint over the map, lime only as a highlight; three plain ways to reach us) ============ */
.contact { position: relative; background: rgba(31, 35, 24, .045); border-top: 1.5px solid var(--line); padding: var(--sec) calc(44px + var(--g)); }
.contact-in { max-width: 1352px; margin: 0 auto; }
.contact h2 { font: 800 clamp(44px, 6vw, 96px)/1 var(--grot); letter-spacing: -.03em; max-width: 1000px; }
.contact h2 em { font: italic 400 1.08em/1 var(--serif); letter-spacing: 0; background-image: linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 92%, transparent 92%); padding: 0 .06em; }
.contact .lede2 { font: 400 21px/1.55 var(--grot); color: var(--body); max-width: 640px; margin-top: 24px; }
.ways { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.ways a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 30px 30px 28px; border-radius: 24px; background: var(--olive); color: var(--bone); transition: transform .2s, box-shadow .2s; }
.ways a:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -24px rgba(0,0,0,.6); }
.ways a:focus-visible { outline: 3px solid #2B6BE0; outline-offset: 4px; }
.ways svg { width: 30px; height: 30px; color: var(--lime); margin-bottom: 18px; }
.ways .k { font: 600 16px var(--grot); color: #B9BCAA; }
.ways .v { font: 800 clamp(22px, 2vw, 28px)/1.2 var(--grot); letter-spacing: -.01em; word-break: break-word; }
.ways .v-mail { font-size: clamp(19px, 1.55vw, 24px); }
.ways .h { font: 400 16px/1.45 var(--grot); color: #B9BCAA; margin-top: 8px; }
.contact .when { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px; font: 600 17px var(--grot); color: var(--body); }
.contact .when span { display: inline-flex; align-items: center; gap: 10px; }
.contact .when span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px var(--olive); }
/* Message form: for people who would rather write than call. Big fields, visible labels, lime focus. */
.msg { position: relative; margin-top: 18px; display: grid; grid-template-columns: 4fr 8fr; gap: 48px; padding: 40px; border-radius: 24px; background: #fff; border: 1.5px solid var(--line); box-shadow: 0 30px 60px -45px rgba(31,35,24,.45); }
.msg h3 { font: 800 clamp(26px, 2.4vw, 34px)/1.15 var(--grot); letter-spacing: -.01em; }
.msg h3 em { font: italic 400 1.12em/1 var(--serif); letter-spacing: 0; background-image: linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 92%, transparent 92%); }
.msg-side p, .msg-done p { font: 400 18px/1.55 var(--grot); color: var(--body); margin-top: 14px; max-width: 380px; }
.msg-done a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 4px; text-underline-offset: 3px; }
.msg-form { display: grid; gap: 18px; }
.msg-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fld { display: grid; gap: 8px; }
.fld label { font: 700 16px var(--grot); color: var(--ink); }
.fld .req { font: 500 14px var(--grot); color: var(--body); margin-left: 6px; }
.fld input, .fld textarea { width: 100%; min-height: 56px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid #CFCCBF; background: var(--paper); font: 400 18px/1.4 var(--grot); color: var(--ink); transition: border-color .2s, box-shadow .25s, background .2s; }
.fld textarea { resize: vertical; min-height: 140px; }
.fld input::placeholder { color: #8E8C80; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 4px rgba(212, 242, 74, .65); }
.fld.bad input, .fld.bad textarea { border-color: #B3261E; }
.msg-form .hint { font: 400 15px/1.4 var(--grot); color: var(--body); margin-top: -6px; }
.msg-form .hint.bad { color: #B3261E; font-weight: 600; }
.msg-form .err { padding: 14px 16px; border-radius: 12px; background: #FBEAE8; color: #7A1A14; font: 500 16px/1.5 var(--grot); }
.msg-form .err a { font-weight: 700; text-decoration: underline; }
.msg-form .btn { justify-self: start; border: 0; cursor: pointer; }
.msg-form .btn[disabled] { opacity: .6; cursor: progress; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.msg-done { grid-column: 2; align-self: center; }
.msg-done:focus { outline: none; }
/* ============ Footer ============ */
.foot { color: var(--bone); padding: 72px calc(44px + var(--g)) 40px; background: linear-gradient(rgba(31,35,24,.4), rgba(31,35,24,.4)), url(media/topo-lime.svg) 0 var(--topo-y, 0) / 1200px repeat, var(--olive); }
.foot-in { max-width: 1352px; margin: 0 auto; display: grid; grid-template-columns: 5fr 3fr 4fr; gap: 48px; }
.foot img { height: 52px; width: auto; display: block; }
.foot .tag2 { font: 400 17px/1.55 var(--grot); color: #C9CCBC; margin-top: 18px; max-width: 340px; }
.foot h3 { font: 700 14px/1 var(--grot); letter-spacing: .12em; text-transform: uppercase; color: #9FA291; margin-bottom: 18px; }
.foot ul { list-style: none; display: grid; gap: 12px; font: 600 18px var(--grot); }
.foot a:hover { color: var(--lime); }
.foot a:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.foot .base { max-width: 1352px; margin: 56px auto 0; padding-top: 24px; border-top: 1.5px solid rgba(236,234,225,.16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font: 500 15px var(--grot); color: #9FA291; }
@media (max-width: 960px) {
  .faq, .contact { padding: 72px calc(16px + var(--g)); }
  .faq-in { grid-template-columns: 1fr; gap: 32px; } .faq-side { position: static; }
  .faq details p { padding-right: 4px; font-size: 18px; }
  .ways { grid-template-columns: 1fr; margin-top: 40px; } .contact .lede2 { font-size: 19px; }
  .msg { grid-template-columns: 1fr; gap: 24px; padding: 26px 20px; } .msg-form .row2 { grid-template-columns: 1fr; } .msg-done { grid-column: 1; } .msg-form .btn { justify-self: stretch; }
  .foot { padding: 56px calc(16px + var(--g)) 32px; } .foot-in { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 860px) {
  nav { position: relative; z-index: 40; }
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--ink); background: #fff; font: 700 16px var(--grot); color: var(--ink); cursor: pointer; }
  .menu-btn svg { width: 20px; height: 20px; }
  .menu-btn[aria-expanded="true"] { background: var(--ink); color: #fff; }
  .mnav:not([hidden]) { display: grid; position: absolute; left: 16px; right: 16px; top: calc(100% - 4px); background: #fff; border: 1.5px solid var(--line); border-radius: 20px; padding: 10px; box-shadow: 0 30px 60px -30px rgba(31,35,24,.5); }
  .mnav a { padding: 16px 14px; font: 700 21px var(--grot); border-radius: 12px; }
  .mnav a + a { border-top: 1.5px solid #EEECE4; }
  .mnav a:active, .mnav a:hover { background: var(--bone); }
}

/* ============ One topographic map under the whole page; sections only tint it, so the lines never break ============ */
body { background: var(--paper) url(media/topo-olive.svg) 0 0 / 1200px repeat; }
#v1 { background: transparent; }
.work { background: rgba(31, 35, 24, .045); }
.work-end { background: url(media/topo-lime.svg) -300px -200px / 1200px repeat, var(--olive); }

/* ============ Motion: one calm entrance for the hero, then each block rises into place once ============
   Everything stays visible without JS or with reduced motion: the hidden states only exist under html.anim. */
:root { --e: cubic-bezier(.16, 1, .3, 1); --e2: cubic-bezier(.65, 0, .35, 1); --pop: cubic-bezier(.3, 1.35, .6, 1); }
.anim .rv { --i: 0; opacity: 0; translate: var(--tx, 0) var(--ty, 28px); scale: var(--s, 1); rotate: var(--r, 0deg);
  transition: opacity .9s var(--e), translate var(--t, 1.2s) var(--e), scale var(--t, 1.2s) var(--e), rotate var(--t, 1.2s) var(--e);
  transition-delay: calc(var(--d, 0s) + var(--i) * var(--st, 70ms)); }
.anim .on .rv, .anim .rv.on { opacity: 1; translate: none; scale: none; rotate: none; }
/* Headings: each word rises out of its own line. */
.w { display: inline-block; clip-path: inset(-.4em -.3em 0 -.3em); padding-bottom: .16em; margin-bottom: -.16em; }
.w > span { display: inline-block; }
.anim .w > span { translate: 0 135%; transition: translate 1.1s var(--e) calc(var(--d, 0s) + var(--i) * 40ms); }
.anim .on .w > span { translate: none; }
/* Lime highlights draw on like a marker, once the words have landed. */
.anim .hl { background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 1s var(--e2) var(--hd, .6s); }
.anim .on .hl { background-size: 100% 100%; }
/* Hero: the step numbers pop in one after the other. */
.anim #v1 .steps li::before { scale: .3; opacity: 0; transition: scale .8s var(--pop), opacity .3s; transition-delay: calc(.9s + var(--i) * .14s); }
.anim #v1.on .steps li::before { scale: 1; opacity: 1; }
/* The olive call-to-action opens from the middle. */
.anim .work-end { clip-path: inset(12% 4% round 26px); transition: clip-path 1.4s var(--e); }
.anim .work-end.on { clip-path: inset(0 round 26px); }
/* Handwritten names write themselves from left to right. */
.anim .ab-text .sign span, .anim .ab-photo figcaption b { clip-path: inset(-30% 100% -40% -10%); transition: clip-path 1.8s cubic-bezier(.45, .05, .35, 1) 1s; }
.anim .ab-text.on .sign span, .anim .ab-photo.on figcaption b { clip-path: inset(-30% -10% -40% -10%); }
/* Trail stops send out one soft ring when the line reaches them. */
.js .proj .stop::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--olive); opacity: 0; pointer-events: none; }
.js .proj .stop.reached::after { animation: ring 1.1s var(--e); }
@keyframes ring { from { opacity: .7; scale: .8; } to { opacity: 0; scale: 2.4; } }
/* Small rewards on hover. */
/* Header: a lime marker draws under each link, the phone gives a little ring, the logo tips its hat. */
nav .lnk, nav .phone span { position: relative; z-index: 0; }
nav .lnk::after, nav .phone span::after { content: ""; position: absolute; z-index: -1; left: -3px; right: -3px; bottom: 1px; height: 8px; border-radius: 2px; background: var(--lime); scale: 0 1; transform-origin: right; transition: scale .45s var(--e); }
nav .lnk:hover::after, nav .phone:hover span::after, nav .lnk:focus-visible::after { scale: 1 1; transform-origin: left; }
nav .phone svg { transition: rotate .3s var(--e); }
nav .phone:hover svg { animation: ring-phone .7s var(--e); }
@keyframes ring-phone { 0%, 100% { rotate: 0deg; } 15% { rotate: -16deg; } 30% { rotate: 13deg; } 45% { rotate: -9deg; } 60% { rotate: 5deg; } 75% { rotate: -2deg; } }
nav .logo img { transition: translate .5s var(--e), rotate .5s var(--e); transform-origin: 10% 50%; }
nav .logo:hover img { translate: 0 -2px; rotate: -2deg; }
.menu-btn { transition: background .25s, color .25s, scale .15s; }
.menu-btn:not([aria-expanded="true"]):hover { background: var(--bone); }
.menu-btn:active { scale: .96; }
.ways svg { transition: translate .5s var(--e), rotate .5s var(--e); }
.ways a:hover svg { translate: 0 -3px; rotate: -10deg; }
@media (hover: hover) {
  .mac { transition: translate .9s var(--e); }
  .proj .device:hover .mac { translate: 0 -10px; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Answers slide open instead of jumping. */
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .55s var(--e), content-visibility .55s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
  .faq details p { opacity: 0; translate: 0 -8px; transition: opacity .35s, translate .55s var(--e); }
  .faq details[open] p { opacity: 1; translate: none; transition-delay: .08s; }
  .faq details[open] summary::after { transform: rotate(180deg); }
  /* Mobile menu drops in. */
  .mnav { transition: opacity .25s, translate .4s var(--e); }
  @starting-style { .mnav:not([hidden]) { opacity: 0; translate: 0 -10px; } }
}
.sprite { position: absolute; }
/* 404 page: the hero on its own. */
.lost .body { grid-template-columns: 1fr; max-width: 860px; }
.msg-form[hidden], .msg-done[hidden] { display: none; }

/* very small phones (under 375 px): header and price fit the screen */
@media (max-width: 374px) {
  nav { gap: 8px; } nav .logo img { height: 30px; }
  .menu-btn { padding: 0 12px; gap: 6px; }
  .plan-main { padding: 28px 18px; }
  .plan-main .amt { gap: 8px; flex-wrap: wrap; } .plan-main .amt b { font-size: 48px; } .plan-main .amt span { white-space: nowrap; }
}