/* Genuine Supply 247 — public site.
   Idea: procurement runs on paper. The one loud element is the request-for-quotation slip,
   drawn as the yellow copy of a carbonless form. Everything else stays quiet around it. */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --navy: #062b4d;
  --navy-2: #0f3f6b;
  --ink-2: #47556f;
  --gold: #cc9b35;
  --gold-ink: #7d5a0c;
  --copy: #fff2b8;        /* the yellow sheet of a duplicate form */
  --copy-pink: #f7d2d9;   /* the pink sheet under it */
  --mist: #eef2f7;
  --line: #cdd6e3;
  --paper: #fff;
  --green: #0f7a41;
  --red: #a8201a;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Archivo", "Public Sans", system-ui, sans-serif;
  --wrap: 74rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--body); color: var(--navy); background: var(--paper); overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--navy); text-decoration-thickness: 1.5px; text-underline-offset: .18em; text-decoration-color: var(--gold); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; font-stretch: 88%; line-height: 1.08; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); }
h3 { font-size: 1.3rem; line-height: 1.2; }
p { margin: 0 0 1rem; }
address { font-style: normal; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: 50rem; }
.lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 40rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999rem; top: .5rem; background: var(--paper); padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: .5rem; }
ul.plain { list-style: none; margin: 0; padding: 0; }

