/* =============================================================
   Jacobs & Beukes Consulting — jbcon.co.za

   Order matters in this file. Sections run:
     tokens · base · header · buttons · hero · intro · bento tiles
     · rows · notice · forms · contact bar · overlay
     · breakpoints (1150 → 1000 → 700 → 400 → touch)
     · reduced motion · print

   Two ordering rules to keep if you edit it:
   1. Tile colour variants (.t-sage, .t-dark, .t-accent) must stay
      AFTER the plain .tile typography, or their headings and body
      copy revert to olive on a dark ground.
   2. The (pointer:coarse) block must stay LAST of the media
      queries. It lifts tap targets and small caps on touch
      screens and has to outrank the width queries above it.
   ============================================================= */

:root{
  --sage-500:#989C84; --sage-300:#B3B7AA; --sage-200:#D9DBD1; --sage-50:#F3F4F0;
  --olive-950:#24261C; --olive-700:#4C5038; --olive-600:#5E6247;
  --charcoal-800:#303034; --charcoal-700:#4A4A4E; --charcoal-600:#6A6A6E;
  --paper-1:#FAFAF8; --paper-2:#F2F2EE;
  --accent:#5F7F2E; --accent-dark:#4F6B25; --accent-ink:#4B6524;
  /* Sage tiles need a deeper ink than the standard accent: on the sage
     ground the accent only reaches 4.0:1 for numerals and 3.2:1 for
     links. These two clear WCAG AA. */
  --accent-ink-sage:#2A3A12; --accent-ink-sage-hover:#1B2609;
  --accent-ink-tint:#40561B;
  --font-display:'Poppins',system-ui,sans-serif;
  --font-body:'Lato',system-ui,sans-serif;
  --font-serif:'Cormorant Garamond',Georgia,serif;
  --ease:cubic-bezier(.4,0,.2,1);
  /* Breathing room either side of the bento grid. Tiles grow on hover,
     and an edge tile with no gutter grows straight past the viewport —
     this is the space it grows into. */
  --bento-gutter:clamp(14px,2.2vw,44px);
}

/* base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--charcoal-700);font-family:var(--font-body);font-size:16px;line-height:1.6}
img{display:block;max-width:100%}
a{color:var(--accent-ink);text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,p{margin:0;text-wrap:pretty}

/* accessibility */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;padding:12px 20px;background:var(--accent);
  color:#fff;font-family:var(--font-display);font-weight:600;font-size:14px;border-radius:0 0 2px 0}
.skip-link:focus{left:0;color:#fff}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* header */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:16px 40px;background:#fff;border-bottom:1px solid var(--sage-200)}
.site-header img{height:32px;width:auto}
.nav{display:flex;align-items:center;gap:26px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.nav a{color:var(--charcoal-700);padding-bottom:3px;border-bottom:2px solid transparent;
  transition:color 120ms var(--ease),border-color 120ms var(--ease)}
.nav a:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}
.nav a[aria-current="page"]{color:var(--accent-ink);font-weight:700;border-bottom-color:var(--accent)}
.nav-toggle{display:none;background:none;border:1px solid var(--sage-200);border-radius:2px;
  padding:8px 12px;font-family:var(--font-body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--charcoal-700);cursor:pointer}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 26px;border-radius:2px;
  font-family:var(--font-display);font-weight:600;font-size:15px;white-space:nowrap;border:1px solid transparent;
  cursor:pointer;transition:transform 200ms var(--ease),background 160ms var(--ease),color 160ms var(--ease)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 26px -12px rgba(95,127,46,.7)}
.btn-primary:hover{background:var(--accent-dark);color:#fff;transform:scale(1.06)}
.btn-outline{background:transparent;color:var(--olive-700);border-color:var(--olive-700)}
.btn-outline:hover{background:var(--sage-50);color:var(--olive-700);transform:scale(1.04)}
.btn-light{background:rgba(255,255,255,.92);color:var(--olive-700)}
.btn-light:hover{background:#fff;transform:scale(1.06)}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-sm{padding:11px 18px;font-size:14px}
.btn-block{display:flex;width:100%}

/* hero
   The images are wrapped in <picture> so a WebP can be offered ahead of
   the JPEG. That wrapper is display:contents, so the img is still laid
   out as a direct child of .hero — but a `.hero > img` selector would no
   longer match it. Select the img descendant, not the child. */
.hero{position:relative;overflow:hidden;min-height:560px;display:flex;align-items:center;background:var(--olive-950)}
.hero picture{display:contents}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(47,49,38,.80) 0%,rgba(47,49,38,.68) 30%,rgba(47,49,38,.44) 52%,rgba(47,49,38,.04) 78%,rgba(47,49,38,0) 100%)}
.hero-body{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding:0 64px;max-width:560px}
.eyebrow-light{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.2em;color:#fff}
.hero h1{font-family:var(--font-body);font-weight:300;font-size:clamp(32px,4.4vw,52px);line-height:1.14;color:#fff;
  text-shadow:0 2px 20px rgba(31,33,24,.7)}
.hero p{font-size:18px;color:#fff;max-width:480px}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* page intro */
.intro{padding:56px 64px 40px;max-width:840px;display:flex;flex-direction:column;gap:20px}
.eyebrow{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.18em;color:var(--accent-ink)}
.intro h1{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,3.4vw,40px);line-height:1.1;
  letter-spacing:-.02em;color:var(--olive-700)}
/* .h1 is a second-level heading that needs to read as a page title */
.intro .h1{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,3.4vw,40px);line-height:1.1;
  letter-spacing:-.015em;color:var(--olive-950)}
