/* ArchitecturalTech.ie — site styles */
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/space-grotesk-latin.woff2") format("woff2");
}

:root {
    --paper: #f5f3ee;
    --paper-2: #ebe8e0;
    --surface: #ffffff;
    --ink: #0f1720;
    --ink-2: #3a4350;
    --muted: #626975;
    --line: rgba(15, 23, 32, .12);
    --night: #0e1621;
    --night-2: #16212e;
    --night-line: rgba(255, 255, 255, .1);
    --night-text: #b6c0cc;
    --accent: #0077b6;
    --accent-dark: #005f91;
    --accent-text: #0075b4; /* --accent nudged to 4.5:1 on --paper for small text */
    --accent-soft: #e3f0f8;
    --sun: #f59e0b;
    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(15, 23, 32, .06), 0 8px 24px -8px rgba(15, 23, 32, .12);
    --shadow-lg: 0 2px 4px rgba(15, 23, 32, .06), 0 24px 48px -16px rgba(15, 23, 32, .25);
    --nav-h: 4.5rem;
    --max: 76rem;
    --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink-2);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: var(--nav-h); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.skip-link {
    position: fixed; top: .75rem; left: .75rem; z-index: 100; transform: translateY(-200%);
    padding: .7rem 1.1rem; border-radius: var(--radius-sm); background: var(--ink); color: #fff;
    font-family: var(--font-display); font-weight: 500; transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }
main:focus { outline: none; }
::selection { background: var(--accent); color: #fff; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

.icon {
    width: 1.5rem; height: 1.5rem; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icon-sm { width: 1.1rem; height: 1.1rem; }
.icon-lg { width: 1.75rem; height: 1.75rem; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: 1.25rem; }
@media (min-width: 768px) { .container { padding-inline: 2rem; } }

.section { padding-block: clamp(5rem, 10vw, 8rem); }

/* Eyebrow labels: "01 — About" */
.eyebrow {
    display: inline-flex; align-items: center; gap: .75rem;
    font-family: var(--font-display); font-size: .8125rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text);
    margin-bottom: 1.25rem;
}
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
.eyebrow b { font-weight: 600; color: var(--ink); }

.section-title { font-size: clamp(2.125rem, 4.5vw, 3.25rem); }
.section-lead { color: var(--muted); max-width: 34rem; margin-top: 1rem; }
.section-head { display: grid; gap: 1.5rem; margin-bottom: 3rem; }
@media (min-width: 900px) {
    .section-head { grid-template-columns: 1fr auto; align-items: end; }
}

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .9rem 1.5rem; border: 1px solid transparent; border-radius: 999px;
    background: var(--accent); color: #fff; font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em;
    transition: background-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(0, 119, 182, .6); }
.btn .icon { transition: transform .25s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface); box-shadow: var(--shadow); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--accent-soft); box-shadow: none; }

/* Segmented tabs */
.tabs [role="tablist"] {
    display: inline-flex; padding: .3rem; gap: .25rem;
    background: var(--paper-2); border-radius: 999px;
}
.tab {
    padding: .6rem 1.25rem; border: 0; border-radius: 999px; background: transparent;
    font-family: var(--font-display); font-size: .9375rem; font-weight: 500; color: var(--muted);
    transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* Header */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; }
.nav::before {
    /* frosted bar on a pseudo-element: backdrop-filter on .nav itself would trap the fixed mobile menu */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(245, 243, 238, .82);
    backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s;
}
.nav.is-scrolled::before { border-bottom-color: var(--line); background: rgba(245, 243, 238, .92); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--nav-h); }
.brand {
    display: flex; align-items: center; gap: .65rem;
    font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.03em; color: var(--ink);
}
.brand img { height: 2.4rem; width: auto; }
.brand span span { color: var(--accent); }
.nav-links { display: none; align-items: center; gap: 2.25rem; }
.nav-links a:not(.btn) {
    position: relative; font-family: var(--font-display); font-weight: 500; font-size: .975rem; color: var(--ink-2);
    transition: color .2s;
}
.nav-links a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.3rem; height: 1.5px; background: var(--accent);
    transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }
.nav-links .btn { padding: .6rem 1.15rem; font-size: .925rem; }
.menu-btn {
    display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--ink);
}
.mobile-menu {
    position: fixed; inset: var(--nav-h) 0 0; z-index: 40; background: var(--paper);
    display: flex; flex-direction: column; padding: 1.5rem 1.25rem 2rem;
}
.mobile-menu a {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-display); font-size: 1.875rem; font-weight: 500; letter-spacing: -.02em; color: var(--ink);
    padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.mobile-menu a span { font-size: .8rem; color: var(--accent); letter-spacing: .1em; }
@media (min-width: 900px) {
    .nav-links { display: flex; }
    /* Wide screens keep the menu button too: its dropdown is the only way to Login. */
    .mobile-menu {
        inset: var(--nav-h) 1.25rem auto auto; width: 17rem; padding: .4rem 1.25rem;
        border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 18px 40px rgba(13, 22, 32, .12);
    }
    .mobile-menu a { font-size: 1.05rem; padding: .75rem 0; }
    .mobile-menu a:last-child { border-bottom: 0; }
}

