/* ============================================================================
   RANCO — Concept H · EDITORIAL
   The editorial-luxury direction of the eight-concept set: a warm paper
   canvas, a serif that does all the talking, a type-only hero followed by a
   full-measure photographic band, numbered chapters instead of sections, one
   deep tonal band for QHSE, and a quiet contact close.

   Provenance, sourcing and the full record of what was stripped out and why:
   `clients/ranco/STATUS.md`, entry 2026-08-07. Nothing about this page's
   origin belongs in a file the client can view-source.

   EVERY FACT ON THIS PAGE IS RANCO'S OWN, from CLIENT-FACTS.md. RANCO has
   published no founding year, no headcount, no registration number and no
   fleet counts, so this concept prints none:

   - There is NO unit-count table. Their own published equipment LIST, carrying
     their own "not limited to" qualifier, says the same thing truthfully
     without a number that would have to be invented.
   - There is NO "download the company profile" card. There is no public RANCO
     PDF to link, and a card that looks like a download and isn't one is the
     detail a procurement reader tests first.
   - The lineage line carries the Chairman's own words from page 2 of RANCO's
     profile, attributed to him by name.

   THE LOGO. RANCO's mark is navy #223566 + blue #328FCE and is never
   recoloured. On a light ground it needs no handling at all — no chip, no
   band, no plate — which is the same argument Concept D makes, and the reason
   this concept could be built at all without touching the artwork. The canvas
   is deliberately WARM (#F6F3EE bone) where D's is cool (#FAF9F6): side by
   side they are not the same light concept twice.

   TYPE — the actual point of difference. Display is INSTRUMENT SERIF
   (self-hosted, OFL, roman 21.0KB + italic 22.1KB), a high-contrast editorial
   serif with a real italic, which is what carries the "magazine" register no
   other concept in this set has. It ships at ONE weight, by
   design, so every heading below is explicitly `font-weight:400` — the shared
   skeleton asks for 700 on h1/h2/h3 and would otherwise get a synthesised fake
   bold. Body stays FIGTREE, the house body face.
   `--display` (the UI-chrome variable the skeleton uses for buttons, nav,
   footer headings and the mobile menu) is re-pointed at the body face here, so
   this page never downloads Schibsted Grotesk at all: three font files,
   63.3KB, against DP12's ~100KB per-route ceiling.
   ========================================================================= */

/* --- Instrument Serif · SIL Open Font License 1.1 (see fonts/OFL.txt).
   A single-weight display serif, so it is a STATIC pair (roman + italic), not
   a variable file — DP13: variable files are for 3+ weights, and asking for
   one here would have shipped a heavier file for no extra weight. */
@font-face{
  font-family:'Instrument Serif';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/instrument-serif-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Serif';
  font-style:italic; font-weight:400; font-display:swap;
  src:url('../fonts/instrument-serif-latin-italic.woff2') format('woff2');
}