.rule{width:64px;height:3px;background:var(--olive-700)}
.intro p{font-size:17px}

/* bento grid */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--sage-200);
  border-top:1px solid var(--sage-200);padding:1px;perspective:1400px;
  /* transparent side borders form the gutter; padding-box clipping keeps
     the sage background from bleeding into it */
  border-left:var(--bento-gutter) solid transparent;
  border-right:var(--bento-gutter) solid transparent;
  background-clip:padding-box}
.bento-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.bento-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile{position:relative;background:#fff;padding:30px 28px;display:flex;flex-direction:column;gap:12px;
  transition:transform 200ms var(--ease),box-shadow 200ms var(--ease)}
/* .tile sets display:flex, which outranks the browser's own [hidden] rule —
   without this the FAQ filter cannot hide anything. */
.tile[hidden]{display:none}
.tile[data-tile]{cursor:zoom-in}
/* Hover lift. The scale is deliberately modest: a tile at the edge of the
   grid grows outwards, and anything larger escapes the gutter above. Below
   1000px the wide tiles span the full width, where any scale at all runs
   off — so there it is a lift only. Re-run the hover scan if you change it. */
.tile[data-tile]:hover{transform:translateY(-12px) scale(1.035);z-index:6;
  box-shadow:0 40px 80px -18px rgba(48,48,52,.45),0 10px 22px -8px rgba(48,48,52,.28)}
.tile[data-tile]:active{transform:translateY(-8px) scale(1.02)}
.span-2{grid-column:span 2}.span-3{grid-column:span 3}.span-4{grid-column:span 4}

/* tile typography */
.tile h2,.tile h3{font-family:var(--font-display);font-weight:600;font-size:23px;letter-spacing:-.01em;color:var(--olive-700)}
.tile h2.lg,.tile h3.lg{font-size:25px}
.tile p,.tile li{font-size:15px}
.tile .small{font-size:14px;line-height:1.55}
.tile .num{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.18em;color:var(--accent-ink-tint)}
.tile .quote{font-family:var(--font-serif);font-size:30px;line-height:1.28;color:var(--olive-700)}
.tile .pull{margin:0;font-family:var(--font-serif);font-weight:400;font-size:28px;line-height:1.3;color:var(--olive-700)}
.tile .link{font-size:14px;text-decoration:underline;text-underline-offset:4px;align-self:flex-start}

/* tile colour variants — must stay after the typography above */
.t-sage{background:var(--sage-300);color:var(--olive-950)}
.tile.t-sage h2,.tile.t-sage h3,.tile.t-sage p,.tile.t-sage li,.tile.t-sage .pull{color:var(--olive-950)}
.tile.t-sage .num,.tile.t-sage .link,.tile.t-sage a{color:var(--accent-ink-sage)}
.tile.t-sage .link:hover,.tile.t-sage a:hover{color:var(--accent-ink-sage-hover)}

.t-tint{background:var(--sage-50)}
.t-paper{background:var(--paper-2)}

