/*
Theme Name: D3
Theme URI: https://d3solutions.gr
Author: D3 Solutions
Description: Custom theme for d3solutions.gr. Hairline-ruled grid on warm paper, one accent.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: d3
*/

/* ==========================================================================
   Everything below is ported verbatim from the approved mockups in /_design/.
   Do not restyle. Tokens live in :root and nothing else hardcodes a value.
   ========================================================================== */

/* ---------- fonts (self-hosted, greek + latin only) ----------
   File names carry the first 8 hex of the file's md5 (cache busting: a replaced font
   gets a new name). Renaming means updating the preload list in functions.php too. */
@font-face{
  font-family:"Commissioner";font-style:normal;font-display:swap;font-weight:100 900;
  src:url("fonts/commissioner-greek-wght-normal.3cd50632.woff2") format("woff2");
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face{
  font-family:"Commissioner";font-style:normal;font-display:swap;font-weight:100 900;
  src:url("fonts/commissioner-latin-wght-normal.8c4ddafb.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Source Code Pro";font-style:normal;font-display:swap;font-weight:200 900;
  src:url("fonts/source-code-pro-greek-wght-normal.45f05bb1.woff2") format("woff2");
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}
@font-face{
  font-family:"Source Code Pro";font-style:normal;font-display:swap;font-weight:200 900;
  src:url("fonts/source-code-pro-latin-wght-normal.a15f5de6.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Layout: hairline-ruled grid on warm paper, opened by one full-bleed ink hero.
   Concentric rings (the logo's own geometry, in motion) are the only non-typographic motif. */
:root{
  --paper:#F7F7F6;
  --paper-2:#EFEFEE;
  --ink:#1C1C1E;
  --ink-2:#333134;
  --gray:#6B6B70;
  --onink:#B8B5AE;
  --onink-label:#88857E; /* muted labels on ink: footer headings, footer bottom line, sub-nav numbers, menu column label */
  --onink-emph:#D4D1CA;  /* emphasised text on ink: footer tagline, footer/sub-nav/menu-foot links */
  --onink-meta:#9B9890;  /* contact line in the menu foot */
  --field-hover:#BDB9B2; /* form field border on hover */
  --placeholder:#B4B0AA; /* logo-placeholder text — ~2:1 on paper, goes when real logos arrive (see BUILD-LOG) */
  --red:#C00015;
  --red-ink:#F54256;     /* the brand red tuned for ink: 4.70:1 on --ink. Text and small marks on ink only — never on paper (3.38:1), never a fill */
  --rule:#DBDAD8;
  --rule-strong:#1C1C1E;
  --f-display:"Commissioner","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Source Code Pro",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(20px,4vw,56px);
  --sect:clamp(58px,8vw,118px);
  --hdr:69px; /* header height = 13px padding × 2 + logo height (42px) + 1px rule. Change the logo height, change this. */
  color-scheme:light;
}
*{box-sizing:border-box}
/* Reserve the scrollbar's space so locking scroll for the menu doesn't shift the layout. */
html{scrollbar-gutter:stable}
/* Anchor targets land below the sticky header (--hdr, plus the notch inset it sits under), not behind it. */
[id]{scroll-margin-top:calc(var(--hdr) + env(safe-area-inset-top,0px) + 12px)}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-display);font-size:17px;line-height:1.6;font-weight:380;-webkit-font-smoothing:antialiased}
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--gut)}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.02;text-wrap:balance}
/* Under user text spacing (WCAG 1.4.12) at 320px a long word breaks, not overflows. No effect at normal spacing. */
h1,.lbl{overflow-wrap:anywhere}
/* Prose: a wrapped block never ends on a single word. Paragraphs (body copy, section-head
   intros, FAQ answers, hero and card text), and list items in FAQ answers and post content.
   Not headings (text-wrap:balance above) and not nav lists. */
p,.faq .ans li,.entry li{text-wrap:pretty}
p{margin:0}
a{color:inherit}
/* Buttons behave like links: the hand cursor, on every button-like control site-wide. Disabled ones say so. */
button,[role="button"],input[type="submit"],input[type="button"],input[type="reset"],
input[type="checkbox"],input[type="radio"],select,summary{cursor:pointer}
:is(button,input,select,textarea,[role="button"]):is(:disabled,[aria-disabled="true"]){cursor:not-allowed}
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px}
/* Red on ink is ~2.6:1, under the 3:1 a focus ring needs. On ink backgrounds the ring is paper. */
.hero :focus-visible,.inv :focus-visible,.proc :focus-visible,footer :focus-visible,.ovl :focus-visible{outline-color:var(--paper)}
.lbl{font-family:var(--f-display);font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.ico{display:block;flex:none;color:var(--ink)}
.ico *{stroke-width:.6}
.logo{display:block;height:42px;width:auto;aspect-ratio:500/136}

/* ---------- header ---------- */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:95;background:var(--paper);border-bottom:1px solid var(--rule)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:13px}
.burger{display:inline-flex;align-items:center;gap:11px;background:none;border:0;
  padding:9px 4px 9px 12px;color:var(--ink);font-family:var(--f-display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.burger i{display:block;width:26px;height:9px;position:relative;flex:none}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--ink);
  transition:background-color .18s ease}
.burger i::before{top:0}.burger i::after{bottom:0}
/* 44×44 tap target without changing the header's height: the hit area extends past the padding. */
.burger{position:relative;min-width:44px}
.burger::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.burger:hover{color:var(--red)}
.burger:hover i::before,.burger:hover i::after{background:var(--red)}
/* Bar nudge and the bars→X change animate only without reduced motion; the open-state X below still wins. */
@media(prefers-reduced-motion:no-preference){
  .burger i::before,.burger i::after{transition:transform .18s ease,background-color .18s ease}
  .burger:hover i::before{transform:translateX(5px)}
  .burger:hover i::after{transform:translateX(-5px)}
}
.logo-rev{display:none}
/* Open menu: the burger becomes the close button — label swaps, bars cross into an X. */
.burger .b-close,.burger[aria-expanded="true"] .b-open{display:none}
.burger[aria-expanded="true"] .b-close{display:inline}
.burger[aria-expanded="true"] i::before{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-3.75px) rotate(-45deg)}
/* Ink header: on the homepage until scrolled (menu.js sets data-stuck), and on every page while the menu
   is open, so header and menu read as one surface. Same height in both states. */
body.home .hdr:not([data-stuck="true"]),
body[data-lock="true"] .hdr{background:var(--ink);border-bottom-color:var(--ink-2)}
body.home .hdr:not([data-stuck="true"]) .burger:not(:hover),
body[data-lock="true"] .hdr .burger:not(:hover){color:var(--paper)}
body.home .hdr:not([data-stuck="true"]) .burger:hover,
body[data-lock="true"] .hdr .burger:hover{color:var(--red-ink)} /* label only on ink; the bars stay --red */
body.home .hdr:not([data-stuck="true"]) .burger:not(:hover) i::before,
body.home .hdr:not([data-stuck="true"]) .burger:not(:hover) i::after,
body[data-lock="true"] .hdr .burger:not(:hover) i::before,
body[data-lock="true"] .hdr .burger:not(:hover) i::after{background:var(--paper)}
body.home .hdr:not([data-stuck="true"]) .logo-pos,
body[data-lock="true"] .hdr .logo-pos{display:none}
body.home .hdr:not([data-stuck="true"]) .logo-rev,
body[data-lock="true"] .hdr .logo-rev{display:block}
/* Red on ink fails 3:1 for a focus ring; paper while the header is ink. */
body.home .hdr:not([data-stuck="true"]) :focus-visible,
body[data-lock="true"] .hdr :focus-visible{outline-color:var(--paper)}
@media(prefers-reduced-motion:no-preference){.hdr{transition:background-color .22s ease,border-color .22s ease}}
.hdr-sentinel{position:absolute;top:var(--hdr);height:1px;width:100%;pointer-events:none}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);border-bottom:0;
  display:flex;align-items:center;min-height:calc(100vh - var(--hdr));min-height:calc(100svh - var(--hdr))}