:root{
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  /* UI chrome drops to the body face — see the header comment. */
  --display: var(--body-latin);

  --paper:#F6F3EE;           /* the canvas — warm bone, deliberately not D's cool paper */
  --paper-2:#EFEAE1;         /* alternate chapter ground */
  --panel:#FBF9F4;           /* raised card */
  --ink-txt:#141A26;         /* ink — navy-black, the brand's own temperature */ /* @contrast --paper >=4.5 = 15.74:1 */
  --ink-dim:#5F6570;         /* muted body on paper */ /* @contrast --paper >=4.5 = 5.30:1 */
  --ink-faint:#6B6F78;       /* small meta on paper — still clears 4.5, so it is safe for captions and legal lines */ /* @contrast --paper >=4.5 = 4.55:1 */

  --navy:#223566;            /* logo — road swoosh, truck, wordmark. NEVER edited. */
  --blue:#328FCE;            /* logo — bar motif, Arabic رانكو. NEVER edited. */
  --blue-link:#1F6FA8;       /* brand blue where small text must carry it on paper */ /* @contrast --paper >=4.5 = 4.87:1 */

  /* RANCO's own two colours, split by job: the brand BLUE draws the hairline
     rules and chapter marks (decorative, 3.19:1 — never text), the brand NAVY
     carries anything that is actually read. */
  --accent:#328FCE;          /* hairline rules, chapter marks — NON-TEXT ONLY */ /* @contrast --paper >=3.0 = 3.19:1 */
  --accent-btn:#223566;      /* solid CTA ground */ /* @contrast white >=4.5 = 11.87:1 */
  --accent-link:#1F6FA8;

  /* the one deep band (QHSE) and its own on-dark set */
  --ink:#111A2E;
  --ink-2:#16213A;
  --ink-3:#1C2947;
  --txt:#EFF1F5;             /* @contrast --ink >=4.5 = 15.33:1 */
  --txt-dim:#8A919C;         /* @contrast --ink >=4.5 = 5.46:1 */
  --accent-hi:#5CB3EF;       /* small text on the deep band */ /* @contrast --ink >=4.5 = 7.56:1 */

  --hair:#DFD9CD;
  --hair-2:#E8E2D6;
  --line:rgba(255,255,255,.13);
  --line-ink:rgba(20,26,38,.13);
}

body{ background:var(--paper); color:var(--ink-txt) }

/* --- <picture> is INLINE, and that quietly breaks every cover-fit image ----
   `<img style="height:100%">` inside a `<picture>` resolves its percentage
   against the PICTURE's height, which is `auto` — so the declaration does
   nothing, `object-fit:cover` never gets a box to fill, and the photo renders
   at its natural aspect and is simply clipped by the parent's overflow. It
   looks almost right at one viewport size and letterboxes or over-crops at
   every other, which is why it survives a screenshot check. Blockify every
   picture that wraps a cover-fit image. */
.hero-media picture, .capband-media picture, .qhse-media picture,
.h-panel picture, .plate picture, .chapter-figure picture, .bleed picture,
.split-fig picture, .logo-tile picture{
  display:block; width:100%; height:100%;
}

/* Instrument Serif ships one weight. Declaring 400 explicitly everywhere the
   skeleton asks for 700 is what stops the browser synthesising a smeared fake
   bold at 90px, which is exactly where it would be most visible. */
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:-.018em; line-height:1.04 }
.serif-em{ font-style:italic }

/* ---------------------------------------------------------------- chrome -- */
#top-bar{ --header-bg:rgba(246,243,238,.92); --header-line:var(--hair);
  --nav-txt:var(--ink-dim); --nav-txt-hover:var(--ink-txt); --line-btn:var(--hair);
  --header-accent:var(--navy);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px) }
@media (max-width:720px){
  /* glass costs frames and needs something behind it to read as glass */
  #top-bar{ --header-bg:var(--paper); -webkit-backdrop-filter:none; backdrop-filter:none }
}
#site-footer{ --footer-line:var(--hair); --footer-muted:var(--ink-dim); --footer-accent:var(--navy);
  background:var(--paper-2); color:var(--ink-txt); border-top:1px solid var(--hair) }
#site-footer .ibix-credit{ color:var(--footer-muted) }
#site-footer .foot-legal-row{ border-top-color:var(--hair) }
.mobile-menu{ background:var(--paper) }

/* ------------------------------------------------------------- section grounds */
#hero, #intro, #chapters, #clients, #chairman, #contact{ background:var(--paper) }
#glance, #ch-transport{ background:var(--paper-2) }

/* --------------------------------------------------------------- eyebrows --
   The page's small recurring mark: a short rule, then the label. The rule is
   the brand blue (decoration); the index numeral beside it is the paper-safe
   blue, because that one is read. */
.ed-eyebrow{ display:inline-flex; align-items:center; gap:14px;
  font-family:var(--body); font-size:.72rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-dim) }
.ed-eyebrow::before{ content:""; width:30px; height:1px; background:var(--accent); flex:none }
.ed-eyebrow .ix{ color:var(--blue-link); font-variant-numeric:tabular-nums }