/* Hero */
.hero {
    position: relative; overflow: hidden;
    padding-block: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem)) clamp(4rem, 8vw, 7rem);
}
.hero::before {
    /* blueprint grid */
    content: ""; position: absolute; inset: 0; z-index: -1;
    background-image:
        linear-gradient(rgba(0, 119, 182, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 119, 182, .07) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000 30%, transparent 75%);
}
.hero-grid { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.25fr 1fr; gap: 4rem; } }
.hero-kicker {
    display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.75rem;
    padding: .4rem .9rem .4rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
    font-family: var(--font-display); font-size: .875rem; font-weight: 500; color: var(--ink-2);
}
.hero-kicker::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgba(245, 158, 11, .18); }
.hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.9rem); line-height: 1.02; letter-spacing: -.035em; margin-bottom: 1.75rem; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-text { font-size: 1.15rem; max-width: 34rem; margin-bottom: 2.25rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero-figure { position: relative; margin: 0 .75rem .75rem 0; }
.hero-figure img {
    width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
/* drafting corner ticks */
.hero-figure::before, .hero-figure::after {
    content: ""; position: absolute; width: 2.5rem; height: 2.5rem; border: 1.5px solid var(--accent); pointer-events: none;
}
.hero-figure::before { top: -.75rem; left: -.75rem; border-right: 0; border-bottom: 0; }
.hero-figure::after { bottom: -.75rem; right: -.75rem; border-left: 0; border-top: 0; }
.badge {
    position: absolute; left: -.5rem; bottom: 1.5rem; display: flex; align-items: center; gap: .85rem;
    padding: .9rem 1.25rem .9rem .9rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-lg);
}
@media (min-width: 960px) { .badge { left: -2rem; } }
.badge strong {
    display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 10px;
    background: var(--accent); color: #fff; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.03em;
}
.badge span { font-family: var(--font-display); font-weight: 500; line-height: 1.25; color: var(--ink); }

/* About */
.about { background: var(--surface); position: relative; isolation: isolate; }
.about-grid { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: .85fr 1fr; gap: 5rem; } }
.about-photo { position: relative; max-width: 26rem; margin: 0 auto; width: calc(100% - 1.25rem); }
.about-photo::before {
    content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem;
    border: 1.5px solid var(--accent); border-radius: var(--radius);
}
.about-photo img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.about h2 { margin-bottom: 1.5rem; }
.about h3 { font-size: 1.35rem; font-weight: 500; color: var(--accent); margin-bottom: 1.25rem; letter-spacing: -.015em; }
.about-text > p { margin-bottom: 2rem; }
.about-text .checks { margin-bottom: 2.5rem; }
.checks { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.checks li { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 0; background: var(--surface); }
.checks .icon { color: var(--accent); margin-top: .1rem; }
.checks p { color: var(--ink-2); }

/* Services (light band, matches the rest of the site — 23 Oct 2026) */
.services { background: var(--paper); color: var(--ink-2); position: relative; isolation: isolate; overflow: hidden; }
.services::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px; opacity: .5;
    mask-image: linear-gradient(to bottom, #000, transparent 60%);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 60%);
}
.services .container { position: relative; }
.services h2, .services h3 { color: var(--ink); }
.services .eyebrow { color: var(--accent-text); }
.services .eyebrow b { color: var(--ink); }
.services .section-lead { color: var(--muted); }
.services .tabs [role="tablist"] { background: var(--paper-2); border: 1px solid var(--line); }
.services .tab { color: var(--ink-2); }
.services .tab:hover { color: var(--ink); }
.services .tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

.cards { display: grid; gap: 1.25rem; counter-reset: card; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.service-card {
    position: relative; counter-increment: card;
    padding: 2rem 1.75rem; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--line);
    transition: transform .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.service-card::after {
    content: "0" counter(card); position: absolute; top: 1.75rem; right: 1.75rem;
    font-family: var(--font-display); font-size: .875rem; letter-spacing: .1em; color: var(--muted);
}
.service-card:hover { transform: translateY(-4px); border-color: rgba(0, 119, 182, .45); box-shadow: var(--shadow); }
.service-card > .icon {
    box-sizing: content-box; padding: .7rem; margin-bottom: 1.75rem; border-radius: 12px;
    background: var(--accent-soft); color: var(--accent);
}
.service-card h3 { font-size: 1.4rem; margin-bottom: .75rem; }
.service-card p { margin-bottom: 1.5rem; }
.service-card ul { border-top: 1px solid var(--line); padding-top: 1rem; }
.service-card li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; color: var(--ink-2); }
.service-card li .icon { color: var(--sun); }
.panel-cta { margin-top: 2.5rem; display: flex; justify-content: center; }
.panel-link {
    display: inline-flex; align-items: center; gap: .45rem;
    color: var(--accent-text); font-family: var(--font-display); font-weight: 600;
    text-decoration: underline; text-decoration-color: rgba(0, 119, 182, .4);
    text-decoration-thickness: 1px; text-underline-offset: 5px;
    transition: text-decoration-color .2s var(--ease), color .2s var(--ease);
}
.panel-link:hover, .panel-link:focus-visible { color: var(--accent-dark); text-decoration-color: currentColor; }

/* Portfolio */
.slider { position: relative; }
.track {
    display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; padding-bottom: .25rem;
}
.track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; }
.project {
    position: relative; display: grid; height: 100%; overflow: hidden;
    border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}