.hero .wrap{position:relative;z-index:2;width:100%;padding-block:clamp(56px,9vw,112px) clamp(60px,9vw,118px)}
@media(max-width:899px){.hero .wrap{padding-block:clamp(40px,7vw,64px)}}
.hero-grid{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:900px){.hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:center}}
h1{font-size:clamp(2.45rem,6.6vw,5.1rem);letter-spacing:-.035em}
h1 em{font-style:normal;color:var(--red)}
.hero h1 em{color:var(--red-ink)} /* the homepage hero is ink: --red there is 2.63:1 (CLAUDE.md §9) */
.lede{margin-top:clamp(24px,2.6vw,32px);max-width:48ch;color:var(--onink);font-size:clamp(1.02rem,1.25vw,1.17rem)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,3.4vw,42px)}
.btn,.entry .contact-us-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;
  padding:16px 28px;font-size:.95rem;font-weight:600;letter-spacing:-.01em;border:1.5px solid var(--ink);
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.btn-p{background:var(--red);border-color:var(--red);color:#fff}
.btn-s,.entry .contact-us-btn{border-color:var(--ink);background:none;color:var(--ink)}
.btn-s:hover,.entry .contact-us-btn:hover{background:var(--ink);color:var(--paper)}
.btn svg{flex:none}
.hero .btn-p:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.hero .btn-s{border-color:rgba(247,247,246,.45);color:var(--paper)}
.hero .btn-s:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
@media(max-width:519px){.cta-row{gap:10px}.cta-row .btn{flex:1 1 100%}}
.rings{position:absolute;z-index:1;pointer-events:none;
  top:50%;right:-34%;width:118%;max-width:none;transform:translateY(-50%);opacity:.3}
@media(min-width:620px){.rings{right:-18%;width:78%;opacity:.34}}
/* Desktop: right edge of the rings follows the content column's right edge.
   1440px is .wrap's max-width — keep the two in sync. */
@media(min-width:900px){.rings{right:calc(max(0px,(100% - 1440px)/2) + var(--gut));width:min(46%,560px);opacity:1}}
.rings circle{fill:none;transform-box:fill-box;transform-origin:center}
.r-red{stroke:var(--red)}
.r-pale{stroke:rgba(247,247,246,.42)}
/* Mobile hero density. h1 is scoped to .hero so blog titles keep their size. */
@media(max-width:619px){
  .hero h1{font-size:clamp(2.95rem,11.2vw,5.1rem)}
  .hero .lede{font-size:1.09rem;margin-top:26px;max-width:none}
  .hero .cta-row{margin-top:34px}
  .hero .btn{padding:18px 28px}
  .rings{opacity:.34}
}
/* Rings turn into place once on load and stop in 4.2s (under WCAG 2.2.2's 5s); where scroll
   timelines exist, scrolling then adds its own turn on top (visitor-caused, so no pause control).
   Firefox: the entrance only. Keep the entrance under 5s. */
@media(prefers-reduced-motion:no-preference){
  .spin-a{--r:40deg}.spin-b{--r:-57deg}.spin-c{--r:82deg}.spin-d{--r:-110deg}
  .spin-a,.spin-b,.spin-c,.spin-d{animation:settle 4.2s cubic-bezier(.2,.65,.3,1) both}
  @keyframes settle{from{transform:rotate(calc(-1*var(--r)))}}
  @supports(animation-timeline:scroll()){
    .spin-a,.spin-b,.spin-c,.spin-d{animation:settle 4.2s cubic-bezier(.2,.65,.3,1) both,turn linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh;animation-composition:replace,add}
    @keyframes turn{to{transform:rotate(var(--r))}}
  }
}

/* ---------- claims band ---------- */
.claims{border-bottom:1px solid var(--rule);background:var(--paper-2)}
.claims .wrap{padding-block:clamp(36px,4.4vw,58px)}
.cgrid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule)}
.claim{background:var(--paper-2);padding:clamp(20px,2.2vw,28px) 0;display:grid;gap:9px;align-content:start}
@media(min-width:620px){
  .cgrid{grid-template-columns:repeat(2,1fr)}
  .claim{padding:clamp(18px,2vw,24px) clamp(22px,2.4vw,32px)}
  .claim:nth-child(odd){padding-left:0}
  .claim:nth-child(even){padding-right:0}
}
@media(min-width:1040px){
  .cgrid{grid-template-columns:repeat(4,1fr)}
  .claim,.claim:nth-child(odd),.claim:nth-child(even){padding:0 clamp(18px,1.9vw,28px)}
  .claim:first-child{padding-left:0}
  .claim:last-child{padding-right:0}
}
.claim .num{color:var(--red);font-size:.72rem;font-weight:500;letter-spacing:.1em}
.claim h2{font-size:1.1rem;font-weight:650;letter-spacing:-.018em}
.claim p{color:var(--gray);font-size:.93rem;line-height:1.55}

/* ---------- sections ---------- */
section{border-bottom:1px solid var(--rule)}
.pad{padding-block:var(--sect)}
.eyebrow{display:flex;align-items:center;gap:14px;padding-bottom:13px}
/* Commissioner's digits are proportional (no tnum): numbers that sit in front of text get a fixed
   min-width so the text after them doesn't shift between rows. 2.4ch ≥ the widest «0x» with tracking. */
.eyebrow .num{color:var(--red);font-size:clamp(.76rem,.6rem + .5vw,.84rem);font-weight:600;letter-spacing:.1em;min-width:2.4ch}
.eyebrow .lbl{color:var(--ink);font-size:clamp(.76rem,.6rem + .5vw,.84rem);font-weight:600;
  margin-inline-end:-.14em} /* cancels the trailing letter-spacing (.14em on .lbl) browsers add after the last character */
.erule{height:2px;background:var(--red);margin-bottom:clamp(28px,3.4vw,42px);position:relative}
/* Round terminal on the rule's right end, from the logo (every line ends in a round cap).
   8px, chosen against the 2px rule and the eyebrow label; not a global marker size. */
.erule::after{content:"";position:absolute;right:0;top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:var(--red)}
.sect-head{display:grid;grid-template-columns:1fr;gap:16px;padding-bottom:clamp(30px,4vw,48px)}
@media(min-width:860px){.sect-head{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:48px;align-items:start}}
h2{font-size:clamp(1.75rem,3.6vw,2.9rem)}
.sect-head p{color:var(--gray);max-width:58ch}

/* ---------- services ---------- */
.svc{border-top:1px solid var(--rule-strong)}
.svc a{display:grid;grid-template-columns:38px minmax(0,1fr) auto;column-gap:16px;row-gap:5px;align-items:start;
  padding-block:20px;border-bottom:1px solid var(--rule);text-decoration:none;
  transition:background-color .2s ease}