/* ================================================================== 1 · HERO
   Type only. No photograph above the fold at all — the bleed band directly
   below does that job, and holding it back for one screen is the whole
   editorial move. */
#hero{ padding-block-start:clamp(112px,16vh,168px); padding-block-end:clamp(28px,5vh,56px) }
.hero-top-h{ display:flex; justify-content:space-between; gap:14px 26px; flex-wrap:wrap;
  padding-bottom:20px; border-bottom:1px solid var(--hair);
  font-family:var(--body); font-size:.74rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim) }
.hero-top-h .lead{ color:var(--ink-txt) }
.hero-h-h{ margin-top:clamp(28px,5vw,60px); color:var(--ink-txt);
  /* capped by height as well as width so a three-line wrap on a short laptop
     can never push the sub-head and buttons off the first screen */
  font-size:clamp(2.5rem, min(7.6vw,11vh), 6.4rem); line-height:1.02; max-width:19ch;
  text-wrap:balance }
.hero-foot-h{ display:flex; justify-content:space-between; align-items:flex-end;
  gap:28px; flex-wrap:wrap; margin-top:clamp(26px,4vw,48px) }
.hero-sub-h{ max-width:50ch; color:var(--ink-dim); font-size:clamp(1.02rem,1.35vw,1.2rem);
  line-height:1.62 }
.hero-cta-h{ display:flex; align-items:center; gap:18px; flex-wrap:wrap }
.hero-cue-h{ margin-top:clamp(24px,3.4vw,38px); display:inline-flex; align-items:center; gap:12px;
  font-family:var(--body); font-size:.7rem; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint) }
.hero-cue-h .ln{ width:44px; height:1px; background:var(--hair); position:relative; overflow:hidden }
.hero-cue-h .ln::after{ content:""; position:absolute; inset:0; background:var(--accent);
  transform:translateX(-100%); animation:h-cue 2.4s var(--ease) infinite }
@keyframes h-cue{ 0%{ transform:translateX(-100%) } 55%,100%{ transform:translateX(100%) } }
@media (prefers-reduced-motion:reduce){ .hero-cue-h .ln::after{ animation:none; transform:none } }

/* Short viewports. The hero is type-only, so the only levers are the headline
   size and the paddings — measured at 375x667, where the CTA row finished 9px
   under the fold before this tier existed. Declared AFTER the base rules it
   overrides: a media query adds no specificity, so an earlier block would have
   been silently outranked by the plain `.hero-cue-h` rule above. */
@media (max-height:780px){
  #hero{ padding-block-start:clamp(88px,12vh,120px); padding-block-end:clamp(20px,3vh,36px) }
  .hero-h-h{ margin-top:clamp(20px,3.4vw,40px); font-size:clamp(2.1rem, min(7vw,9vh), 5.2rem) }
  .hero-foot-h{ margin-top:clamp(18px,2.6vw,32px) }
  .hero-cue-h{ margin-top:clamp(16px,2.4vw,26px) }
}

.btn-line{ border:1px solid var(--hair); color:var(--ink-txt); background:transparent }
.btn-line:hover{ border-color:var(--ink-txt); background:transparent }

/* ============================================================ 2 · BLEED BAND
   Full-measure photograph, edge to edge, with an exhibit-label caption. The
   `.wrap`-escaping override is the explicit trio the playbook requires —
   width, max-width AND margin — because max-width alone re-centres it as a
   flex child. */
.bleed{ position:relative; overflow:hidden; background:var(--paper-2);
  width:100%; max-width:none; margin-inline:0 }
.bleed picture, .bleed img{ display:block; width:100%; height:100%; object-fit:cover }
.bleed-hero{ height:clamp(300px,62vh,660px) }
/* The caption is a SOLID plate, not white text with a shadow over the photo.
   The first draft did the latter and qa.py flagged it at 360px: over a
   photograph, the contrast behind a caption is whatever that crop happens to
   contain, which at this width is sky. A shadow makes it survivable, not
   measurable. A plate makes it 15.74:1 at every crop and every width, and on
   an editorial page an exhibit label reads as more deliberate than floating
   text anyway. */
