/* =========================================================================
   Cairngorm Custom Motorbikes Ltd · site stylesheet
   Mobile-first. Tokens up top, components below.
   ========================================================================= */

   @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

   /* ---- Tokens ------------------------------------------------------------- */
   :root {
     /* Brand */
     --c-brand: #0077b6;
     --c-brand-deep: #005a8b;
     --c-brand-ink: #003e60;
   
     /* Neutrals */
     --c-ink: #14181d;
     --c-ink-soft: #2a2f36;
     --c-grey: #6b7079;
     --c-grey-mute: #8a8e94;
     --c-line: #e4e1da;
     --c-line-soft: #ece9e3;
     --c-bg: #f4f3ef;
     --c-bg-deep: #ebe8e1;
     --c-surface: #ffffff;
     --c-ink-on-brand: #ffffff;
   
     /* Type */
     --ff-sans: 'Manrope', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
     --ff-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
   
     /* Scale */
     --fs-xs: 0.75rem;
     --fs-sm: 0.875rem;
     --fs-base: 1rem;
     --fs-md: 1.125rem;
     --fs-lg: 1.375rem;
     --fs-xl: 1.75rem;
     --fs-2xl: 2.25rem;
     --fs-3xl: 3rem;
     --fs-4xl: 3.75rem;
     --fs-5xl: 4.75rem;
   
     /* Spacing */
     --sp-1: 0.25rem;
     --sp-2: 0.5rem;
     --sp-3: 0.75rem;
     --sp-4: 1rem;
     --sp-5: 1.5rem;
     --sp-6: 2rem;
     --sp-7: 3rem;
     --sp-8: 4rem;
     --sp-9: 6rem;
     --sp-10: 8rem;
   
     /* Layout */
     --maxw: 1280px;
     --gutter: clamp(1.25rem, 4vw, 2.5rem);
     --radius: 2px;
     --radius-lg: 4px;
   
     /* Motion */
     --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
   }
   
   /* ---- Reset -------------------------------------------------------------- */
   *,
   *::before,
   *::after { box-sizing: border-box; }
   
   html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
   
   body {
     margin: 0;
     font-family: var(--ff-sans);
     font-size: var(--fs-base);
     line-height: 1.55;
     color: var(--c-ink);
     background: var(--c-bg);
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
   }
   
   img, svg { display: block; max-width: 100%; height: auto; }
   
   a { color: inherit; text-decoration: none; }
   
   button { font: inherit; cursor: pointer; }
   
   h1, h2, h3, h4, h5 {
     margin: 0;
     font-weight: 700;
     line-height: 1.08;
     letter-spacing: -0.02em;
     color: var(--c-ink);
   }
   
   p { margin: 0; }
   
   ul { margin: 0; padding: 0; list-style: none; }
   
   ::selection { background: var(--c-brand); color: #fff; }
   
   /* ---- Layout primitives -------------------------------------------------- */
   .container {
     width: 100%;
     max-width: var(--maxw);
     margin-inline: auto;
     padding-inline: var(--gutter);
   }
   
   .section {
     padding-block: clamp(3rem, 8vw, var(--sp-9));
   }
   
   .section--tight { padding-block: clamp(2rem, 5vw, var(--sp-7)); }
   
   .section--ink {
     background: var(--c-ink);
     color: #eceff3;
   }
   .section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
   
   .section--brand {
     background: var(--c-brand);
     color: #fff;
   }
   .section--brand h1, .section--brand h2, .section--brand h3 { color: #fff; }
   
   .section--paper { background: var(--c-bg-deep); }
   
   .rule {
     height: 1px;
     background: var(--c-line);
     border: 0;
     margin: 0;
   }
   
   /* ---- Eyebrow / mono labels --------------------------------------------- */
   .eyebrow {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     font-weight: 500;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--c-grey);
   }
   .eyebrow--brand { color: var(--c-brand); }
   .eyebrow--light { color: rgba(255,255,255,0.7); }
   
   .eyebrow-row {
     display: flex;
     align-items: center;
     gap: var(--sp-3);
     margin-bottom: var(--sp-4);
   }
   .eyebrow-row::before {
     content: "";
     width: 28px;
     height: 1px;
     background: currentColor;
     opacity: 0.5;
   }
   
   /* ---- Headings ---------------------------------------------------------- */
   .h-display {
     font-size: clamp(2.25rem, 6vw, var(--fs-5xl));
     font-weight: 800;
     letter-spacing: -0.035em;
     line-height: 1.0;
   }
   .h-1 {
     font-size: clamp(1.875rem, 4.5vw, var(--fs-3xl));
     font-weight: 800;
     letter-spacing: -0.03em;
     line-height: 1.05;
   }
   .h-2 {
     font-size: clamp(1.5rem, 3vw, var(--fs-2xl));
     font-weight: 700;
     letter-spacing: -0.025em;
     line-height: 1.1;
   }
   .h-3 {
     font-size: var(--fs-xl);
     font-weight: 700;
     letter-spacing: -0.02em;
   }
   .h-4 {
     font-size: var(--fs-lg);
     font-weight: 600;
     letter-spacing: -0.015em;
   }
   
   .lede {
     font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
     line-height: 1.55;
     color: var(--c-ink-soft);
     max-width: 60ch;
     text-wrap: pretty;
   }
   
   .muted { color: var(--c-grey); }
   
   /* ---- Buttons ----------------------------------------------------------- */
   .btn {
     display: inline-flex;
     align-items: center;
     gap: var(--sp-3);
     padding: 0.875rem 1.25rem;
     font-family: var(--ff-sans);
     font-size: var(--fs-sm);
     font-weight: 600;
     letter-spacing: 0.02em;
     border-radius: var(--radius);
     border: 1px solid transparent;
     transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
     text-transform: none;
     white-space: nowrap;
   }
   .btn--brand {
     background: var(--c-brand);
     color: #fff;
   }
   .btn--brand:hover { background: var(--c-brand-deep); }
   
   .btn--ink {
     background: var(--c-ink);
     color: #fff;
   }
   .btn--ink:hover { background: #000; }
   
   .btn--ghost {
     background: transparent;
     border-color: currentColor;
     color: var(--c-ink);
   }
   .btn--ghost:hover { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
   
   .btn--ghost-light {
     background: transparent;
     border-color: rgba(255,255,255,0.4);
     color: #fff;
   }
   .btn--ghost-light:hover { background: #fff; color: var(--c-ink); border-color: #fff; }
   
   .btn .arrow { display: inline-block; transition: transform .2s var(--ease); }
   .btn:hover .arrow { transform: translateX(4px); }
   
   /* ---- Header / nav ------------------------------------------------------ */
   .site-header {
     position: sticky;
     top: 0;
     z-index: 50;
     background: var(--c-brand);
     color: #fff;
     border-bottom: 1px solid rgba(255,255,255,0.08);
   }
   .nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--sp-5);
     min-height: 68px;
     padding-block: var(--sp-3);
   }
   .brand {
     display: flex;
     align-items: center;
     gap: 10px;
     color: #fff;
     line-height: 1;
   }
   .brand__mark {
     width: 38px;
     height: 38px;
     border: 1.5px solid #fff;
     border-radius: 2px;
     display: grid;
     place-items: center;
     font-family: var(--ff-mono);
     font-size: 13px;
     font-weight: 600;
     letter-spacing: 0.04em;
     flex: 0 0 auto;
   }
   .brand__stack {
     display: inline-flex;
     flex-direction: column;
     gap: 3px;
     min-width: 0;
   }
   .brand__name {
     display: block;
     font-family: var(--ff-sans);
     font-size: 0.95rem;
     font-weight: 800;
     letter-spacing: -0.015em;
     line-height: 1;
     white-space: nowrap;
   }
   .brand__sub {
     display: block;
     font-family: var(--ff-sans);
     font-size: 0.78rem;
     font-weight: 600;
     letter-spacing: -0.005em;
     text-transform: none;
     line-height: 1;
     opacity: 0.78;
     white-space: nowrap;
   }
   @media (max-width: 420px) {
     .brand { gap: 8px; }
     .brand__mark { width: 34px; height: 34px; font-size: 12px; }
     .brand__name { font-size: 0.88rem; }
     .brand__sub { font-size: 0.7rem; }
   }
   .site-footer .brand__sub { opacity: 0.65; }
   
   .nav__links {
     display: none;
     align-items: center;
     gap: var(--sp-5);
   }
   .nav__links a {
     position: relative;
     font-size: var(--fs-sm);
     font-weight: 500;
     padding: var(--sp-2) 0;
     color: rgba(255,255,255,0.85);
     transition: color .15s var(--ease);
   }
   .nav__links a:hover { color: #fff; }
   .nav__links a[aria-current="page"] { color: #fff; }
   .nav__links a[aria-current="page"]::after {
     content: "";
     position: absolute;
     left: 0; right: 0; bottom: -22px;
     height: 2px;
     background: #fff;
   }
   
   .nav__cta { display: none; }
   
   .nav__toggle {
     background: transparent;
     border: 1px solid rgba(255,255,255,0.35);
     color: #fff;
     padding: 0.5rem 0.75rem;
     border-radius: 2px;
     font-family: var(--ff-mono);
     font-size: 12px;
     letter-spacing: 0.08em;
     text-transform: uppercase;
   }
   
   .nav__panel {
     display: none;
     background: var(--c-brand-deep);
     border-top: 1px solid rgba(255,255,255,0.08);
   }
   .nav__panel.is-open { display: block; }
   .nav__panel ul {
     padding: var(--sp-3) var(--gutter) var(--sp-5);
     display: grid;
     gap: var(--sp-2);
   }
   .nav__panel a {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: var(--sp-3) 0;
     font-size: 1rem;
     border-bottom: 1px solid rgba(255,255,255,0.1);
     color: #fff;
   }
   .nav__panel a::after {
     content: "→";
     font-family: var(--ff-mono);
     opacity: 0.5;
   }
   
   @media (min-width: 880px) {
     .nav__links { display: flex; }
     .nav__cta { display: inline-flex; }
     .nav__toggle { display: none; }
   }
   
   /* ---- Footer ------------------------------------------------------------ */
   .site-footer {
     background: var(--c-ink);
     color: #c5c9cf;
     padding-block: var(--sp-8) var(--sp-6);
     margin-top: var(--sp-9);
   }
   .footer-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--sp-7);
   }
   .footer-brand {
     display: flex;
     flex-direction: column;
     gap: var(--sp-3);
   }
   .footer-brand .brand { color: #fff; }
   .footer-brand p { color: #9ea3aa; max-width: 32ch; font-size: var(--fs-sm); }
   
   .footer-col h4 {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     font-weight: 600;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: #fff;
     margin-bottom: var(--sp-4);
   }
   .footer-col ul { display: grid; gap: var(--sp-2); }
   .footer-col a { font-size: var(--fs-sm); color: #c5c9cf; transition: color .15s var(--ease); }
   .footer-col a:hover { color: #fff; }
   
   .footer-meta {
     display: flex;
     flex-direction: column;
     gap: var(--sp-3);
     margin-top: var(--sp-7);
     padding-top: var(--sp-5);
     border-top: 1px solid rgba(255,255,255,0.08);
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     color: #8a8e94;
     letter-spacing: 0.04em;
   }
   .footer-meta .row { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
   
   @media (min-width: 720px) {
     .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); }
     .footer-meta { flex-direction: row; justify-content: space-between; align-items: center; }
   }
   
   /* ---- Hero -------------------------------------------------------------- */
   .hero {
     position: relative;
     background: var(--c-ink);
     color: #fff;
     overflow: hidden;
     padding-block: clamp(4rem, 10vw, 8rem);
     border-bottom: 1px solid rgba(255,255,255,0.06);
   }
   .hero__grid {
     display: grid;
     gap: var(--sp-7);
     align-items: end;
   }
   .hero h1 { color: #fff; }
   .hero__lede { color: #c5c9cf; max-width: 48ch; }
   .hero__meta {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: var(--sp-5);
     margin-top: var(--sp-6);
     padding-top: var(--sp-5);
     border-top: 1px solid rgba(255,255,255,0.12);
   }
   .hero__meta .key {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: #9ea3aa;
     margin-bottom: var(--sp-2);
     display: block;
   }
   .hero__meta .val { font-size: var(--fs-md); font-weight: 600; color: #fff; letter-spacing: -0.01em; }
   
   .hero__ctas { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }
   
   .hero__visual {
     position: relative;
     aspect-ratio: 4 / 3;
     background: #1c2026;
     border: 1px solid rgba(255,255,255,0.08);
     border-radius: var(--radius);
     overflow: hidden;
   }
   
   @media (min-width: 960px) {
     .hero__grid {
       grid-template-columns: 1.05fr 0.95fr;
       gap: var(--sp-8);
       align-items: stretch;
     }
     .hero__visual {
       aspect-ratio: auto;
       height: 100%;
     }
   }
   
   /* hero technical corner marks */
   .hero__visual::before,
   .hero__visual::after {
     content: "";
     position: absolute;
     width: 14px; height: 14px;
     border: 1.5px solid rgba(255,255,255,0.4);
     z-index: 2;
   }
   .hero__visual::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
   .hero__visual::after  { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
   
   /* ---- Hero figure with corner labels ------------------------------------ */
   .hero-figure {
     position: relative;
     margin: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
   }
   
   .hero-figure img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   
   .hero-figure__caption {
     position: absolute;
     inset: auto 0 0 0;
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     padding: var(--sp-4);
     font-family: var(--ff-mono);
     font-size: 11px;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.85);
     pointer-events: none;
   }
   
   .hero-figure__tag {
     border: 1px solid rgba(255, 255, 255, 0.5);
     padding: 4px 8px;
     background: rgba(0, 0, 0, 0.35);
     backdrop-filter: blur(4px);
   }
   
   .hero-figure__desc {
     text-align: right;
     text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
   }
   
   /* ---- Services / tiles -------------------------------------------------- */
   .tiles {
     display: grid;
     grid-template-columns: 1fr;
     gap: 1px;
     background: var(--c-line);
     border: 1px solid var(--c-line);
     border-radius: var(--radius);
     overflow: hidden;
   }
   .tile {
     background: var(--c-surface);
     padding: var(--sp-6) var(--sp-5);
     display: flex;
     flex-direction: column;
     gap: var(--sp-4);
     position: relative;
     transition: background .2s var(--ease);
   }
   .tile:hover { background: #fafaf7; }
   .tile__index {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.12em;
     color: var(--c-brand);
     font-weight: 500;
   }
   .tile h3 { font-size: var(--fs-xl); }
   .tile p { color: var(--c-grey); font-size: var(--fs-sm); line-height: 1.6; }
   .tile__foot {
     margin-top: auto;
     padding-top: var(--sp-4);
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--c-ink);
   }
   .tile__foot .arrow { transition: transform .2s var(--ease); }
   .tile:hover .tile__foot .arrow { transform: translateX(4px); }
   .tile__badge {
     align-self: flex-start;
     font-family: var(--ff-mono);
     font-size: 10px;
     font-weight: 600;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     padding: 4px 8px;
     background: var(--c-bg-deep);
     color: var(--c-ink-soft);
     border-radius: 2px;
   }
   .tile__badge--soon { background: #fff3d9; color: #8a5a00; }
   .tile__badge--later { background: #e6f1f8; color: var(--c-brand-deep); }
   
   @media (min-width: 640px) {
     .tiles { grid-template-columns: repeat(2, 1fr); }
   }
   @media (min-width: 960px) {
     .tiles--3 { grid-template-columns: repeat(3, 1fr); }
     .tiles--4 { grid-template-columns: repeat(4, 1fr); }
   }
   
   /* ---- Section head ------------------------------------------------------ */
   .sec-head {
     display: grid;
     gap: var(--sp-4);
     margin-bottom: var(--sp-7);
     align-items: end;
   }
   .sec-head__intro { max-width: 56ch; color: var(--c-grey); }
   
   @media (min-width: 800px) {
     .sec-head { grid-template-columns: 1.2fr 1fr; gap: var(--sp-8); }
   }
   
   /* ---- Two-col split ----------------------------------------------------- */
   .split {
     display: grid;
     gap: var(--sp-7);
     align-items: start;
   }
   @media (min-width: 880px) {
     .split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
     .split--lead { grid-template-columns: 0.9fr 1.1fr; }
   }
   
   /* ---- Gallery ----------------------------------------------------------- */
   .gallery {
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--sp-4);
   }
   @media (min-width: 640px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
   @media (min-width: 960px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
   
   .gallery--featured { gap: var(--sp-4); }
   @media (min-width: 960px) {
     .gallery--featured {
       grid-template-columns: repeat(4, 1fr);
     }
     .gallery--featured > :nth-child(1) { grid-column: span 2; }
   }
   
   .build-card {
     display: block;
     position: relative;
     border: 1px solid var(--c-line);
     background: var(--c-surface);
     border-radius: var(--radius);
     overflow: hidden;
     transition: transform .25s var(--ease), border-color .25s var(--ease);
   }
   .build-card:hover { border-color: var(--c-ink); }
   
   .build-card__media {
     aspect-ratio: 4 / 3;
     background: #1c2026;
     position: relative;
     overflow: hidden;
   }
   .build-card--tall .build-card__media {
     aspect-ratio: 1161 / 886;
   }
   .build-card__media img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center 40%;
   }
   
   .build-card__caption {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: var(--sp-2);
     padding: var(--sp-4);
     border-top: 1px solid var(--c-line);
     min-width: 0;
   }
   .build-card__caption .name {
     font-family: var(--ff-mono);
     font-weight: 500;
     font-size: 11px;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--c-brand);
   }
   .build-card__caption .meta {
     font-family: var(--ff-sans);
     font-size: var(--fs-sm);
     font-weight: 600;
     letter-spacing: -0.005em;
     text-transform: none;
     color: var(--c-ink);
     line-height: 1.35;
     text-wrap: pretty;
     overflow-wrap: anywhere;
     hyphens: auto;
     align-self: stretch;
   }
   
   /* ---- Testimonial ------------------------------------------------------- */
   .quote {
     display: grid;
     gap: var(--sp-5);
     padding: clamp(2rem, 5vw, var(--sp-8));
     background: var(--c-surface);
     border: 1px solid var(--c-line);
     border-radius: var(--radius);
   }
   .quote__mark {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--c-brand);
   }
   .quote blockquote {
     margin: 0;
     font-size: clamp(1.25rem, 2.5vw, 1.75rem);
     font-weight: 500;
     line-height: 1.35;
     letter-spacing: -0.015em;
     color: var(--c-ink);
     text-wrap: pretty;
   }
   .quote__cite {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--c-grey);
   }
   .quote--placeholder blockquote { color: var(--c-grey-mute); font-style: italic; }
   
   /* ---- Process steps ----------------------------------------------------- */
   .steps {
     display: grid;
     gap: 1px;
     background: var(--c-line);
     border: 1px solid var(--c-line);
     border-radius: var(--radius);
     overflow: hidden;
   }
   .step {
     background: var(--c-surface);
     padding: var(--sp-6) var(--sp-5);
     display: grid;
     gap: var(--sp-3);
   }
   .step__num {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.14em;
     color: var(--c-brand);
     font-weight: 600;
   }
   .step h3 { font-size: var(--fs-lg); }
   .step p { color: var(--c-grey); font-size: var(--fs-sm); line-height: 1.6; }
   .step__time {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--c-ink-soft);
     padding-top: var(--sp-3);
     border-top: 1px dashed var(--c-line);
   }
   @media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
   @media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }
   
   /* ---- Sub-nav (services anchors) ---------------------------------------- */
   .subnav {
     background: var(--c-surface);
     border-top: 1px solid var(--c-line);
     border-bottom: 1px solid var(--c-line);
     position: sticky;
     top: 68px;
     z-index: 20;
   }
   .subnav__row {
     display: flex;
     gap: var(--sp-5);
     padding-block: var(--sp-3);
     overflow-x: auto;
     scrollbar-width: none;
   }
   .subnav__row::-webkit-scrollbar { display: none; }
   .subnav a {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--c-grey);
     white-space: nowrap;
     padding: var(--sp-2) 0;
     border-bottom: 2px solid transparent;
     transition: color .15s var(--ease), border-color .15s var(--ease);
   }
   .subnav a:hover { color: var(--c-ink); }
   
   /* ---- Services detail rows --------------------------------------------- */
   .svc {
     display: grid;
     gap: var(--sp-6);
     padding-block: clamp(2.5rem, 6vw, var(--sp-8));
     border-bottom: 1px solid var(--c-line);
   }
   .svc:last-of-type { border-bottom: 0; }
   .svc__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
   .svc__head h2 { font-size: clamp(1.75rem, 3vw, var(--fs-2xl)); }
   .svc__idx {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.14em;
     color: var(--c-brand);
     font-weight: 600;
   }
   .svc__body { display: grid; gap: var(--sp-5); }
   .svc__body p { color: var(--c-ink-soft); max-width: 60ch; }
   .svc__list {
     display: grid;
     gap: var(--sp-3);
   }
   .svc__list li {
     padding: var(--sp-3) 0;
     border-top: 1px solid var(--c-line);
     display: flex;
     gap: var(--sp-4);
     align-items: baseline;
     font-size: var(--fs-sm);
   }
   .svc__list li::before {
     content: counter(svc-item, decimal-leading-zero);
     counter-increment: svc-item;
     font-family: var(--ff-mono);
     color: var(--c-brand);
     font-size: var(--fs-xs);
     min-width: 28px;
   }
   .svc__list { counter-reset: svc-item; }
   
   @media (min-width: 880px) {
     .svc { grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-8); }
   }
   
   /* ---- Warranty card ----------------------------------------------------- */
   .warranty {
     display: grid;
     gap: var(--sp-5);
     padding: clamp(1.5rem, 4vw, var(--sp-7));
     background: var(--c-surface);
     border: 1px solid var(--c-line);
     border-radius: var(--radius);
   }
   .warranty h3 { font-size: var(--fs-lg); }
   .warranty__grid {
     display: grid;
     gap: var(--sp-5);
     grid-template-columns: 1fr;
   }
   .warranty__item {
     padding: var(--sp-5);
     border: 1px solid var(--c-line);
     border-radius: var(--radius);
     background: var(--c-bg);
   }
   .warranty__item .term {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--c-brand);
     margin-bottom: var(--sp-3);
   }
   .warranty__item .verdict {
     font-size: var(--fs-md);
     font-weight: 700;
     letter-spacing: -0.015em;
     margin-bottom: var(--sp-2);
   }
   .warranty__item ul { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
   .warranty__item li { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-soft); align-items: baseline; }
   .warranty__item li::before {
     content: "";
     width: 6px; height: 6px;
     background: var(--c-brand);
     flex: 0 0 6px;
     transform: translateY(2px);
   }
   @media (min-width: 720px) { .warranty__grid { grid-template-columns: repeat(2, 1fr); } }
   
   /* ---- About blocks ------------------------------------------------------ */
   .creds {
     display: grid;
     gap: var(--sp-4);
     grid-template-columns: 1fr;
   }
   .cred {
     padding: var(--sp-5);
     background: var(--c-surface);
     border: 1px solid var(--c-line);
     border-radius: var(--radius);
   }
   .cred .key {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--c-grey);
     margin-bottom: var(--sp-2);
   }
   .cred .val { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; }
   .cred .note { font-size: var(--fs-sm); color: var(--c-grey); margin-top: var(--sp-2); }
   @media (min-width: 720px) { .creds { grid-template-columns: repeat(2, 1fr); } }
   @media (min-width: 1024px) { .creds { grid-template-columns: repeat(4, 1fr); } }
   
   /* ---- Contact / form ---------------------------------------------------- */
   .contact-grid {
     display: grid;
     gap: var(--sp-7);
   }
   @media (min-width: 960px) {
     .contact-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); }
   }
   
   .form {
     display: grid;
     gap: var(--sp-5);
     padding: clamp(1.5rem, 4vw, var(--sp-7));
     background: var(--c-surface);
     border: 1px solid var(--c-line);
     border-radius: var(--radius);
   }
   .field { display: grid; gap: var(--sp-2); }
   .field label {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--c-ink-soft);
     font-weight: 600;
   }
   .field input,
   .field select,
   .field textarea {
     font: inherit;
     padding: 0.75rem 0.875rem;
     border: 1px solid var(--c-line);
     background: var(--c-bg);
     border-radius: var(--radius);
     color: var(--c-ink);
     transition: border-color .15s var(--ease), background .15s var(--ease);
   }
   .field textarea { min-height: 140px; resize: vertical; }
   .field input:focus,
   .field select:focus,
   .field textarea:focus {
     outline: none;
     border-color: var(--c-brand);
     background: #fff;
     box-shadow: 0 0 0 3px rgba(0,119,182,0.12);
   }
   .field--row {
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--sp-4);
   }
   @media (min-width: 600px) { .field--row { grid-template-columns: 1fr 1fr; } }
   
   .form__foot {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--sp-4);
     flex-wrap: wrap;
     padding-top: var(--sp-3);
     border-top: 1px solid var(--c-line);
   }
   .form__foot p {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.06em;
     color: var(--c-grey);
   }

   /* Form status + field error states */
   .form-shell { display: contents; }
   .form-status {
     padding: var(--sp-4) var(--sp-5);
     border-radius: var(--radius);
     border: 1px solid var(--c-line);
     font-size: var(--fs-sm);
     line-height: 1.5;
     font-weight: 500;
   }
   .form-status--info {
     background: #eef5fb;
     border-color: #cfe1f0;
     color: var(--c-brand-ink);
   }
   .form-status--success {
     background: #e8f4ed;
     border-color: #b9dcc7;
     color: #1f5a3a;
   }
   .form-status--error {
     background: #fdecec;
     border-color: #f3c5c5;
     color: #8a2222;
   }
   .field--error input,
   .field--error select,
   .field--error textarea {
     border-color: #c44141;
     background: #fff;
     box-shadow: 0 0 0 3px rgba(196, 65, 65, 0.12);
   }
   .field__error {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.04em;
     color: #8a2222;
     margin-top: 2px;
   }
   .form-success {
     padding: clamp(1.5rem, 4vw, var(--sp-7));
     background: var(--c-surface);
     border: 1px solid var(--c-line);
     border-radius: var(--radius);
     border-top: 3px solid var(--c-brand);
   }
   .form-success:focus { outline: none; }
   
   .info-block {
     display: grid;
     gap: var(--sp-4);
   }
   .info-card {
     padding: var(--sp-5);
     background: var(--c-surface);
     border: 1px solid var(--c-line);
     border-radius: var(--radius);
     display: grid;
     gap: var(--sp-2);
   }
   .info-card .key {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--c-brand);
   }
   .info-card .val { font-size: var(--fs-md); font-weight: 600; }
   .info-card a { color: var(--c-brand); }
   .info-card a:hover { color: var(--c-brand-deep); }
   .info-card dl { display: grid; gap: var(--sp-2); margin: 0; }
   .info-card dl div { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-sm); font-family: var(--ff-mono); letter-spacing: 0.04em; }
   .info-card dt { color: var(--c-grey); }
   .info-card dd { margin: 0; font-weight: 500; }
   
   /* ---- Big CTA block ----------------------------------------------------- */
   .cta-block {
     background: var(--c-brand);
     color: #fff;
     padding: clamp(2.5rem, 6vw, var(--sp-9));
     border-radius: var(--radius);
     display: grid;
     gap: var(--sp-5);
     position: relative;
     overflow: hidden;
   }
   .cta-block::before {
     content: "";
     position: absolute;
     inset: 0;
     background:
       repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 14px, transparent 14px 28px);
     pointer-events: none;
   }
   .cta-block > * { position: relative; }
   .cta-block h2 { color: #fff; max-width: 22ch; }
   .cta-block p { color: rgba(255,255,255,0.85); max-width: 52ch; }
   .cta-block .row { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }
   
   /* ---- About hero meta strip --------------------------------------------- */
   .meta-strip {
     display: grid;
     gap: var(--sp-5);
     padding-block: var(--sp-6);
     border-top: 1px solid var(--c-line);
     border-bottom: 1px solid var(--c-line);
   }
   .meta-strip .key {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--c-grey);
     margin-bottom: var(--sp-1);
     display: block;
   }
   .meta-strip .val { font-size: var(--fs-md); font-weight: 600; }
   @media (min-width: 720px) { .meta-strip { grid-template-columns: repeat(4, 1fr); } }
   
   /* ---- Page header ------------------------------------------------------- */
   .page-head {
     background: var(--c-bg-deep);
     border-bottom: 1px solid var(--c-line);
     padding-block: clamp(3rem, 7vw, var(--sp-9));
   }
   .page-head__grid { display: grid; gap: var(--sp-5); align-items: end; }
   .page-head h1 { max-width: 18ch; }
   .page-head p { color: var(--c-ink-soft); max-width: 56ch; }
   @media (min-width: 880px) {
     .page-head__grid { grid-template-columns: 1.2fr 1fr; gap: var(--sp-7); }
   }
   
   /* ---- Misc utilities ---------------------------------------------------- */
   .flex-wrap-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
   .mt-6 { margin-top: var(--sp-6); }
   .mt-5 { margin-top: var(--sp-5); }
   .text-mono { font-family: var(--ff-mono); }
   
   /* skip link */
   .skip {
     position: absolute;
     left: -9999px;
   }
   .skip:focus {
     left: var(--sp-4);
     top: var(--sp-4);
     background: #fff;
     color: var(--c-ink);
     padding: var(--sp-3) var(--sp-4);
     z-index: 100;
     border-radius: 2px;
   }
   
   /* focus visible */
   a:focus-visible,
   button:focus-visible {
     outline: 2px solid var(--c-brand);
     outline-offset: 3px;
     border-radius: 2px;
   }

   /* ---- Footer Storeton credit ------------------------------------------- */
   .footer-credit {
     display: flex;
     align-items: center;
     gap: var(--sp-3);
     margin-top: var(--sp-5);
     padding-top: var(--sp-5);
     border-top: 1px solid rgba(255,255,255,0.06);
     color: #8a8e94;
     transition: color .2s var(--ease);
   }
   .footer-credit:hover { color: #fff; }
   .footer-credit__mark {
     width: 36px;
     height: 36px;
     flex: 0 0 36px;
     object-fit: contain;
     mix-blend-mode: screen;
     opacity: 0.85;
   }
   .footer-credit__text {
     display: inline-flex;
     flex-direction: column;
     gap: 2px;
     line-height: 1.1;
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.08em;
   }
   .footer-credit__lede { text-transform: uppercase; opacity: 0.7; }
   .footer-credit__brand {
     font-weight: 600;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: #c5c9cf;
   }
   .footer-credit:hover .footer-credit__brand { color: #fff; }

   /* ---- Blog ------------------------------------------------------------- */
   .post-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--sp-5);
   }
   @media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
   @media (min-width: 960px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

   .post-card {
     display: flex;
     flex-direction: column;
     background: var(--c-surface);
     border: 1px solid var(--c-line);
     border-radius: var(--radius);
     overflow: hidden;
     transition: border-color .2s var(--ease), transform .2s var(--ease);
   }
   .post-card:hover { border-color: var(--c-ink); }
   .post-card__media {
     aspect-ratio: 16 / 10;
     background: var(--c-bg-deep);
     overflow: hidden;
     position: relative;
   }
   .post-card__media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   .post-card__body {
     padding: var(--sp-5);
     display: flex;
     flex-direction: column;
     gap: var(--sp-3);
     flex: 1;
   }
   .post-card__meta {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--c-brand);
     display: flex;
     gap: var(--sp-3);
     flex-wrap: wrap;
   }
   .post-card__meta .dot { opacity: 0.4; }
   .post-card h3 {
     font-size: var(--fs-lg);
     letter-spacing: -0.015em;
     line-height: 1.2;
   }
   .post-card p {
     color: var(--c-grey);
     font-size: var(--fs-sm);
     line-height: 1.55;
     text-wrap: pretty;
   }
   .post-card__foot {
     margin-top: auto;
     padding-top: var(--sp-3);
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.08em;
     text-transform: uppercase;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: var(--c-ink);
   }
   .post-card__foot .arrow { transition: transform .2s var(--ease); }
   .post-card:hover .post-card__foot .arrow { transform: translateX(4px); }

   /* Featured post on blog index */
   .post-feature {
     display: grid;
     grid-template-columns: 1fr;
     gap: var(--sp-5);
     background: var(--c-surface);
     border: 1px solid var(--c-line);
     border-radius: var(--radius);
     overflow: hidden;
     transition: border-color .2s var(--ease);
   }
   .post-feature:hover { border-color: var(--c-ink); }
   .post-feature__media {
     aspect-ratio: 16 / 10;
     background: var(--c-bg-deep);
     overflow: hidden;
   }
   .post-feature__media img { width: 100%; height: 100%; object-fit: cover; }
   .post-feature__body {
     padding: clamp(1.5rem, 4vw, var(--sp-7));
     display: flex;
     flex-direction: column;
     gap: var(--sp-4);
     justify-content: center;
   }
   .post-feature h2 {
     font-size: clamp(1.5rem, 3vw, var(--fs-2xl));
     letter-spacing: -0.02em;
     line-height: 1.1;
   }
   .post-feature p { color: var(--c-ink-soft); font-size: var(--fs-md); line-height: 1.55; max-width: 56ch; }
   @media (min-width: 880px) {
     .post-feature { grid-template-columns: 1.1fr 0.9fr; }
     .post-feature__media { aspect-ratio: auto; height: 100%; min-height: 360px; }
   }

   /* Article (single post) */
   .article-head {
     background: var(--c-bg-deep);
     border-bottom: 1px solid var(--c-line);
     padding-block: clamp(2.5rem, 6vw, var(--sp-8));
   }
   .article-head__inner {
     max-width: 760px;
     margin-inline: auto;
   }
   .article-head h1 {
     font-size: clamp(1.875rem, 4vw, var(--fs-3xl));
     letter-spacing: -0.03em;
     line-height: 1.1;
     margin-top: var(--sp-4);
     text-wrap: balance;
   }
   .article-head__meta {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--c-grey);
     display: flex;
     gap: var(--sp-3);
     flex-wrap: wrap;
     margin-top: var(--sp-5);
     padding-top: var(--sp-4);
     border-top: 1px solid var(--c-line);
   }
   .article-head__meta .dot { opacity: 0.4; }
   .article-head__meta strong { color: var(--c-ink); font-weight: 600; }

   .article-hero {
     max-width: 1100px;
     margin-inline: auto;
     padding: var(--gutter);
   }
   .article-hero img {
     width: 100%;
     aspect-ratio: 16 / 9;
     object-fit: cover;
     border-radius: var(--radius);
     background: var(--c-bg-deep);
   }

   .prose {
     max-width: 720px;
     margin-inline: auto;
     padding-inline: var(--gutter);
     font-size: var(--fs-md);
     line-height: 1.7;
     color: var(--c-ink-soft);
   }
   .prose > * + * { margin-top: var(--sp-5); }
   .prose > h2 + *,
   .prose > h3 + * { margin-top: var(--sp-4); }
   .prose h2 {
     font-size: clamp(1.5rem, 2.5vw, var(--fs-2xl));
     letter-spacing: -0.025em;
     line-height: 1.15;
     color: var(--c-ink);
     margin-top: var(--sp-7);
     text-wrap: balance;
   }
   .prose h3 {
     font-size: var(--fs-xl);
     letter-spacing: -0.02em;
     color: var(--c-ink);
     margin-top: var(--sp-6);
   }
   .prose p { color: var(--c-ink-soft); text-wrap: pretty; }
   .prose a { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
   .prose a:hover { color: var(--c-brand-deep); }
   .prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: var(--sp-2); color: var(--c-ink-soft); }
   .prose ul { list-style: disc; }
   .prose ol { list-style: decimal; }
   .prose li::marker { color: var(--c-brand); }
   .prose blockquote {
     margin: 0;
     padding: var(--sp-5);
     background: var(--c-bg-deep);
     border-left: 3px solid var(--c-brand);
     border-radius: var(--radius);
     font-size: var(--fs-lg);
     font-weight: 500;
     line-height: 1.4;
     letter-spacing: -0.01em;
     color: var(--c-ink);
     font-style: normal;
   }
   .prose figure { margin: 0; }
   .prose figure img { width: 100%; border-radius: var(--radius); }
   .prose figcaption {
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--c-grey);
     margin-top: var(--sp-3);
     text-align: center;
   }
   .prose strong { color: var(--c-ink); font-weight: 700; }
   .prose code {
     font-family: var(--ff-mono);
     font-size: 0.9em;
     background: var(--c-bg-deep);
     padding: 2px 6px;
     border-radius: 2px;
     color: var(--c-ink);
   }
   .prose hr { border: 0; height: 1px; background: var(--c-line); margin-block: var(--sp-7); }

   .article-foot {
     max-width: 720px;
     margin-inline: auto;
     padding: var(--sp-7) var(--gutter) 0;
     border-top: 1px solid var(--c-line);
     margin-top: var(--sp-8);
   }
   .article-foot__author {
     display: flex;
     gap: var(--sp-4);
     align-items: center;
     padding: var(--sp-5);
     background: var(--c-surface);
     border: 1px solid var(--c-line);
     border-radius: var(--radius);
   }
   .article-foot__avatar {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background: var(--c-brand);
     color: #fff;
     display: grid;
     place-items: center;
     font-family: var(--ff-mono);
     font-weight: 700;
     font-size: 18px;
     flex: 0 0 48px;
   }
   .article-foot__author p {
     font-size: var(--fs-sm);
     color: var(--c-grey);
     line-height: 1.5;
   }
   .article-foot__author strong { color: var(--c-ink); display: block; font-size: var(--fs-md); }

   .post-tag {
     display: inline-flex;
     align-items: center;
     padding: 4px 10px;
     border: 1px solid var(--c-line);
     border-radius: 99px;
     font-family: var(--ff-mono);
     font-size: var(--fs-xs);
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--c-grey);
     background: var(--c-surface);
   }
   .post-tag:hover { color: var(--c-ink); border-color: var(--c-ink); }

   .post-tags {
     display: flex;
     gap: var(--sp-2);
     flex-wrap: wrap;
   }