/* ------------------------------------------------------------------ buttons */
.btn { display: inline-block; font: 600 1rem/1 var(--body); padding: .85rem 1.15rem; border-radius: 4px; border: 2px solid transparent; text-decoration: none; cursor: pointer; text-align: center; }
.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-navy:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn-gold { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-gold:hover { background: #dcae4e; border-color: #dcae4e; }
.btn-line { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-line:hover { background: rgba(6, 43, 77, .08); }

/* ------------------------------------------------------------------ header */
.site-head { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.logo { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }
.logo img { display: block; height: 3.6rem; width: auto; }
.logo img.logo-mark { height: 2.9rem; }
.logo-type { font: 700 1.2rem/1.05 var(--display); font-stretch: 86%; letter-spacing: -.01em; }
.logo-type small { display: block; font: 500 .74rem/1.3 var(--body); letter-spacing: .01em; color: var(--gold-ink); margin-top: .15rem; }
.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav ul { display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.site-nav li a { text-decoration: none; font-weight: 500; padding: .4rem 0; border-bottom: 3px solid transparent; }
.site-nav li a:hover { border-bottom-color: var(--line); }
.site-nav li a[aria-current] { border-bottom-color: var(--gold); }
.nav-toggle { display: none; font: 600 1rem/1 var(--body); padding: .6rem .9rem; background: none; border: 2px solid var(--navy); border-radius: 4px; color: var(--navy); cursor: pointer; }

/* ------------------------------------------------------------------ hero */
.hero { background: linear-gradient(90deg, var(--paper) 0 56%, var(--navy) 56% 100%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero-copy h1 { margin-bottom: 1.3rem; }
.hero-links { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; margin: 1.6rem 0 0; font-weight: 600; }
.hero-phone { font-family: var(--display); font-stretch: 88%; font-size: 1.35rem; line-height: 1.2; }

/* ------------------------------------------------------------------ the slip */
.hero-slip { position: relative; }
.slip { position: relative; background: var(--copy); color: var(--navy); padding: 2.4rem clamp(1.1rem, 2.5vw, 1.9rem) 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1.25rem; border-radius: 2px; }
/* punched holes along the top edge */
.slip::before { content: ""; position: absolute; inset: .7rem 1.25rem auto; height: .6rem; background: radial-gradient(circle at .3rem .3rem, var(--hole, var(--navy)) .26rem, transparent .29rem) 0 0 / 1.55rem .6rem repeat-x; opacity: .92; }
.hero-slip .slip { transform: rotate(-1.1deg); box-shadow: 9px 9px 0 -1px var(--copy-pink), 17px 17px 0 -2px #fff; }
.slip > * { grid-column: 1 / -1; margin: 0; min-width: 0; }
.slip-head { display: flex; align-items: center; gap: 1rem; padding-bottom: .8rem; margin-bottom: .6rem; border-bottom: 2px solid var(--navy); }
.slip-head img { flex: none; height: 3.4rem; width: auto; }
.slip-head h2 { font-size: 1.45rem; }
.slip-head p { margin: .15rem 0 0; font-size: .82rem; line-height: 1.3; }
.slip .slip-field { grid-column: span 1; padding-top: .55rem; }
.slip .slip-wide { grid-column: 1 / -1; }
.slip label { display: block; font-size: .84rem; font-weight: 600; }
.slip label span { font-weight: 400; color: #5d5a3c; }
.slip input, .slip select, .slip textarea { display: block; width: 100%; font: inherit; color: inherit; background: rgba(255, 255, 255, .45); border: 0; border-bottom: 1.5px solid var(--navy); border-radius: 0; padding: .4rem .45rem; min-height: 2.5rem; }
.slip textarea { resize: vertical; min-height: 4.4rem; line-height: 1.4; }
.slip ::placeholder { color: #6e6a47; opacity: 1; }
.slip input:focus-visible, .slip select:focus-visible, .slip textarea:focus-visible { outline: 3px solid var(--navy); outline-offset: 0; background: #fff; }
.slip [aria-invalid="true"] { border-bottom-color: var(--red); background: #fff; }
.slip-error { display: block; color: var(--red); font-size: .85rem; font-weight: 600; margin-top: .2rem; }
.slip-alert { background: #fff; border-left: 4px solid var(--red); padding: .55rem .75rem; font-weight: 600; margin-top: .4rem; }
.slip-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.slip-note { font-size: .82rem; color: #5d5a3c; margin-top: .7rem; }
.hp { position: absolute; left: -999rem; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .hero-slip .slip { animation: slip-down .7s cubic-bezier(.2, .8, .25, 1) both; }
  @keyframes slip-down {
    from { transform: translateY(-1.4rem) rotate(-3.2deg); opacity: 0; box-shadow: 0 0 0 -1px var(--copy-pink), 0 0 0 -2px #fff; }
    to   { transform: rotate(-1.1deg); opacity: 1; }
  }
}

/* ------------------------------------------------------------------ bands */
.band { padding-block: clamp(3rem, 7vw, 5.5rem); }
.band-tight { padding-block: clamp(2rem, 4.5vw, 3.5rem); }
.band-mist { background: var(--mist); }
.band-navy { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
/* the company emblem, oversized and faint, as a watermark */
.band-navy::after { content: ""; position: absolute; right: -5rem; bottom: -6.5rem; width: 38rem; aspect-ratio: 360 / 197; background: url("../img/logo-mark-light.png") center / contain no-repeat; opacity: .07; pointer-events: none; }
.band-navy > .wrap { position: relative; z-index: 1; }
.band-navy a { color: #fff; }
.band-copy { background: var(--copy); }
.band-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.band > .wrap > h2 { margin-bottom: 2rem; }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.split h2 { margin-bottom: 1.1rem; }

.page-top { background: var(--mist); padding-block: clamp(2.2rem, 5vw, 4rem) clamp(1.8rem, 4vw, 3rem); border-bottom: 1px solid var(--line); }
.page-top h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.5rem); margin-bottom: 1rem; max-width: 22ch; }
.page-top .lede { margin-bottom: 0; }
.crumb { font-size: .95rem; font-weight: 600; margin-bottom: .8rem; }
.crumb a::before { content: "‹ "; }
.jump { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.jump a { display: block; padding: .4rem .85rem; border: 1.5px solid var(--navy); border-radius: 99px; text-decoration: none; font-weight: 500; font-size: .95rem; background: var(--paper); }
.jump a:hover, .jump a[aria-current] { background: var(--navy); color: #fff; }

/* wide photo under the hero, with its caption on a yellow tag like the slip */
.photo-band { position: relative; margin: 0; background: var(--navy); }
.photo-band img { display: block; width: 100%; height: clamp(14rem, 34vw, 29rem); object-fit: cover; }
.photo-band figcaption { position: absolute; left: 0; right: 0; bottom: 0; }
.photo-band figcaption span { display: inline-block; margin-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); background: var(--copy); color: var(--navy); font: 700 clamp(1rem, .9rem + .6vw, 1.35rem)/1.25 var(--display); font-stretch: 88%; padding: .7rem 1.1rem; max-width: calc(100% - 2 * var(--gutter)); }

/* who we supply */
.band-sectors { padding-block: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.band-sectors h2 { font-size: 1.5rem; margin-bottom: 1.4rem; }
.sector-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 1.5rem 2rem; }
.sector-list li { border-top: 3px solid var(--navy); padding-top: .7rem; }
.sector-list strong { display: block; font: 700 1.12rem/1.2 var(--display); font-stretch: 90%; margin-bottom: .3rem; }
.sector-list span { display: block; color: var(--ink-2); font-size: .95rem; line-height: 1.45; }

/* figures */
.band-stats { padding-block: 2.5rem; background: var(--mist); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.5rem 2rem; margin: 0; }
.stats div { display: flex; flex-direction: column-reverse; }
.stats dd { margin: 0; font: 700 clamp(2.4rem, 5vw, 3.4rem)/1 var(--display); font-stretch: 85%; }
.stats dt { color: var(--ink-2); margin-top: .4rem; }

/* services */
.service-rows { list-style: none; margin: 0; padding: 0; border-bottom: 1.5px solid var(--navy); }
.service-rows li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .5rem clamp(1.5rem, 5vw, 4rem); padding: 1.6rem 0; border-top: 1.5px solid var(--navy); }
.service-rows li.has-photo { grid-template-columns: 16rem minmax(0, 1.4fr) minmax(0, 2fr); gap: .5rem clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.row-photo { display: block; }
.row-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.service-rows h3, .service-rows h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); }
.service-rows h3 a, .service-rows h2 a { text-decoration: none; }
.service-rows h3 a:hover, .service-rows h2 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; }
.service-rows p { margin: 0; color: var(--ink-2); max-width: 38rem; }
.service-rows-full p + p { margin-top: .8rem; color: var(--navy); font-weight: 600; }

/* how an order works: a real sequence, so it is numbered */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 2rem; counter-reset: step; }
.steps li { counter-increment: step; border-top: 1.5px solid rgba(255, 255, 255, .35); padding-top: 1rem; position: relative; }
.steps li::before { content: counter(step); display: block; font: 700 3.2rem/1 var(--display); font-stretch: 80%; color: var(--gold); margin-bottom: .6rem; }
.steps h3 { margin-bottom: .45rem; }
.steps p { margin: 0; color: #cfd8e8; font-size: 1rem; }

/* values */
.value-list { margin: 0; border-bottom: 1px solid var(--line); }
.value-list div { padding: 1.15rem 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .3rem 1.5rem; }
.value-list dt { font: 700 1.15rem/1.3 var(--display); font-stretch: 90%; }
.value-list dd { margin: 0; color: var(--ink-2); }

/* testimonials */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 2rem; }
.quotes figure { margin: 0; border-left: 4px solid var(--gold); padding-left: 1.25rem; }
.quotes blockquote { margin: 0; font-size: 1.12rem; line-height: 1.5; }
.quotes figcaption { font-size: .95rem; }
.quotes figcaption span { display: block; color: var(--ink-2); }

/* questions */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 2.2rem 1rem 0; font-weight: 600; font-size: 1.08rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: .7rem; font: 400 1.6rem/1 var(--display); color: var(--gold-ink); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-2); max-width: 40rem; }

/* blog lists */
.post-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 2rem clamp(1.5rem, 4vw, 3rem); }
.post-list li { border-top: 3px solid var(--navy); padding-top: .9rem; max-width: 38rem; }
.post-list time, .post-meta { display: block; font-size: .9rem; color: var(--ink-2); margin-bottom: .5rem; }
.post-list h3, .post-list h2 { font-size: 1.4rem; line-height: 1.15; margin-bottom: .55rem; }
.post-list h3 a, .post-list h2 a { text-decoration: none; }
.post-list h3 a:hover, .post-list h2 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; }
.post-list p { color: var(--ink-2); margin: 0; }
.post-list-full h2 { font-size: 1.6rem; }
.post-thumb { display: block; }
.post-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: .9rem; }
.post-meta { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; }
.post-meta > * + *::before { content: ""; }
.page-top .post-meta { margin: 1.2rem 0 0; font-size: .95rem; }
.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); font-weight: 600; }
.pager span { color: var(--ink-2); font-weight: 400; margin-inline: auto; }

/* closing call to action, on the yellow sheet */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 5rem); align-items: center; }
.cta h2 { margin-bottom: .8rem; }
.cta p { margin: 0; max-width: 32rem; }
.cta-ways { list-style: none; margin: 0; padding: 0; border-bottom: 1.5px solid var(--navy); }
.cta-ways li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding: .8rem 0; border-top: 1.5px solid var(--navy); }
.cta-ways span { font-size: .95rem; }
.cta-ways a { font: 700 clamp(1.15rem, 1rem + .8vw, 1.5rem)/1.2 var(--display); font-stretch: 88%; text-decoration-color: var(--navy); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ inner pages */
.with-aside { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.aside { border-top: 3px solid var(--navy); padding-top: .9rem; position: sticky; top: 6rem; }
.aside-logo { display: block; width: 100%; max-width: 15rem; height: auto; margin: .4rem 0 1.4rem; }
.notfound-mark { display: block; width: 9rem; height: auto; margin-bottom: 1.5rem; }
.aside h2 { font-size: 1.15rem; margin-bottom: .8rem; }
.aside li { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.aside p { margin-top: 1rem; }

.prose { max-width: 44rem; font-size: 1.1rem; line-height: 1.7; overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 1.75rem; margin: 2.4rem 0 .8rem; }
.prose h3 { font-size: 1.3rem; margin: 1.8rem 0 .6rem; }
.prose h4 { font: 700 1.1rem/1.3 var(--body); margin: 1.5rem 0 .4rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.15rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .45rem; }
.prose li::marker { color: var(--gold-ink); font-weight: 700; }
.prose blockquote { margin: 1.6rem 0; padding: .2rem 0 .2rem 1.25rem; border-left: 4px solid var(--gold); font-size: 1.2rem; line-height: 1.5; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose img { display: block; margin: 1.8rem 0; }
.prose .lead-image { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 0; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.5rem 0; font-size: 1rem; }
.prose th, .prose td { min-width: 7rem; }
.prose th, .prose td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { border-bottom: 2px solid var(--navy); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* catalogue: laid out like a schedule of items */
.cat-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 1; object-fit: cover; margin-bottom: 1.5rem; }
.cat-head { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .5rem clamp(1.5rem, 5vw, 4rem); align-items: end; margin-bottom: 1.2rem; }
.cat-head p { margin: 0; color: var(--ink-2); }
.schedule { list-style: none; margin: 0; padding: 0; border-bottom: 1.5px solid var(--navy); }
.schedule li { display: grid; grid-template-columns: minmax(0, 1fr) 11rem 9rem; gap: .4rem 1.5rem; align-items: start; padding: 1.1rem 0; border-top: 1px solid var(--line); }
.schedule li:first-child { border-top: 1.5px solid var(--navy); }
.schedule li:has(> img) { grid-template-columns: 6rem minmax(0, 1fr) 11rem 9rem; }
.schedule img { width: 6rem; aspect-ratio: 1; object-fit: cover; border-radius: 2px; background: var(--mist); }
.schedule h3 { font-size: 1.2rem; margin-bottom: .25rem; }
.schedule p { margin: 0; }
.schedule-item p { color: var(--ink-2); max-width: 36rem; font-size: 1rem; }
.schedule-price { font-weight: 600; }
.schedule-act { text-align: right; font-weight: 600; }

/* team */
.team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 2rem; }
.team img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: .8rem; display: block; background: var(--mist); }
.team h3 { font-size: 1.2rem; }
.team-role { color: var(--gold-ink); font-weight: 600; margin: .15rem 0 .5rem; }
.team p { color: var(--ink-2); font-size: .98rem; }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact-ways dl { margin: 0 0 1.5rem; border-bottom: 1.5px solid var(--navy); }
.contact-ways dt { border-top: 1.5px solid var(--navy); padding-top: .7rem; font-size: .95rem; color: var(--ink-2); }
.contact-ways dd { margin: 0 0 .9rem; font: 700 1.3rem/1.3 var(--display); font-stretch: 90%; overflow-wrap: anywhere; }
.contact-ways dd address { font: 400 1.0625rem/1.5 var(--body); }
.map { aspect-ratio: 4 / 3; background: var(--mist); margin-bottom: .6rem; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-grid .slip { box-shadow: 9px 9px 0 -1px var(--copy-pink), 17px 17px 0 -2px var(--mist); --hole: var(--paper); margin-right: 17px; }
.contact-grid .slip::before { opacity: 1; }
.sent { background: var(--copy); padding: 2rem; border-left: 6px solid var(--green); }
.sent h2 { margin-bottom: .8rem; }

/* ------------------------------------------------------------------ dental clinic (sister business)
   Same bones as the rest of the site, with its own teal so it reads as a different business.
   The signature here is the clock: a 24-hour clinic is open whatever the time says. */
:root { --teal: #0b7a70; --teal-dark: #085e57; --mint: #e5f4f0; }
.btn-teal { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-teal:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.band-mint { background: var(--mint); }
.section-dental a { text-decoration-color: var(--teal); }
.section-dental .site-nav li a[aria-current] { border-bottom-color: var(--teal); }

.dental-hero { background: var(--mint); }
.dental-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); }
.dental-logo { display: block; height: 4.5rem; width: auto; margin-bottom: 1.4rem; }
.dental-hero h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem); margin-bottom: .8rem; }
.dental-tagline { font: 700 clamp(1.2rem, 1rem + .9vw, 1.6rem)/1.2 var(--display); font-stretch: 88%; color: var(--teal-dark); margin-bottom: 1rem; }
.dental-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; margin: 1.6rem 0 0; }
.dental-phone { font: 700 1.3rem/1.2 var(--display); font-stretch: 88%; }

.dental-visual { position: relative; }
.dental-visual img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.open-now { position: absolute; left: -1.25rem; bottom: -1.25rem; margin: 0; background: #fff; border-radius: 10px; padding: 1rem 1.25rem 1rem 1.1rem; display: grid; grid-template-columns: auto auto; column-gap: .7rem; align-items: center; box-shadow: 0 10px 30px rgba(3, 22, 40, .18); max-width: 19rem; }
.open-now strong { font: 700 clamp(2.6rem, 2rem + 2.4vw, 3.8rem)/1 var(--display); font-stretch: 82%; font-variant-numeric: tabular-nums; grid-column: 2; }
.open-now > span:last-child { grid-column: 1 / -1; margin-top: .35rem; font-size: .98rem; color: var(--ink-2); }
.open-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; background: #17a35b; box-shadow: 0 0 0 .3rem rgba(23, 163, 91, .2); flex: none; }
.dental-visual.no-photo .open-now { position: static; max-width: none; padding: 2rem; box-shadow: none; border: 1.5px solid var(--teal); }
.dental-visual.no-photo .open-now strong { font-size: clamp(4rem, 3rem + 6vw, 7.5rem); }
@media (prefers-reduced-motion: no-preference) {
  .open-dot { animation: open-pulse 2.4s ease-out infinite; }
  @keyframes open-pulse { 0% { box-shadow: 0 0 0 0 rgba(23, 163, 91, .45); } 100% { box-shadow: 0 0 0 .75rem rgba(23, 163, 91, 0); } }
}

.treatments { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 2.5rem); }
.treatments li { border-top: 3px solid var(--teal); padding-top: .9rem; }
.treatments.with-photos { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
@media (min-width: 62em) { .treatments.with-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.treatments.with-photos li { border-top: 0; padding-top: 0; }
.treatments img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; margin-bottom: .9rem; }
.treatments.with-photos li:not(:has(img)) { border-top: 3px solid var(--teal); padding-top: .9rem; }
.treatments h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.treatments p { margin: 0; color: var(--ink-2); font-size: 1rem; }

.dentist { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.dentist.no-photo { grid-template-columns: 1fr; max-width: 46rem; }
.dentist-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
.dentist h2 { margin-bottom: 1rem; }
.dentist-name { font: 700 1.5rem/1.2 var(--display); font-stretch: 88%; margin-bottom: .2rem; }
.dentist-quals { color: var(--teal-dark); font-weight: 600; }

.clinic-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem; }
.clinic-photos figure { margin: 0; }
.clinic-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.clinic-photos figcaption { font-size: .92rem; color: var(--ink-2); margin-top: .45rem; }

.band-visit h2 { font-size: 1.6rem; margin-bottom: 1.2rem; }
.contact-ways dd .directions { font: 400 1rem/1.5 var(--body); color: var(--ink-2); margin: .3rem 0 0; }
.section-dental .contact-ways dl, .section-dental .contact-ways dt { border-color: var(--teal); }

/* the clinic's articles */
.section-dental .page-top { background: var(--mint); border-bottom: 0; }
.section-dental .post-list li { border-top-color: var(--teal); }
.section-dental .post-list h3 a:hover, .section-dental .post-list h2 a:hover { text-decoration-color: var(--teal); }
.section-dental .post-thumb img { border-radius: 8px; }
.section-dental .prose .lead-image { border-radius: 10px; }
.section-dental .prose li::marker { color: var(--teal-dark); }
.section-dental .prose blockquote { border-left-color: var(--teal); }
.section-dental .band-mist { background: var(--paper); border-top: 1px solid var(--line); }
.health-note { margin-top: 2.4rem; padding: 1rem 1.2rem; background: var(--mint); border-left: 4px solid var(--teal); border-radius: 0 8px 8px 0; font-size: 1rem; line-height: 1.55; }
.dental-cta .cta-ways, .dental-cta .cta-ways li { border-color: var(--teal); }
.dental-cta .cta-ways a { text-decoration-color: var(--teal); }
.dental-cta .dental-actions { margin-top: 1.4rem; }

/* the appointment card: like the card a dental receptionist hands you */
.appt-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1.5px var(--teal), 0 14px 36px rgba(3, 22, 40, .12); }
.appt-head { background: var(--teal); color: #fff; padding: 1.1rem clamp(1.1rem, 2.5vw, 1.75rem); }
.appt-head h2 { font-size: 1.45rem; }
.appt-head p { margin: .2rem 0 0; font-size: .9rem; opacity: .92; }
.appt-body { padding: 1.1rem clamp(1.1rem, 2.5vw, 1.75rem) 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.1rem; }
.appt-body > * { grid-column: 1 / -1; margin: 0; min-width: 0; }
.appt-body .appt-field { grid-column: span 1; }
.appt-body .appt-wide { grid-column: 1 / -1; }
.appt-card label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .25rem; }
.appt-card label span { font-weight: 400; color: var(--ink-2); }
.appt-card input, .appt-card select, .appt-card textarea { display: block; width: 100%; font: inherit; color: inherit; background: #fff; border: 1.5px solid #9fb3ae; border-radius: 6px; padding: .55rem .65rem; min-height: 2.75rem; }
.appt-card textarea { resize: vertical; min-height: 5rem; }
.appt-card input:focus-visible, .appt-card select:focus-visible, .appt-card textarea:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.appt-card [aria-invalid="true"] { border-color: var(--red); }
.card-error { display: block; color: var(--red); font-size: .88rem; font-weight: 600; margin-top: .25rem; }
.card-alert { background: #fdf0ef; border-left: 4px solid var(--red); padding: .6rem .8rem; font-weight: 600; }
.appt-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.appt-note { font-size: .88rem; color: var(--ink-2); }
.sent-teal { background: var(--mint); border-left-color: var(--teal); border-radius: 0 10px 10px 0; }

.group-note { border-top: 1px solid var(--line); padding-block: 1.6rem; }
.group-note .wrap { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.group-note img { height: 2.4rem; width: auto; }
.group-note p { margin: 0; }

/* band on the company home page that introduces the clinic */
.dental-kicker { font-weight: 600; color: var(--teal-dark); margin-bottom: .5rem; }
.dental-band h2 { margin-bottom: .9rem; }
.dental-band .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.dental-band-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.open-inline { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; }
.section-dental .wa-float { background: var(--teal); } .section-dental .wa-float:hover { background: var(--teal-dark); }

/* ------------------------------------------------------------------ footer */
.site-foot { background: var(--navy); color: #d6deeb; padding-top: clamp(2.5rem, 5vw, 4rem); font-size: .98rem; }
.site-foot a { color: #fff; text-decoration-color: rgba(255, 255, 255, .35); }
.site-foot a:hover { text-decoration-color: var(--gold); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(1.5rem, 4vw, 3rem); }
.foot-logo { display: block; width: 13.5rem; max-width: 70%; height: auto; margin-bottom: 1.2rem; }
.foot-about p { max-width: 28rem; }
.site-foot h2 { font: 600 1rem/1.3 var(--body); letter-spacing: 0; color: #fff; margin-bottom: .7rem; }
.site-foot li { margin-bottom: .4rem; overflow-wrap: anywhere; }
.site-foot address { margin-bottom: .7rem; }
.foot-base { margin-top: 2.5rem; padding-bottom: 5rem; font-size: .9rem; }
.foot-base p { margin: 0; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .18); }

/* floating WhatsApp link */
.wa-float { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; display: inline-flex; align-items: center; gap: .5rem; background: var(--green); color: #fff; text-decoration: none; font-weight: 600; padding: .75rem 1.05rem; border-radius: 99px; box-shadow: 0 6px 18px rgba(3, 22, 40, .28); }
.wa-float:hover { background: #0b6535; }

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 62rem) {
  .dental-hero-grid, .dentist, .dental-band .split { grid-template-columns: 1fr; }
  .dental-hero-grid { padding-bottom: 3.5rem; }
  .open-now { left: .75rem; bottom: -1.25rem; }
  .dentist-photo { max-width: 18rem; }
  .service-rows li.has-photo { grid-template-columns: 12rem minmax(0, 1fr); }
  .service-rows li.has-photo .row-photo { grid-row: span 2; }
  .hero { background: var(--paper); }
  .hero-grid { grid-template-columns: 1fr; padding-bottom: 0; gap: 2.2rem; }
  .hero-slip { background: var(--navy); margin-inline: calc(var(--gutter) * -1); padding: 2.2rem calc(var(--gutter) + 14px) 3.2rem calc(var(--gutter) + 4px); }
  .hero-slip .slip { max-width: 38rem; }
  .split, .cta, .with-aside, .contact-grid, .cat-head { grid-template-columns: 1fr; }
  .aside { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-about { grid-column: 1 / -1; }
}
@media (max-width: 66rem) {
  .nav-toggle { display: block; }
  .site-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); padding: .5rem var(--gutter) 1.2rem; box-shadow: 0 14px 24px rgba(3, 22, 40, .12); }
  .js .site-nav:not(.open) { display: none; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .site-nav li a[aria-current] { border-bottom-color: var(--gold); }
  .site-nav .btn { margin-top: 1rem; }
  html:not(.js) .site-head { position: static; }
  html:not(.js) .site-nav { position: static; box-shadow: none; padding-inline: 0; }
  html:not(.js) .head-row { flex-wrap: wrap; }
  html:not(.js) .nav-toggle { display: none; }
}
@media (max-width: 44rem) {
  .service-rows li, .service-rows li.has-photo, .value-list div { grid-template-columns: 1fr; }
  .row-photo img { aspect-ratio: 16 / 9; margin-bottom: .5rem; }
  .cat-photo img { aspect-ratio: 5 / 2; }
  .slip-head img { height: 2.8rem; }
  .band-navy::after { width: 24rem; right: -4rem; bottom: -4rem; }
  .schedule li, .schedule li:has(> img) { grid-template-columns: 1fr auto; }
  .schedule li > img { grid-column: 1 / -1; }
  .schedule-item { grid-column: 1 / -1; }
  .schedule-act { text-align: right; }
  .slip { grid-template-columns: 1fr; }
  .slip .slip-field { grid-column: 1 / -1; }
  .hero-slip .slip { transform: rotate(-.6deg); }
  .logo-type { font-size: 1.05rem; }
  .logo img.logo-mark { height: 2.5rem; }
  .wa-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wa-float { padding: .85rem; }
}
@media (max-width: 30rem) {
  .appt-body { grid-template-columns: 1fr; }
  .appt-body .appt-field { grid-column: 1 / -1; }
  .appt-actions .btn { width: 100%; }
  .foot-grid { grid-template-columns: 1fr; }
  .slip-actions .btn { width: 100%; }
}

@media print {
  .site-head, .wa-float, .site-foot, .band-copy, .hero-slip { display: none; }
  body { font-size: 11pt; }
}