.svc .ico{grid-column:1;grid-row:1/span 3;align-self:center;width:38px;height:38px}
.svc .n{grid-column:2;grid-row:1;color:var(--red);font-size:.73rem;letter-spacing:.08em;font-weight:500;min-width:2.4ch}
.svc h3{grid-column:2;grid-row:2;font-size:clamp(1.12rem,1.85vw,1.5rem);font-weight:640;letter-spacing:-.022em;line-height:1.2}
.svc p{grid-column:2;grid-row:3;color:var(--gray);font-size:.93rem;line-height:1.5}
.svc .go{grid-column:3;grid-row:1/span 3;align-self:center;color:var(--gray);transition:color .2s ease,transform .2s ease}
@media(min-width:760px){
  .svc a{grid-template-columns:auto 46px minmax(0,1.05fr) minmax(0,1.25fr) auto;column-gap:28px;row-gap:0;
    align-items:center;padding-block:clamp(20px,2.3vw,26px)}
  .svc .ico{grid-column:2;grid-row:1;width:46px;height:46px}
  .svc .n{grid-column:1;grid-row:1}
  .svc h3{grid-column:3;grid-row:1}
  .svc p{grid-column:4;grid-row:1}
  .svc .go{grid-column:5;grid-row:1}
  .svc a:hover{background:var(--paper-2)}
}
@media(min-width:760px) and (prefers-reduced-motion:no-preference){
  .svc a{transition:padding-left .2s ease,background-color .2s ease}
  .svc a:hover{padding-left:16px}
}
.svc a:hover .go{color:var(--red)}
/* The arrow rests 5px left and lands flush on hover, so it never leaves the row's hover background. */
.svc .go{transform:none}
@media(prefers-reduced-motion:no-preference){
  .svc .go{transform:translateX(-5px)}
  .svc a:hover .go{transform:translateX(0)}
}
.svc a:hover h3{color:var(--red)}

/* ---------- values ---------- */
.vals{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:620px){.vals{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.vals{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.val{background:var(--paper);padding:clamp(24px,2.6vw,34px);display:grid;gap:11px;align-content:start}
.val h3{font-size:1.18rem;font-weight:650}
.val p{color:var(--gray);font-size:.94rem;line-height:1.55}
.val .bar{width:30px;height:2px;background:var(--red);position:relative}
/* Round terminal, 6px: the bar is 30px long (the eyebrow's 8px would weigh it down). Takes the bar's colour. */
.val .bar::after{content:"";position:absolute;right:0;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:inherit}
.val-red{background:var(--red);color:#fff}
.val-red p{color:rgba(255,255,255,.85)}
.val-red .bar{background:#fff}

/* ---------- plugins ---------- */
.plg{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:780px){.plg{grid-template-columns:repeat(3,1fr)}}
.plg a{background:var(--paper);padding:clamp(24px,2.6vw,32px);display:grid;gap:12px;align-content:start;
  text-decoration:none;transition:background-color .18s ease}
.plg a:hover{background:var(--paper-2)}
.plg h3{font-size:1.1rem;font-weight:650;letter-spacing:-.015em}
.plg p{color:var(--gray);font-size:.92rem;line-height:1.55}
.tag{justify-self:start;border:1px solid var(--rule);padding:4px 10px;font-family:var(--f-display);
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.more{display:inline-flex;align-items:center;gap:9px;color:var(--red);font-size:.88rem;font-weight:600}
/* Arrow strokes end round, like the logo's lines. Not the service icons or the rings. */
.btn svg path,.go svg path,.more svg path,.totop svg path{stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:no-preference){
  .more svg{transition:transform .18s ease}
  .plg a:hover .more svg{transform:translateX(4px)}
}

/* ---------- clients ---------- */
/* Hairlines: each cell's 1px ring fills the 1px gap and the 1px padding; no frame, so a short last row ends in paper. */
.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--paper);padding:1px}
@media(min-width:620px){.logos{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.logos{grid-template-columns:repeat(5,1fr)}}
.logos>*{background:var(--paper);box-shadow:0 0 0 1px var(--rule);aspect-ratio:16/9;display:grid;place-items:center;
  font-family:var(--f-display);font-size:.68rem;letter-spacing:.1em;color:var(--placeholder);text-transform:uppercase}
/* Full colour. Every logo scales by its own bounds to fit one box (72% × 62% of the cell) and
   centres in it: wide logos come out smaller, nothing is distorted. Files are trimmed tight. */
.logos img{width:72%;height:62%;object-fit:contain;display:block}
/* A logo with a link: the grid cells' hover (paper-2) plus a 2px red base line; the focus ring sits
   inside the cell, where the 1px grid gap cannot clip it. */
.logos a{transition:background-color .18s ease,box-shadow .18s ease}
.logos a:hover{background:var(--paper-2);box-shadow:0 0 0 1px var(--rule),inset 0 -2px var(--red)}
.logos a:focus-visible{outline-offset:-5px}

/* ---------- journal ---------- */
.posts{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule-strong)}
@media(min-width:800px){.posts{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--rule)}}
.posts a{background:var(--paper);text-decoration:none;display:grid;gap:12px;align-content:start;
  padding-block:clamp(22px,2.4vw,30px);border-bottom:1px solid var(--rule)}
@media(min-width:800px){.posts a{padding:clamp(26px,2.6vw,34px);border-bottom:0}.posts a:hover{background:var(--paper-2)}}
.posts .lbl{color:var(--red)}
.posts :is(h2,h3){font-size:1.1rem;font-weight:640;letter-spacing:-.018em;line-height:1.3}
.posts a:hover :is(h2,h3){color:var(--red)}
.posts .ex{color:var(--gray);font-size:.92rem;line-height:1.55}

/* ---------- inverted CTA ---------- */
.inv{background:var(--ink);color:var(--paper);border-bottom:0;position:relative;overflow:hidden}
.inv .wrap{padding-block:clamp(66px,9vw,120px);position:relative;z-index:1}
.mesh{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--paper);opacity:.08}
.inv .eyebrow .lbl{color:var(--paper)}
.inv h2{max-width:17ch} /* the section-heading size: a closing CTA is not a page title */
.inv p{color:var(--onink);max-width:46ch;margin-top:22px}
.inv .btn-p:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.inv .btn-s{border-color:rgba(247,247,246,.45);color:var(--paper)}
.inv .btn-s:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--onink);font-size:.92rem}
.fgrid{display:grid;grid-template-columns:1fr;gap:34px;padding-block:clamp(44px,5vw,64px);border-top:2px solid var(--red)}
@media(min-width:720px){.fgrid{grid-template-columns:repeat(2,1fr);gap:40px}}
@media(min-width:1000px){.fgrid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.fgrid h2{margin:0 0 14px;line-height:1.6;font-family:var(--f-display);font-size:.66rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--onink-label)}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fgrid a,.fbot a{text-decoration:none;color:var(--onink-emph)}
.fgrid a:hover,.fbot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fbot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;padding-block:20px;
  border-top:1px solid var(--ink-2);font-family:var(--f-display);font-size:.68rem;letter-spacing:.07em;color:var(--onink-label)}
/* Below 900px the last line clears back-to-top and the cookie control (48px at --gut). */
@media(max-width:899px){.fbot{padding-bottom:calc(var(--gut) + 60px)}}

