/* Mionlach Roofing & Leadworx. The current look (navy, Mionlach green, Archivo condensed headings, pill buttons),
   given more room, calmer type and real photos. Spacing scale: 4 8 12 16 24 32 48 64 96 120. */

@font-face { font-family: 'Archivo'; src: url('/fonts/archivo.woff') format('woff'); font-weight: 400 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('/fonts/public-sans.woff') format('woff'); font-weight: 400 700; font-display: swap; }

:root {
  --navy: #141B2D; --navy-deep: #0E1422; --navy-2: #1B2338; --navy-line: rgba(255, 255, 255, .1);
  --green: #8DC63F; --green-hi: #9BD44E; --moss: #4D7A17;
  --lead: #5A6472; --lead-2: #8A94A3; --mist: #C3C9D4;
  --stone: #F7F6F2; --stone-2: #EFEDE6; --line: #E4E2DA; --white: #FFFFFF;
  --ink: #1C2230; --ink-soft: #4A5160;
  --display: 'Archivo', 'Arial Narrow', 'DejaVu Sans Condensed', system-ui, sans-serif;
  --body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --max: 1200px; --side: 24px; --sec: clamp(64px, 9vw, 120px);
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 24px;
  --shadow: 0 1px 2px rgba(14, 20, 34, .06), 0 12px 32px rgba(14, 20, 34, .08);
  --head-h: 64px; --mbar-h: 0px;
}
@media (min-width: 768px) { :root { --side: 32px; --head-h: 72px; } }
@media (min-width: 1100px) { :root { --side: 40px; } }
@media (max-width: 1023.98px) { :root { --mbar-h: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--head-h) + 16px); }
body { margin: 0; overflow-x: clip; font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--white);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.site-foot { padding-bottom: calc(var(--mbar-h, 0px) + env(safe-area-inset-bottom, 0px)); }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
figure, blockquote { margin: 0; }
a { color: inherit; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { font-family: var(--display); font-stretch: 80%; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 16px; text-wrap: balance; color: inherit; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); font-weight: 800; line-height: 1.02; }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 750; }
h3 { font-size: 1.375rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 200; background: var(--green); color: var(--navy); padding: 12px 16px; border-radius: var(--r-sm); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.nw { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a, button, label, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--side) * 2); margin: 0 auto; padding-inline: var(--side); }
.section { padding-block: var(--sec); }
.section-stone { background: var(--stone); }
.section-dark { background: var(--navy); color: var(--white); }
.section-deep { background: var(--navy-deep); color: var(--white); }
.section-dark p, .section-deep p { color: var(--mist); }
.section-tight { padding-block: clamp(48px, 6vw, 80px); }

/* icons */
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* eyebrow label with the lead seam mark */
.label { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-family: var(--display); font-stretch: 85%; font-size: .8125rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--moss); }
.label::before { content: ''; flex: none; width: 28px; height: 8px; background:
  linear-gradient(currentColor, currentColor) 0 50% / 100% 1.5px no-repeat,
  radial-gradient(circle at 50% 50%, currentColor 0 2.5px, transparent 3px) 50% 50% / 8px 8px no-repeat; opacity: .9; }
.section-dark .label, .section-deep .label, .hero .label, .page-hero .label, .on-dark .label { color: var(--green); }

/* lead seam: a rolled joint between two sheets, used as a divider */
.seam { height: 16px; border: 0; margin: 0; background:
  linear-gradient(var(--line), var(--line)) 0 50% / calc(50% - 20px) 1px no-repeat,
  linear-gradient(var(--line), var(--line)) 100% 50% / calc(50% - 20px) 1px no-repeat,
  radial-gradient(ellipse at 50% 50%, var(--lead-2) 0 5px, transparent 6px) 50% 50% / 40px 16px no-repeat; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--display); font-stretch: 85%; font-size: 1.0625rem; font-weight: 700; letter-spacing: .01em; line-height: 1.1; text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, scale .14s ease; text-align: center; }