.project img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s var(--ease); }
.project:hover img { transform: scale(1.03); }
.project-body { padding: 1.5rem 1.5rem 1.75rem; }
.project h3 { font-size: 1.5rem; margin-bottom: .75rem; }
.project p { font-size: 1rem; }
.project-link {
    display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem;
    font-family: var(--font-display); font-weight: 500; color: var(--accent);
}
.project-link .icon { transition: transform .25s var(--ease); }
.project:hover .project-link .icon { transform: translateX(4px); }
@media (min-width: 900px) {
    .project { grid-template-columns: 1.4fr 1fr; }
    .project img { height: 100%; min-height: 28rem; aspect-ratio: auto; }
    .project-body { display: flex; flex-direction: column; justify-content: center; padding: 3rem; }
    .project h3 { font-size: 1.85rem; }
}

.slider-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.dots { display: flex; gap: .4rem; }
.dots button {
    /* 24px-tall tap target; the visible 4px bar is drawn by ::before */
    position: relative; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: none;
    transition: width .35s var(--ease);
}
.dots button::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px;
    border-radius: 2px; background: var(--paper-2); transition: background-color .35s var(--ease);
}
.dots button[aria-current="true"] { width: 3rem; }
.dots button[aria-current="true"]::before { background: var(--accent); }
.slider-arrows { display: flex; gap: .5rem; }
.slider-btn {
    display: grid; place-items: center; width: 3rem; height: 3rem;
    border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink);
    transition: background-color .25s, color .25s, border-color .25s;
}
.slider-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.slider-single .slider-controls { display: none; }