/* ---------- fullscreen menu ---------- */
.ovl{position:fixed;inset:calc(env(safe-area-inset-top,0px) + var(--hdr)) 0 0;z-index:90;background:var(--ink);color:var(--paper);overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .22s ease,transform .26s cubic-bezier(.25,.8,.3,1),visibility .22s}
.ovl[data-open="true"]{opacity:1;visibility:visible;transform:none}
@media(prefers-reduced-motion:reduce){.ovl{transition:opacity .01s,visibility .01s;transform:none}}
.ovl-grid{display:grid;grid-template-columns:1fr;gap:clamp(34px,4vw,56px);padding-block:clamp(30px,5vw,56px)}
@media(min-width:900px){.ovl-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(48px,6vw,96px)}}
@media(max-width:899px){.ovl-subs{display:none}}
.mnav{list-style:none;margin:0;padding:0;border-top:2px solid var(--red);position:relative}
/* Round terminal on the 2px top rule, 8px like the eyebrow rule: same weight, same full-width role. */
.mnav::before{content:"";position:absolute;right:0;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.mnav li{border-bottom:1px solid var(--ink-2)}
.mnav a{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;text-decoration:none;color:var(--paper);
  padding-block:clamp(13px,1.5vw,18px);font-size:clamp(1.5rem,3.4vw,2.5rem);font-weight:650;letter-spacing:-.03em;
  transition:color .16s ease}
.mnav a:hover{color:var(--red-ink)}
.mnav .n{font-family:var(--f-display);font-size:.68rem;font-weight:500;letter-spacing:.1em;color:var(--red-ink);min-width:2.4ch}
.subs{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink-2)}
.subs li{border-bottom:1px solid var(--ink-2)}
.subs a{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;text-decoration:none;color:var(--onink-emph);
  padding-block:11px;font-size:1rem;transition:color .16s ease}
.subs a:hover{color:var(--paper)}
/* Menu and sub-nav links slide on hover only without reduced motion. */
@media(prefers-reduced-motion:no-preference){
  .mnav a,.subs a{transition:color .16s ease,padding-left .18s ease}
  .mnav a:hover{padding-left:12px}
  .subs a:hover{padding-left:10px}
}
.subs .n{font-family:var(--f-display);font-size:.64rem;color:var(--onink-label);letter-spacing:.08em;min-width:2.4ch}
.ovl-foot{display:flex;flex-wrap:wrap;gap:10px 32px;padding-block:22px;border-top:1px solid var(--ink-2);
  font-family:var(--f-display);font-size:.7rem;letter-spacing:.08em;color:var(--onink-meta)}