.t-dark{background:var(--charcoal-800)}
.tile.t-dark h2,.tile.t-dark h3,.tile.t-dark .pull{color:#fff}
.tile.t-dark p,.tile.t-dark li{color:rgba(255,255,255,.88)}
.tile.t-dark .eyebrow{color:#A9C182}
.tile.t-dark a{color:#C7D9A6}

.t-accent{background:var(--accent);justify-content:space-between}
.tile.t-accent h2,.tile.t-accent h3,.tile.t-accent p,.tile.t-accent li,
.tile.t-accent .eyebrow,.tile.t-accent a{color:#fff}

/* photo tiles — .tile.photo, not .photo, for the same reason as
   .tile.photo-pair below: the ≤400px block resets .tile padding and
   would otherwise win, insetting the image inside its own tile. */
.tile.photo{padding:0;overflow:hidden;background:var(--paper-1);min-height:300px}
.photo picture{display:contents}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* founder portraits — two head-and-shoulders shots sharing the footprint
   the single founders photo used to occupy on the About page */
/* .tile.photo-pair, not .photo-pair — the ≤400px block below resets .tile
   padding, and at equal specificity that would win and inset the portraits. */
.tile.photo-pair{padding:0;overflow:hidden;min-height:460px;display:grid;
  grid-template-columns:1fr 1fr;gap:2px;background:var(--sage-200)}
.photo-pair figure{position:relative;margin:0;overflow:hidden;background:var(--paper-1)}
.photo-pair picture{display:contents}
.photo-pair img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.photo-pair figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 18px 15px;
  background:linear-gradient(180deg,rgba(36,38,28,0) 0%,rgba(36,38,28,.55) 45%,rgba(36,38,28,.86) 100%);
  color:#fff;font-family:var(--font-display);font-weight:600;font-size:15px}
.photo-pair figcaption .quals{display:block;margin-top:2px;font-family:var(--font-body);font-weight:400;
  font-size:12.5px;line-height:1.35;color:rgba(255,255,255,.85)}

/* founder qualifications in the team tile */
.creds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.creds li{display:flex;flex-direction:column}
.cred-name{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--olive-700)}
.cred-qual{font-size:14px;color:var(--charcoal-600)}

/* tile lists, stats, badges */
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.list li{border-top:1px solid var(--sage-200);padding:9px 0;font-size:14px;line-height:1.5}
.list li:last-child{border-bottom:1px solid var(--sage-200)}
.tile.t-sage .list li{border-top-color:rgba(47,49,38,.22)}
.tile.t-sage .list li:last-child{border-bottom-color:rgba(47,49,38,.22)}
.stat{gap:6px;justify-content:center}
.stat .value{font-family:var(--font-display);font-weight:700;font-size:34px;letter-spacing:-.02em;color:var(--olive-700)}
.stat .label{font-size:14px;color:var(--charcoal-600)}
.badge{align-self:flex-start;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.14em;
  background:#8A6D1F;color:#fff;padding:5px 9px}

/* service rows */
.rows{display:flex;flex-direction:column;padding:0 64px 48px}
.row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:18px 0;
  border-top:1px solid var(--sage-200)}
.rows .row:last-child{border-bottom:1px solid var(--sage-200)}
.row .name{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--olive-700)}
.row .desc{font-size:15px;color:var(--charcoal-600)}
.row .price{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--accent-ink);white-space:nowrap}

/* deadline notice */
.notice{display:flex;flex-direction:column;gap:12px;margin:0 64px 56px;padding:26px 28px;
  background:var(--paper-2);border-left:3px solid var(--olive-700)}
.notice h3{font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--charcoal-800)}

/* forms */
.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--charcoal-700)}
.field input,.field select,.field textarea{font-family:var(--font-body);font-size:15px;color:var(--charcoal-800);
  padding:12px 14px;background:#fff;border:1px solid var(--sage-300);border-radius:2px}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--olive-700);outline-offset:1px;
  border-color:var(--olive-700)}
.field textarea{min-height:110px;resize:vertical}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field input[aria-invalid],.field textarea[aria-invalid]{border-color:#B4472F}
.err{font-size:13px;color:#B4472F}
/* honeypot — off-screen, never shown to a real visitor */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:16px 18px;border-radius:2px;font-size:15px;display:flex;flex-direction:column;gap:6px}
.alert strong{font-family:var(--font-display);font-weight:600;font-size:17px}
.alert-ok{background:var(--sage-50);border-left:3px solid var(--accent);color:var(--olive-700)}
.alert-ok a{color:var(--accent-ink);border-bottom:1px solid var(--sage-300)}
.alert-bad{background:#FBF1EF;border-left:3px solid #B4472F;color:#7E3121}
.contact-list{display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.5}
.contact-list a{border-bottom:1px solid var(--sage-300);align-self:flex-start}
.contact-list a:hover{border-bottom-color:var(--accent)}
/* Offices — each one carries its own address and hours, so there is
   never a question of which branch a set of hours belongs to. Kept
   outside .contact-list because that container's link rules turn into
   flex rows on touch, which would collapse a <br> address onto one line. */
.offices{display:flex;flex-direction:column;gap:16px}
.office{display:flex;flex-direction:column;gap:2px;font-size:15px;line-height:1.5}
.office + .office{border-top:1px solid var(--sage-300);padding-top:16px}
.office-name{font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--charcoal-700)}
.office-hours{margin-top:6px;font-size:14px;color:var(--charcoal-600)}
.office-go{align-self:flex-start;margin-top:6px;font-size:13px;color:var(--accent-ink);
  text-decoration:underline;text-underline-offset:3px}
.office-go:hover{color:var(--accent)}

/* long-form pages (privacy policy) */
.prose{padding:0 64px 56px;max-width:840px;display:flex;flex-direction:column;gap:28px}
.prose section{display:flex;flex-direction:column;gap:10px}
.prose h2{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.01em;color:var(--olive-700)}
.prose p{font-size:16px}
.prose ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.prose li{font-size:16px}
.prose a{border-bottom:1px solid var(--sage-300)}
.prose a:hover{border-bottom-color:var(--accent)}
.updated{font-size:14px;color:var(--charcoal-600)}
.form-note{font-size:13px;line-height:1.55;color:var(--charcoal-600)}
.form-note a{border-bottom:1px solid var(--sage-300)}

/* contact bar and footer */
.contact-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-around;gap:24px;
  padding:26px 40px;background:var(--charcoal-800)}