.cv-banner {
    display: grid; gap: 1.5rem; align-items: center; margin-top: 4rem;
    padding: 2.25rem; border-radius: var(--radius); background: var(--accent); color: #fff;
    background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 32px 32px;
}
.cv-banner p { font-family: var(--font-display); font-size: clamp(1.25rem, 2.5vw, 1.6rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.3; max-width: 36rem; }
@media (min-width: 768px) { .cv-banner { grid-template-columns: 1fr auto; padding: 2.75rem 3rem; } }

/* Contact */
.contact { background: var(--surface); position: relative; isolation: isolate; }
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: .9fr 1.1fr; gap: 5rem; align-items: start; } }
.contact-info { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.contact-info li { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.contact-info .icon {
    box-sizing: content-box; padding: .65rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
}
.contact-info a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.contact-info a:hover { color: var(--accent); text-decoration-color: currentColor; }
.contact-info small {
    display: block; font-family: var(--font-display); font-size: .75rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.form {
    display: grid; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
}
@media (min-width: 600px) { .form { grid-template-columns: 1fr 1fr; } .form .full { grid-column: 1 / -1; } }
.form label { display: block; font-family: var(--font-display); font-size: .875rem; font-weight: 500; color: var(--ink); margin-bottom: .4rem; }
.form input, .form select, .form textarea {
    display: block; width: 100%; padding: .8rem 1rem; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    transition: border-color .2s, box-shadow .2s;
}
.form textarea { resize: vertical; min-height: 8rem; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 119, 182, .15); }
.form .btn { width: 100%; }
.form-rest { display: grid; gap: 1.25rem; }
@media (min-width: 600px) { .form-rest { grid-template-columns: 1fr 1fr; } }
.form-rest[hidden], #gateHint[hidden] { display: none; }

/* Footer */
.footer { background: var(--night); color: var(--night-text); padding-block: 4.5rem 2rem; }
.footer-top { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--night-line); }
@media (min-width: 768px) { .footer-top { grid-template-columns: 2fr 1fr 1fr 1.2fr; } }
.footer-brand {
    font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 600;
    letter-spacing: -.035em; color: #fff; margin-bottom: 1rem;
}
.footer-brand span { color: #5fb8e6; }
.footer-title {
    font-family: var(--font-display); font-size: .8rem; font-weight: 500; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: 1.1rem;
}
.footer p { max-width: 24rem; }
.footer li + li { margin-top: .6rem; }
.footer a { color: #dbe2ea; transition: color .2s; }
.footer a:hover { color: #5fb8e6; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 2rem; font-size: .875rem; }

/* Legal pages */
.legal { padding-block: calc(var(--nav-h) + 4rem) 6rem; }
.legal .narrow { max-width: 46rem; margin: 0 auto; }
.legal h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); margin-bottom: .75rem; }
.legal .updated { color: var(--muted); margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.legal h2 { font-size: 1.5rem; margin: 2.75rem 0 1rem; }
.legal p, .legal li { margin-bottom: 1rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; }
.legal li { margin-bottom: .6rem; }
.legal li::marker { color: var(--accent); }
.legal strong { color: var(--ink); }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Quote page */
.quote-page { padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 5rem)); background: var(--surface); }
/* .quote-page.info-page background:transparent removed — plate renders via container::after */
.quote-page .contact-grid { align-items: start; }
@media (min-width: 960px) { .quote-aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); } }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form legend { font-family: var(--font-display); font-size: .875rem; font-weight: 500; color: var(--ink); margin-bottom: .6rem; }
.form .hint { font-size: .8rem; color: var(--muted); margin-top: .35rem; }
.choice-grid { display: grid; gap: .5rem; }
@media (min-width: 480px) { .choice-grid { grid-template-columns: 1fr 1fr; } }
.choice {
    display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
    transition: border-color .2s, background .2s;
}
.form .choice input { display: inline-block; width: auto; padding: 0; margin: 0; accent-color: var(--accent); box-shadow: none; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice:focus-within { box-shadow: 0 0 0 4px rgba(0, 119, 182, .15); }
.choice small { display: block; color: var(--muted); font-size: .8rem; }
.package-list { display: grid; gap: .5rem; }
.package-list .choice { justify-content: space-between; }
.package-list .choice span { flex: 1; }
.focused-toggle { margin-bottom: .75rem; }
.area-grid { display: grid; gap: 1rem; }
@media (min-width: 600px) { .area-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 600px) { .area-grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
.area-blocks { display: grid; gap: 1rem; }
.area-block { display: block; }
#areasHint { margin-bottom: .75rem; }
.area-blocks label { display: block; font-family: var(--font-display); font-size: .875rem; font-weight: 500; color: var(--ink); margin-bottom: .4rem; }
.area-blocks input { display: block; width: 100%; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .2s, box-shadow .2s; }
.area-blocks input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 119, 182, .15); }
.area-blocks .hint { display: block; color: var(--muted); font-size: .8rem; margin-top: .4rem; }
.quote-box {
    margin-top: 2.5rem; padding: 1.75rem; border-radius: var(--radius);
    background: var(--night); color: var(--night-text);
}
.quote-box .eyebrow { color: #5fb8e6; }
.quote-box .eyebrow b { color: #fff; }
.quote-lines { margin: 1rem 0; border-top: 1px solid var(--night-line); }
.quote-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--night-line); font-size: .925rem; }
.quote-lines li span:last-child { color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.quote-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.quote-total strong { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 600; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.quote-note { margin-top: 1rem; font-size: .825rem; color: var(--night-text); }
.quote-note + .quote-note { margin-top: .5rem; }
.form-status { font-size: .925rem; min-height: 1.2em; }
.form-status.error { color: #b42318; }
.form-status.ok { color: var(--accent-dark); }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .consent-note { font-size: .825rem; color: var(--muted); }
.form .consent-note a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* Get Instant Quote — popup (main site, local preview) */
.quote-popup { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; }
.quote-popup[hidden] { display: none; }
.quote-popup-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 32, .62); backdrop-filter: blur(2px); }
.quote-popup-panel { position: relative; width: min(1080px, 100%); max-height: 92vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; animation: quotePopupIn .22s var(--ease); }
@keyframes quotePopupIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.quote-popup-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--line); }
.quote-popup-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; margin: .15rem 0 0; }
.quote-popup-x { flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); }
.quote-popup-x:hover { background: var(--accent-soft); border-color: var(--accent); }
.quote-popup-frame { flex: 1; width: 100%; border: 0; min-height: min(64vh, 560px); background: var(--surface); }
.quote-popup-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.4rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.quote-popup-foot .btn { padding: .5rem 1rem; font-size: .875rem; }
@media (max-width: 720px) {
    .quote-popup { padding: 0; }
    .quote-popup-panel { max-height: 100vh; height: 100vh; border: 0; border-radius: 0; }
    .quote-popup-foot { flex-direction: column; align-items: stretch; text-align: center; }
    .quote-popup-foot .btn { width: 100%; }
}
@media (min-width: 900px) { .about-grid.about-solo { grid-template-columns: minmax(0, 52rem); justify-content: center; } }

.cards.cards-4 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .cards.cards-4 { grid-template-columns: repeat(2, 1fr); } .cards.cards-4 > .service-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.regs-note { margin: 2rem auto 0; max-width: 46rem; text-align: center; padding: 1rem 1.25rem; border: 1px solid var(--night-line); border-radius: 8px; }