.bleed-cap{ position:absolute; inset-inline-start:var(--gut); inset-block-end:24px;
  display:inline-flex; align-items:center; gap:12px; padding:9px 16px;
  max-width:calc(100% - (var(--gut) * 2));
  background:var(--ink-txt); color:#fff;              /* @contrast #fff on --ink-txt = 15.74:1 */
  font-family:var(--body); font-size:.72rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase }
.bleed-cap::before{ content:""; width:26px; height:1px; background:#fff; opacity:.75; flex:none }

/* ========================================================== 3 · INTRODUCTION */
#intro{ padding-block-start:clamp(72px,11vw,150px); padding-block-end:clamp(72px,11vw,150px) }
.intro-grid{ display:grid; grid-template-columns:1fr; gap:clamp(26px,4vw,60px) }
@media (min-width:900px){ .intro-grid{ grid-template-columns:.3fr .7fr; align-items:start } }
.intro-lead{ font-family:var(--serif); font-weight:400; font-size:clamp(1.55rem,3.2vw,2.6rem);
  line-height:1.26; letter-spacing:-.015em; color:var(--ink-txt); max-width:24ch }
.intro-body{ margin-top:clamp(20px,2.6vw,30px); color:var(--ink-dim); font-size:1.06rem;
  line-height:1.72; max-width:58ch }
.intro-body b{ font-weight:600; color:var(--ink-txt) }
.intro-body + .intro-body{ margin-top:1.1em }

/* ========================================================== 4 · AT A GLANCE
   Editorial figures, not a stat band — serif numerals on a hairline grid. The
   is no founding-year cell: RANCO has never supplied one, and Concept A is
   the demo that argues that gap on purpose. */
#glance{ border-block:1px solid var(--hair) }
.glance-grid{ display:grid; grid-template-columns:1fr 1fr }
@media (min-width:820px){ .glance-grid{ grid-template-columns:repeat(4,1fr) } }
.glance-item{ padding:clamp(28px,4vw,54px) clamp(6px,2vw,28px) }
.glance-item:nth-child(odd){ border-inline-end:1px solid var(--hair) }
.glance-item:nth-child(-n+2){ border-bottom:1px solid var(--hair) }
@media (min-width:820px){
  .glance-item:nth-child(-n+2){ border-bottom:0 }
  .glance-item:not(:last-child){ border-inline-end:1px solid var(--hair) }
}
.g-num{ display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(2.5rem,5vw,4.2rem); line-height:1; letter-spacing:-.02em;
  color:var(--ink-txt); font-variant-numeric:tabular-nums }
.g-num .amp{ color:var(--blue-link) }
.g-num.sm{ font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.22 }
.g-lab{ display:block; margin-top:16px; font-family:var(--body); font-size:.76rem;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim) }

/* ============================================================== 5 · CHAPTERS */
.chapter{ padding-block-start:clamp(66px,10vw,140px); padding-block-end:clamp(66px,10vw,140px) }
.chapter-head{ display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,44px); align-items:end }
@media (min-width:900px){ .chapter-head{ grid-template-columns:1fr .8fr } }
.chapter-h{ margin-top:20px; font-size:clamp(2.2rem,5.6vw,4.4rem); max-width:14ch;
  color:var(--ink-txt) }
.chapter-lede{ color:var(--ink-dim); font-size:clamp(1.02rem,1.3vw,1.18rem); line-height:1.66;
  max-width:48ch }
.chapter-figure{ margin-top:clamp(30px,5vw,68px); position:relative; overflow:hidden;
  background:var(--paper-2); aspect-ratio:16/9 }
.chapter-figure img{ width:100%; height:100%; object-fit:cover }
.chapter-detail{ display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,56px);
  margin-top:clamp(36px,5vw,70px) }
@media (min-width:820px){ .chapter-detail{ grid-template-columns:.9fr 1.1fr } }

