/* ---------------------------------------------------------------------------
   Self-hosted fonts. Taken from Google Fonts (both are open licence: Fraunces
   and Inter are SIL Open Font Licence 1.1) and served from this domain, so no
   visitor request ever reaches a third party.

   Only the latin and latin-ext subsets are included. The unicode-range on each
   block means a browser downloads latin-ext ONLY if the page actually contains
   a character from that range, so English pages fetch just the two latin files.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/fraunces-latin.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;
}
/* vietnamese */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/fraunces-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/fraunces-latin.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;
}
/* cyrillic-ext */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-latin.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;
}
/* cyrillic-ext */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-latin.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;
}


:root{
  --ink:#1B1719;
  --dark:#241A20;
  --muted:#857D80;
  --plum:#5B1F44;
  --plum-light:#D06B9E;
  --paper:#F6F4F1;
  --plum-tint:#EFE6EC;
  --on-dark:#C6B9BF;
  --on-dark-border:#3A2E34;
  --surface:#FFFFFF;
  --border:#E0DAD3;
  --line:#DDD4D9;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --display:'Fraunces',Georgia,serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --maxw:1200px;
  --header-h:66px;
  /* Number of visible projects in the portfolio carousel.
     Must match the number of .pf-panel elements, INCLUDING the closing CTA slide.
     Raise to 5 when YARDO goes back in. */
  --pf-count:4;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.no-scroll{overflow:hidden}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.15}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--s3);padding-right:var(--s3)}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px;border-radius:3px}