.card-more { margin: 1.25rem 0 0 !important; }
.card-more a { color: var(--accent-text); font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.card-more a:hover { text-decoration: underline; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

.calc-link { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.calc-link:hover { color: var(--accent-dark); }

.service-card li a { color: inherit; text-decoration: none; }
.service-card li a:hover { color: #5fb8e6; text-decoration: underline; }
.service-card h3 + ul { border-top: 0; padding-top: 0; }

/* Home page services: title and button only, so the list stays short on a phone */
.cards.cards-compact { gap: .75rem; }
.cards-compact .service-card { padding: .9rem 1.25rem; display: flex; flex-direction: column; gap: .3rem; }
.cards-compact .service-card::after { display: none; }
.cards-compact .service-card h3 { font-size: 1.15rem; margin: 0; }
.cards-compact .service-card .card-more { margin: 0 !important; }

/* Home services: clickable titles, condensed on a phone (23 Oct 2026) */
.cards-compact .service-card h3 a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.cards-compact .service-card h3 a:hover, .cards-compact .service-card h3 a:focus-visible { color: var(--accent); }
.cards-compact .service-card h3 .svc-chev { display: none; }
@media (max-width: 699px) {
    .cards.cards-compact { gap: .4rem; }
    .cards-compact .service-card { padding: 0; border: 0; border-radius: 0; background: none; border-bottom: 1px solid var(--line); box-shadow: none; }
    .cards-compact .service-card:last-child { border-bottom: 0; }
    .cards-compact .service-card:hover { transform: none; background: none; border-color: var(--line); box-shadow: none; }
    .cards-compact .service-card .card-more { display: none; }
    .cards-compact .service-card h3 { font-size: 1.05rem; margin: 0; }
    .cards-compact .service-card h3 a { color: var(--accent-text); width: 100%; justify-content: space-between; padding: .85rem .25rem; text-decoration: underline; text-decoration-color: rgba(0, 119, 182, .4); text-decoration-thickness: 1px; text-underline-offset: 4px; }
    .cards-compact .service-card h3 .svc-chev { display: inline-block; flex: 0 0 auto; opacity: .8; }
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Inline text links to service pages (23 Oct 2026) */
a.tl { color: inherit; text-decoration: underline; text-decoration-color: rgba(128, 128, 128, .45); text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .2s; }
a.tl:hover, a.tl:focus-visible { color: inherit; text-decoration-color: currentColor; }

/* Start / action section */
.start { position: relative; isolation: isolate; overflow: hidden; background: var(--paper-2); }
/* hand-sketched architectural drawings, black ink on the paper */
.start::before {
    content: ""; position: absolute; inset: -2% -2% -2% -2%; z-index: -1; pointer-events: none;
    background: url("images/sketch-start.svg") center center / cover no-repeat;
    opacity: .28;
}
.start > .container { position: relative; z-index: 1; }
@media (max-width: 819px) { .start::before { background-size: 220% auto; background-position: 62% 18%; opacity: .20; } }
.start-main {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; gap: 1.75rem; align-items: center;
    padding: 2.5rem 2rem; border-radius: var(--radius);
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #fff; box-shadow: var(--shadow-lg);
}
/* drafting grid */
.start-main::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
/* architectural line drawings */
.start-main::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url("images/blueprint-start.svg") right center / auto 118% no-repeat;
    opacity: .5;
    mask-image: linear-gradient(100deg, transparent 0%, transparent 26%, rgba(0, 0, 0, .55) 46%, #000 72%);
    -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 26%, rgba(0, 0, 0, .55) 46%, #000 72%);
}
.start-main h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .75rem; color: #fff; }
.start-main p { color: rgba(255, 255, 255, .88); max-width: 38rem; }
.start-main-text, .start-main-cta { position: relative; z-index: 1; }
.start-main-cta { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.start-main-note { font-size: .875rem; color: rgba(255, 255, 255, .75) !important; }
@media (max-width: 819px) {
    .start-main::after { background-size: auto 150%; opacity: .3; }
}
@media (min-width: 820px) {
    .start-main { grid-template-columns: 1fr auto; gap: 3rem; padding: 3rem; }
    .start-main-cta { align-items: center; }
}
.start-grid { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
@media (min-width: 700px) { .start-grid { grid-template-columns: repeat(3, 1fr); } }
.start-card {
    display: flex; flex-direction: column;
    padding: 1.75rem 1.5rem; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--line);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.start-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.start-card > .icon {
    box-sizing: content-box; padding: .6rem; margin-bottom: 1.25rem; border-radius: 12px;
    background: var(--accent-soft); color: var(--accent-text);
}
.start-card h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.start-card p { color: var(--muted); font-size: .95rem; }
.start-card-more { margin-top: auto; padding-top: 1.25rem; }
.start-card-more a {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--accent-text); font-weight: 500; text-decoration: none;
}
.start-card-more a:hover { text-decoration: underline; }

/* Home page section shades — alternating tones, graph-paper grid in each (23 Oct 2026) */
#about {
    background-color: var(--surface);
    background-image:
        linear-gradient(rgba(15, 23, 32, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 32, .055) 1px, transparent 1px);
    background-size: 40px 40px;
}
#start { background-color: #e2ded2; }
#services {
    background-color: #eef1f4;
    background-image:
        linear-gradient(rgba(0, 119, 182, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 119, 182, .07) 1px, transparent 1px);
    background-size: 72px 72px;
}
#services.plate-bg {
    background-image: none;
    --plate: url("images/plates/cv_lisburn_plan.webp");
    --plate-op: .22; --plate-size: auto 150%; --plate-pos: 18% center;
    --plate-fade: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
}


#portfolio {
    background-color: var(--surface);
    background-image:
        linear-gradient(rgba(15, 23, 32, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 32, .05) 1px, transparent 1px);
    background-size: 56px 56px;
 isolation: isolate; position: relative; }
#contact {
    background-color: #e4e9ee;
    background-image:
        linear-gradient(rgba(0, 119, 182, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 119, 182, .08) 1px, transparent 1px);
    background-size: 48px 48px;
}
#contact .form { background: var(--surface); }

/* ---------------------------------------------------------------
   Section plates -- washed-down images from Rares's own portfolio
   (23 Oct 2026). Greyscale, lifted to a pale range and multiplied
   over the section colour so body text keeps full contrast.
   --------------------------------------------------------------- */
.plate-bg { position: relative; isolation: isolate; }
.plate-bg::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: var(--plate);
    background-repeat: no-repeat;
    background-size: var(--plate-size, cover);
    background-position: var(--plate-pos, center);
    opacity: var(--plate-op, .22);
    mix-blend-mode: multiply;
    -webkit-mask-image: var(--plate-fade, linear-gradient(90deg, transparent 0%, #000 34%, #000 100%));
    mask-image: var(--plate-fade, linear-gradient(90deg, transparent 0%, #000 34%, #000 100%));
}

/* ---- Section plates: drawings lifted from the CV & Portfolio PDF,
   washed to pale greyscale linework. 24 Oct 2026 ---- */

/* About -- Balally Drive render, back by request 24 Oct 2026 */
#about.plate-bg {
    background-image: none;
    --plate: url("images/plates/balally_front.webp");
    --plate-op: .20; --plate-size: auto 135%; --plate-pos: 94% 45%;
    --plate-fade: linear-gradient(90deg, transparent 0%, #000 50%, #000 100%);
}

/* Start -- front elevation from the CV (reverted 24 Oct 2026) */
#start.plate-bg {
    --plate: url("images/plates/cv_house_elev.webp");
    --plate-op: .30; --plate-size: 118% auto; --plate-pos: center 76%;
    --plate-fade: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}



/* Portfolio -- Clearwater Cove, ground & lower floor plans */
#portfolio.plate-bg {
    background-image: none;
    --plate: url("images/plates/cv_clearwater.webp");
    --plate-op: .20; --plate-size: auto 118%; --plate-pos: 88% 40%;
    --plate-fade: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
}

/* Contact -- Baltrasna, Ashbourne: render, back by request 24 Oct 2026 */
#contact.plate-bg {
    background-image: none;
    --plate: url("images/plates/baltrasna.webp");
    --plate-op: .20; --plate-size: cover; --plate-pos: center 55%;
}

/* lighter on a phone, where a plate would crowd the text, and served
   from half-size files so the page is not carrying desktop artwork
   down a mobile connection. 24 Oct 2026 */
@media (max-width: 819px) {
    .plate-bg::after { opacity: calc(var(--plate-op, .22) * .55); }

    #about.plate-bg     { --plate: url("images/plates/m/balally_front.webp"); }
    #start.plate-bg     { --plate: url("images/plates/m/cv_house_elev.webp"); }
    #services.plate-bg  { --plate: url("images/plates/m/cv_lisburn_plan.webp"); }
    #portfolio.plate-bg { --plate: url("images/plates/m/cv_clearwater.webp"); }
    #contact.plate-bg   { --plate: url("images/plates/m/baltrasna.webp"); }
}

/* Start section: drop the generated sketch/blueprint SVGs, keep only the
   portfolio plate (53 The Rise elevation). 23 Oct 2026 */
.start::before { display: none !important; }
.start-main::after { display: none !important; }

/* ---- Inner pages: construction-detail plate sits directly under the top
   banner, runs to the right edge of the page, starts to the right of the
   title block and ends at the bottom of the title. Fades in from the left
   and out at the bottom. 24 Oct 2026 ---- */
.info-page { position: relative; isolation: isolate; }
.info-page::after {
    content: '';
    position: absolute;
    top: var(--nav-h);
    right: 0;
    left: calc(max(0px, (100% - var(--max)) / 2) + 1.25rem + 24rem);
    height: calc(clamp(3rem, 7vw, 5rem) + 12rem);
    background-image: var(--plate);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: .5;
    -webkit-mask-image:
        linear-gradient(180deg, #000 0%, #000 70%, transparent 100%),
        linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(180deg, #000 0%, #000 70%, transparent 100%),
        linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
    mask-composite: intersect;
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 819px) {
    .info-page::after { left: 0; height: calc(clamp(3rem, 7vw, 5rem) + 11rem); opacity: .25; }
}
.info-page > .container { position: relative; z-index: 1; }

/* Each page gets its own plate — a construction detail or section
   chosen to suit the subject. 24 Oct 2026 */

.plate-svc     { --plate: url("images/plates/cv_kitchen_detail.webp"); }
/* services plate: handled by .info-page > .container::after */
.plate-design  { --plate: url("images/plates/cv_window_details.webp"); }
.plate-planning{ --plate: url("images/plates/cv_building_section.webp"); }
.plate-tender  { --plate: url("images/plates/cv_rooflight_details.webp"); }
.plate-constr  { --plate: url("images/plates/cv_stair_sections.webp"); }
.plate-commence{ --plate: url("images/plates/cv_stair_elev.webp"); }
.plate-survey  { --plate: url("images/plates/cv_window_sections.webp"); }
.plate-visits  { --plate: url("images/plates/cv_3d_section.webp"); }
.plate-granny  { --plate: url("images/plates/cv_curtain_wall_detail.webp"); }
.plate-about   { --plate: url("images/plates/cv_3d_section.webp"); }
.plate-business{ --plate: url("images/plates/cv_meeting_box.webp"); }
.plate-quote   { --plate: url("images/plates/cv_3d_section.webp"); }

/* inner pages: half-size plates on a phone */
@media (max-width: 819px) {
    .plate-svc     { --plate: url("images/plates/m/cv_kitchen_detail.webp"); }
    .plate-design  { --plate: url("images/plates/m/cv_window_details.webp"); }
    .plate-planning{ --plate: url("images/plates/m/cv_building_section.webp"); }
    .plate-tender  { --plate: url("images/plates/m/cv_rooflight_details.webp"); }
    .plate-constr  { --plate: url("images/plates/m/cv_stair_sections.webp"); }
    .plate-commence{ --plate: url("images/plates/m/cv_stair_elev.webp"); }
    .plate-survey  { --plate: url("images/plates/m/cv_window_sections.webp"); }
    .plate-visits  { --plate: url("images/plates/m/cv_3d_section.webp"); }
    .plate-granny  { --plate: url("images/plates/m/cv_curtain_wall_detail.webp"); }
    .plate-about   { --plate: url("images/plates/m/cv_3d_section.webp"); }
    .plate-business{ --plate: url("images/plates/m/cv_meeting_box.webp"); }
    .plate-quote   { --plate: url("images/plates/m/cv_3d_section.webp"); }
}


/* Start section -- drawing-sheet treatment (24 Oct 2026) */
.start-ref, .start-no {
    font-family: var(--font-display); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 500; margin: 0 0 .9rem !important;
}
.start-ref { color: rgba(255,255,255,.7) !important; display: flex; align-items: center; gap: .7rem; }
.start-ref::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; }
.start-no { display: block; color: var(--accent-text); float: right; margin: 0 !important; }
.start-main { border: 1px solid rgba(255,255,255,.28); outline: 1px solid rgba(15,23,32,.35); outline-offset: -9px; }
/* title-block corner and registration ticks */
.start-main-cta { padding-left: 2rem; border-left: 1px solid rgba(255,255,255,.3); position: relative; }
.start-main-cta::before, .start-main-cta::after {
    content: ""; position: absolute; left: -4px; width: 7px; height: 7px; background: #fff; transform: rotate(45deg);
}
.start-main-cta::before { top: -.2rem; } .start-main-cta::after { bottom: -.2rem; }
.start-dim {
    display: flex; align-items: center; gap: .5rem; width: 100%; margin-top: .3rem;
    font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7);
}
.start-dim::before, .start-dim::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.45); }
@media (max-width: 819px) { .start-main-cta { padding: 1.25rem 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.3); } .start-main-cta::before, .start-main-cta::after { display: none; } }
/* cards as detail callouts */
.start-card {
    position: relative; border-radius: 4px; border: 1px solid rgba(15,23,32,.35);
    background: rgba(255,255,255,.92);
}
.start-card::before, .start-card::after {
    content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--accent); pointer-events: none;
}
.start-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.start-card::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.start-card > .icon { border-radius: 50%; background: transparent; border: 1px solid var(--accent); }
.start-card h3 { clear: both; letter-spacing: -.01em; }
.start-card-more { border-top: 1px dashed rgba(15,23,32,.3); margin-top: auto; }
.start-card-more { padding-top: .9rem; }