.btn .ic { width: 18px; height: 18px; }
/* WhatsApp's own glyph, in WhatsApp green so it is recognised at a glance */
svg.ic.ic-wa { fill: currentColor; stroke: none; color: #25D366; }
.btn-green { background: var(--green); color: var(--navy); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-line { border-color: rgba(255, 255, 255, .55); color: var(--white); background: transparent; }
.btn-line-dark { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-small { min-height: 44px; padding: 0 20px; font-size: 1rem; }
.btn-wide { width: 100%; }
@media (hover: hover) {
  .btn-green:hover { background: var(--green-hi); }
  .btn-navy:hover { background: #222C45; }
  .btn-line:hover { border-color: var(--white); background: rgba(255, 255, 255, .08); }
  .btn-line-dark:hover { background: var(--navy); color: var(--white); }
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 32px; }
@media (max-width: 559.98px) { .actions .btn { width: 100%; } }
.more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-stretch: 85%; font-weight: 700; font-size: 1.0625rem; color: var(--moss); text-decoration: none; min-height: 44px; }
.more .ic { transition: translate .18s ease; }
.on-dark .more, .section-dark .more, .section-deep .more { color: var(--green); }
@media (hover: hover) { .more:hover .ic { translate: 4px 0; } .more:hover span { text-decoration: underline; text-underline-offset: 4px; } }
.text-link { color: var(--moss); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.section-dark .text-link, .section-deep .text-link, .on-dark .text-link { color: var(--green); }
.section-deep .form .text-link, .section-dark .form .text-link { color: var(--moss); }

/* press feedback (site.js adds the classes); hover effects only for mice */
.pressed { scale: .955; }
.card.pressed, .town.pressed, .gal-item.pressed { scale: .982; }
.dim { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .pressed, .card.pressed, .town.pressed, .gal-item.pressed { scale: 1; } }

/* preview bar */
.preview-bar { background: var(--green); color: var(--navy); text-align: center; font-size: .875rem; padding: 8px var(--side); line-height: 1.4; }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 100; background: var(--navy); color: var(--white); border-bottom: 1px solid var(--navy-line); transition: box-shadow .2s ease; }
.site-head.solid { box-shadow: 0 8px 24px rgba(14, 20, 34, .25); }
.head-bar { display: flex; align-items: center; gap: 24px; height: var(--head-h); }
.logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.logo img { width: auto; height: 40px; }
@media (min-width: 768px) { .logo img { height: 50px; } }
.nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; gap: 4px; }
.nav ul a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; text-decoration: none; color: var(--mist); font-weight: 500; font-size: .9375rem; transition: color .15s ease, background-color .15s ease; }
.nav ul a[aria-current] { color: var(--white); background: rgba(255, 255, 255, .08); }
@media (hover: hover) { .nav ul a:hover { color: var(--white); } }
.nav-extra { display: none; }
.head-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.head-tel { display: none; align-items: center; gap: 8px; color: var(--white); text-decoration: none; font-family: var(--display); font-stretch: 85%; font-weight: 700; font-size: 1.0625rem; min-height: 44px; }
.head-tel .ic { color: var(--green); }
.menu-btn { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .3); background: transparent; color: var(--white); cursor: pointer; font-family: var(--display); font-stretch: 85%; font-weight: 700; }
.bars { display: grid; gap: 5px; width: 18px; }
.bars i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease; }
.menu-open .bars i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .bars i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (min-width: 1240px) { .head-tel { display: inline-flex; } }
@media (max-width: 1099.98px) {
  .head-actions { margin-left: auto; }
  .menu-btn { display: inline-flex; }
  .head-cta { display: none; }
  .nav { position: fixed; inset: var(--menu-top, var(--head-h)) 0 0 0; background: var(--navy-deep); overflow-y: auto; overscroll-behavior: contain;
    padding: 16px var(--side) calc(32px + var(--mbar-h) + env(safe-area-inset-bottom, 0px)); visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility 0s .2s; margin: 0; }
  .menu-open .nav { visibility: visible; opacity: 1; transition: opacity .2s ease; }
  html.menu-open { overflow: hidden; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul li + li { border-top: 1px solid var(--navy-line); }
  .nav ul a { min-height: 56px; padding: 0 16px; border-radius: var(--r); font-size: 1.125rem; color: var(--white); font-family: var(--display); font-stretch: 85%; font-weight: 700; transition: background-color .12s ease; }
  .nav ul a:active, .nav ul a.pressed { background: rgba(255, 255, 255, .1); scale: 1; }
  .nav-extra { display: grid; gap: 12px; margin-top: 32px; }
  .nav-extra .btn { width: 100%; }
}
@media (min-width: 1100px) and (max-width: 1239.98px) { .head-cta { display: inline-flex; } }

/* ---------- phone action bar ---------- */
.mbar { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(14, 20, 34, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--navy-line); }
.mbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 999px; text-decoration: none; font-family: var(--display); font-stretch: 85%; font-weight: 700; font-size: 1rem;
  color: var(--white); border: 1.5px solid rgba(255, 255, 255, .25); transition: scale .14s ease, background-color .15s ease; }
.mbar a.mbar-main { background: var(--green); color: var(--navy); border-color: var(--green); }
.mbar .ic { width: 18px; height: 18px; }
@media (min-width: 1024px) { .mbar { display: none; } }
@media (max-width: 359.98px) { .mbar a { font-size: .9375rem; gap: 4px; } .mbar .ic { display: none; } }

/* ---------- home hero: the house in full, the words on navy below it on phones, beside it on wide screens ---------- */
.hero { position: relative; isolation: isolate; color: var(--white); background: var(--navy-deep); overflow: clip; }
.hero-bg { position: relative; z-index: -1; height: clamp(260px, 38svh, 460px); overflow: hidden; }
@media (min-width: 640px) and (max-width: 999.98px) { .hero-bg { height: clamp(320px, 46svh, 520px); } }
.hero-bg picture, .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero-bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 20, 34, .35) 0%, rgba(14, 20, 34, 0) 26%, rgba(14, 20, 34, 0) 50%, rgba(14, 20, 34, .7) 80%, var(--navy-deep) 100%); }
.hero-inner { position: relative; margin-top: -88px; padding-bottom: 48px; }
.hero-copy { max-width: 720px; }
.hero .label { margin-bottom: 20px; }
.hero h1 { margin-bottom: 24px; font-size: clamp(2.875rem, 6.2vw, 5.5rem); line-height: .96; letter-spacing: -.02em; }
.hero h1 .h1-main { display: block; }
.nowrap { white-space: nowrap; }
.hero h1 .h1-sub { display: block; margin-top: 16px; max-width: 30ch; text-wrap: pretty; font-size: clamp(1.25rem, 1.9vw, 1.625rem); font-stretch: 100%; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: #DCE0E8; }
.lede { font-size: clamp(1.125rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--mist); max-width: 60ch; }
.hero .lede { max-width: 46ch; color: var(--mist); }
.hero .actions { margin-top: 32px; }
.btn-glass { color: var(--white); background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (hover: hover) { .btn-glass:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .6); } }