.ovl-foot a{color:var(--onink-emph);text-decoration:none}
.ovl-foot a:hover{color:#fff}
/* The open menu never scrolls. The grid takes the height left between the top bar and the foot; each list
   is a size container whose rows are min(natural height, container height ÷ row count), so they keep their
   mockup size when there is room and shrink together when there isn't. Row counts: 7 main, 9 services —
   change them here if the menus change. Browsers without container queries keep the scrolling menu,
   and so does any viewport under 250px tall (only reachable at 300–400% zoom) so zoomed text can grow. */
@supports(container-type:size){
@media(min-height:250px){
  .ovl{overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column}
  .ovl>.wrap{flex:1;min-height:0;width:100%;display:flex;flex-direction:column}
  .ovl-grid{flex:1;min-height:0;grid-template-rows:minmax(0,1fr);padding-block:min(clamp(30px,5vw,56px),max(16px,4dvh))}
  .ovl-grid>nav{display:flex;flex-direction:column;min-height:0}
  @media(max-width:899px){.ovl-grid>.ovl-subs{display:none}}
  .mnav{flex:1;min-height:0;container-type:size;--rows:7;
    --row:min(calc(2 * clamp(13px,1.5vw,18px) + clamp(1.5rem,3.4vw,2.5rem) * 1.6 + 1px),calc(100cqh / var(--rows)))}
  .mnav li{height:var(--row)}
  .mnav a{height:100%;padding-block:0;align-content:center;font-size:min(clamp(1.5rem,3.4vw,2.5rem),calc((var(--row) - 1px) / 1.6))}
  .subs{flex:1;min-height:0;container-type:size;--row:min(calc(22px + 1.6rem + 1px),calc(100cqh / 9))}
  .subs li{height:var(--row)}
  .subs a{height:100%;padding-block:0;align-content:center;font-size:min(1rem,calc((var(--row) - 1px) / 1.6))}
  .ovl-foot{padding-block:clamp(12px,2.6dvh,22px)}
  /* Landscape phones: drop the contact line (it is in the page footer too), main list in two columns. */
  @media(max-height:500px){.ovl-foot{display:none}}
  @media(max-height:500px) and (max-width:899px){
    .mnav{--rows:4;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:clamp(20px,4vw,40px)}
  }
}
}
body[data-lock="true"]{overflow:hidden}
/* The reserved gutter sits outside the fixed overlay; paint it ink so no paper strip shows. */
html:has(body[data-lock="true"]){background:var(--ink)}

/* ---------- service page: breadcrumb + hero ---------- */
.crumb{border-bottom:1px solid var(--rule)}
.crumb .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding-block:12px;
  font-family:var(--f-display);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.crumb a{text-decoration:none;color:var(--gray)}
.crumb a:hover{color:var(--red)}
.crumb span[aria-hidden]{color:var(--red)}
.crumb .cur{color:var(--ink)}
.shero{border-bottom:1px solid var(--rule)}
.shero .wrap{padding-block:clamp(34px,5vw,74px) clamp(40px,5.6vw,80px)}
.shero-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px);align-items:center}
@media(min-width:900px){.shero-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:clamp(40px,5vw,80px)}}
.shero h1{font-size:clamp(2.1rem,5.2vw,4rem)}
.shero .sub{margin-top:clamp(18px,2.2vw,26px);max-width:52ch;color:var(--ink-2);font-size:clamp(1.02rem,1.3vw,1.19rem)}
.shero .btn-p{color:#fff}
.shero .btn-p:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.mark{position:relative;display:grid;place-items:center;width:min(100%,360px);aspect-ratio:1;justify-self:center}
@media(max-width:899px){.mark{width:min(62%,230px);order:-1}}
.mark-rings{position:absolute;inset:0;width:100%;height:100%}
.mark-rings circle{fill:none;transform-box:fill-box;transform-origin:center}
.m-pale{stroke:var(--rule)}
.m-red{stroke:var(--red)}
.mark .ico-lg{position:relative;width:44%;height:auto}
.mark .ico-lg *{stroke-width:.3}

/* ---------- facts strip ---------- */
.facts{background:var(--paper-2);border-bottom:1px solid var(--rule)}
.facts .wrap{padding-block:clamp(26px,3.2vw,40px)}
.fgridx{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule)}
.fact{background:var(--paper-2);padding:clamp(16px,1.8vw,20px) 0;display:grid;gap:6px;align-content:start}
@media(min-width:620px){
  .fgridx{grid-template-columns:repeat(2,1fr)}
  .fact{padding:clamp(14px,1.6vw,18px) clamp(20px,2.2vw,30px)}
  .fact:nth-child(odd){padding-left:0}
  .fact:nth-child(even){padding-right:0}
}
@media(min-width:1040px){
  .fgridx{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .fact,.fact:nth-child(odd),.fact:nth-child(even){padding:0 clamp(18px,1.9vw,28px)}
  .fact:first-child{padding-left:0}
  .fact:last-child{padding-right:0}
}
.fact strong{font-size:1.02rem;font-weight:620;letter-spacing:-.015em;text-wrap:pretty} /* a wrapped value never ends on a single word */

/* ---------- includes ---------- */
.inc{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:680px){.inc{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.inc{grid-template-columns:repeat(3,1fr)}}
.inc>div{background:var(--paper);padding:clamp(22px,2.5vw,32px);display:grid;gap:10px;align-content:start}
.inc .num{color:var(--red);font-size:.72rem;font-weight:500;letter-spacing:.1em}
.inc h3{font-size:1.1rem;font-weight:650;letter-spacing:-.018em}
.inc p{color:var(--gray);font-size:.93rem;line-height:1.55}

/* ---------- process (ink band) ---------- */
.proc{background:var(--ink);color:var(--paper);border-bottom:0}
.proc .wrap{padding-block:var(--sect)}
.proc .eyebrow .lbl{color:var(--paper)}
.proc .eyebrow .num,.inv .eyebrow .num{color:var(--red-ink)} /* --red text on ink fails AA; the .erule stays --red */
.proc .sect-head p{color:var(--onink)}
.steps{display:grid;grid-template-columns:1fr;gap:1px;background:var(--ink-2);border-top:1px solid var(--ink-2)}
@media(min-width:700px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.steps{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
/* Horizontal padding lives in --step-px (per breakpoint); --step-pl is the left padding
   (0 on the cell that starts a row). The rail node's left reads the same --step-pl, so it
   always sits above the number. */
.step{background:var(--ink);padding-block:clamp(22px,2.4vw,28px);--step-px:0px;--step-pl:var(--step-px);
  padding-inline:var(--step-px);padding-left:var(--step-pl);display:grid;gap:10px;align-content:start;position:relative;
  grid-row:span 3;grid-template-rows:subgrid}
/* Each step spans three rows of .steps (number, title, body) and shares them as a subgrid,
   so a title that wraps to two or three lines reserves the same height in every step of
   its row, and the bodies start on one line across the row. Its own gap (10px) replaces
   the band's 1px between those three rows. */
@media(min-width:1100px){.step{padding-block:clamp(24px,2.4vw,30px);--step-px:clamp(16px,1.6vw,22px)}
  .step:first-child{--step-pl:0px}.step:last-child{padding-right:0}}
@media(min-width:700px) and (max-width:1099px){
  .step{--step-px:clamp(20px,2.4vw,32px)}
  .step:nth-child(odd){--step-pl:0px}
  .step:nth-child(even){padding-right:0}
}
/* Rail with nodes: a static diagram on the band's hairlines, not a progress indicator.
   Decorative — the numbers carry the sequence (BUILD-LOG). */
.step::before{content:"";position:absolute;top:-4px;left:var(--step-pl);width:7px;height:7px;background:var(--onink);border-radius:50%}
.step:first-child::before{background:var(--red-ink)}
.step .num{color:var(--red-ink);font-size:.73rem;font-weight:500;letter-spacing:.1em}
.step h3{font-size:1.06rem;font-weight:650;letter-spacing:-.018em}
.step p{color:var(--onink);font-size:.91rem;line-height:1.55}


/* ---------- faq ---------- */
.faq{border-top:1px solid var(--rule-strong)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:16px;align-items:center;padding-block:clamp(18px,2vw,22px);
  font-size:clamp(1.01rem,1.5vw,1.18rem);font-weight:640;letter-spacing:-.018em;line-height:1.3;
  transition:color .16s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary:hover{color:var(--red)}
.faq summary .n{font-family:var(--f-display);color:var(--red);
  font-size:.72rem;font-weight:500;letter-spacing:.08em;min-width:1.2rem} /* fixed in rem so .ans can indent by the same amount */
.faq .pm,.toc-d .pm{position:relative;width:15px;height:15px;flex:none}
.faq .pm::before,.faq .pm::after,.toc-d .pm::before,.toc-d .pm::after{content:"";position:absolute;background:var(--red)}
.faq .pm::before,.toc-d .pm::before{top:7px;left:0;right:0;height:1.6px}
.faq .pm::after,.toc-d .pm::after{left:7px;top:0;bottom:0;width:1.6px}
.faq details[open] .pm::after,.toc-d[open] .pm::after{transform:scaleY(0)}
.faq details[open] summary{color:var(--red)}
/* Open/close: native <details>, height animated where interpolate-size exists (Chrome);
   Safari and Firefox support ::details-content but snap, as before. The drawn +/− eases too. */
@media(prefers-reduced-motion:no-preference){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{
    block-size:0;overflow:hidden;
    transition:block-size .22s ease, content-visibility .22s allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto}
  .faq .pm::before,.faq .pm::after{transition:transform .2s ease}
}
.faq .ans{color:var(--gray);font-size:.97rem;line-height:1.65;max-width:72ch;padding-bottom:clamp(20px,2.2vw,26px);
  padding-left:calc(1.2rem + 16px)} /* = number column (1.2rem) + column-gap (16px), at every width: answers line up with their question */
.faq .ans a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.faq .ans>*+*{margin-top:.8em}
.faq .ans ul,.faq .ans ol{margin:0;padding-left:1.25em}
.faq .ans li+li{margin-top:.35em}
.sect-head div p+p{margin-top:.8em}

/* ---------- contact: hero ---------- */
.chero{border-bottom:1px solid var(--rule)}
.chero .wrap{padding-block:clamp(34px,5vw,70px) clamp(34px,4.6vw,64px)}
.chero h1{font-size:clamp(2.1rem,5.2vw,4rem)}
.chero .sub{margin-top:clamp(18px,2.2vw,26px);max-width:54ch;color:var(--ink-2);font-size:clamp(1.02rem,1.3vw,1.19rem)}
.direct{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--rule)}
@media(min-width:720px){.direct{grid-template-columns:repeat(3,1fr)}}
.direct a,.direct div{background:var(--paper);display:grid;gap:7px;align-content:start;padding:clamp(18px,2.1vw,24px) 0;text-decoration:none}
@media(min-width:720px){
  .direct a,.direct div{padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,30px)}
  .direct>:first-child{padding-left:0}
  .direct>:last-child{padding-right:0}
}
.direct strong{font-size:clamp(1.08rem,1.7vw,1.32rem);font-weight:650;letter-spacing:-.022em}
.direct a:hover strong{color:var(--red)}
.direct small{color:var(--gray);font-size:.88rem}

/* ---------- contact: form ---------- */
.cgridf{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,72px)}
@media(min-width:960px){.cgridf{grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr);gap:clamp(48px,5vw,88px)}
  /* The aside's first red bar sits on the form's .erule: drop it by the eyebrow's height — the .lbl
     line box (.84rem, its maximum from 768px, × body line-height 1.6) plus .eyebrow's 13px padding.
     Side by side only; stacked, the aside follows the form and needs no shift. */
  .cgridf>.aside{margin-top:calc(.84rem * 1.6 + 13px)}}
form{display:grid;gap:clamp(16px,1.9vw,22px)}
.row2{display:grid;grid-template-columns:1fr;gap:clamp(16px,1.9vw,22px)}
@media(min-width:620px){.row2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:7px}
.field label{font-family:var(--f-display);font-size:.68rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink)}
.field .opt{color:var(--gray);letter-spacing:.1em}
.field .req{color:var(--red)}
input,select,textarea{font-family:inherit;font-size:1rem;font-weight:400;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:0;padding:13px 15px;width:100%;
  transition:border-color .16s ease,background-color .16s ease}
textarea{min-height:140px;resize:vertical;line-height:1.55}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:42px}
input:hover,select:hover,textarea:hover{border-color:var(--field-hover)}
input:focus,select:focus,textarea:focus{border-color:var(--rule);background:var(--paper)} /* the :focus-visible ring is the indicator; an invalid field keeps its red border */
.consent{display:grid;gap:12px;align-items:start;
  padding-top:clamp(4px,1vw,8px);color:var(--gray);font-size:.9rem;line-height:1.5}
.consent input{width:19px;height:19px;margin:1px 0 0;accent-color:var(--red);background:var(--paper-2);padding:0}
.consent a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
form .btn{justify-self:start;border:0}
form .btn:hover{background:var(--ink);color:var(--paper)}
.formnote{font-family:var(--f-display);font-size:.66rem;letter-spacing:.09em;color:var(--gray);line-height:1.7}