/* SIGNATURE MOVE — the numbered serif index.
   RANCO's own seven lines of work, set as an index: an oversized italic
   serif figure in the margin, a serif title, one line of plain body. It is a
   magazine contents page, which is the whole argument of this concept — a
   capability document, typeset. Deliberately NOT a staged "how a move runs"
   method: RANCO publishes none, and inventing one would be inventing a fact. */
.ed-index{ list-style:none; border-top:1px solid var(--ink-txt) }
.ed-row{ display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,3vw,38px);
  padding-block:clamp(20px,2.8vw,32px); border-bottom:1px solid var(--hair) }
.ed-no{ font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1; color:var(--blue-link);
  font-variant-numeric:tabular-nums }
.ed-t{ font-family:var(--serif); font-weight:400; font-size:clamp(1.3rem,2.4vw,1.9rem);
  letter-spacing:-.015em; color:var(--ink-txt); line-height:1.12 }
.ed-d{ margin-top:10px; color:var(--ink-dim); font-size:1rem; line-height:1.62; max-width:54ch }

.detail-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:9px; align-content:flex-start }
.detail-tags li{ font-family:var(--body); font-size:.82rem; color:var(--ink-txt);
  border:1px solid var(--hair); padding:9px 15px; border-radius:2px }
.detail-note{ margin-top:18px; font-family:var(--body); font-size:.84rem; color:var(--ink-dim);
  line-height:1.6; max-width:52ch }

/* ================================================================== 6 · QHSE
   The one deep tonal band, in RANCO's own navy-black rather than a neutral
   or a warm brown — the same reason the canvas is bone rather than grey: two
   colours, both the brand's, nothing borrowed. */
#qhse{ position:relative; overflow:hidden; background:var(--ink); color:var(--txt);
  padding-block-start:clamp(72px,11vw,150px); padding-block-end:clamp(72px,11vw,150px) }
.qhse-media{ position:absolute; inset:0; opacity:.15 }
.qhse-media img{ width:100%; height:100%; object-fit:cover }
.qhse-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(17,26,46,.74), rgba(17,26,46,.94)) }
#qhse .wrap{ position:relative; z-index:1 }
#qhse .ed-eyebrow{ color:var(--txt-dim) }
#qhse .ed-eyebrow::before{ background:var(--accent-hi) }
.qhse-h{ margin:clamp(20px,3vw,34px) 0; font-size:clamp(2.1rem,5.4vw,4.6rem); max-width:19ch;
  color:#fff }
.qhse-grid{ display:grid; grid-template-columns:1fr; border-top:1px solid var(--line); max-width:1000px }
@media (min-width:700px){ .qhse-grid{ grid-template-columns:1fr 1fr } }
.qhse-item{ padding-block:clamp(20px,2.8vw,30px); border-bottom:1px solid var(--line) }
@media (min-width:700px){
  .qhse-item:nth-child(odd){ padding-inline-end:38px; border-inline-end:1px solid var(--line) }
  .qhse-item:nth-child(even){ padding-inline-start:38px }
}
.qhse-k{ font-family:var(--body); font-size:.72rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-hi) }
.qhse-v{ margin-top:12px; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.18rem,1.9vw,1.55rem); letter-spacing:-.01em; color:var(--txt); line-height:1.28 }
.qhse-note{ margin-top:clamp(26px,3.4vw,38px); max-width:62ch; color:var(--txt-dim);
  font-size:.95rem; line-height:1.66 }

/* =============================================================== 7 · CLIENTS */
#clients{ padding-block-start:clamp(66px,10vw,140px); padding-block-end:clamp(66px,10vw,140px) }
#clients h2{ margin-top:20px; font-size:clamp(2rem,4.6vw,3.4rem); max-width:20ch }
#clients .clients-lede{ margin-top:18px; max-width:56ch; color:var(--ink-dim); line-height:1.66 }
.logo-wall{ margin-top:clamp(30px,4vw,48px) }
.logo-tile{ border:1px solid var(--hair) }