/* the rail: a fine line, then the facts */
.hero-rail { position: relative; padding-bottom: 32px; }
.rail-line { height: 1px; background: rgba(255, 255, 255, .16); }
.clover { overflow: visible; }
.clover path { stroke-linecap: round; stroke-linejoin: round; }
.clover .cl-line { fill: none; stroke: var(--green); stroke-width: 2.4; }
.clover .cl-fill { fill: var(--green); opacity: .14; stroke: none; }
.rail { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; margin-top: 24px; }
.rail li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; align-content: start; }
.rail strong { font-family: var(--display); font-stretch: 80%; font-weight: 800; font-size: clamp(1.875rem, 3vw, 2.5rem); line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.rail li > span:last-child { flex-basis: 100%; font-size: .875rem; line-height: 1.4; color: var(--mist); }
.rail .stars .ic { width: 14px; height: 14px; }
.rail-link { color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .4); }
@media (min-width: 1000px) {
  .rail { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .rail li { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .12); }
  .rail li:first-child { padding-left: 0; border-left: 0; }
}
@media (min-width: 1000px) {
  .hero { min-height: min(920px, calc(100svh - var(--head-h))); display: flex; flex-direction: column; }
  .hero-bg { position: absolute; inset: 0; height: auto; }
  .hero-bg img { object-position: 62% 45%; }
  .hero-bg::after { background:
    linear-gradient(90deg, rgba(14, 20, 34, .92) 0%, rgba(14, 20, 34, .8) 32%, rgba(14, 20, 34, .3) 56%, rgba(14, 20, 34, 0) 78%),
    linear-gradient(0deg, var(--navy-deep) 0%, rgba(14, 20, 34, .55) 22%, rgba(14, 20, 34, 0) 42%),
    linear-gradient(180deg, rgba(14, 20, 34, .4) 0%, rgba(14, 20, 34, 0) 20%); }
  .hero-inner { margin-top: 0; flex: 1; display: flex; align-items: center; padding-block: 96px 64px; }
  .hero-rail { padding-bottom: 40px; }
}
.stars { display: inline-flex; gap: 2px; color: var(--green); }
.stars .ic { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--white); padding: 3px; flex: none; }
.badge img { width: 100%; height: 100%; object-fit: contain; }
/* the award is its own rounded yellow tile: no white plate behind it */
.badge.badge-award { display: block; background: none; padding: 0; border-radius: 9px; width: auto; box-shadow: none; overflow: hidden; }
.badge.badge-award img { width: auto; height: 100%; }

/* section heads */
.sec-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 48px); }
.sec-head p { font-size: 1.125rem; color: var(--ink-soft); max-width: 62ch; }
.section-dark .sec-head p, .section-deep .sec-head p { color: var(--mist); }
.sec-head-split { max-width: none; display: grid; gap: 16px 48px; align-items: end; }
@media (min-width: 900px) { .sec-head-split { grid-template-columns: 1.1fr .9fr; } .sec-head-split > :last-child { justify-self: end; } }
.sec-foot { margin-top: 32px; }

/* intro split */
.split { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; } .split-rev > :first-child { order: 2; } }
.photo { border-radius: var(--r-lg); overflow: hidden; background: var(--stone-2); }
.photo picture, .photo img { width: 100%; height: 100%; object-fit: cover; }
/* town pages: leadwork section text and photo sit at the top together on wide screens */
@media (min-width: 1000px) { .town-lead { align-items: start; } }
.r-43 { aspect-ratio: 4 / 3; } .r-34 { aspect-ratio: 3 / 4; } .r-45 { aspect-ratio: 4 / 5; } .r-169 { aspect-ratio: 16 / 9; } .r-11 { aspect-ratio: 1; } .r-32 { aspect-ratio: 3 / 2; }
.ticks { list-style: none; display: grid; gap: 12px; margin: 24px 0; }
.ticks li { position: relative; padding-left: 32px; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .35em; width: 20px; height: 20px; border-radius: 50%; background: var(--green) url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22m6 12.5 4 4 8-9%22 fill=%22none%22 stroke=%22%23141B2D%22 stroke-width=%222.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E') center / 14px no-repeat; }

/* service cards */
.cards { list-style: none; display: grid; gap: 16px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.card { display: flex; flex-direction: column; height: 100%; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: var(--ink);
  transition: box-shadow .2s ease, translate .2s ease, border-color .2s ease, scale .14s ease; }
.section-stone .card { border-color: transparent; box-shadow: 0 1px 2px rgba(14, 20, 34, .05); }
.card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s ease; }
.card-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 24px 20px; }
@media (min-width: 768px) { .card-body { padding: 28px; } }
.card-kicker { font-family: var(--display); font-stretch: 85%; font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); }
.card h3 { margin: 0; font-size: 1.5rem; }
.card p { color: var(--ink-soft); margin: 0; }
.card .more { margin-top: auto; padding-top: 8px; }
@media (hover: hover) { .card:hover { box-shadow: var(--shadow); translate: 0 -4px; } .card:hover .card-media img { scale: 1.04; } }