/* ---------- contact form states (Contact Form 7; its own stylesheet never loads) ---------- */
.wpcf7 .screen-reader-response{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wpcf7 .hidden-fields-container{display:none}
/* CF7 prepends the Turnstile container to the form. In Invisible mode it is 0px tall but still a
   grid item, so it added one row gap above the first fields. Out of flow, it adds nothing. If the
   widget is ever switched from Invisible to a visible mode, this must go: it would cover the fields. */
.wpcf7 form>.wpcf7-turnstile{position:absolute}
.wpcf7 .field{align-content:start}
.wpcf7-form-control-wrap{display:grid;gap:6px;align-content:start}
/* CF7 writes rows="10"; the mockup's field is the theme's 140px minimum. */
.wpcf7 textarea{height:140px}
.wpcf7-not-valid-tip{color:var(--red);font-size:.84rem;line-height:1.4}
.wpcf7-form-control.wpcf7-not-valid{border-color:var(--red)}
.consent .wpcf7-form-control-wrap{display:contents}
.consent .wpcf7-list-item{display:block;margin:0}
/* The consent text sits inside the [acceptance] tag (so CF7/Flamingo record it); CF7 wraps box and text in one label. */
.consent .wpcf7-list-item>label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.consent .wpcf7-not-valid-tip{order:2}
.wpcf7-response-output{margin:0;padding:14px 16px;border:1px solid var(--rule-strong);font-size:.94rem;line-height:1.5}
.wpcf7 form.init .wpcf7-response-output,.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output{display:none}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,.wpcf7 form.aborted .wpcf7-response-output{border-color:var(--red)}
.wpcf7 form.submitting .btn{opacity:.6;pointer-events:none}
/* The response sits above the button, where the visitor who just pressed it is looking (CF7 doesn't scroll to it). */
.wpcf7 form>.btn,.wpcf7 form>.formnote{order:1}

/* ---------- contact: aside ---------- */
.aside{display:grid;gap:clamp(26px,3vw,34px);align-content:start}
.ablock{display:grid;gap:9px;align-content:start;padding-top:clamp(18px,2vw,22px);border-top:1px solid var(--rule)}
.ablock:first-child{padding-top:0;border-top:0}
.ablock h3{font-size:1.06rem;font-weight:650;letter-spacing:-.018em}
.ablock p,.ablock li{color:var(--gray);font-size:.94rem;line-height:1.6}
.ablock ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.ablock a:not(.btn){color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.ablock a:not(.btn):hover{color:var(--red);border-color:var(--red)}
.hours{display:grid;gap:4px}
.hours div{display:flex;justify-content:space-between;gap:16px;font-size:.92rem;color:var(--gray);
  padding-block:5px;border-bottom:1px solid var(--rule)}
.hours div:last-child{border-bottom:0}
.hours span:last-child{font-family:var(--f-display);font-size:.82rem;color:var(--ink)}

/* ---------- contact: map placeholder ---------- */
.map{position:relative;border:1px solid var(--rule);background:var(--paper-2);aspect-ratio:21/9;
  display:grid;place-items:center;overflow:hidden}
@media(max-width:619px){.map{aspect-ratio:4/3}}
.map .grid-bg{position:absolute;inset:0;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:44px 44px;opacity:.6}
.map .pin{position:relative;display:grid;gap:10px;justify-items:center;text-align:center;padding:16px}
.map .dot{width:13px;height:13px;background:var(--red);border-radius:50%;box-shadow:0 0 0 7px rgba(192,0,21,.14)}
.map .lbl{color:var(--ink)}
.map small{font-family:var(--f-display);font-size:.64rem;letter-spacing:.08em;color:var(--gray)}

/* ---------- contact: existing clients band ---------- */
.supp{background:var(--paper-2);border-bottom:1px solid var(--rule)}
.supp .wrap{padding-block:clamp(44px,5.4vw,76px)}
.supp-grid{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,40px);align-items:center}
@media(min-width:880px){.supp-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.supp h2{font-size:clamp(1.55rem,3vw,2.3rem)}
.supp p{color:var(--gray);margin-top:16px;max-width:52ch}
.supp .btn-s:hover{background:var(--ink);color:var(--paper)}

/* ---------- contact: 4-step band + map grid ---------- */
@media(min-width:700px){.steps-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){
  .steps-4{grid-template-columns:repeat(4,1fr)}
  .steps-4 .step{padding-block:clamp(24px,2.4vw,30px);--step-px:clamp(16px,1.8vw,26px);--step-pl:var(--step-px);
    padding-inline:var(--step-px);padding-left:var(--step-pl)}
  .steps-4 .step:first-child{--step-pl:0px}
  .steps-4 .step:last-child{padding-right:0}
}
.mapgrid{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,44px)}
@media(min-width:900px){.mapgrid{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr);align-items:start}}
.mapgrid .btn{justify-self:start;margin-top:4px}