/* ============================================================== 8 · CHAIRMAN
   RANCO's Chairman, verbatim from page 2 of their own company profile, and
   attributed to him by name — the one quotable line the client has actually
   published about themselves. */
#chairman{ border-block:1px solid var(--hair) }
.chair-in{ display:grid; grid-template-columns:1fr; gap:clamp(22px,3vw,48px);
  padding-block:clamp(48px,7vw,96px); align-items:end }
@media (min-width:900px){ .chair-in{ grid-template-columns:1.25fr .75fr } }
.chair-q{ font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(1.4rem,2.9vw,2.3rem); line-height:1.3; letter-spacing:-.015em;
  color:var(--ink-txt); max-width:26ch }
.chair-a{ font-family:var(--body); font-size:.78rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim); line-height:1.9 }
.chair-a b{ display:block; font-size:1.02rem; letter-spacing:.02em; text-transform:none;
  color:var(--ink-txt); font-weight:600 }

/* =============================================================== 9 · CONTACT */
#contact{ padding-block-start:clamp(66px,10vw,140px); padding-block-end:clamp(66px,10vw,140px) }
.con-top-h{ display:grid; grid-template-columns:1fr; gap:clamp(22px,4vw,54px); align-items:end }
@media (min-width:900px){ .con-top-h{ grid-template-columns:1.15fr .85fr } }
.con-h-h{ font-size:clamp(2.4rem,6.4vw,5.2rem); line-height:1; color:var(--ink-txt) }
.con-intro-h{ color:var(--ink-dim); font-size:clamp(1.02rem,1.3vw,1.18rem); line-height:1.62;
  max-width:44ch }
.dsp-grid{ display:grid; grid-template-columns:1fr; gap:clamp(16px,2vw,22px);
  margin-top:clamp(34px,5vw,58px) }
@media (min-width:680px){ .dsp-grid{ grid-template-columns:1fr 1fr } }
.dsp{ border:1px solid var(--hair); background:var(--panel); border-radius:3px;
  padding:clamp(24px,3vw,38px); transition:border-color .4s var(--ease), transform .4s var(--ease) }
@media (hover:hover) and (pointer:fine){
  .dsp:hover{ border-color:var(--ink-txt); transform:translateY(-4px) }
}
.dsp .dsp-role{ font-family:var(--body); font-size:.72rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue-link) }
.dsp .dsp-name{ font-family:var(--serif); font-weight:400; font-size:1.5rem;
  letter-spacing:-.01em; color:var(--ink-txt); margin-top:12px }
.dsp-tel{ display:inline-block; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.3rem,2.2vw,1.7rem); color:var(--ink-txt); font-variant-numeric:tabular-nums;
  margin:10px 0 22px; min-height:24px }
.dsp-tel:hover{ color:var(--blue-link) }
.dsp-mail{ display:inline-block; margin-top:10px; color:var(--ink-txt); word-break:break-word;
  min-height:24px }
.dsp-mail:hover{ color:var(--blue-link) }
.dsp-acts{ display:flex; gap:10px; flex-wrap:wrap }
.dsp-acts .btn{ flex:1 1 auto }
@media (max-width:420px){ .dsp-acts .btn{ flex:1 1 100% } }
.loc-dl{ margin-top:clamp(34px,5vw,58px); border-top:1px solid var(--hair);
  display:grid; grid-template-columns:1fr }
@media (min-width:760px){ .loc-dl{ grid-template-columns:repeat(3,1fr) } }
.loc-dl .row{ padding-block:clamp(18px,2.6vw,28px); border-bottom:1px solid var(--hair-2) }
@media (min-width:760px){
  .loc-dl .row:not(:last-child){ border-inline-end:1px solid var(--hair-2); padding-inline-end:28px }
  .loc-dl .row:not(:first-child){ padding-inline-start:28px }
}
.loc-dl dt{ font-family:var(--body); font-size:.7rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue-link) }
.loc-dl dd{ margin-top:12px; color:var(--ink-txt); font-size:1rem; line-height:1.55 }