/* leadwork band */
.lead-grid { display: grid; gap: 48px; }
@media (min-width: 1000px) { .lead-grid { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; } }
.terms { list-style: none; display: grid; gap: 0; margin: 32px 0; border-top: 1px solid var(--navy-line); }
.terms li { display: grid; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--navy-line); }
@media (min-width: 560px) { .terms li { grid-template-columns: 120px 1fr; align-items: baseline; } }
.terms strong { font-family: var(--display); font-stretch: 85%; font-size: 1.125rem; color: var(--white); }
.terms span { color: var(--mist); font-size: 1rem; }
.craft-set { display: grid; gap: 20px; }
@media (min-width: 640px) { .craft-set { grid-template-columns: 1fr 1fr; } .craft-set .craft:first-child { grid-column: 1 / -1; } }
.craft { margin: 0; }
.craft .photo { border-radius: var(--r); }
.craft figcaption { display: grid; gap: 4px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--navy-line); font-size: .9375rem; line-height: 1.45; color: var(--mist); }
.craft figcaption b { font-family: var(--display); font-stretch: 85%; font-weight: 700; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
.light .craft figcaption { border-top-color: var(--line); color: var(--ink-soft); }
.light .craft figcaption b { color: var(--moss); }

/* steps */
.steps { list-style: none; display: grid; gap: 16px; counter-reset: s; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { background: var(--white); border-radius: var(--r-lg); padding: 28px 24px; border: 1px solid var(--line); }
.section-stone .steps li { border-color: transparent; }
.step-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--green); font-family: var(--display); font-stretch: 85%; font-weight: 800; font-size: 1.125rem; margin-bottom: 24px; }
.steps h3 { font-size: 1.25rem; margin-bottom: 8px; }
.steps p { color: var(--ink-soft); font-size: 1rem; }