/* ---------- contact: accent pass ---------- */
.direct .ic{color:var(--red);margin-bottom:3px}
.direct .hot{background:var(--red);color:#fff;padding-inline:clamp(18px,2.2vw,28px)}
.direct .hot .ic{color:#fff}
.direct .hot .lbl{color:rgba(255,255,255,.88)}
.direct .hot small{color:rgba(255,255,255,.88)}
.direct .hot:hover strong{color:#fff;text-decoration:underline;text-underline-offset:4px}
@media(min-width:720px){.direct>.hot:first-child{padding-left:clamp(18px,2.2vw,28px)}}
.ablock h3::before{content:"";display:block;width:26px;height:2px;background:var(--red);margin-bottom:12px}
/* Round terminal, 6px, on the bar's right end (bar is 26px from the h3's top-left). */
.ablock h3{position:relative}
.ablock h3::after{content:"";position:absolute;left:20px;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--red)}
.hours div:last-child span:last-child{color:var(--red)}
.field label .req{font-weight:700}
.map{border-top:2px solid var(--red)}
.supp .btn-p{box-shadow:none}
.faq-flush{border-top:0}

/* ---------- back to top ---------- */
/* #top is an empty focus target at the very top (header.php); a ring would only frame an empty box. */
#top:focus{outline:none}
/* Shown once this one-viewport-tall sentinel at the top has scrolled out (menu.js). */
.totop-sentinel{position:absolute;top:0;left:0;width:1px;height:100vh;pointer-events:none}
.totop{position:fixed;right:var(--gut);bottom:calc(var(--gut) + env(safe-area-inset-bottom,0px));z-index:30;
  width:48px;height:48px;display:grid;place-items:center;background:var(--ink);color:var(--paper);visibility:hidden}
.totop[data-show="true"]{visibility:visible}
.totop:hover{color:var(--red-ink)} /* 4.70:1 on ink; --red is 2.63:1 (§9) */
/* The paper halo keeps the red ring at 6:1 whatever the button sits over, ink bands included. */
.totop:focus-visible{box-shadow:0 0 0 3px var(--paper)}
body[data-lock="true"] .totop{visibility:hidden}
@media(prefers-reduced-motion:no-preference){
  .totop{opacity:0;transition:opacity .2s ease,visibility .2s,color .16s ease}
  .totop[data-show="true"]{opacity:1}
  body[data-lock="true"] .totop{opacity:0}
}

/* ---------- service: checklist download ---------- */
.chk{display:grid;gap:16px 32px;align-items:center;border:1px solid var(--rule);padding:clamp(22px,2.5vw,32px)}
@media(min-width:760px){.chk{grid-template-columns:minmax(0,1fr) auto}}
.chk h2{font-size:1.1rem;font-weight:650;letter-spacing:-.018em}
.chk p{color:var(--gray);font-size:.93rem;line-height:1.55;margin-top:6px}
.chk .btn{justify-self:start}

/* ---------- WordPress utilities ---------- */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);
  padding:12px 18px;font-family:var(--f-display);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.skip-link:focus{left:0}
.logo-lg{height:40px;margin-bottom:16px}
.wp-caption{max-width:100%}
.wp-caption-text,figcaption{color:var(--gray);font-size:.86rem;line-height:1.5;margin-top:10px}
.pager{display:flex;flex-wrap:wrap;gap:10px;padding-top:clamp(28px,3.4vw,42px)}
.pager>*{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  padding:0 14px;border:1px solid var(--rule);text-decoration:none;font-family:var(--f-display);font-size:.76rem}
.pager a:hover{border-color:var(--red);color:var(--red)}
.pager .current{background:var(--red);color:#fff;border-color:var(--red)} /* white on --red: 6.46:1 */

/* ---------- services index (page-services.php, _design/04-services.html) ----------
   Hero is .chero (no ring mark); only the grid is new. */
/* The services as a grid: the .svc row's icon, number, title and arrow, in cells like
   .inc (number above the title; hairlines: the .logos ring; 1 -> 2 -> 3 columns
   at 680/1040). */
.svcg{display:grid;grid-template-columns:1fr;gap:1px;background:var(--paper);padding:1px}
@media(min-width:680px){.svcg{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.svcg{grid-template-columns:repeat(3,1fr)}}
.svcg a{background:var(--paper);box-shadow:0 0 0 1px var(--rule);padding:clamp(22px,2.5vw,32px);display:grid;
  grid-template-rows:auto auto auto 1fr auto;gap:10px;text-decoration:none;color:inherit;
  transition:background-color .18s ease}
.svcg a:hover{background:var(--paper-2)}
.svcg .ico{width:46px;height:46px;margin-bottom:8px}
.svcg .n{color:var(--red);font-size:.72rem;letter-spacing:.1em;font-weight:500;min-width:2.4ch}
.svcg h2{font-size:clamp(1.12rem,1.6vw,1.32rem);font-weight:640;letter-spacing:-.022em;line-height:1.2}
.svcg p{color:var(--gray);font-size:.93rem;line-height:1.55}
.svcg .go{justify-self:start;margin-top:8px;color:var(--gray);transition:color .2s ease,transform .2s ease}
.svcg a:hover h2,.svcg a:hover .go{color:var(--red)}
@media(prefers-reduced-motion:no-preference){.svcg a:hover .go{transform:translateX(4px)}}

/* ---------- article content (.entry) ---------- */
.entry{max-width:68ch;font-size:1.06rem;line-height:1.72}
.entry>*+*{margin-top:1.15em}
.entry>:first-child{margin-top:0}
.entry h2,.entry h3,.entry h4,.entry h5{letter-spacing:-.02em;line-height:1.2;margin-top:2.1em}
.entry h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.entry h3{font-size:clamp(1.22rem,1.9vw,1.45rem)}
.entry h4,.entry h5{font-size:1.16rem;font-weight:650}
.entry h2+*,.entry h3+*,.entry h4+*,.entry h5+*{margin-top:.7em}
.entry a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.entry a:hover{color:var(--ink)}
.entry strong,.entry b{font-weight:640}
/* Bold inside a heading keeps the heading's weight (88 posts wrap headings in <strong>). */
.entry :is(h2,h3,h4) :is(strong,b){font-weight:inherit}
.entry ul,.entry ol{padding-left:1.3em}
.entry li+li{margin-top:.45em}
.entry li::marker{color:var(--red)}
.entry blockquote{margin-inline:0;padding:4px 0 4px clamp(18px,2vw,26px);border-left:2px solid var(--red);
  color:var(--ink-2);font-size:1.12rem;line-height:1.6}
.entry img{max-width:100%;height:auto;display:block}
.entry picture{display:block}
.entry figure{margin-inline:0}
/* [gallery] in post content: core prints no gallery CSS under html5 support, and we keep it
   that way. One column on phones, the shortcode's column count from 620px. */
.entry .gallery{display:grid;gap:12px}
.entry .gallery-item{margin:0}
@media(min-width:620px){.entry .gallery-columns-2{grid-template-columns:1fr 1fr}}
/* Lightbox (assets/js/lightbox.js): a modal <dialog> over ink. While open the page does not
   scroll and html turns ink, so its stable scrollbar gutter (painted in the root's colour,
   above the dialog) reads as part of it. Focus ring in paper (--red on ink is 2.63:1). */
html:has(.lb[open]){overflow:hidden;background:var(--ink)}
.lb{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:clamp(56px,6vw,72px) var(--gut);border:0;background:var(--ink);color:var(--onink)}
.lb[open]{display:grid;place-items:center}
.lb::backdrop{background:var(--ink)}
.lb figure{margin:0;display:grid;gap:12px;justify-items:center;max-height:100%}
.lb img{max-width:100%;max-height:calc(100dvh - 2*clamp(56px,6vw,72px) - 3.5em);width:auto;height:auto;object-fit:contain}
.lb figcaption{font-size:.86rem;line-height:1.5;text-align:center;max-width:60ch}
.lb-x{position:absolute;top:6px;right:6px;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:var(--paper);cursor:pointer}
.lb-x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.lb-x:hover{color:var(--red-ink)}
.lb :focus-visible{outline-color:var(--paper)}
@media(prefers-reduced-motion:no-preference){.lb[open]{animation:lb-in .2s ease-out}@keyframes lb-in{from{opacity:0}}}
.entry pre,.entry code{font-family:var(--f-mono);font-size:.88em}
.entry pre{background:var(--paper-2);padding:16px 18px;overflow-x:auto;line-height:1.55}
/* The posts' CTA buttons are the site's .btn .btn-s (selectors extended), with the button arrow in red. */
.entry .contact-us-btn svg{color:var(--red)}
.entry .contact-us-btn:hover svg{color:var(--red-ink)}
/* ---------- single post layout + table of contents ---------- */
.art{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,48px)}
/* The post page alone starts its article close under the hero: its sticky TOC must be visible on load. */
.pad-art{padding-top:clamp(28px,3.5vw,52px)}
@media(min-width:1100px){.art.has-toc{grid-template-columns:minmax(0,68ch) clamp(220px,20vw,280px);
  justify-content:space-between;align-items:start}.art.has-toc .toc-d{display:none}}
.toc .lbl{display:block;margin-bottom:14px;color:var(--gray)}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.toc ol ol{border:0}
.toc a{display:block;padding:6px 0 6px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--gray);
  text-decoration:none;font-size:.88rem;line-height:1.38}
.toc ol ol a{padding-left:30px;font-size:.84rem}
.toc a:hover,.toc a[aria-current]{color:var(--ink)}
.toc a[aria-current]{border-left-color:var(--red)}
@media(pointer:coarse){.toc a{min-height:44px;display:flex;align-items:center;padding-block:4px}}
.toc-s{display:none}
@media(min-width:1100px){.toc-s{display:block;position:sticky;top:calc(var(--hdr) + 24px);padding-right:clamp(16px,2vw,28px);
  max-height:calc(100vh - var(--hdr) - 48px);overflow-y:auto;overscroll-behavior:contain}}
.toc-d{border-block:1px solid var(--rule)}
.toc-d summary{list-style:none;min-height:48px;display:flex;align-items:center;justify-content:space-between}
.toc-d summary::-webkit-details-marker{display:none}
.toc-d[open] summary{color:var(--red)}
.toc-d>ol{margin-bottom:16px}
/* ---------- search form (reuses .field) ---------- */
.sform{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-top:clamp(22px,2.6vw,30px);max-width:640px}
.sform .field{flex:1 1 260px}
/* ---------- breadcrumb: a long current item is cut to one line below 700px (full text stays for screen readers) ---------- */
@media(max-width:699px){.crumb .wrap{flex-wrap:nowrap}.crumb .wrap>*{flex:none}
  .crumb .cur{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.toc-d summary .lbl{color:inherit;margin:0}
.toc-d .pm{top:.5px} /* optical: the + centre on the label's cap height */
/* ---------- blog posts: hero and index grid ---------- */
.chero.post h1{font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:22ch}
/* Blog index: .posts in fixed columns (2 at 800, 3 at 1040) instead of auto-fit, so twelve
   cards fill rows; a paper filler covers the empty cells of a short last page. */
@media(min-width:800px){.posts.idx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .posts.idx:has(>a:last-child:nth-child(odd))::after{content:"";background:var(--paper)}}
@media(min-width:1040px){.posts.idx{grid-template-columns:repeat(3,minmax(0,1fr))}
  .posts.idx:has(>a:last-child:nth-child(odd))::after{content:none}
  .posts.idx:has(>a:last-child:nth-child(3n+1))::after{content:"";background:var(--paper);grid-column:span 2}
  .posts.idx:has(>a:last-child:nth-child(3n+2))::after{content:"";background:var(--paper)}}

/* ---------- generic page (page.php, _design/07-page.html) ----------
   Hero: .chero, quieter; .col holds the H1 to the .entry measure. The TOC is the blog's. */
.chero.page .col{max-width:68ch;font-size:1.06rem}
.chero.page h1{font-size:clamp(2.1rem,4.4vw,3.8rem)} /* above the post hero's 3.4rem max: short titles */
/* Solid red hexagon in the number's place, flat-top like the logo: 9px wide (the 8px end
   dot's area) growing to 12px at 1428px and up. Centred on the label by the flex row. */
.eyebrow .hex{display:block;width:clamp(9px,6px + .42vw,12px);aspect-ratio:12/10.392;height:auto;flex:none;color:var(--red)}
.chero .upd{margin-top:clamp(14px,1.6vw,20px);color:var(--gray);font-size:.9rem}
/* Page heading rhythm; posts keep theirs. Nested lists: pages only (one post nests a list). */
.entry.pg h2{margin-top:2.5em}
.entry.pg h3{margin-top:1.5em}
.entry.pg>:first-child{margin-top:0}
.entry.pg li>:is(ul,ol){margin-top:.45em}
/* Editor output no post uses today: inline code, rule, tables (wrapped in .tbl at render time). */
.entry :not(pre)>code{background:var(--paper-2);padding:.12em .35em}
.entry hr{border:0;height:1px;background:var(--rule);margin-block:2.4em}
.entry table{width:100%;border-collapse:collapse;border-top:1px solid var(--rule-strong);font-size:.9rem;line-height:1.5}
.entry th,.entry td{text-align:left;vertical-align:top;padding:11px 14px 11px 0;border-bottom:1px solid var(--rule)}
.entry :is(th,td):last-child{padding-right:0}
.entry th{font-weight:640}
.entry :is(th,td) code{overflow-wrap:anywhere}
@media(max-width:619px){.entry table{font-size:.84rem}.entry th,.entry td{padding-right:10px}}
.entry .tbl{overflow-x:auto}

/* ---------- «Η εταιρία» (page-etairia.php, 10-etairia.html): text sections in ink, reviews ---------- */
.sect-head.txt{padding-bottom:0}
.sect-head.txt p{color:var(--ink)}
.rv blockquote,.rv figure{margin:0}
.rv-pull{padding-bottom:clamp(36px,4.4vw,60px)}
.rv-pull p{font-size:clamp(1.35rem,1rem + 1.5vw,2.1rem);font-weight:460;letter-spacing:-.02em;line-height:1.28;max-width:34ch;text-wrap:pretty}
.rv figcaption{margin-top:clamp(16px,1.8vw,22px);color:var(--gray)}
.rv-grid{display:grid;gap:1px;padding:1px;list-style:none;margin:0}
@media(min-width:760px){.rv-grid{grid-template-columns:repeat(2,1fr)}}
.rv-grid figure{box-shadow:0 0 0 1px var(--rule);padding:clamp(22px,2.5vw,32px);display:grid;grid-template-rows:1fr auto;height:100%}
.rv-grid p{color:var(--ink-2);max-width:52ch}
.rv-g{margin-top:clamp(22px,2.6vw,32px)}
.rv-g a{text-decoration:none}
/* Facts band (11-etairia-facts.html): figures at display size; an odd last fact takes the whole row at 620–1039 */
@media(min-width:620px) and (max-width:1039px){.fact:last-child:nth-child(odd){grid-column:1/-1}}
.facts.big .fact{gap:10px}
.facts.big .fact strong{font-size:clamp(1.75rem,3.6vw,2.5rem);font-weight:700;letter-spacing:-.03em;line-height:1}
/* Stacked (below 620): no band padding, so each cell sits centred between its dividers */
@media(max-width:619px){.facts.big .wrap{padding-block:0}.facts.big .fact{padding:22px 0 23px}}

/* ---------- Έργα (page-erga.php, 08-erga.html): the .logos cells, 2 → 3 → 4 columns, one service tag under each logo ---------- */
.erga{list-style:none;margin:0;padding:1px}
@media(min-width:760px){.logos.erga{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1040px){.logos.erga{grid-template-columns:repeat(4,1fr)}}
.logos.erga>*{aspect-ratio:auto;display:flex;flex-direction:column;place-items:stretch;
  font-size:inherit;letter-spacing:normal;text-transform:none;color:inherit}
.erga .lg{aspect-ratio:16/9;display:grid;place-items:center}
.erga .tag{align-self:center;margin:0 0 clamp(14px,1.6vw,20px)}

/* ---------- Πρόσθετα (12-prostheta.html): the .inc cells 2-up — hex, name, one line, three bullets, «Ρωτήστε μας» at the foot ---------- */
@media(min-width:1040px){.inc.pl2{grid-template-columns:repeat(2,1fr)}}
.pl2>div{grid-template-rows:auto auto auto 1fr auto}
.pl2 .hex{width:12px;aspect-ratio:12/10.392;color:var(--red)}
.pl2 p{color:var(--ink)}
.pl2 ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;align-content:start}
.pl2 li{position:relative;padding-left:18px;color:var(--gray);font-size:.9rem;line-height:1.5;text-wrap:pretty}
.pl2 li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1px;background:currentColor}
.pl2 .more{margin-top:8px}

/* ---------- font ownership ----------
   Plugin stylesheets target h1/h2/h3 and form controls directly, which beats
   inheritance from body regardless of load order. State it explicitly. */
h1,h2,h3,h4,h5,h6,
.btn,.entry .contact-us-btn,button,input,select,textarea,
.claim h2,.svc h3,.val h3,.plg h3,.posts :is(h2,h3),.inc h3,.step h3,.ablock h3{
  font-family:var(--f-display);
}
.lbl,.num,.n,.tag,.fbot,.ovl-foot,.fgrid h2,.crumb .wrap,.formnote,.pager>*{
  font-family:var(--f-display);
}