.contact-bar span{display:flex;align-items:center;gap:12px;color:#fff;font-size:15px;letter-spacing:.16em}
.contact-bar img{width:44px;height:44px;flex:0 0 auto}
.contact-bar a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35)}
.contact-bar a:hover{color:#fff;border-bottom-color:#fff}
.foot{padding:20px 40px 40px;background:var(--charcoal-800);color:rgba(255,255,255,.62);font-size:13px;
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}
.foot a{color:rgba(255,255,255,.82);border-bottom:1px solid rgba(255,255,255,.3)}
.foot a:hover{color:#fff;border-bottom-color:#fff}
/* social icons — circular badges matching the contact strip above */
.foot-social{display:flex;align-items:center;gap:12px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;border-bottom:none;background:var(--accent);
  transition:background 160ms var(--ease),transform 160ms var(--ease)}
.foot-social a:hover{background:var(--accent-dark);border-bottom:none;transform:translateY(-2px)}
.foot-social svg{width:19px;height:19px;fill:#fff;display:block}

/* FAQ filter */
.filter{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.filter label{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--charcoal-700)}
.filter-field{position:relative;max-width:420px}
.filter-field input{width:100%;font-family:var(--font-body);font-size:16px;color:var(--charcoal-800);
  padding:12px 40px 12px 14px;background:#fff;border:1px solid var(--sage-300);border-radius:2px}
.filter-field input:focus{outline:2px solid var(--olive-700);outline-offset:1px;border-color:var(--olive-700)}
.filter-field input::-webkit-search-cancel-button{display:none}
.filter-clear{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:2px;
  font-size:20px;line-height:1;color:var(--charcoal-600);cursor:pointer}
.filter-clear:hover{color:var(--olive-700);background:var(--sage-50)}
.filter-count{font-size:14px;color:var(--charcoal-600);min-height:21px}

/* Detail that belongs only in the pop-up. Hidden in the grid so the tile
   stays clean; site.js clones the tile into the overlay, where this shows. */
.tile-more{display:none}
.overlay-body .tile-more{display:block;margin-top:18px}
.overlay-body .stat .value{margin-bottom:2px}

/* tile pop-up */
.overlay{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:40px;
  background:rgba(47,49,38,0);opacity:0;pointer-events:none;transition:opacity 180ms var(--ease),background 180ms var(--ease)}
.overlay.open{background:rgba(47,49,38,.62);opacity:1;pointer-events:auto}
.overlay-panel{position:relative;width:min(760px,100%);max-height:82vh;overflow:auto;background:#fff;
  padding:48px 52px;box-shadow:0 50px 100px -24px rgba(48,48,52,.55);transform:scale(.94);
  transition:transform 220ms var(--ease)}
.overlay.open .overlay-panel{transform:scale(1)}
.overlay-body{zoom:1.25}
.overlay-close{position:absolute;top:12px;right:12px;width:38px;height:38px;display:flex;align-items:center;
  justify-content:center;background:#fff;border:1px solid var(--sage-200);border-radius:2px;font-size:20px;
  line-height:1;color:var(--charcoal-700);cursor:pointer}
.overlay-close:hover{background:var(--sage-50)}

/* =============================================================
   Breakpoints
   ============================================================= */

@media (max-width:1150px){
  .hero-scrim{background:linear-gradient(90deg,rgba(47,49,38,.84) 0%,rgba(47,49,38,.78) 40%,rgba(47,49,38,.60) 62%,rgba(47,49,38,.12) 85%,rgba(47,49,38,0) 100%)}
  .hero img{object-position:72% center}
}

@media (max-width:1000px){
  .site-header{padding:14px 24px}
  .nav{gap:18px;font-size:12px}
  .hero-body,.intro{padding-left:32px;padding-right:32px}
  .prose{padding-left:32px;padding-right:32px}
  .rows,.notice{margin-left:0;margin-right:0;padding-left:32px;padding-right:32px}
  .notice{margin:0 32px 40px;padding:22px 24px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span-3,.span-4{grid-column:span 2}
  /* full-width tiles cannot be scaled without overflowing — lift only */
  .tile[data-tile]:hover{transform:translateY(-10px);box-shadow:0 30px 60px -16px rgba(48,48,52,.4)}
  .tile[data-tile]:active{transform:translateY(-6px)}
}

@media (max-width:700px){
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:0;background:#fff;border-bottom:1px solid var(--sage-200);padding:8px 24px 16px}
  .nav.open a{padding:12px 0;border-bottom:none}
  .nav-toggle{display:inline-flex}
  .site-header{position:relative}
  .hero{min-height:0;padding:56px 0}
  .hero-body{padding:0 24px;max-width:none}
  .hero img{object-position:62% center}
  .hero-scrim{background:linear-gradient(180deg,rgba(47,49,38,.78) 0%,rgba(47,49,38,.72) 60%,rgba(47,49,38,.68) 100%)}
  .hero-actions .btn{flex:1 1 auto}
  .intro{padding:40px 24px 28px}
  .prose{padding:0 24px 40px}
  .bento{grid-template-columns:minmax(0,1fr)}
  .span-2,.span-3,.span-4{grid-column:span 1}
  .tile.photo-pair{min-height:360px}
  .photo-pair figcaption{padding:30px 12px 12px;font-size:14px}
  .row{flex-direction:column;align-items:flex-start;gap:6px}
  .field-row{grid-template-columns:minmax(0,1fr)}
  .contact-bar{justify-content:flex-start;padding:22px 24px}
  .overlay{padding:20px}
  .overlay-panel{padding:36px 26px}
  .overlay-body{zoom:1.1}
}

/* very narrow phones — give the hero buttons room and stop the
   contact strip crowding the edge */
@media (max-width:400px){
  .hero-actions{gap:12px}
  .hero-actions .btn{width:100%}
  .contact-bar{gap:14px}
  .intro,.hero-body{padding-left:20px;padding-right:20px}
  .prose{padding-left:20px;padding-right:20px}
  .tile{padding:26px 22px}
}

/* Touch devices — tap targets and small caps.
   Scoped to pointer:coarse so the desktop design is untouched. WCAG 2.5.8
   and the Apple HIG want roughly 44px of tappable height; everything
   interactive here was landing between 19px and 32px.
   KEEP THIS LAST — it has to outrank the width queries above. */
@media (pointer:coarse){

  /* header */
  .site-header>a{display:inline-flex;align-items:center;min-height:44px}
  .nav-toggle{min-height:44px;padding:11px 16px}
  .nav{font-size:13px}
  .nav a{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0;
         border-bottom-width:2px}
  .nav.open a{min-height:48px;padding:0}

  /* inline "Read more" / "Book a filing" links inside tiles */
  .tile .link{display:inline-flex;align-items:center;min-height:44px}

  /* the dark contact strip */
  .contact-bar span{min-height:44px}
  .contact-bar a{display:inline-flex;align-items:center;min-height:44px}

  /* contact page details column */
  .contact-list a{display:flex;align-items:center;min-height:44px}
  .office-go{display:flex;align-items:center;min-height:44px}

  /* buttons and form controls */
  .btn{min-height:48px}
  .filter-field input{min-height:48px}
  .filter-clear{width:40px;height:40px}
  .field input,.field select,.field textarea{min-height:48px;font-size:16px}
  .field textarea{min-height:132px}

  /* overlay close */
  .overlay-close{width:44px;height:44px;top:10px;right:10px;font-size:22px}

  /* small caps labels lift from 11px so they stay readable */
  .eyebrow,.eyebrow-light,.tile .num,.badge,.field label{font-size:12px}
}

/* honour reduced-motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .tile[data-tile]:hover{transform:none}
}

/* print */
@media print{
  .site-header,.nav-toggle,.overlay,.hero-actions,.skip-link{display:none!important}
  .tile{break-inside:avoid;box-shadow:none;border:1px solid #ddd}
  body{background:#fff}
}