/* recent work strip */
.work3 { display: grid; gap: 16px; }
@media (min-width: 640px) { .work3 { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.light .craft .photo { border-radius: var(--r); }

/* reviews */
.quotes { display: grid; gap: 16px; }
@media (min-width: 768px) { .quotes-2 { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1000px) { .quotes-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.quotes-all { columns: 1; column-gap: 24px; display: block; }
@media (min-width: 768px) { .quotes-all { columns: 2; } }
@media (min-width: 1100px) { .quotes-all { columns: 3; } }
.quotes-all .quote { break-inside: avoid; margin-bottom: 24px; }
.quote { margin: 0; display: flex; flex-direction: column; gap: 16px; background: var(--white); border-radius: var(--r-lg); padding: 28px 24px; border: 1px solid var(--line); height: 100%; }
.section-stone .quote { border-color: transparent; box-shadow: 0 1px 2px rgba(14, 20, 34, .05); }
@media (min-width: 768px) { .quote { padding: 32px; } }
.quote blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.quote blockquote p { margin: 0 0 12px; }
.quote blockquote p:last-child { margin: 0; }
.quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.quote-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--green); font-family: var(--display); font-weight: 800; flex: none; }
.quote-name { display: block; font-weight: 700; }
.quote-src { display: block; font-size: .875rem; color: var(--ink-soft); }
.score { display: flex; align-items: center; gap: 16px; }
.score-num { font-family: var(--display); font-stretch: 80%; font-weight: 800; font-size: 3.5rem; line-height: 1; color: var(--navy); }
.score-line { display: block; font-size: .9375rem; color: var(--ink-soft); margin-top: 4px; }
.score .stars { color: var(--moss); }
.on-dark .score-num { color: var(--white); } .on-dark .score .stars { color: var(--green); } .on-dark .score-line { color: var(--mist); }

/* areas */
.towns { list-style: none; display: grid; gap: 12px; }
@media (min-width: 560px) { .towns { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .towns { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .towns-5 { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 900px) { .towns-4 { grid-template-columns: repeat(4, 1fr); } }
.town { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 20px; border-radius: var(--r); background: var(--navy-2); color: var(--white); text-decoration: none;
  border: 1px solid var(--navy-line); transition: border-color .15s ease, background-color .15s ease, scale .14s ease; }
.town span { display: grid; line-height: 1.25; }
.town b { font-family: var(--display); font-stretch: 85%; font-size: 1.125rem; }
.town small { color: var(--mist); font-size: .875rem; }
.town .ic { color: var(--green); }
@media (hover: hover) { .town:hover { border-color: var(--green); } }
.light .town { background: var(--white); color: var(--ink); border-color: var(--line); }
.light .town small { color: var(--ink-soft); }
.light .town .ic { color: var(--moss); }

/* FAQ */
.faq-grid { display: grid; gap: 32px; }
@media (min-width: 1000px) { .faq-grid { grid-template-columns: .8fr 1.2fr; gap: 64px; } .faq-grid .sec-head { position: sticky; top: calc(var(--head-h) + 32px); align-self: start; } }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; min-height: 64px;
  font-family: var(--display); font-stretch: 88%; font-weight: 700; font-size: 1.1875rem; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--stone) url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 6v12M6 12h12%22 fill=%22none%22 stroke=%22%23141B2D%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/svg%3E') center / 16px no-repeat; transition: rotate .2s ease; }
.section-stone .faq summary::after { background-color: var(--white); }
.faq details[open] summary::after { rotate: 45deg; }
.faq .a { padding: 0 48px 24px 0; color: var(--ink-soft); }
@media (max-width: 559.98px) { .faq .a { padding-right: 0; } }

/* enquiry */
.enquiry-grid { display: grid; gap: 48px; }
@media (min-width: 1000px) { .enquiry-grid { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; } }
.contact-list { list-style: none; display: grid; gap: 12px; margin-top: 32px; }
.contact-list a { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 12px 20px; border-radius: var(--r); background: var(--navy-2); border: 1px solid var(--navy-line); text-decoration: none; color: var(--white); transition: border-color .15s ease, scale .14s ease; }
.contact-list .ic { color: var(--green); width: 22px; height: 22px; }
.contact-list span { display: grid; line-height: 1.3; min-width: 0; }
.contact-list b { font-family: var(--display); font-stretch: 85%; font-size: 1.125rem; overflow-wrap: anywhere; }
.contact-list small { color: var(--mist); font-size: .875rem; }
@media (hover: hover) { .contact-list a:hover { border-color: var(--green); } }
.form { background: var(--white); color: var(--ink); border-radius: var(--r-xl); padding: 28px 20px; box-shadow: 0 24px 64px rgba(0, 0, 0, .25); }
@media (min-width: 768px) { .form { padding: 40px; } }
.form h3 { font-size: 1.625rem; margin-bottom: 8px; }
.form-intro { color: var(--ink-soft); margin-bottom: 24px; }
.section-deep .form p, .section-dark .form p { color: var(--ink-soft); }
.jobs { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.jobs legend, .field label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: 8px; padding: 0; }
.job-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .job-list { grid-template-columns: repeat(3, 1fr); } }
.job-list input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.job-list label { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 8px 12px; border-radius: var(--r); border: 1.5px solid var(--line); background: var(--stone);
  font-weight: 600; font-size: .9375rem; line-height: 1.25; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, scale .14s ease; }
.job-list input:checked + label { border-color: var(--navy); background: var(--navy); color: var(--white); }
.job-list input:focus-visible + label { outline: 3px solid var(--green); outline-offset: 2px; }
.fields { display: grid; gap: 16px; }
@media (min-width: 560px) { .fields { grid-template-columns: 1fr 1fr; } .field.full { grid-column: 1 / -1; } }
.field input, .field textarea { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: var(--r); border: 1.5px solid #CFCBC0; background: var(--white); font-size: 1rem; line-height: 1.4; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--navy); outline: 3px solid rgba(141, 198, 63, .5); outline-offset: 0; }
.opt { font-weight: 400; color: var(--ink-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { margin-top: 24px; }
.form-note { margin-top: 16px; font-size: .9375rem; color: var(--ink-soft); }
.form-small { margin-top: 16px; font-size: .875rem; color: var(--ink-soft); }
.form-status { margin-top: 16px; padding: 16px; border-radius: var(--r); background: var(--stone); font-size: .9375rem; }
.cf-turnstile { margin-top: 16px; min-height: 0; }

/* inner page hero */
.page-hero { background: var(--navy); color: var(--white); overflow: clip; }
.page-hero .ph-grid { display: grid; gap: 40px; padding-block: clamp(40px, 6vw, 80px); }
@media (min-width: 1000px) { .page-hero.has-photo .ph-grid { grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; } }
.page-hero h1 { font-size: clamp(2.375rem, 5vw, 4rem); }
.page-hero .lede { margin-bottom: 0; }
.ph-photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; background: var(--navy-2); }
@media (min-width: 1000px) { .ph-photo { aspect-ratio: 4 / 3; } }
.ph-photo img { width: 100%; height: 100%; object-fit: cover; }
.crumbs { margin-bottom: 24px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .875rem; color: var(--mist); }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--lead-2); }
.crumbs a { color: var(--mist); text-decoration: none; display: inline-block; padding: 4px 0; }
@media (hover: hover) { .crumbs a:hover { color: var(--white); text-decoration: underline; } }
.crumbs [aria-current] { color: var(--white); padding: 4px 0; }
.ph-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; color: var(--mist); font-size: .9375rem; }
.ph-facts li { display: flex; align-items: center; gap: 8px; }
.ph-facts .ic { color: var(--green); width: 18px; height: 18px; }

/* quick answer */
.qa { background: var(--stone); border-radius: var(--r-xl); padding: 28px 20px; display: grid; gap: 24px; }
@media (min-width: 768px) { .qa { padding: 40px; } }
@media (min-width: 1000px) { .qa { grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: start; } }
.qa h2 { font-size: clamp(1.625rem, 2.6vw, 2.125rem); margin-bottom: 12px; }
.qa p { color: var(--ink-soft); font-size: 1.0625rem; max-width: 64ch; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.facts div { background: var(--white); border-radius: var(--r); padding: 16px; min-width: 0; }
.facts dt { font-family: var(--display); font-stretch: 85%; font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.facts dd { margin: 4px 0 0; font-family: var(--display); font-stretch: 85%; font-weight: 700; font-size: 1.125rem; line-height: 1.25; color: var(--navy); overflow-wrap: anywhere; }

/* prose with a side card */
.prose-grid { display: grid; gap: 48px; }
@media (min-width: 1000px) { .prose-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; } }
.prose { max-width: 68ch; min-width: 0; }
.prose h2 { font-size: clamp(1.75rem, 2.8vw, 2.25rem); margin-top: 56px; }
.prose > h2:first-child, .prose > .label + h2 { margin-top: 0; }
.prose h3 { margin-top: 32px; }
.prose p, .prose li { color: var(--ink-soft); }
.prose strong { color: var(--ink); }
.prose a { color: var(--moss); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 24px; display: grid; gap: 8px; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 24px; }
.prose ul li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.prose-narrow { max-width: 72ch; }
.aside { display: grid; gap: 16px; background: var(--navy); color: var(--white); border-radius: var(--r-xl); padding: 28px 24px; }
@media (min-width: 1000px) { .aside { position: sticky; top: calc(var(--head-h) + 24px); } }
.aside h2 { font-size: 1.625rem; margin: 0; }
.aside p { color: var(--mist); font-size: 1rem; margin: 0; }
.aside-tel { font-family: var(--display); font-stretch: 85%; font-weight: 800; font-size: 1.75rem; color: var(--white); text-decoration: none; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; }
.aside-tel .ic { color: var(--green); width: 24px; height: 24px; }
.aside .btn { width: 100%; }
.aside-more { border-top: 1px solid var(--navy-line); padding-top: 16px; margin-top: 8px; }
.also-list { list-style: none; display: grid; }
.also-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; color: var(--mist); text-decoration: none; border-bottom: 1px solid var(--navy-line); }
.also-list li:last-child a { border-bottom: 0; }
.also-list .ic { color: var(--green); width: 18px; height: 18px; }
@media (hover: hover) { .also-list a:hover { color: var(--white); } }

/* gallery */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filters button { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); cursor: pointer; font-weight: 600; font-size: .9375rem; transition: scale .14s ease, background-color .15s ease; }
.filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.gal { list-style: none; display: grid; gap: 20px; }
@media (min-width: 640px) { .gal { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1000px) { .gal { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.gal-item[hidden] { display: none; }
.gal .craft figcaption { border-top-color: var(--line); color: var(--ink-soft); }
.gal .craft figcaption b { color: var(--moss); }

/* cta band */
.band { position: relative; isolation: isolate; color: var(--white); background: var(--navy-deep); overflow: clip; }
.band-media { position: absolute; inset: 0; z-index: -2; }
.band-media picture, .band-media img { width: 100%; height: 100%; object-fit: cover; }
.band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 20, 34, .94) 0%, rgba(14, 20, 34, .8) 50%, rgba(14, 20, 34, .55) 100%); }
.band-inner { padding-block: clamp(72px, 10vw, 128px); max-width: calc(760px + var(--side) * 2); margin-left: max(0px, calc((100% - var(--max) - var(--side) * 2) / 2)); }
.band h2 { margin-bottom: 16px; }
.band p { color: #DCE0E8; font-size: 1.125rem; max-width: 56ch; }

/* accreditations: the real member logos, large enough to read */
.accred { list-style: none; display: grid; gap: 16px; }
@media (min-width: 900px) { .accred { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.accred li { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
@media (min-width: 900px) { .accred li { grid-template-columns: 1fr; gap: 24px; padding: 32px; align-content: start; } }
.accred .badge { width: 88px; height: 88px; box-shadow: 0 0 0 1px var(--line); }
.accred .badge.badge-award { width: auto; height: 88px; box-shadow: none; justify-self: start; }
@media (min-width: 900px) { .accred .badge { width: 120px; height: 120px; } .accred .badge.badge-award { width: auto; height: 120px; } }
.accred-tag { font-family: var(--display); font-stretch: 85%; font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--moss); margin: 0 0 4px; }
.accred h3 { font-size: 1.375rem; margin: 0 0 8px; }
.accred li p:last-child { color: var(--ink-soft); font-size: 1rem; margin: 0; }
@media (max-width: 479px) { .accred li { grid-template-columns: 1fr; } }

/* the same logos, small, in the navy aside on service and town pages */
.aside-creds { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-top: 1px solid var(--navy-line); padding-top: 16px; margin-top: 8px; }
.aside-creds .badge { width: 52px; height: 52px; }
.aside-creds .badge.badge-award { width: auto; height: 52px; }
.aside .aside-creds p { flex-basis: 100%; font-size: .875rem; }

/* villages under the town links on the areas page */
.villages { margin-top: 40px; max-width: 760px; }
.villages h3 { font-size: 1.25rem; margin: 0 0 8px; color: var(--white); }
.team { list-style: none; display: grid; gap: 16px; }
@media (min-width: 640px) { .team { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.team li { background: var(--stone); border-radius: var(--r-lg); padding: 24px; }
.team b { display: block; font-family: var(--display); font-stretch: 85%; font-size: 1.375rem; }
.team span { color: var(--ink-soft); }

/* footer */
.site-foot { background: var(--navy-deep); color: var(--mist); padding-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--navy-line); font-size: .9375rem; }
.foot-grid { display: grid; gap: 40px; padding-bottom: 48px; }
@media (min-width: 640px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .foot-grid { grid-template-columns: 1.2fr .95fr 1fr .9fr 1.3fr; gap: 32px; } }
.foot-brand img.foot-logo { height: 56px; width: auto; margin-bottom: 24px; }
.foot-brand p { color: var(--mist); max-width: 34ch; }
.foot-badges { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.foot-badges .badge { width: 56px; height: 56px; }
.foot-badges .badge.badge-award { width: auto; }
.foot-h { font-family: var(--display); font-stretch: 85%; font-weight: 700; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--white); margin-bottom: 12px; }
.foot-h-gap { margin-top: 32px; }
.site-foot ul { list-style: none; display: grid; gap: 0; }
.site-foot li a { display: inline-flex; align-items: center; min-height: 40px; color: var(--mist); text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) { .site-foot li a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; } }
.legal { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-block: 24px 32px; border-top: 1px solid var(--navy-line); font-size: .8125rem; color: var(--lead-2); }
.legal p { margin: 0; color: var(--lead-2); }
.legal a { color: var(--mist); }

/* ---------- motion ---------- */
:root { --ease: cubic-bezier(.22, 1, .36, 1); --scribe: cubic-bezier(.65, 0, .35, 1); color-scheme: light; }
html { background: var(--navy-deep); }   /* the space around the page, so nothing ever flashes white */
/* where the browser supports it, it holds each page until the next one is ready (no blank frame between pages) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
.intro, .curtain { display: none; }

/* Both screens are put in place before the first paint (boot.js) but only start moving once the page has been
   drawn (the "go" class), so they are always seen from the first frame. Any touch, scroll, click or key ends
   either at once. Nothing is stored on the visitor's device.
   Fresh visit: the Mionlach logo, roof first and then the name, then the screen fades to the page.
   Between pages: navy fades in while the shamrock Damien scribes into his lead is drawn in the middle of the
   screen; the next page opens with the shamrock in exactly the same place and the navy fades away. Nothing glides. */
html.play-intro .intro { display: block; position: fixed; z-index: 300; inset: 0; pointer-events: none; background: var(--navy-deep); }
.intro-inner { position: absolute; inset: 0; display: grid; place-items: center; }
.intro-logo { position: relative; width: min(320px, 72vw); aspect-ratio: 600 / 234; }
.intro-logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-logo .il-roof { clip-path: inset(0 0 50% 0); }
.intro-logo .il-name { clip-path: inset(50% 0 0 0); }
html.play-intro .intro-logo img { opacity: 0; }
html.play-intro .intro-logo .il-roof { transform: translateY(18%); }
html.play-intro .intro-logo .il-name { transform: translateY(10%); }
html.play-intro.go .intro { animation: mi-out .6s ease 1.65s forwards; }
html.play-intro.go .intro-logo img { animation: mi-rise .9s var(--ease) forwards; }
html.play-intro.go .intro-logo .il-roof { animation-delay: .1s; }
html.play-intro.go .intro-logo .il-name { animation-delay: .45s; }

html.leaving .curtain, html.internal .curtain { display: block; position: fixed; z-index: 290; inset: 0; pointer-events: none; background: var(--navy-deep); }
.curtain-inner { position: absolute; inset: 0; display: grid; place-items: center; }
.curtain-clover { width: 96px; height: 96px; }
html.leaving .curtain { opacity: 0; animation: mi-in .3s ease forwards; }
html.leaving .curtain-clover .cl-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mi-draw .5s var(--scribe) .05s forwards; }
html.leaving .curtain-clover .cl-fill { opacity: 0; animation: mi-tint .3s ease .25s forwards; }
html.internal.go .curtain { animation: mi-out .45s ease .12s forwards; }

@keyframes mi-draw { to { stroke-dashoffset: 0; } }
@keyframes mi-tint { to { opacity: .14; } }
@keyframes mi-in { to { opacity: 1; } }
@keyframes mi-out { to { opacity: 0; visibility: hidden; } }
@keyframes mi-rise { to { opacity: 1; transform: none; } }
@keyframes mi-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes mi-settle { from { transform: scale(1.06); } to { transform: none; } }

/* the first screen settles in as the intro or the navy fades */
html.go :is(.hero-copy, .ph-copy) > *, html.go .rail-line, html.go .rail li { animation: mi-up .9s var(--ease) both; }
html.play-intro.go .hero-bg img, html.play-intro.go .ph-photo img { animation: mi-settle 2.4s var(--ease) 1.6s both; }
html.internal.go .hero-bg img, html.internal.go .ph-photo img { animation: mi-settle 1.8s var(--ease) .1s both; }
html.play-intro.go :is(.hero-copy, .ph-copy) > :nth-child(1) { animation-delay: 1.85s; }
html.play-intro.go :is(.hero-copy, .ph-copy) > :nth-child(2) { animation-delay: 1.93s; }
html.play-intro.go :is(.hero-copy, .ph-copy) > :nth-child(3) { animation-delay: 2.01s; }
html.play-intro.go :is(.hero-copy, .ph-copy) > :nth-child(4) { animation-delay: 2.09s; }
html.play-intro.go :is(.hero-copy, .ph-copy) > :nth-child(n+5) { animation-delay: 2.17s; }
html.play-intro.go .rail-line { animation-delay: 2.15s; }
html.play-intro.go .rail li:nth-child(1) { animation-delay: 2.21s; } html.play-intro.go .rail li:nth-child(2) { animation-delay: 2.27s; }
html.play-intro.go .rail li:nth-child(3) { animation-delay: 2.33s; } html.play-intro.go .rail li:nth-child(4) { animation-delay: 2.39s; }
html.internal.go :is(.hero-copy, .ph-copy) > :nth-child(1) { animation-delay: .22s; }
html.internal.go :is(.hero-copy, .ph-copy) > :nth-child(2) { animation-delay: .3s; }
html.internal.go :is(.hero-copy, .ph-copy) > :nth-child(3) { animation-delay: .38s; }
html.internal.go :is(.hero-copy, .ph-copy) > :nth-child(4) { animation-delay: .46s; }
html.internal.go :is(.hero-copy, .ph-copy) > :nth-child(n+5) { animation-delay: .54s; }
html.internal.go .rail-line { animation-delay: .5s; }
html.internal.go .rail li:nth-child(1) { animation-delay: .56s; } html.internal.go .rail li:nth-child(2) { animation-delay: .62s; }
html.internal.go .rail li:nth-child(3) { animation-delay: .68s; } html.internal.go .rail li:nth-child(4) { animation-delay: .74s; }

/* phone menu: the panel opens down from the header, the rows follow one after another */
@media (max-width: 1099.98px) {
  .nav { opacity: 1; clip-path: inset(0 0 100% 0); transition: clip-path .4s var(--ease-io), visibility 0s .4s; }
  .menu-open .nav { clip-path: inset(0); transition: clip-path .5s var(--ease-io); }
  .nav ul li, .nav-extra > * { opacity: 0; transform: translateY(16px); transition: opacity .2s ease, transform .2s ease; }
  .menu-open .nav ul li, .menu-open .nav-extra > * { opacity: 1; transform: none; transition: opacity .4s ease, transform .55s var(--ease); }
  .menu-open .nav ul li:nth-child(1) { transition-delay: .1s; } .menu-open .nav ul li:nth-child(2) { transition-delay: .14s; }
  .menu-open .nav ul li:nth-child(3) { transition-delay: .18s; } .menu-open .nav ul li:nth-child(4) { transition-delay: .22s; }
  .menu-open .nav ul li:nth-child(5) { transition-delay: .26s; } .menu-open .nav ul li:nth-child(6) { transition-delay: .3s; }
  .menu-open .nav ul li:nth-child(7) { transition-delay: .34s; }
  .menu-open .nav-extra > :nth-child(1) { transition-delay: .4s; } .menu-open .nav-extra > :nth-child(2) { transition-delay: .45s; }
  .menu-open .nav-extra > :nth-child(3) { transition-delay: .5s; }
  .bars i { transition: transform .35s var(--ease); }
}

/* phone contact bar: slides away while reading down the page, back as soon as the visitor scrolls up */
.mbar { transition: transform .35s var(--ease); }
.mbar.is-hidden { transform: translateY(calc(100% + 8px)); }

/* photos open up as they scroll into view; the label's seam mark draws across */
.js .rv-img { transition: clip-path 1s var(--ease); }
.js .rv-img img { transition: transform 1.3s var(--ease); }
.js .rv-img.is-pending { clip-path: inset(14% 0 0 0); }
.js .rv-img.is-pending img { transform: scale(1.12); }
.label::before { transform-origin: 0 50%; transition: transform .7s var(--ease) .15s; }
.js .rv.is-pending .label::before, .js .label.rv.is-pending::before { transform: scaleX(0); }

/* answers open smoothly where the browser can animate to auto height */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height .35s var(--ease), content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* scroll reveal: below the first screen only, never with reduced motion */
.js .rv.is-pending { opacity: 0; translate: 0 16px; }
.js .rv { transition: opacity .5s ease, translate .5s ease; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; scroll-behavior: auto !important; }
  .intro, .curtain { display: none !important; }
  .js .rv-img.is-pending { clip-path: none; } .js .rv-img.is-pending img { transform: none; }
  .js .rv.is-pending { opacity: 1; translate: none; }
}
@media print { .site-head, .mbar, .preview-bar, .form, .site-foot { display: none; } body { padding: 0; } }

/* "?count=off" note: confirms this device is no longer counted in the visitor numbers */
.count-note { position: fixed; left: 50%; top: 16px; translate: -50% 0; z-index: 300; margin: 0; padding: 12px 16px; border-radius: var(--r); background: var(--navy); color: var(--white); font: 600 .875rem/1.3 var(--body); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); max-width: calc(100vw - 32px); }
.form .ts-box { margin-top: 16px; }
.form .ts-box:empty { display: none; }