/* Gilroy, capped at 600. Only the 400/500/600 faces are declared and served;
   b/strong are pulled to 600 too — the browser default is 700 and there is no
   700 face, so nothing on the site is ever drawn heavier than Semibold. */
@font-face{font-family:Gilroy;src:url("../fonts/sGilroy-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url("../fonts/sGilroy-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:url("../fonts/sGilroy-Semibold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

/* Site stylesheet. Cool grey ground, white cards that float on a soft
   shadow, crisp 6px corners — and no lines: no card outlines, no rules under
   or beside headings, no separators. Surfaces are told apart by tone and
   shadow alone. The only borders left are functional (form fields, the
   arrow in link cards, avatar rings).

   Three colours, three jobs:
     navy  (--dark)  structure — top strip, footer, headings, dark bands
     blue  (--brand) the brand — links, primary buttons, icons, accents
     green (--call)  calling — every tel: button, the phone pill, the call bar */
:root{
  --brand:#1f5bd8; --brand-d:#1747ad; --brand-dd:#123a8c; --brand-l:#e9f0fd; --brand-ll:#f4f8fe;
  --brand-rgb:31 91 216;
  --accent:#1f5bd8; --accent-d:#1747ad; --accent-l:#e9f0fd;
  --call:#0f7f45; --call-d:#0b6537; --call-l:#e6f4ec; --call-rgb:15 127 69;
  --dark:#0f1d33; --dark-2:#172a49;
  /* Every grey is tinted towards the navy. ink-3 and ink-4 also sit on --band,
     --bg and --brand-l; they are chosen against the darkest of those, so no
     pairing drops below WCAG AA (build/kontrast-kontrol.py). */
  --ink:#14213a; --ink-2:#3a4860; --ink-3:#53627a; --ink-4:#5b6a82;
  --head:#0f1d33;
  --line:#dde4ee; --line-2:#cbd5e3;
  --bg:#f3f6fa; --box:#fff; --band:#e9eff7; --well:#eff4fb;
  --foot:#0c1a2f; --foot-2:#07111f; --foot-tx:#a8b6ca;
  --wrap:1200px; --r:6px; --r-sm:4px; --r-lg:10px;
  --shadow:0 1px 2px rgba(15,29,51,.06),0 8px 22px -14px rgba(15,29,51,.22);
  --shadow-hi:0 2px 4px rgba(15,29,51,.06),0 14px 30px -16px rgba(15,29,51,.32);
  /* No borders on cards or under headings: a white item on a tinted ground
     carries this hairline-free lift instead of an outline. */
  --lift:0 1px 2px rgba(15,29,51,.07),0 2px 8px -4px rgba(15,29,51,.10);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Backstop only — root causes are fixed (overflow-wrap, min-width:0, no vw).
   `clip` not `hidden`, so position:sticky keeps working. */
html{overflow-x:clip}
body{overflow-x:clip}
body{margin:0;padding:0 0 74px;background:var(--bg);color:var(--ink-2);
  font:14px/1.7 Gilroy,"Segoe UI",Tahoma,Verdana,Arial,sans-serif;
  overflow-wrap:anywhere}
/* min-width:auto lets a long word widen the whole track. Reset it. */
.box,.split,.side,.cols li,.grid-lnk a,.feat,.tile,.wblnc-top>div,.wblnc-corp-in>div{min-width:0}
@media(min-width:900px){body{padding-bottom:0}}
img{max-width:100%;height:auto}
a{color:var(--brand-d);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
b,strong{font-weight:600}
h1,h2,h3{margin:0;color:var(--head);font-weight:600;line-height:1.25;letter-spacing:-.015em}
h1{font-size:23px}
@media(min-width:700px){h1{font-size:30px}}
h2{font-size:18px;margin:28px 0 10px}
h3{font-size:15px;margin:20px 0 6px}
p{margin:0 0 12px}
ul,ol{margin:0 0 12px;padding-left:18px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
@media(min-width:700px){.wrap{padding:0 22px}}
.ic{width:18px;height:18px}.ic-sm{width:15px;height:15px}.ic-xs{width:12px;height:12px}
svg{flex:none;vertical-align:-.15em}
.mt{margin-top:26px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ---------- header ---------- */
.hdr{background:#fff;position:sticky;top:0;z-index:40;
  box-shadow:0 6px 18px -16px rgba(15,29,51,.45)}
.hdr-in{display:flex;align-items:center;gap:14px;min-height:70px}
.logo{display:inline-flex;align-items:center;flex:none}
.logo:hover{text-decoration:none}
/* One image; height drives it and the width follows the file's own ratio. */
.logo-img{display:block;width:auto;height:36px}
@media(min-width:600px){.logo-img{height:42px}}

/* Six entries, two of them menus. Panels are absolutely positioned so they
   never change the bar's height. */
.nav{display:none;align-items:center;gap:2px;margin:0 auto;min-width:0}
.nav-i{position:relative}
.nav-l{position:relative;display:inline-flex;align-items:center;gap:5px;
  padding:8px 13px;border-radius:var(--r);font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.nav-l svg{color:var(--ink-4);transition:transform .18s ease}
.nav-l:hover{background:var(--brand-ll);color:var(--brand-d);text-decoration:none}
.nav-l[aria-current]{background:var(--brand-l);color:var(--brand-d);font-weight:600}
.nav-i:hover .nav-l svg,.nav-i:focus-within .nav-l svg{transform:rotate(180deg);color:var(--brand)}
/* Hover and focus-within, no JS: focusing the parent link opens the panel,
   and Tab then walks into it. The padding bridges the gap to the panel. */
.nav-sub{position:absolute;top:100%;left:0;z-index:41;display:none;min-width:228px;
  padding:8px;margin-top:6px;background:#fff;
  border-radius:var(--r);box-shadow:var(--shadow-hi)}
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav-i:hover .nav-sub,.nav-i:focus-within .nav-sub{display:block}
.nav-sub a{display:block;padding:8px 11px;border-radius:var(--r-sm);font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.nav-sub a:hover{background:var(--brand-ll);color:var(--brand-d);text-decoration:none}
.nav-sub a[aria-current]{color:var(--brand-d);font-weight:600}

.hdr-call{display:none;align-items:center;gap:10px;flex:none;background:var(--call);color:#fff;
  border-radius:var(--r);padding:7px 14px 7px 7px}
.hdr-call:hover{background:var(--call-d);text-decoration:none}
/* From 560px: below it the logo (BeyazNoktadaServis), the call button and the
   menu button do not fit one row; the sticky call bar carries the number. */
@media(min-width:560px){.hdr-call{display:flex}}
/* Below the full bar the button sits on the right, next to the burger. */
.hdr-call{margin-left:auto}
.hdr-call+.burger{margin-left:0}
@media(max-width:559px){.hdr-call+.burger{margin-left:auto}}
.hdr-call-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-sm);background:rgba(255,255,255,.16);color:#fff}
.hdr-call-tx{display:flex;flex-direction:column;line-height:1.15}
.hdr-call-tx small{font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.hdr-call-tx b{font-size:16px;font-weight:600;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}

.burger{display:inline-flex;align-items:center;gap:6px;flex:none;background:var(--brand-ll);
  border-radius:var(--r);padding:8px 11px;color:var(--ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer;margin-left:auto}
.burger span{display:none}
@media(min-width:400px){.burger span{display:inline}}
.nav-mobile{display:flex;flex-direction:column;background:#fff;
  max-height:calc(100vh - 70px);overflow-y:auto;overscroll-behavior:contain}
.nav-mobile[hidden]{display:none}
.nav-m,.nav-m-grp>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:14px 18px;font-size:14.5px;font-weight:500;
  color:var(--ink);cursor:pointer;list-style:none}
.nav-m-grp>summary::-webkit-details-marker{display:none}
.nav-m:hover,.nav-m-grp>summary:hover{background:var(--brand-ll);color:var(--brand-d);text-decoration:none}
.nav-m svg,.nav-m-grp>summary svg{color:var(--ink-4);transition:transform .18s ease}
.nav-m-grp[open]>summary{color:var(--brand-d);background:var(--brand-ll)}
.nav-m-grp[open]>summary svg{transform:rotate(180deg);color:var(--brand)}
/* Children are indented and quieter than their heading, so the two levels do
   not read as one long list. */
.nav-m-grp>a{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 18px 11px 32px;font-size:13.5px;color:var(--ink-3);background:var(--well);
  }
.nav-m-grp>a:hover{color:var(--brand-d);text-decoration:none}
.nav-m-grp>a svg{color:var(--ink-4)}

/* Service line, at the end of the panel: whoever opened the menu and kept
   scrolling is the one most likely to want a person. */
.nav-call{padding:18px;background:linear-gradient(160deg,var(--dark),var(--dark-2));color:rgba(255,255,255,.75)}
.nav-call-main{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r);
  background:var(--call);color:#fff}
.nav-call-main:hover{background:var(--call-d);text-decoration:none;color:#fff}
.nav-call-ic{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:var(--r-sm);
  background:rgba(255,255,255,.16);color:#fff}
.nav-call-tx{display:flex;flex-direction:column;line-height:1.2;margin-right:auto}
.nav-call-tx small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.nav-call-tx b{font-size:20px;font-weight:600;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Six grouped entries need ~1000px with the logo and the call button. */
@media(min-width:1040px){.nav{display:flex}.burger,.nav-mobile{display:none!important}.hdr-call{margin-left:0}}

/* ---------- page frame ---------- */
.page{padding:18px 0 34px}
@media(min-width:700px){.page{padding:26px 0 46px}}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0 0 14px;font-size:12.5px;color:var(--ink-4);line-height:1.6}
.crumbs a{display:inline-flex;align-items:center;gap:5px;color:var(--ink-3)}
.crumbs a:hover{color:var(--brand-d)}
.crumbs a svg{color:var(--brand)}
.crumbs-sep{display:inline-flex;color:var(--line-2)}
.crumbs-here{color:var(--ink);font-weight:500}

.ptitle{position:relative;margin:4px 0 18px;padding:20px 20px 18px;background:var(--box);border-radius:var(--r);
  box-shadow:var(--shadow)}
@media(min-width:700px){.ptitle{padding:26px 28px 24px;margin:6px 0 24px}}
.ptitle h1{font-size:25px}
@media(min-width:700px){.ptitle h1{font-size:34px}}

/* ---------- inner hero ---------- */
/* Art on the left from tablet width up, copy on the right — the markup keeps
   the copy first so the H1 leads on a phone. */
.inner-hero{display:grid;overflow:hidden;margin:4px 0 20px;border-radius:var(--r-lg);
  background:linear-gradient(120deg,var(--brand-ll) 0%,#fff 58%);box-shadow:var(--shadow)}
.inner-hero-copy{align-self:center;padding:24px 20px 10px;text-align:left}
.inner-hero h1{font-size:28px;line-height:1.15}
.inner-hero-note{margin:10px 0 0;max-width:48ch;color:var(--ink-3);font-size:14.5px;line-height:1.6}
/* On a phone the number is already on the sticky call bar; the buttons open
   from tablet width up. */
.inner-hero-cta{display:none}
.inner-hero-art{display:grid;place-items:center;min-height:120px;padding:0 16px 14px}
.inner-hero-art img{display:block;width:100%;height:auto;max-height:180px;object-fit:contain}
@media(min-width:700px){
  .inner-hero{grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);min-height:240px}
  .inner-hero-art{order:-1;min-height:240px;padding:18px 0 18px 18px}
  .inner-hero-art img{height:100%;max-height:220px}
  .inner-hero-copy{padding:28px 36px 28px 18px}
  .inner-hero h1{font-size:38px}
  .inner-hero-cta{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
}
@media(min-width:1000px){
  .inner-hero{grid-template-columns:minmax(340px,.85fr) minmax(0,1.15fr);min-height:260px}
  .inner-hero-art img{max-height:240px}
  .inner-hero h1{font-size:44px}
}

/* ---------- surfaces ---------- */
.box{background:var(--box);border-radius:var(--r);padding:18px;margin-bottom:16px;box-shadow:var(--shadow)}
@media(min-width:700px){.box{padding:28px 30px;margin-bottom:22px}}
/* A section whose content is itself a grid of cards gets no card of its own. */
.band{margin-bottom:18px;padding:4px 0}
@media(min-width:700px){.band{margin-bottom:24px;padding:10px 0 4px}}
/* Inside a card, card grids and lists are recessed into a well instead. */
.box .tiles,.box .feats,.box .grid-lnk,.box .cols,.box .faq,.box .folds{
  background:var(--well);border-radius:var(--r);padding:12px}
@media(min-width:700px){
  .box .tiles,.box .feats,.box .grid-lnk,.box .cols,.box .faq,.box .folds{padding:16px}}
.box .faq{margin-top:14px}
.box>.feats:last-child,.box>.tiles:last-child{margin-bottom:0}
/* Justification needs a wide measure — on phones it opens rivers. */
.box-lead{text-align:left}
.faq p{text-align:left}
@media(min-width:700px){.box-lead,.faq p{text-align:justify}}
.side-txt{font-size:13px;line-height:1.85;margin:0}

/* ---------- headings inside content ---------- */
.sechead{position:relative;text-align:left;font-size:21px;margin:0 0 16px;padding-bottom:0}
@media(min-width:560px){.sechead{font-size:25px}}
.subhead{color:var(--ink-3);margin:0 0 22px;max-width:70ch;font-size:14px}
.subhead-more{margin:16px 0 0}
.subhead-more a,.morelinks a{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.morelinks{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0}
.rule{border:0;margin:22px 0}

/* ---------- scope notice (policy) ---------- */
.scope-foot{margin-top:18px}
.scope{display:flex;gap:12px;background:var(--brand-ll);
  border-radius:var(--r);padding:14px 16px;margin:0;
  font-size:13px;line-height:1.7;color:var(--ink-3)}
.scope-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--brand)}
.scope-ic svg{width:16px;height:16px}
.scope p{margin:0}
.scope strong{color:var(--ink);font-weight:600}

/* ---------- feature list (icon left, text right) ---------- */
.feats{display:grid;grid-template-columns:1fr;gap:10px;margin:22px 0}
@media(min-width:520px){.feats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.feats{grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0}}
.feat{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:12px;align-items:start;
  border-radius:var(--r);padding:14px;background:#fff;box-shadow:var(--lift)}
.feat-ic{grid-row:span 2;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--brand-l);color:var(--brand-d)}
.feat-ic svg{width:21px;height:21px;stroke-width:1.7}
.feat b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.35}
.feat small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-top:3px}

/* ---------- phone band ---------- */
.phoneband{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;
  background:var(--brand-ll);border-radius:var(--r);
  padding:16px;text-align:center;font-size:15px;font-weight:500;color:var(--ink);margin:24px 0;line-height:1.5}
.phoneband a{position:relative;display:inline-flex;align-items:center;gap:9px;padding:9px 20px;border-radius:var(--r);
  background:var(--call);color:#fff;font-weight:600;font-size:19px;font-variant-numeric:tabular-nums;
  animation:ring 2.6s ease-out infinite}
.phoneband a[href^="tel:"]{white-space:nowrap}
.phoneband a:hover{text-decoration:none;background:var(--call-d);animation:none}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(var(--call-rgb) / .45)}70%{box-shadow:0 0 0 12px rgba(var(--call-rgb) / 0)}100%{box-shadow:0 0 0 0 rgba(var(--call-rgb) / 0)}}
@media(min-width:560px){.phoneband{padding:18px 20px;font-size:16px}.phoneband a{font-size:22px}}
@media(prefers-reduced-motion:reduce){.phoneband a{animation:none}}

.ctaband{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--dark) 0%,var(--dark-2) 60%,var(--brand-dd) 100%);
  color:#fff;border-radius:var(--r);padding:20px;margin:18px 0;box-shadow:var(--shadow);
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;text-align:center}
.ctaband::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 14px)}
.ctaband p{position:relative;display:inline-flex;align-items:center;gap:10px;margin:0;font-size:16px}
.ctaband p svg{color:#8fb4ff}
.ctaband .btn{position:relative}
@media(min-width:640px){.ctaband{padding:22px 28px;justify-content:space-between;text-align:left}
  .ctaband p{font-size:18px}}

/* Outbound or one-level-up reference link. */
.linkband{background:var(--well);border-radius:var(--r);
  padding:14px 16px;margin:22px 0}
.linkband a{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px}

/* ---------- section titles inside cards ---------- */
.listhead{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--head);
  margin:32px 0 14px;line-height:1.3}
.box>.listhead:first-child,.box-lead>.listhead:first-child{margin-top:4px}
@media(min-width:700px){.listhead{font-size:20px}}
/* Sub-heading inside a link block; lighter than .listhead, no rule. */
.sublisthead{font-size:14.5px;font-weight:600;color:var(--head);margin:18px 0 8px}
.sublisthead a{color:inherit;text-decoration:none}
.sublisthead a:hover,.sublisthead a:focus-visible{color:var(--brand-d);text-decoration:underline}
@media(min-width:700px){.sublisthead{font-size:15.5px}}
/* Mahalle names as a plain comma-run, no links. */
.hoodlist{font-size:13px;line-height:1.85;color:var(--ink-3);margin:0;padding:12px 14px;background:var(--well);
  border-radius:var(--r)}

/* Emphasised key phrases inside body copy. */
.box-lead strong,.prose strong,.box p strong{color:var(--ink);font-weight:600}
/* A clock range ("08.00–01.00") is one unit; see e_times(). */
.nw{white-space:nowrap}
/* Two columns fit a phone once overflow-wrap handles long strings. */
.cols{columns:2;column-gap:14px;font-size:13px;list-style:none;padding:0;margin:0}
@media(max-width:359px){.cols{columns:1}}
@media(min-width:560px){.cols{column-gap:24px}}
@media(min-width:700px){.cols{columns:3}}
@media(min-width:900px){.cols{columns:4}}
.cols.wide{columns:1}
@media(min-width:560px){.cols.wide{columns:2}}
@media(min-width:900px){.cols.wide{columns:3}}
.cols li{position:relative;break-inside:avoid;margin-bottom:7px;padding-left:12px;color:var(--ink-2)}
.cols li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:1px;background:var(--brand)}
.cols a{color:var(--ink-2)}
.cols a:hover{color:var(--brand-d)}
/* Grows the tap target without moving anything visually. */
@media(hover:none){
  .cols li{margin-bottom:2px}
  .cols a,.side a{display:inline-block;padding:5px 0}
  .wblnc li{line-height:1.5}
  .wblnc li a{display:inline-block;padding:5px 0}
  .crumbs a{padding:3px 0}
}

/* ---------- tiles (devices / categories) ---------- */
/* Horizontal: icon in a tinted square, label beside it. Fixed column counts
   so an 8-tile row never orphans one. */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:20px 0}
@media(min-width:700px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{display:flex;align-items:center;gap:12px;min-height:72px;padding:12px;background:#fff;
  border-radius:var(--r);color:var(--ink);text-align:left;
  transition:border-color .15s,box-shadow .15s,transform .15s;box-shadow:var(--lift)}
.tile:hover{box-shadow:var(--shadow-hi);transform:translateY(-2px);text-decoration:none;color:var(--brand-d)}
.tile svg{flex:none;width:44px;height:44px;padding:9px;border-radius:var(--r);background:var(--brand-l);
  stroke-width:1.5;color:var(--brand-d);transition:background .15s,color .15s}
.tile:hover svg{background:var(--brand);color:#fff}
.tile b{font-size:13.5px;font-weight:600;line-height:1.35}
@media(max-width:399px){.tile{flex-direction:column;align-items:flex-start;gap:8px}.tile svg{width:38px;height:38px;padding:7px}}
/* Four tiles a row inside a card leave about 56px of text beside the icon
   until ~780px, so up to 900px the icon sits above the name instead. */
@media(min-width:700px) and (max-width:899px){.box .tile{flex-direction:column;align-items:flex-start;gap:8px}}

/* ---------- folded link lists (brand hub) ---------- */
.folds{margin:12px 0 0}
.fold{background:#fff;border-radius:var(--r-sm);box-shadow:var(--lift);margin-bottom:6px}
.fold:last-child{margin-bottom:0}
.fold>summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;
  font-weight:600;color:var(--head);font-size:14px;list-style:none}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary svg{margin-left:auto;transition:.2s;color:var(--ink-4)}
.fold[open]>summary svg{transform:rotate(180deg);color:var(--brand)}
.fold-n{font-weight:500;font-size:12px;color:var(--brand-d);background:var(--brand-l);border-radius:999px;padding:1px 8px}
.fold>.cols,.fold>.grid-lnk{background:transparent;border:0;padding:0 14px 14px}
/* A fold holding several titled lists (the brand page's semts by district). */
.fold-b{padding:0 14px 14px}
.fold-b>.sublisthead:first-child{margin-top:2px}
.fold-b>.cols{padding:0;background:transparent}
@media(max-width:479px){.fold>.cols,.fold-b>.cols{columns:1}}

/* ---------- brand & city link grids ---------- */
/* 130px: two columns down to a 360px screen; below that one column. */
.grid-lnk{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
/* From 560px up a track holds the longest district name (Mustafakemalpaşa)
   on one line, and a province track the longest province name (Kahramanmaraş)
   beside its plate. */
@media(min-width:560px){.grid-lnk{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .grid-il{grid-template-columns:repeat(auto-fill,minmax(164px,1fr))}}
@media(max-width:359px){.grid-lnk{grid-template-columns:1fr}}
/* flex-wrap: where a name still does not fit beside its plate it drops under
   it whole — a name is never split mid-word. */
.grid-lnk a{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:2px 7px;background:#fff;
  border-radius:var(--r-sm);padding:9px 20px 9px 10px;font-size:13px;color:var(--ink-2);transition:border-color .15s,background .15s;box-shadow:var(--lift)}
.grid-lnk a::after{content:"";position:absolute;right:9px;top:50%;width:6px;height:6px;margin-top:-3px;
  border-top:1.5px solid var(--ink-4);border-right:1.5px solid var(--ink-4);transform:rotate(45deg)}
.grid-lnk a:hover{background:var(--brand-ll);color:var(--brand-d);text-decoration:none}
.grid-lnk a:hover::after{border-color:var(--brand)}
/* Phones: two chips a row, no chevron, the room goes to the name. A province
   chip also takes a slimmer plate, so every name but Kahramanmaraş at 360px
   stays on the plate's line. */
@media(max-width:559px){.grid-lnk a{padding:9px;font-size:12.5px}.grid-lnk a::after{display:none}
  .grid-il a{gap:2px 6px;font-size:12px}.grid-il .plate{min-width:0;padding:1px 4px;font-size:10.5px}}
.plate{flex:none;min-width:26px;text-align:center;background:var(--brand-l);border-radius:3px;padding:1px 5px;
  font-size:11px;font-weight:600;color:var(--brand-d);font-variant-numeric:tabular-nums}
.grid-lnk small{display:block;color:var(--ink-4);font-size:11.5px}
.alpha-nav{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}
.alpha-nav a{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;background:var(--well);
  border-radius:var(--r-sm);font-size:13px;color:var(--ink-2);font-weight:600}
.alpha-nav a:hover{background:var(--brand);color:#fff;text-decoration:none}
.alpha-h{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;color:var(--brand-d);
  margin:24px 0 12px;scroll-margin-top:90px}
.alpha-n{order:1;font-size:12px;font-weight:500;color:var(--ink-3);background:var(--well);
  border-radius:999px;padding:1px 9px}

/* ---------- faq ---------- */
/* Each question is its own card; the open one is marked on its left edge. */
.faq{margin:14px 0 0;display:grid;gap:8px}
.faq details{background:#fff;border-radius:var(--r);transition:border-color .15s;box-shadow:var(--lift)}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 14px 13px 16px;
  cursor:pointer;font-weight:600;color:var(--ink);font-size:14px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;width:26px;height:26px;padding:6px;border-radius:50%;background:var(--brand-l);
  color:var(--brand-d);transition:transform .2s,background .2s}
.faq details[open] summary svg{transform:rotate(180deg);background:var(--brand);color:#fff}
.faq p{padding:0 16px 15px;margin:0;color:var(--ink-2)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--r);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-d);color:#fff}
.btn-call{background:var(--call);color:#fff;font-variant-numeric:tabular-nums}
.btn-call:hover{background:var(--call-d);color:#fff}
.btn-ghost{background:var(--brand-l);color:var(--ink)}
.btn-ghost:hover{background:#dce7fb;color:var(--brand-d)}
.btn-lg{padding:13px 22px;font-size:15px}

.searchbig{display:flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);
  padding:6px 6px 6px 14px;color:var(--ink-4);max-width:560px;box-shadow:var(--shadow)}
.searchbig input{flex:1;min-width:0;border:0;outline:none;font:inherit;font-size:15px;background:none}

/* ---------- two column ---------- */
.split{display:grid;gap:22px}
@media(min-width:860px){.split{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.side{display:flex;flex-direction:column;gap:16px}
.side .box{padding:18px 20px;margin:0}
.side-h{font-size:12px;font-weight:600;color:var(--brand-d);letter-spacing:.08em;text-transform:uppercase;
  margin:0 0 10px}
.side ul{list-style:none;padding:0;margin:0;font-size:13px}
.side li{margin-bottom:6px}
.side a{color:var(--ink-2)}
.side a:hover,.side a[aria-current]{color:var(--brand-d)}
.side a[aria-current]{font-weight:600}

/* ---------- contact map ---------- */
.mapbox{padding:0;overflow:hidden}
.mapbox-in{position:relative;height:300px;background:var(--band)}
@media(min-width:700px){.mapbox-in{height:400px}}
.mapbox-in iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.85)}
.mapbox-info{display:grid;gap:14px;padding:18px}
@media(min-width:820px){
  .mapbox-info{grid-template-columns:1fr auto;align-items:center;padding:22px 26px;gap:24px}
}
.mapbox-title{margin:0 0 10px;font-size:15px;font-weight:600;color:var(--ink);line-height:1.5}
.mapbox-facts{display:grid;gap:8px;margin:0}
@media(min-width:560px){.mapbox-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px}}
.mapbox-facts p{display:flex;align-items:flex-start;gap:9px;margin:0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.mapbox-facts svg{flex:none;margin-top:4px;color:var(--brand)}
.mapbox-info .btn{justify-self:start;white-space:nowrap}

/* ---------- registry card ---------- */
/* Registry facts on the contact page: a grid of labelled values in wells. */
.reg{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:0;font-size:13px}
.reg>div{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:var(--r-sm);background:var(--well)}
.reg>div.reg-wide{grid-column:1/-1}
.reg dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.reg dd{margin:0;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.reg-note{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--ink-4)}

/* ---------- stats / result ---------- */
.stats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin:0 0 22px}
.stats div{background:var(--well);border-radius:var(--r);padding:14px;text-align:center}
.stats b{display:block;font-size:22px;color:var(--brand-d)}
.stats small{color:var(--ink-3);font-size:12px}
.result{text-align:center;padding:40px 20px}
.result .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}

/* ---------- footer ---------- */
.wblnc{position:relative;background:var(--foot);color:var(--foot-tx);font-size:13px;line-height:1.85}
.wblnc a{color:var(--foot-tx)}
.wblnc a:hover{color:#fff}
/* Buttons keep their own colours. */
.wblnc .btn-primary,.wblnc .btn-primary:hover,.wblnc .btn-call,.wblnc .btn-call:hover{color:#fff}
.wblnc-brand{display:grid;gap:16px;padding-top:30px;padding-bottom:22px}
@media(min-width:760px){.wblnc-brand{grid-template-columns:auto auto;justify-content:space-between;align-items:center;gap:26px}}
.wblnc-brand .btn{justify-self:start}
.wblnc-id{display:flex;flex-direction:column;gap:10px}
.wblnc-tag{margin:0;max-width:52ch;color:var(--foot-tx);font-size:13px}
.wblnc ul{list-style:none;padding:0;margin:0}
.wblnc-top li{line-height:1.6;margin-bottom:6px}
.wblnc-contact li{display:flex;gap:9px;align-items:flex-start}
.wblnc-contact svg{margin-top:4px;color:#8fb4ff}
.wblnc-corp{background:rgba(255,255,255,.03);font-size:12.5px;line-height:1.8}
.wblnc-corp p{margin:0}

/* Footer groups are <details> (partials/footer.php). On a phone they are a
   stack of folded rows told apart by tone, not by rules; from 700px up they
   are plain open columns and the summary is just the column heading. */
.wblnc-col>summary{list-style:none;cursor:pointer}
.wblnc-col>summary::-webkit-details-marker{display:none}
.wblnc-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:14px;font-weight:600;color:#fff;margin:0}
.wblnc-h svg{flex:none;color:#8fb4ff;transition:transform .2s ease}
.wblnc-col[open]>.wblnc-h svg{transform:rotate(180deg)}
.wblnc-corp .wblnc-h{font-size:13px}

@media(max-width:699px){
  .wblnc-top{display:grid;gap:6px;padding-top:6px;padding-bottom:18px}
  .wblnc-corp-in{display:grid;gap:6px;padding-top:18px;padding-bottom:18px}
  .wblnc-col{background:rgba(255,255,255,.045);border-radius:var(--r)}
  .wblnc-col[open]{background:rgba(255,255,255,.07)}
  .wblnc-col>summary{padding:13px 14px}
  .wblnc-col>summary:hover{background:rgba(255,255,255,.04);border-radius:var(--r)}
  .wblnc-col>ul,.wblnc-col>.wblnc-col-b{padding:0 14px 14px}
  .wblnc-top li{margin-bottom:4px}
}
@media(min-width:700px){
  .wblnc-top{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr));padding-top:28px;padding-bottom:26px}
  .wblnc-corp-in{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));padding-top:24px;padding-bottom:24px}
  /* Open columns: the summary is a heading, not a control. */
  .wblnc-col>summary{cursor:default;pointer-events:none;margin:0 0 12px}
  .wblnc-corp .wblnc-col>summary{margin-bottom:6px}
  .wblnc-h svg{display:none}
}
/* Four link groups: two by two on a tablet, one row from 900px. */
@media(min-width:900px){.wblnc-top{grid-template-columns:repeat(4,minmax(0,1fr))}}

.wblnc-disc p{margin:0;padding-top:18px;padding-bottom:18px;font-size:12px;line-height:1.8;color:rgba(255,255,255,.72)}
.wblnc-disc svg{color:#8fb4ff;margin-right:4px}
.wblnc-legal{background:var(--foot-2);font-size:12px}
.wblnc-legal-in{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;padding-top:13px;padding-bottom:13px}
.wblnc-legal p{margin:0}

/* ---------- brand page hero ----------
   Desktop (850px+): the call block sits on the empty half of the wide studio
   image — the right half, since the photograph faces the other way. Band
   height follows the image ratio with a 340px floor; aspect-ratio and
   min-height are not combined (the browser pushes the floor into the width).

   Mobile (849px and below): only the photo part of the tall image shows, its
   bottom edge melts into the image's own ground (--phero-cream) and the copy
   flows straight underneath. */
.page-h1{margin:0 0 14px;max-width:32ch;color:var(--head);font-size:clamp(24px,2.7vw,34px);
  font-weight:600;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
/* "BeyazNoktadaServis:" before the H1 (partials/phero.php). Colour only: the
   heading is already 600, the heaviest face the site loads. */
.h1-brand{color:var(--brand)}
@media(min-width:700px){.page-h1{margin:2px 0 18px}}

.phero{background:#fff;border-radius:var(--r-lg);overflow:hidden;margin-bottom:18px;box-shadow:var(--shadow-hi)}
@media(min-width:700px){.phero{margin-bottom:22px}}

.phero-banner{--phero-cream:#fdfdfd;position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:clamp(340px,calc((100vw - 32px) * .3378),405px);background:var(--phero-cream);overflow:hidden}
.phero-picture,.phero-picture img{position:absolute;inset:0;width:100%;height:100%}
.phero-picture img{object-fit:cover;object-position:center}
.phero-copy{position:relative;z-index:1;width:44%;min-width:0;margin-left:auto;margin-right:5%;padding:30px 0 34px}
.phero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:9px}

.phero-call{display:inline-flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;color:var(--ink)}
.phero-call:hover{text-decoration:none}
.phero-call:focus-visible{outline:2px solid var(--call);outline-offset:8px;border-radius:8px}

.phero-call-label{display:inline-flex;align-items:center;gap:9px;padding:4px 11px 4px 9px;border-radius:999px;
  background:var(--call-l);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--call-d);line-height:1.3}
.phero-live{flex:none;width:8px;height:8px;border-radius:50%;background:var(--call);
  box-shadow:0 0 0 0 rgba(var(--call-rgb) / .6);animation:live 1.8s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(var(--call-rgb) / .55)}80%{box-shadow:0 0 0 8px rgba(var(--call-rgb) / 0)}100%{box-shadow:0 0 0 0 rgba(var(--call-rgb) / 0)}}
.phero-call-num{display:inline-flex;align-items:center;gap:14px;padding:8px 26px 8px 8px;border-radius:var(--r);
  background:var(--call);color:#fff;font-size:clamp(27px,2.5vw,33px);font-weight:600;letter-spacing:.01em;
  line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:0 10px 24px -12px rgba(var(--call-rgb) / .9)}
.phero-call-ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-sm);background:#fff}
.phero-call-icon{display:block;width:32px;height:32px;object-fit:contain}
.phero-call:hover .phero-call-num{background:var(--call-d)}
@media(prefers-reduced-motion:reduce){.phero-live{animation:none}}

.phero-noart .phero-banner{min-height:0}
.phero-noart .phero-copy{width:auto;margin-left:5%}

.phero-detail{padding:22px 28px 20px}
.phero-leads{display:flex;flex-direction:column;gap:8px;max-width:94ch}
.phero-lead{margin:0;font-size:14.5px;line-height:1.8;color:var(--ink-2)}
.phero-lead:first-child:not(:only-child){font-size:16px;line-height:1.7;font-weight:500;color:var(--ink)}

/* Badge strip: icon beside the label, three to a row. */
.phero-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:14px;
  list-style:none;background:var(--well)}
@media(min-width:700px){.phero-trust{grid-template-columns:repeat(3,minmax(0,1fr));padding:16px 18px}}
@media(min-width:1100px){.phero-trust{grid-template-columns:repeat(6,minmax(0,1fr))}}
.phero-trust li{display:flex;align-items:center;gap:9px;min-width:0;padding:10px 11px;background:#fff;
  border-radius:var(--r);font-size:12.5px;font-weight:500;line-height:1.3;color:var(--ink);box-shadow:var(--lift)}
.phero-trust .ic{flex:none;width:22px;height:22px;color:var(--brand)}

@media(max-width:849px){
  .phero-banner{flex-direction:column;align-items:stretch;min-height:0}
  .phero-picture{position:relative;inset:auto;display:block;width:100%;height:auto;
    aspect-ratio:900/540;max-height:420px}
  .phero-picture img{object-position:center top}
  .phero-picture::after{content:"";position:absolute;inset:auto 0 0;height:32%;
    background:linear-gradient(rgba(253,253,253,0),var(--phero-cream))}
  .phero-copy{width:auto;margin:-8px 0 0;padding:0 18px 22px}
  .phero-noart .phero-copy{margin:0;padding-top:20px}
  .phero-cta{margin-top:14px}
  .phero-call{gap:9px}
  .phero-call-label{font-size:11.5px}
  .phero-call-num{gap:11px;padding:6px 20px 6px 6px;font-size:clamp(22px,6.2vw,26px)}
  .phero-call-ic{width:40px;height:40px}
  .phero-call-icon{width:26px;height:26px}
  .phero-detail{padding:18px}
}
@media(max-width:359px){.phero-trust{grid-template-columns:1fr}}

/* ---------- mobile call bar ----------
   Navy-to-blue bar: the assistant on the left, the page's line in the middle
   (Phones::page(), not always the main one) and a green call disc on the
   right. Motion is decorative; prefers-reduced-motion drops it. */
.callbar{position:fixed;inset:auto 0 0 0;z-index:50;display:flex;align-items:center;
  gap:12px;min-height:64px;isolation:isolate;
  padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(100deg,var(--dark) 0%,var(--brand-dd) 70%,var(--brand-d) 100%);color:#fff;
  box-shadow:0 -10px 24px rgba(15,29,51,.18)}
.callbar:hover,.callbar:active{text-decoration:none;color:#fff}
.callbar:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.callbar-fx{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.callbar-fx i{position:absolute;border-radius:50%;background:rgba(255,255,255,.06)}
.callbar-fx i:nth-child(1){width:150px;height:150px;right:-40px;top:-70px}
.callbar-fx i:nth-child(2){width:90px;height:90px;right:30px;bottom:-56px}
.callbar-fx i:nth-child(3){width:26px;height:26px;left:38%;top:8px;background:rgba(255,255,255,.06)}
.callbar-ic{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%}
.callbar-avatar{position:relative;z-index:1;display:block;width:44px;height:44px;object-fit:cover;
  border:2px solid rgba(255,255,255,.9);border-radius:50%;background:#fff}
.callbar-ic::after{content:"";position:absolute;z-index:2;right:0;bottom:1px;width:11px;height:11px;border-radius:50%;
  background:#3ddc84;border:2px solid var(--dark)}
.callbar-tx{display:flex;flex-direction:column;line-height:1.2;margin-right:auto;min-width:0}
.callbar-tx small{font-size:11.5px;font-weight:400;color:rgba(255,255,255,.82)}
.callbar-tx b{font-size:19px;font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.callbar-go{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--call);
  color:#fff;animation:ring 2.4s ease-out infinite}
@media(prefers-reduced-motion:reduce){.callbar-go{animation:none}}
@media(min-width:900px){.callbar{display:none}}
/* The open mobile menu carries its own call block — see .nav-call. */
body.menu-open .callbar{display:none}

/* ---------- home hero ---------- */
/* A panel, unlike the rest of the page: blue-tinted ground and a fine grid
   that fades towards the copy. The artwork is transparent, so it sits on the
   panel as it is. */
.hero{position:relative;overflow:hidden;margin:2px 0 20px;border-radius:var(--r-lg);
  background:linear-gradient(115deg,#fff 0%,var(--brand-ll) 55%,var(--brand-l) 100%);
  box-shadow:var(--shadow)}
.hero-deco{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(var(--brand-rgb) / .07) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--brand-rgb) / .07) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:linear-gradient(250deg,#000 10%,transparent 70%);
  mask-image:linear-gradient(250deg,#000 10%,transparent 70%)}
.hero-in{position:relative;display:grid}
.hero-copy{position:relative;z-index:1;padding:30px 20px 10px;text-align:left}
.hero h1{font-size:32px;font-weight:600;line-height:1.1;color:var(--head);letter-spacing:-.03em}
.hero h1 span{display:block;color:var(--brand)}
.hero-lead{margin:16px 0 0;max-width:46ch;color:var(--ink);font-size:17px;line-height:1.5;font-weight:500}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.hero-chips li{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.75);font-size:12.5px;color:var(--ink-2)}
.hero-chips svg{color:var(--call)}
.hero-visual{position:relative;padding:0 14px 10px}
.hero-visual img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;object-position:center}
@media(max-width:420px){
  .hero-cta{display:grid}
  .hero-cta .btn{width:100%}
}
@media(min-width:700px){
  .hero-copy{padding:44px 36px 16px}
  .hero h1{font-size:44px}
  .hero-lead{font-size:19px}
}
@media(min-width:900px){
  .hero-in{grid-template-columns:minmax(0,.95fr) minmax(400px,1.05fr);min-height:480px;align-items:stretch}
  .hero-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:48px 20px 48px 44px}
  .hero h1{font-size:48px}
  .hero-visual{min-height:480px;padding:24px 24px 24px 0}
  .hero-visual img{height:100%;aspect-ratio:auto;object-fit:contain;object-position:center}
}
@media(min-width:1100px){
  .hero-in{grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr)}
  .hero h1{font-size:54px}
}

/* ---------- legal documents ---------- */
.legal-intro{font-size:15px;color:var(--ink);background:var(--brand-ll);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:12px 16px;margin-bottom:8px}
.legal-list{margin:0 0 14px;padding-left:20px}
.legal-updated{margin:24px 0 0;font-size:12.5px;color:var(--ink-4)}
.legal-list li{margin-bottom:6px}
.legal-list li::marker{color:var(--brand)}
/* Tables scroll in their own box; the page never scrolls sideways. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 16px;
  border-radius:var(--r)}
.legal-table{border-collapse:collapse;width:100%;min-width:420px;font-size:13px}
.legal-table th,.legal-table td{padding:10px 14px;text-align:left;vertical-align:top}
.legal-table th{background:var(--brand-l);font-weight:600;color:var(--brand-dd);white-space:nowrap}
.legal-table tbody tr:nth-child(even) td{background:var(--well)}
.legal-table tbody tr:last-child td{border-bottom:0}
.legal-table td:first-child{font-weight:600;color:var(--ink)}

/* ---------- customer reviews ---------- */
.revs{display:grid;gap:12px;grid-template-columns:1fr;margin-top:18px}
@media(min-width:640px){.revs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.revs{grid-template-columns:repeat(3,1fr)}}
.rev{margin:0;background:var(--well);border-radius:var(--r);padding:18px}
.rev-stars{color:#f2a516;font-size:15px;letter-spacing:2px;margin-bottom:9px}
.rev-stars .off{color:var(--line-2)}
.rev blockquote{margin:0 0 12px;font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.rev figcaption b{display:block;font-size:13.5px;color:var(--ink)}
.rev figcaption small{color:var(--ink-3);font-size:12px}

/* ---------- sector contrast ---------- */
/* Mobile stacks each pair into one card so the answer stays attached to the
   claim; CSS `order` would group all left cells then all right cells. */
.vs{display:block;margin:20px 0 0}
.vs-head{display:none}
.vs-row{border-radius:var(--r);overflow:hidden;margin-bottom:8px}
.vs-bad,.vs-good{position:relative;padding:12px 15px 12px 42px;font-size:13px;line-height:1.65}
.vs-bad{background:var(--well);color:var(--ink-3)}
.vs-bad::before,.vs-good::before{position:absolute;left:14px;top:12px;display:grid;place-items:center;width:18px;height:18px;
  border-radius:50%;font-size:10px;font-weight:600;line-height:1}
.vs-bad::before{content:"✕";background:var(--line);color:var(--ink-3)}
.vs-good{background:var(--call-l);color:var(--ink);font-weight:500}
.vs-good::before{content:"✓";background:var(--call);color:#fff}
@media(min-width:820px){
  .vs{display:grid;grid-template-columns:1fr 1fr;gap:6px;border-radius:var(--r);overflow:hidden}
  .vs-row{display:contents}
  .vs-head{display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:14px;font-weight:600}
  .vs-head-bad{background:var(--band);color:var(--ink-3)}
  .vs-head-good{background:var(--dark);color:#fff}
}