/* Contact section -- drawing-sheet treatment (24 Oct 2026) */
.sheet-ref, .form-titleblock {
    font-family: var(--font-display); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
}
.sheet-ref { display: flex; align-items: center; gap: .7rem; color: var(--muted); margin: 0 0 .9rem; }
.sheet-ref::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; }
.contact-callouts { counter-reset: callout; border-top: 1px solid rgba(15,23,32,.35); }
.contact-callouts li { counter-increment: callout; border-bottom: 1px dashed rgba(15,23,32,.3); position: relative; }
.contact-callouts li::after {
    content: "D" counter(callout); margin-left: auto; font-family: var(--font-display); font-size: .7rem; letter-spacing: .14em;
    color: var(--accent-text); border: 1px solid var(--accent); border-radius: 50%; width: 2rem; height: 2rem;
    display: grid; place-items: center; flex: none;
}
.contact-callouts .icon { background: transparent; border: 1px solid var(--accent); }
.form-sheet { position: relative; border-radius: 4px; border: 1px solid rgba(15,23,32,.35); outline: 1px solid rgba(15,23,32,.3); outline-offset: -9px; background: rgba(255,255,255,.94) !important; padding: clamp(1.75rem, 4vw, 2.75rem); }
.form-sheet::before, .form-sheet::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--accent); pointer-events: none; }
.form-sheet::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.form-sheet::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.form-titleblock { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin: 0; padding-bottom: .9rem; border-bottom: 1px solid rgba(15,23,32,.35); color: var(--muted); }
.form-titleblock span:first-child { color: var(--ink); }
.form-sheet input, .form-sheet select, .form-sheet textarea { border-radius: 2px; }