.on-dark :focus-visible{outline-color:var(--plum-light)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* a skip link is useless if it stays invisible when focused - bring it back on screen */
.sr-only:focus,.sr-only:focus-visible{position:fixed;top:10px;left:10px;z-index:200;width:auto;height:auto;margin:0;padding:12px 18px;clip:auto;overflow:visible;background:var(--plum);color:#fff;border-radius:6px;font-size:14px;font-weight:500;text-decoration:none}

/* buttons */
.btn{display:inline-block;font-family:var(--body);font-size:14px;font-weight:500;padding:14px 28px;border-radius:6px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .18s ease,color .18s ease}
.btn-primary{background:var(--plum);color:#fff}
.btn-primary:hover{background:#4A1837}
.btn-invert{background:#fff;color:var(--plum)}
.btn-invert:hover{background:var(--paper)}
.btn-sm{padding:9px 18px;font-size:13px}
.btn-on-dark{background:var(--plum-light);color:#2B0E1F}
.btn-on-dark:hover{background:#E087B2}
.btn-on-dark-ghost{background:transparent;color:var(--paper);border-color:var(--paper)}
.btn-on-dark-ghost:hover{background:var(--paper);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(36,26,32,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--on-dark-border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-top:var(--s2);padding-bottom:var(--s2)}
.wordmark{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.01em;text-decoration:none;color:var(--paper);white-space:nowrap}
.nav{display:flex;align-items:center;gap:var(--s3)}
.nav a{font-size:14px;font-weight:500;color:var(--on-dark);text-decoration:none;transition:color .18s ease}
.nav a:hover{color:var(--plum-light)}
.nav-toggle,.nav-toggle-label{display:none}

/* hero */
.hero{position:relative;background:var(--dark);color:var(--paper);padding-top:140px;padding-bottom:132px;overflow:hidden;border-bottom:3px solid var(--plum-light)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 65% 70% at 22% 42%,rgba(91,31,68,.30) 0%,transparent 68%)}
.hero .wrap{position:relative}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--plum-light);margin-bottom:var(--s4)}
.hero h1{font-size:clamp(32px,6vw,72px);font-weight:600;letter-spacing:-.035em;line-height:1.0;color:var(--paper)}
.hero h1 .line{display:block}
.hero h1 span span{display:inline-block}
.hero .sub{font-size:18px;color:var(--on-dark);max-width:620px;margin-top:var(--s4)}
.hero .actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
@keyframes sweep-pass{0%{color:var(--paper)}35%{color:var(--plum-light)}100%{color:var(--paper)}}
@keyframes sweep-land{0%{color:var(--paper)}35%,100%{color:var(--plum-light)}}
.hero h1 span span{animation:sweep-pass 1.4s ease-in-out both}
.hero h1 .land{animation-name:sweep-land}
.hero h1 .line:first-child span:nth-child(1){animation-delay:.25s}
.hero h1 .line:first-child span:nth-child(2){animation-delay:.43s}
.hero h1 .line:first-child span:nth-child(3){animation-delay:.61s}
.hero h1 .line:first-child span:nth-child(4){animation-delay:.79s}
.hero h1 .line:last-child span:nth-child(1){animation-delay:.97s}
.hero h1 .line:last-child span:nth-child(2){animation-delay:1.15s}
.hero h1 .line:last-child span:nth-child(3){animation-delay:1.33s}
.hero h1 .line:last-child span:nth-child(4){animation-delay:1.51s}

/* logo strip - static row; matches .sec-kicker sizing exactly */
.logos{background:var(--paper);border-bottom:1px solid var(--border);padding-top:var(--s4);padding-bottom:var(--s4)}
.logos .kicker{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)}
/* Label sits inline with the logos, divided by a hairline; the logos then take equal
   cells across the remaining width, so uneven mark widths still space out evenly.
   12px rather than the 10px used for section kickers - at 10px it looked weak next
   to a 62px logo. */
.logo-strip{display:flex;align-items:center;gap:34px}
/* Scoped as .logos .logo-label so it outranks `.logos .kicker` above. Without the
   extra specificity that rule's margin-bottom survives, and a flex box centres the
   MARGIN box - which drops the text half the margin above the logos. */
.logos .logo-label{font-size:12px;white-space:nowrap;margin:0;padding-right:34px;border-right:1px solid var(--line);align-self:stretch;display:flex;align-items:center}
.logo-row{display:flex;flex:1;align-items:center}
.logo-item{flex:1;display:flex;align-items:center;justify-content:center;height:68px;padding:0 12px}
/* All current logos are transparent PNGs, so they sit on the paper background as-is.
   If you ever add one with a baked-in white background, add mix-blend-mode:multiply here. */
.logo-mark{width:auto;height:auto;object-fit:contain}
/* optical sizing: wide wordmarks are capped by width, compact emblems by height */
.logo-mark.is-wordmark{max-width:100%;max-height:32px}
.logo-mark.is-emblem{max-width:100%;max-height:62px}

/* section heads */
.section{padding-top:var(--s6);padding-bottom:var(--s6)}
.sec-head{display:flex;align-items:stretch;gap:14px;margin-bottom:var(--s5)}
.brkt{flex:none}
.sec-txt{display:flex;flex-direction:column;justify-content:center}
.sec-kicker{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.sec-txt h2{font-size:clamp(24px,3.4vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.1}

/* services */
.anchor-card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:28px 26px;margin-bottom:var(--s1);box-shadow:0 1px 2px rgba(36,26,32,.05);text-decoration:none;display:block;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.anchor-card:hover{border-color:var(--plum);transform:translateY(-2px);box-shadow:0 4px 12px rgba(36,26,32,.08)}
.anchor-card .lbl{display:inline-block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--plum);margin-bottom:12px}
.anchor-card h3{font-family:var(--display);font-size:clamp(22px,3vw,27px);font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.anchor-card p{font-size:15px;color:var(--muted);max-width:68ch}
.tile-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s1)}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:var(--s3);text-decoration:none;display:block;box-shadow:0 1px 2px rgba(36,26,32,.05);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.tile:hover{border-color:var(--plum);transform:translateY(-2px);box-shadow:0 4px 12px rgba(36,26,32,.08)}
.tile h3{font-family:var(--body);font-size:16px;font-weight:500;margin-bottom:4px}
.tile p{font-size:14px;color:var(--muted)}

/* portfolio carousel
   The DEFAULT here is a plain swipeable snap carousel. That is deliberate: it is what
   touch devices, reduced-motion visitors and anyone without JavaScript get, and every
   project stays reachable. The scroll-driven version further down is an enhancement
   layered on top only once JS confirms it can run. */
.pf-scroll{height:auto;position:relative}
.pf-sticky{position:static;display:flex;flex-direction:column;justify-content:center}
/* This .wrap is a flex item in a COLUMN flex container, so its width is the cross size.
   Left to itself it was sized to fit its content rather than stretched to the container,
   and the four carousel panels inside made that content ~693px - forcing the whole page
   sideways on a 375px phone. An explicit width pins it to the container; min-width:0
   stops the same content minimum reasserting itself. Horizontal scrolling then happens
   inside .pf-viewport, where it is meant to. */
.pf-sticky > .wrap{width:100%;min-width:0}
.pf-viewport{min-width:0}
.pf-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pf-viewport::-webkit-scrollbar{display:none}
.pf-track{display:flex;gap:var(--s3);align-items:stretch}
/* Every slide is a card. align-items:stretch on the track makes them all the height of
   the tallest, so the frame never jumps between slides. */
.pf-panel{flex:0 0 100%;scroll-snap-align:center;display:grid;grid-template-columns:1fr;gap:var(--s3);align-items:center;
  background:#FFFFFF;border:1px solid var(--line);border-radius:12px;padding:clamp(20px,3vw,40px);box-shadow:0 1px 2px rgba(36,26,32,.05)}
/* Closing CTA slide: plum, centred, content vertically centred in the shared height */
.pf-panel.is-cta{background:var(--plum);border-color:var(--plum);text-align:center;align-content:center;justify-items:center}
.pf-panel.is-cta h3{color:#fff;max-width:18ch}
.pf-panel.is-cta .pf-desc{color:#E8D5E0;max-width:44ch;margin-left:auto;margin-right:auto}
.pf-panel.is-cta .btn{margin-top:var(--s4)}
/* The screengrabs are 2:1 landscape. Rather than crop half of each one away to fill a
   square, the square is a tinted card and the shot sits inset on it at full width. */
.pf-media{width:100%;max-width:320px;justify-self:center;aspect-ratio:1/1;border-radius:24px;background:linear-gradient(135deg,#E9E2DD,#DCD2D0);display:flex;align-items:center;justify-content:center;padding:clamp(16px,2.2vw,28px);overflow:hidden;border:1px solid var(--line);box-shadow:0 6px 20px rgba(36,26,32,.07)}
.pf-media img{width:100%;height:auto;border-radius:8px;box-shadow:0 10px 26px rgba(36,26,32,.22)}
.pf-panel:nth-child(2) .pf-media{background:linear-gradient(135deg,#DFE8EA,#C9D8DC)}
.pf-panel:nth-child(3) .pf-media{background:linear-gradient(135deg,#E4EBE3,#D2E0D1)}
.pf-panel:nth-child(4) .pf-media{background:linear-gradient(135deg,#E3E0E6,#CFC7D2)}
.pf-tag{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--plum);margin-bottom:var(--s2)}
.pf-panel h3{font-family:var(--display);font-size:clamp(21px,2.9vw,36px);font-weight:600;letter-spacing:-.02em;line-height:1.18;max-width:26ch}
.pf-sub{margin-top:var(--s2);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pf-desc{margin-top:var(--s3);font-size:16px;color:var(--muted);max-width:56ch}
/* The dots are driven entirely by JS, so they stay hidden unless JS is running -
   no point showing controls that don't do anything. The carousel itself is
   scrollable without them. */
.pf-dots{display:none;gap:10px;margin-top:var(--s4);align-items:center}
.js .pf-dots{display:flex}
.pf-dot{width:34px;height:4px;border-radius:2px;border:0;padding:0;background:var(--line);cursor:pointer;transition:background-color .2s ease}
.pf-dot[aria-current="true"]{background:var(--plum)}
.pf-hint{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-left:var(--s2)}

/* approach */
.why-grid{display:grid;grid-template-columns:1fr 1fr}
.why-item{padding:var(--s3) var(--s4)}
.why-grid .why-item:nth-child(1),.why-grid .why-item:nth-child(2){border-bottom:1px solid var(--border)}
.why-grid .why-item:nth-child(1),.why-grid .why-item:nth-child(3){border-right:1px solid var(--border);padding-left:0}
.why-grid .why-item:nth-child(2),.why-grid .why-item:nth-child(4){padding-right:0}
.why-item svg{display:block;margin-bottom:14px}
.why-item h3{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.01em;margin-bottom:5px}
.why-item p{font-size:14px;color:var(--muted);line-height:1.6}

/* contact */
.contact{background:var(--plum-tint);padding-top:var(--s6);padding-bottom:var(--s6)}
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:start}
.contact h2{font-size:clamp(24px,3.4vw,32px);font-weight:600;letter-spacing:-.02em;margin-bottom:var(--s2)}
.contact .lede{font-size:16px;color:#6B6266;max-width:62ch}
.contact .direct{margin-top:var(--s4);font-size:16px;color:#6B6266}
.contact .direct a{color:var(--plum);font-weight:500;word-break:break-word}

/* contact form card - same treatment as the service cards */
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:clamp(24px,3vw,36px);box-shadow:0 1px 2px rgba(36,26,32,.05)}
.field{margin-bottom:var(--s2)}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;font-family:var(--body);font-size:15px;padding:11px 13px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--plum);outline-offset:1px}
.contact-card .btn{margin-top:var(--s1);width:100%;text-align:center}
.form-note{margin-top:var(--s2);font-size:12px;color:var(--muted);line-height:1.5}
.form-note .linkish{color:var(--plum);font-size:12px}
/* Honeypot. Pushed off-canvas rather than display:none, because some bots skip
   fields that are display:none but will happily fill this one in. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Feedback banner shown after a redirect back from contact.php */
.form-status{padding:12px 14px;border-radius:6px;font-size:14px;margin-bottom:var(--s3)}
.form-status.is-ok{background:#E7F1E9;border:1px solid #BBD8C2;color:#2C5437}
.form-status.is-error{background:#F6E7EA;border:1px solid #E0BCC5;color:#7A2438}

/* footer */
.site-footer{background:var(--dark);color:#C6B9BF;padding-top:var(--s5);padding-bottom:var(--s4);border-top:3px solid var(--plum-light)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s4)}
.site-footer h4{font-family:var(--body);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8C7F85;margin:0 0 var(--s2)}
.site-footer a{color:#C6B9BF;text-decoration:none;font-size:14px;display:block;margin-bottom:var(--s1)}
.site-footer a:hover{color:#fff}
.footer-mark{font-family:var(--display);font-weight:600;font-size:20px;color:var(--paper);margin-bottom:var(--s1)}
.footer-note{font-size:14px;color:#8C7F85;max-width:340px}
.footer-legal{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid #3A2E34;font-size:12px;color:#8C7F85;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.footer-legal a,.linkish{display:inline;font-size:12px;color:#8C7F85;background:none;border:0;padding:0;margin:0;font-family:var(--body);text-decoration:underline;cursor:pointer}
.footer-legal a:hover,.linkish:hover{color:#fff}

/* modal (privacy / cookies) */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--s3);background:rgba(27,23,25,.6)}
.modal[hidden]{display:none}
.modal-card{background:var(--surface);border-radius:12px;max-width:760px;width:100%;max-height:86vh;overflow-y:auto;padding:var(--s5);box-shadow:0 20px 60px rgba(27,23,25,.30);position:relative}
.modal-card h2{font-size:26px;font-weight:600;letter-spacing:-.02em;padding-right:var(--s5)}
.modal-card h3{font-family:var(--body);font-size:15px;font-weight:500;margin-top:var(--s4);margin-bottom:4px}
.modal-card p,.modal-card li{font-size:14px;color:#5A5356;line-height:1.65}
.modal-card p+p{margin-top:var(--s2)}
.modal-card ul{margin:var(--s1) 0 0;padding-left:20px}
.modal-card .meta{font-size:12px;color:var(--muted);margin-top:var(--s1)}
.modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.modal-close:hover{background:var(--plum-tint)}
.pref{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s2) 0;border-bottom:1px solid var(--border)}
.pref:last-of-type{border-bottom:0}
.pref input{margin-top:5px;width:18px;height:18px;accent-color:var(--plum);flex:none}
.pref strong{font-weight:500;font-size:15px}
.pref p{margin-top:2px}
.modal-actions{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s4)}

/* cookie banner */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--dark);color:var(--on-dark);border-top:2px solid var(--plum-light);padding:var(--s3) 0}
.cookie-bar[hidden]{display:none}
.cookie-inner{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between}
.cookie-copy{max-width:62ch;font-size:14px}
.cookie-copy strong{display:block;color:var(--paper);font-family:var(--display);font-size:18px;font-weight:600;margin-bottom:4px}
.cookie-copy button.linkish{color:var(--plum-light);font-size:14px}
.cookie-actions{display:flex;flex-wrap:wrap;gap:var(--s1)}
.cookie-actions .btn{padding:11px 20px}

/* responsive */
@media(max-width:820px){
  .hero{padding-top:var(--s6);padding-bottom:var(--s6)}
  .hero .sub{font-size:16px}
  .eyebrow{margin-bottom:var(--s3);font-size:10px}
  .hero .actions .btn{flex:1 1 auto;text-align:center}
  .section{padding-top:var(--s5);padding-bottom:var(--s5)}
  .sec-head{margin-bottom:var(--s4)}
  .tile-row,.footer-grid,.contact-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .why-grid .why-item{padding:var(--s3) 0;border-right:none!important;border-bottom:1px solid var(--border)!important}
  .why-grid .why-item:last-child{border-bottom:none!important}
  .wrap{padding-left:var(--s2);padding-right:var(--s2)}
  .wordmark{font-size:18px}
  .nav-toggle-label{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--paper);cursor:pointer;padding:6px 4px}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:var(--s2);background:var(--dark);border-bottom:1px solid var(--on-dark-border);padding:var(--s3) var(--s2)}
  .nav-toggle:checked ~ .nav{display:flex}
  .nav a{font-size:16px}
  .header-inner{position:relative;gap:var(--s2)}
  .header-cta{order:2}
  /* Stack the label above and let the logos wrap at their natural widths - equal
     thirds of a phone screen would squash the wide wordmark to nothing. */
  .logo-strip{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .logos .logo-label{padding-right:0;border-right:0;align-self:auto}
  .logo-row{width:100%;flex:0 1 auto;flex-wrap:wrap;gap:clamp(24px,8vw,44px)}
  .logo-item{flex:0 1 auto;height:58px;padding:0}
  .logo-mark.is-wordmark{max-height:26px}
  .logo-mark.is-emblem{max-height:52px}
  .modal-card{padding:var(--s4) var(--s3)}
  .modal-card h2{font-size:21px}
  .cookie-actions .btn{flex:1 1 auto;text-align:center}
}
@media(max-width:400px){
  .wordmark{font-size:16px}
  .btn-sm{padding:8px 12px;font-size:12px}
}

/* Scroll-driven carousel - the enhancement. Applies only when js/boot.js has added
   .pf-drive to <html>, the viewport is wide enough, and the visitor has not asked for
   reduced motion. Remove the class and the swipe carousel above takes over cleanly. */
/* Scroll-driven slider - the enhancement. Requires js/boot.js to have added .pf-drive,
   a wide viewport, and a real pointer (touch devices keep the swipe carousel, which they
   need because this mode has no horizontal scrolling).
   Reduced motion is deliberately NOT a condition here: taking the two-column layout away
   from those visitors was heavy-handed. The global prefers-reduced-motion rule at the end
   of this file already strips the sliding animation, so they get the same layout with
   instant transitions instead. */
@media (min-width:821px) and (hover:hover) and (pointer:fine){
  .pf-drive .pf-scroll{height:calc(var(--pf-count) * 100vh);height:calc(var(--pf-count) * 100svh)}
  .pf-drive .pf-sticky{position:sticky;top:0;min-height:100vh;min-height:100svh;justify-content:flex-start;padding-top:calc(var(--header-h) + var(--s1));padding-bottom:var(--s4)}
  .pf-drive .pf-viewport{overflow:hidden;scroll-snap-type:none}
  /* One slide per gesture, so the move is a quick discrete transition, not a slow drag */
  .pf-drive .pf-track{width:calc(var(--pf-count) * 100%);gap:0;will-change:transform;transition:transform .5s cubic-bezier(.65,0,.35,1)}
  .pf-drive .pf-panel{flex:0 0 calc(100% / var(--pf-count));grid-template-columns:55fr 45fr;gap:clamp(24px,3.5vw,48px)}
  .pf-drive .pf-panel.is-cta{grid-template-columns:1fr}
  /* Square image capped against viewport height so a tall slide can't overflow 100vh */
  .pf-drive .pf-media{max-width:min(100%,46vh)}
  .pf-drive .pf-dots{margin-top:var(--s4)}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero h1 .land{color:var(--plum-light)}
}