/* Portfolio section -- drawing-sheet treatment (24 Oct 2026) */
.portfolio-ref { color: var(--muted); }
.portfolio-head {
    align-items: flex-end; border-bottom: 1px solid rgba(15,23,32,.35);
    padding-bottom: 1.25rem; position: relative;
}
/* title-block corner ticks on the header */
.portfolio-head::before, .portfolio-head::after {
    content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--accent); pointer-events: none;
}
.portfolio-head::before { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.portfolio-head::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
/* tabs as a title-block cell */
.portfolio-tabs [role="tablist"] {
    background: rgba(255,255,255,.9); border: 1px solid rgba(15,23,32,.35); border-radius: 4px;
    padding: .35rem; gap: .35rem;
}
.portfolio-tabs .tab { border-radius: 2px; border: 1px solid transparent; }
.portfolio-tabs .tab[aria-selected="true"] { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: none; }
/* project cards as detail callouts with corner marks */
#portfolio .project {
    position: relative; border-radius: 4px; border: 1px solid rgba(15,23,32,.35);
    background: rgba(255,255,255,.9);
}
#portfolio .project::before, #portfolio .project::after {
    content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--accent); pointer-events: none; z-index: 2;
}
#portfolio .project::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
#portfolio .project::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
#portfolio .project-body { border-top: 1px dashed rgba(15,23,32,.28); }
@media (min-width: 900px) { #portfolio .project-body { border-top: 0; border-left: 1px dashed rgba(15,23,32,.28); } }
/* slider buttons as drafting handles */
#portfolio .slider-btn { border-radius: 2px; border: 1px solid rgba(15,23,32,.35); background: rgba(255,255,255,.9); }
#portfolio .slider-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
#portfolio .dots button::before { background: rgba(15,23,32,.4); }
#portfolio .dots button[aria-current="true"]::before { background: var(--accent); }
.contact-quote { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding-top: 2.5rem; border-top: 1px dashed rgba(15,23,32,.3); }
.contact-quote .section-lead { margin: 0; }

/* Quote page: no template plate (removed 24 Oct 2026), title centered over the
   calculator as in the earlier centered versions. */
.quote-page.plate-quote::after, .quote-page.plate-quote > .container::after { display: none !important; }
.quote-page .quote-aside {
    text-align: center;
    justify-self: center;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}
.quote-page .quote-aside .section-lead { margin-left: auto; margin-right: auto; max-width: 34rem; }

/* Google Reviews */
.reviews { background: var(--paper-2); border-block: 1px solid var(--line); }
.reviews-head { display: grid; gap: 1.5rem; align-items: end; margin-bottom: 2.5rem; }
@media (min-width: 960px) { .reviews-head { grid-template-columns: 1fr auto; } }
.reviews-title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.reviews-rating { display: flex; align-items: center; gap: .9rem; }
.stars { display: inline-flex; gap: .2rem; color: #f5a623; }
.stars .icon { width: 1.5rem; height: 1.5rem; fill: currentColor; stroke: none; }
.stars-sm .icon { width: 1.05rem; height: 1.05rem; }
.reviews-score { color: var(--ink-2); font-size: .95rem; }
.reviews-score strong { color: var(--ink); font-size: 1.1rem; font-weight: 600; }
.reviews-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .reviews-grid { grid-template-columns: 1fr 1fr 1fr; } }
.review-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 1rem; }
.review-card blockquote { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.review-card figcaption { margin-top: auto; display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .85rem; }
.review-card figcaption .icon { width: 1.1rem; height: 1.1rem; color: var(--accent); fill: currentColor; stroke: none; }
.reviews-cta { margin-top: 2rem; }
.reviews-cta a { display: inline-flex; align-items: center; gap: .5rem; color: var(--accent-text); font-weight: 600; text-decoration: none; }
.reviews-cta a:hover { text-decoration: underline; }

/* Reviews strip (bottom of page) — tighter */
.reviews-strip { display: none; } /* hidden 26 Oct 2026, on request */
.reviews-strip { background: var(--paper-2); border-top: 1px solid var(--line); padding-block: 3.25rem; }
.reviews-strip-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1.25rem; }
.reviews-strip .eyebrow { margin: 0; }
.reviews-strip-rating { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.reviews-strip-cta { display: inline-flex; align-items: center; gap: .45rem; color: var(--accent-text); font-weight: 600; text-decoration: none; }
.reviews-strip-cta:hover { text-decoration: underline; }
.reviews-grid-strip { gap: 1rem; }
@media (min-width: 720px) { .reviews-grid-strip { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .reviews-grid-strip { grid-template-columns: 1fr 1fr 1fr; } }
.reviews-strip .review-card { padding: 1.75rem 1.75rem; gap: 1rem; box-shadow: var(--shadow); }
.reviews-strip .review-card blockquote { font-size: 1rem; line-height: 1.55; }