/* ============================================================
   LSEE Construction design system
   Palette : brand gold on deep navy and bark, cool light tints
   Type    : Outfit (headings) / DM Sans (body)
   ============================================================ */

:root{
  /* brand */
  --gold:#ffd751;        /* the brand gold: fills, and text on dark */
  --gold-deep:#eec02c;   /* hover fills, rules and borders on light */
  --gold-ink:#8a6a00;    /* the same gold darkened until it is legible on white */
  --gold-tint:#fff7dd;   /* pale plate behind icons */
  --bark:#453914;        /* the gold taken dark: top bar and footer */

  /* neutrals */
  --ink:#101b33;          /* headings */
  --navy:#0b1730;         /* top bar, dark blocks */
  --body:#5f6b7d;         /* paragraph text */
  --muted:#8a94a3;        /* meta text */
  --line:#e4eaf2;
  --tint:#f1f6fb;         /* light section background */
  --tint-2:#f8fbfe;
  --white:#fff;

  /* type */
  --f-head:"Outfit","Segoe UI",system-ui,sans-serif;
  --f-body:"DM Sans","Segoe UI",system-ui,sans-serif;

  /* shape + depth */
  --r-sm:4px;
  --r:8px;
  --r-lg:14px;
  --shadow-sm:0 6px 18px rgba(16,27,51,.06);
  --shadow:0 18px 40px rgba(16,27,51,.09);
  --shadow-lg:0 30px 70px rgba(16,27,51,.14);

  /* rhythm */
  --section:104px;
  --gap:30px;
  --container:1200px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.75;
  color:var(--body);
  background:var(--white);
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
ul{margin:0;padding:0;list-style:none}

h1,h2,h3,h4,h5{
  font-family:var(--f-head);
  color:var(--ink);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.015em;
  margin:0 0 .6em;
}
h1{font-size:clamp(2.4rem,4.6vw,3.5rem);line-height:1.12}
h2{font-size:clamp(1.85rem,3.2vw,2.5rem)}
h3{font-size:clamp(1.15rem,1.6vw,1.375rem)}
h4{font-size:1.0625rem}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

::selection{background:var(--gold);color:var(--ink)}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.section{padding-block:var(--section)}
.section--tint{background:var(--tint)}
.section--tint-2{background:var(--tint-2)}
.section--flush-top{padding-top:0}
.grid{display:grid;gap:var(--gap)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-5{grid-template-columns:repeat(5,1fr)}

/* ---------- shared type blocks ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--f-head);
  font-size:.75rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-ink);
  margin-bottom:14px;
}
.eyebrow::before{content:"/";opacity:.85}

.section-head{max-width:620px;margin-bottom:56px}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--split{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:40px;max-width:none;
}
.section-head--split .section-head__text{max-width:560px}

.lead{font-size:1.0625rem}
.text-muted{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--f-head);font-size:.9375rem;font-weight:500;
  padding:14px 26px;border-radius:var(--r-sm);
  border:1.5px solid transparent;
  transition:.28s var(--ease);
  white-space:nowrap;
}
.btn svg{width:15px;height:15px;transition:transform .28s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--primary{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn--primary:hover{background:var(--gold-deep);border-color:var(--gold-deep);box-shadow:0 12px 26px rgba(238,192,44,.45)}
.btn--outline{border-color:var(--gold-deep);color:var(--gold-ink);background:transparent}
.btn--outline:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--dark:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn--light{background:#fff;color:var(--ink);border-color:#fff}
.btn--light:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--ghost-light{border-color:rgba(255,255,255,.55);color:#fff}
.btn--ghost-light:hover{background:#fff;color:var(--gold-ink);border-color:#fff}
.btn--sm{padding:10px 20px;font-size:.875rem}

.link-more{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--f-head);font-size:.875rem;font-weight:500;
  color:var(--gold-ink);
  padding-bottom:2px;
  border-bottom:1px solid rgba(138,106,0,.35);
  transition:.25s var(--ease);
}
.link-more svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.link-more:hover{border-bottom-color:var(--gold-ink)}
.link-more:hover svg{transform:translateX(4px)}

/* play button (hero + testimonial) */
@keyframes pulse{0%{transform:scale(.9);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{background:var(--bark);color:rgba(255,255,255,.75);font-size:.8125rem}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px}
.topbar__contact{display:flex;gap:28px;flex-wrap:wrap}
.topbar__contact a{display:inline-flex;align-items:center;gap:.55em;transition:color .25s;overflow-wrap:anywhere}
.topbar__contact a:hover{color:var(--gold)}
.topbar__contact svg{width:13px;height:13px;color:var(--gold)}
.socials{display:flex;gap:10px}
.socials a{
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.08);
  transition:.25s var(--ease);
}
.socials a svg{width:13px;height:13px}
.socials a:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header{
  position:sticky;top:0;z-index:60;
  background:#fff;
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.header.is-stuck{box-shadow:0 8px 30px rgba(16,27,51,.08);border-bottom-color:var(--line)}
.header__inner{display:flex;align-items:center;gap:32px;min-height:84px}

.logo{display:inline-flex;align-items:center;gap:13px;flex:none}
.logo img{display:block;height:46px;width:auto}

/* The mark carries a lot of detail, so a legible wordmark sits beside it. */
.logo__text{display:flex;flex-direction:column;font-family:var(--f-head);line-height:1.05}
.logo__text b{font-size:1.1875rem;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.logo__text span{
  font-size:.6875rem;font-weight:500;color:var(--gold-ink);
  letter-spacing:.15em;text-transform:uppercase;
}
.logo--panel .logo__text b{color:#fff}
.logo--panel .logo__text span{color:rgba(255,255,255,.85)}

/* The badge is dark, so on the bark footer it sits straight on the background
   own white plate rather than fighting the background. */
.logo--panel img{height:46px}
.mobile-nav .logo img{height:46px}

.nav{margin-inline:auto}
.nav__list{display:flex;align-items:center;gap:34px}
.nav__list > li{position:relative}
.nav__list > li > a{
  font-family:var(--f-head);font-size:.9375rem;font-weight:500;color:var(--ink);
  display:inline-flex;align-items:center;gap:.4em;
  padding-block:28px;
  transition:color .25s;
}
.nav__list > li > a:hover,
.nav__list > li.is-active > a{color:var(--gold-ink)}
.nav__caret{width:9px;height:9px;opacity:.7}

.dropdown{
  position:absolute;top:100%;left:-18px;min-width:210px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:10px 0;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:.28s var(--ease);
}
.nav__list > li:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{
  display:block;padding:9px 22px;font-size:.9rem;color:var(--body);
  transition:.22s var(--ease);
}
.dropdown a:hover{color:var(--gold-ink);background:var(--gold-tint);padding-left:27px}

.header__cta{display:flex;align-items:center;gap:14px}
/* The quote button is the primary action on every page, so it carries the
   filled gold and a resting lift, and it stays visible down to the smallest
   phone rather than collapsing into the drawer. */
.header__cta .btn--primary{box-shadow:0 6px 18px rgba(238,192,44,.42)}
.header__cta .btn--primary:hover{box-shadow:0 10px 26px rgba(238,192,44,.6)}

/* Secondary action. Sits left of the gold so the quote button still wins the
   eye, and drops to icon-only once the header runs out of room. */
.nav-toggle{
  display:none;width:44px;height:44px;border:1px solid var(--line);
  background:#fff;border-radius:var(--r-sm);padding:0;place-items:center;color:var(--ink);
}
.nav-toggle svg{width:20px;height:20px}

/* mobile drawer */
.mobile-nav{
  position:fixed;inset:0 0 0 auto;width:min(360px,86vw);z-index:80;
  background:#fff;padding:26px 26px 40px;
  transform:translateX(100%);transition:transform .38s var(--ease);
  overflow-y:auto;box-shadow:-20px 0 60px rgba(16,27,51,.16);
}
.mobile-nav.is-open{transform:translateX(0)}
.mobile-nav__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.mobile-nav__close{width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--ink)}
.mobile-nav__close svg{width:18px;height:18px}
.mobile-nav a.m-link{
  display:block;padding:14px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-head);font-weight:500;color:var(--ink);
}
.mobile-nav a.m-link:hover{color:var(--gold-ink)}
/* Service pages inside the drawer. Indented and a size down so the drawer still
   reads as five destinations with a sub-list, not eleven flat ones. */
.mobile-nav a.m-sub{
  display:block;padding:9px 0 9px 18px;font-size:.9375rem;color:var(--body);
  border-left:2px solid var(--line);margin-left:2px
}
.mobile-nav a.m-sub:hover{color:var(--gold-ink);border-left-color:var(--gold-deep)}
.mobile-nav a.m-sub.is-current{color:var(--gold-ink);font-weight:600;border-left-color:var(--gold-deep)}
.dropdown a[aria-current="page"]{color:var(--gold-ink);font-weight:600;background:var(--gold-tint)}
.mobile-nav .btn{width:100%;margin-top:26px}
.backdrop{
  position:fixed;inset:0;z-index:70;background:rgba(11,23,48,.5);
  opacity:0;visibility:hidden;transition:.3s var(--ease);
}
.backdrop.is-open{opacity:1;visibility:visible}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;padding-block:78px 96px;background:#fff}
.hero__bg{
  position:absolute;top:-40px;right:-80px;width:min(56vw,900px);
  opacity:.55;pointer-events:none;
}
.hero__inner{position:relative;display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:center}
.hero h1{margin-bottom:22px}
.hero__text p{max-width:460px;font-size:1.0625rem}
.hero__actions{display:flex;align-items:center;gap:26px;margin-top:34px;flex-wrap:wrap}

.hero__media{position:relative}
.hero__frame{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg)}
.hero__frame img,.hero__video{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;display:block}
.hero__frame{background:var(--navy)}

/* A centred play button on a video that is already playing is a lie, so the
   control sits in the corner and reads as pause. WCAG 2.2.2 requires a pause
   mechanism for anything auto-playing beyond 5 seconds, and this loop is 27. */
.vidbtn{
  position:absolute;right:14px;bottom:14px;z-index:2;
  width:40px;height:40px;border-radius:50%;border:0;
  display:grid;place-items:center;
  background:rgba(11,23,48,.62);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:.2s var(--ease);
}
.vidbtn:hover{background:var(--gold);color:var(--ink)}
.vidbtn svg{width:15px;height:15px}
.vidbtn__play{display:none}
.vidbtn[aria-pressed="false"] .vidbtn__pause{display:none}
.vidbtn[aria-pressed="false"] .vidbtn__play{display:block;margin-left:2px}

.badge{
  position:absolute;display:flex;align-items:center;gap:12px;
  background:#fff;border-radius:var(--r);padding:14px 20px;
  box-shadow:var(--shadow);
}
.badge--stat{top:52px;right:-26px}
.badge--rating{bottom:-26px;left:-34px;gap:14px}
.badge__icon{
  width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--ink);
  display:grid;place-items:center;flex:none;
}
.badge__icon svg{width:16px;height:16px}
.badge__num{font-family:var(--f-head);font-size:1.25rem;font-weight:600;color:var(--ink);line-height:1.2}
.badge__label{font-size:.75rem;color:var(--muted)}
.badge--rating .badge__num{font-size:1.75rem}
.stars{display:flex;gap:2px;color:#f5a623}
.stars svg{width:12px;height:12px}
/* Facebook records a recommend rate, not a score out of five, so the badge
   carries the percentage and its source instead of a star row. The source is
   linked because an unattributed 100% invites the doubt it should remove. */
.badge__strong{display:block;font-family:var(--f-head);font-size:.8125rem;font-weight:600;color:var(--ink)}
.badge__label a{color:var(--gold-ink);font-weight:600}
.badge__label a:hover{text-decoration:underline}

/* ============================================================
   SERVICES
   ============================================================ */
.service-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:.35s var(--ease);
}
.service-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
.service-card__media{position:relative;overflow:hidden;aspect-ratio:4/3}
.service-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.service-card:hover .service-card__media img{transform:scale(1.07)}
.service-card__body{padding:26px 26px 30px}
.service-card__title{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}
.service-card__num{
  font-family:var(--f-head);font-size:.8125rem;font-weight:500;
  letter-spacing:.16em;color:var(--gold-ink);
}
.service-card__num::before{content:"/ "}
.service-card h3{margin:0;font-size:1.1875rem}
.service-card p{font-size:.9375rem;margin-bottom:18px}

/* ============================================================
   PROJECTS
   ============================================================ */
.filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.filter button{
  font-family:var(--f-head);font-size:.875rem;font-weight:500;
  padding:9px 20px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:#fff;color:var(--body);
  transition:.25s var(--ease);
}
.filter button:hover{border-color:var(--gold-deep);color:var(--gold-ink)}
.filter button.is-active{background:var(--gold);border-color:var(--gold);color:var(--ink)}

.project-card{
  position:relative;border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;display:block;
}
.project-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.project-card:hover img{transform:scale(1.06)}
.project-card__overlay{
  position:absolute;inset:auto 0 0 0;padding:26px;
  background:linear-gradient(to top,rgba(11,23,48,.92),rgba(11,23,48,0));
  color:#fff;transform:translateY(14px);opacity:0;transition:.4s var(--ease);
}
.project-card:hover .project-card__overlay{transform:translateY(0);opacity:1}
.project-card__overlay .eyebrow{color:var(--gold);margin-bottom:6px}
.project-card__overlay h3{color:#fff;margin:0 0 4px;font-size:1.25rem}
.project-card__overlay span{font-size:.875rem;color:rgba(255,255,255,.75)}
.project-card--tall{aspect-ratio:4/5}
.project-card.is-hidden{display:none}

/* ============================================================
   REELS
   ============================================================ */
.reels{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,300px));
  gap:var(--gap);
  justify-content:center;
}

/* More than four reels and the grid becomes a snapping track. Swipe or
   trackpad works on its own; the arrows are the mouse and keyboard route. */
.reels.is-carousel{
  display:flex;justify-content:flex-start;
  gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:10px;
  scrollbar-width:thin;scrollbar-color:var(--gold-deep) transparent;
}
.reels.is-carousel .reel{flex:0 0 270px;scroll-snap-align:start}
.reels.is-carousel::-webkit-scrollbar{height:6px}
.reels.is-carousel::-webkit-scrollbar-thumb{background:var(--gold-deep);border-radius:99px}
.reels.is-carousel::-webkit-scrollbar-track{background:var(--line);border-radius:99px}
.reels-nav{justify-content:center;margin-top:34px}
.reels-nav button:disabled{opacity:.35;cursor:default}
.reels-nav button:disabled:hover{background:#fff;border-color:var(--line);color:var(--ink)}
.reel{
  position:relative;aspect-ratio:9/16;
  border-radius:var(--r);overflow:hidden;
  background:var(--navy);box-shadow:var(--shadow);
}
.reel__frame{position:absolute;inset:0}
.reel__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reel__note{
  position:absolute;inset:0;display:grid;place-items:center;
  padding:24px;text-align:center;
  color:rgba(255,255,255,.55);font-size:.8125rem;line-height:1.6;
}
.reel__note a{color:var(--gold);text-decoration:underline}

/* ============================================================
   CLIENTS
   ============================================================ */
.clients{padding-block:64px;background:var(--tint-2);border-block:1px solid var(--line)}
.clients h2{text-align:center;color:var(--ink);font-size:1.375rem;font-weight:500;margin-bottom:36px}
.clients__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:34px 20px;align-items:center;
}
.clients__logo{
  text-align:center;font-family:var(--f-head);font-size:1.0625rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
  opacity:.32;transition:.3s var(--ease);
}
.clients__logo:hover{opacity:.85;color:var(--gold-ink)}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial{display:grid;grid-template-columns:1fr .85fr;gap:56px;align-items:center}
.testimonial__quote{
  font-family:var(--f-head);font-size:2.6rem;line-height:1;color:var(--gold-deep);
  margin-bottom:18px;display:block;
}
.slide{display:none}
.slide.is-active{display:block;animation:fade .5s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.slide p{font-size:1.0625rem;color:var(--ink);margin-bottom:26px}
.slide__person{display:flex;align-items:center;gap:14px}
.slide__person img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.slide__person strong{display:block;font-family:var(--f-head);font-weight:600;color:var(--ink);font-size:.9375rem;line-height:1.4}
.slide__person span{font-size:.8125rem;color:var(--muted)}
.slider-nav{display:flex;gap:10px;margin-top:30px}
.slider-nav button{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink);display:grid;place-items:center;transition:.25s var(--ease);
}
.slider-nav button svg{width:15px;height:15px}
.slider-nav button:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.testimonial__media{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}

/* Project carousel in the testimonial band. The four photos are 3:4, 1:1, 3:4
   and 5:4, so a square frame is the compromise that crops least: a 4:3 frame
   would take 44% off the height of the two portrait shots. Slides are stacked
   and cross-faded rather than translated, so no track width maths can drift.
   Note there is deliberately no `.testimonial__media img` rule: it would beat
   .revcar__img on specificity and reimpose an aspect-ratio on every slide. */
.revcar{position:relative;aspect-ratio:1/1;background:var(--tint)}
.revcar__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease)}
.revcar__img.is-active{opacity:1}
.revcar__toggle{
  position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;
  border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:rgba(16,27,51,.72);color:#fff;transition:background .2s var(--ease),color .2s var(--ease)
}
.revcar__toggle:hover{background:var(--gold);color:var(--ink)}
.revcar__toggle svg{width:15px;height:15px}
.revcar__play{display:none}
.revcar__toggle[aria-pressed="false"] .revcar__pause{display:none}
.revcar__toggle[aria-pressed="false"] .revcar__play{display:block;margin-left:2px}
.revcar__dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;justify-content:center;gap:8px}
.revcar__dots button{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(16,27,51,.4);
  transition:width .3s var(--ease),background .3s var(--ease)
}
.revcar__dots button[aria-current="true"]{width:22px;border-radius:5px;background:var(--gold)}

/* ============================================================
   STATS
   ============================================================ */
.stats{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
.stats__media img{border-radius:var(--r);box-shadow:var(--shadow);width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.stats__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 24px;margin-top:36px}
.stat__num{font-family:var(--f-head);font-size:2rem;font-weight:600;color:var(--ink);line-height:1.1}
.stat__num span{color:var(--gold-ink)}
.stat__label{font-size:.875rem;color:var(--muted);margin-top:2px}
.stat{padding-left:18px;border-left:2px solid var(--gold-deep)}

/* dark stat band (inner pages) */
.stat-band{background:var(--navy);color:rgba(255,255,255,.7)}
.stat-band .stat{border-left-color:var(--gold)}
.stat-band .stat__num{color:#fff}
.stat-band .stat__label{color:rgba(255,255,255,.6)}

/* ============================================================
   BLOG
   ============================================================ */
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.35s var(--ease)}
.post-card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
.post-card__media{aspect-ratio:16/9;overflow:hidden}
.post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.post-card:hover img{transform:scale(1.06)}
.post-card__body{padding:24px 24px 28px}
.post-card time{font-size:.8125rem;color:var(--muted);display:block;margin-bottom:10px}
.post-card h3{font-size:1.0625rem;line-height:1.45;margin-bottom:16px}

/* ============================================================
   QUOTATION / CTA BAND
   ============================================================ */
/* Quotation band. Was a pale box with a gold hairline top and bottom, which
   read as a divider rather than the last thing on the page asking for the
   enquiry. It now carries the same navy and cta-band texture as the inner-page
   CTA, with the turnaround promise pulled out as the figure it deserves to be. */
.quote-band{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--navy);color:rgba(255,255,255,.74);
  padding:56px 52px;
  display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;
}
.quote-band::before{
  content:"";position:absolute;inset:0;
  background:url("../img/cta-band.svg") center/cover no-repeat;opacity:.32;
}
/* a gold edge down the left, so the band is anchored rather than floating */
.quote-band::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold-deep) 100%);
}
.quote-band__text,.quote-band__panel{position:relative}
.quote-band h2{color:#fff;margin-bottom:12px}
.quote-band p{margin:0;font-size:.9375rem;max-width:52ch}
.quote-band__points{margin:26px 0 0;display:grid;gap:11px}
.quote-band__points li{display:flex;gap:11px;align-items:flex-start;font-size:.9375rem}
.quote-band__points svg{width:17px;height:17px;flex:none;color:var(--gold);margin-top:3px}

/* the turnaround figure, which is the actual promise being made */
.quote-band__panel{
  border-left:1px solid rgba(255,255,255,.22);padding-left:44px;
  display:flex;flex-direction:column;align-items:flex-start
}
.quote-band__actions{flex-wrap:nowrap}
.quote-band__kicker{
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);font-weight:600
}
.quote-band__big{
  font-family:var(--f-head);font-size:5.5rem;line-height:.95;font-weight:600;
  color:#fff;margin-top:6px
}
.quote-band__unit{font-size:.9375rem;color:rgba(255,255,255,.74);margin-bottom:30px}
.quote-band__big span{font-size:3rem;color:var(--gold)}
.quote-band__unit a{color:var(--gold);font-weight:500}
.quote-band__unit a:hover{text-decoration:underline}
.quote-band__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* dark CTA (inner pages) */
.cta-dark{position:relative;overflow:hidden;background:var(--navy);color:rgba(255,255,255,.72);text-align:center}
.cta-dark::before{
  content:"";position:absolute;inset:0;
  background:url("../img/cta-band.svg") center/cover no-repeat;opacity:.35;
}
.cta-dark .container{position:relative}
.cta-dark h2{color:#fff}
.cta-dark p{max-width:600px;margin-inline:auto}
.cta-dark__actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--bark);color:rgba(255,255,255,.86);padding-top:76px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:56px}
.footer .logo{margin-bottom:22px}
.footer p{font-size:.9rem;color:rgba(255,255,255,.85)}
.footer h5{
  font-family:var(--f-head);font-size:1.0625rem;font-weight:600;color:var(--gold);
  margin:0 0 20px;
}
.footer__links li{margin-bottom:11px}
.footer__links a{font-size:.9rem;transition:.25s var(--ease);display:inline-block}
.footer__links a:hover{color:#fff;transform:translateX(4px)}
.footer .socials{margin-top:22px}
.footer .socials a{background:rgba(255,255,255,.18)}
.footer .socials a:hover{background:#fff;color:var(--bark)}
.footer__contact li{display:flex;gap:11px;font-size:.9rem;margin-bottom:12px;align-items:flex-start;overflow-wrap:anywhere}
.footer__contact svg{width:15px;height:15px;flex:none;margin-top:5px}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.25);
  padding-block:22px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.8125rem;
}
.footer__bottom a:hover{color:#fff;text-decoration:underline}
.footer__bottom nav{display:flex;gap:22px}
/* Designer credit. Sits at .7 against the footer's own .86 white so it reads as
   an attribution rather than competing with the copyright, and the studio name
   itself goes to full white: 11.3:1 on --bark, so the only actual link in the
   line is the most legible thing in it. */
.footer__credit{color:rgba(255,255,255,.7)}
.footer__credit a{color:#fff;font-weight:500}
.footer__credit a:hover{text-decoration:underline}

/* ============================================================
   INNER PAGE HERO
   ============================================================ */
.page-hero{
  position:relative;background:var(--bark);color:rgba(255,255,255,.75);
  padding-block:92px;overflow:hidden;text-align:center;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:url("../img/hero-band.svg") center/cover no-repeat;opacity:.4;
}
.page-hero .container{position:relative}
.page-hero h1{color:#fff;margin-bottom:14px;font-size:clamp(2.1rem,3.8vw,3rem)}
.breadcrumb{display:flex;gap:10px;justify-content:center;font-size:.875rem;color:rgba(255,255,255,.6)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{color:var(--gold)}

/* ============================================================
   ABOUT / CONTENT BLOCKS
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split--wide-left{grid-template-columns:1.1fr 1fr}
.media-stack{position:relative;padding-bottom:70px;padding-right:60px}
.media-stack__main img{border-radius:var(--r);box-shadow:var(--shadow);width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.media-stack__inset{
  position:absolute;right:0;bottom:0;width:62%;
  border:8px solid #fff;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;
}
.media-stack__inset img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.media-stack__badge{
  position:absolute;left:-24px;top:34px;
  background:var(--gold);color:var(--ink);border-radius:var(--r);
  padding:18px 22px;box-shadow:var(--shadow);
}
.media-stack__badge strong{display:block;font-family:var(--f-head);font-size:1.75rem;line-height:1.1}
.media-stack__badge span{font-size:.8125rem;opacity:.9}

.check-list{display:grid;gap:14px;margin:26px 0}

/* ---------- service detail pages ---------- */
/* Long-form reading measure. Body copy past roughly 70 characters a line gets
   hard to track back to the next line, so the column is capped rather than
   filling the 1200px container. */
.container--narrow{max-width:860px}
.prose{max-width:68ch}
.prose p{margin:0 0 20px}
.prose p:last-child{margin-bottom:0}

/* Prose beside a picture. The text column is the wider of the two because it
   is the thing being read; the image is support, not the subject. Text keeps a
   reading measure of its own so a wide viewport does not stretch the lines. */
.prose-row{display:grid;grid-template-columns:1fr .8fr;gap:60px;align-items:center}
.prose-row__text{max-width:60ch}
.prose-row__text h2{margin-bottom:22px}
.prose-row__text p{margin:0 0 20px}
.prose-row__text p:last-child{margin-bottom:0}
.prose-row__media img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:var(--r);border:1px solid var(--line)
}
/* Flipped rows swap the visual order only. `order` does not move anything in
   the DOM, so the reading order stays text-then-media and the stacked layout
   below 992px still puts the words first. Nothing inside either media column
   is focusable, so tab order is unaffected. The column template swaps with the
   order, otherwise the narrow track would end up under the wide content. */
.prose-row--flip{grid-template-columns:.8fr 1fr}
.prose-row--flip .prose-row__media{order:-1}

/* Text beside a short checklist. The list is the narrower column because it is
   scanned, not read. */
.svc-detail{display:grid;grid-template-columns:1fr .72fr;gap:56px;align-items:start}
.svc-detail__text h2{margin-bottom:22px}
.svc-detail__text p{margin:0 0 20px}
.svc-detail__text p:last-child{margin-bottom:0}
.svc-detail__aside{
  background:var(--tint);border:1px solid var(--line);border-radius:var(--r);
  padding:32px 30px;position:sticky;top:104px
}
.svc-detail__aside h3{font-size:1rem;margin:0 0 4px}
.svc-detail__aside .check-list{margin:18px 0 0}
.svc-detail--flip{grid-template-columns:.72fr 1fr}
.svc-detail--flip .svc-detail__aside{order:-1}

.related{margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}
.related__label{
  display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--body);margin-bottom:16px
}
.related__links{display:flex;flex-wrap:wrap;gap:32px}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:.9375rem}
.check-list svg{width:20px;height:20px;flex:none;color:var(--gold-ink);margin-top:3px}

.value-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:34px 30px;transition:.35s var(--ease);height:100%;
}
.value-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.value-card__icon{
  width:56px;height:56px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--gold-tint);color:var(--gold-ink);margin-bottom:22px;
  transition:.35s var(--ease);
}
.value-card:hover .value-card__icon{background:var(--gold);color:var(--ink)}
.value-card__icon svg{width:26px;height:26px}
.value-card h3{font-size:1.125rem;margin-bottom:10px}
.value-card p{font-size:.9375rem;margin:0}

/* team */
.team-card{text-align:center}
.team-card__media{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:18px}
.team-card__media img{width:100%;height:auto;aspect-ratio:7/8;object-fit:cover;transition:transform .6s var(--ease)}
.team-card:hover img{transform:scale(1.05)}
.team-card__socials{
  position:absolute;inset:auto 0 0 0;padding:16px;
  display:flex;gap:8px;justify-content:center;
  background:linear-gradient(to top,rgba(11,23,48,.85),transparent);
  transform:translateY(100%);transition:.35s var(--ease);
}
.team-card:hover .team-card__socials{transform:translateY(0)}
.team-card__socials a{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;color:#fff}
.team-card__socials a svg{width:14px;height:14px}
.team-card__socials a:hover{background:var(--gold);color:var(--ink)}
.team-card h3{font-size:1.0625rem;margin-bottom:2px}
.team-card span{font-size:.8125rem;color:var(--gold-ink)}

/* process steps */
.step{position:relative;padding-top:14px}
.step__num{
  font-family:var(--f-head);font-size:3.25rem;font-weight:600;
  color:var(--ink);opacity:.09;line-height:1;
}
.step h3{font-size:1.125rem;margin:-26px 0 10px}
.step p{font-size:.9375rem;margin:0}
.step::after{
  content:"";position:absolute;top:26px;right:-15px;width:30px;height:1px;
  background:var(--line);
}
.step:last-child::after{display:none}

/* accordion */
.accordion{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.accordion__item + .accordion__item{border-top:1px solid var(--line)}
.accordion__btn{
  width:100%;text-align:left;background:none;border:0;
  padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-family:var(--f-head);font-size:1rem;font-weight:500;color:var(--ink);
  transition:color .25s;
}
.accordion__btn:hover{color:var(--gold-ink)}
.accordion__btn svg{width:16px;height:16px;flex:none;color:var(--gold-ink);transition:transform .3s var(--ease)}
.accordion__item.is-open .accordion__btn svg{transform:rotate(45deg)}
.accordion__panel{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.accordion__panel p{padding:0 24px 22px;font-size:.9375rem;margin:0}

/* ============================================================
   SERVICES DETAIL
   ============================================================ */
.svc-row{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;
  padding-block:56px;
}
.svc-row + .svc-row{border-top:1px solid var(--line)}
.svc-row--flip{grid-template-columns:1.1fr .9fr}
.svc-row--flip .svc-row__media{order:2}
.svc-row__media img{border-radius:var(--r);width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;box-shadow:var(--shadow-sm)}
.svc-row__body h2{font-size:clamp(1.5rem,2.4vw,1.95rem)}
.pill-list{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px}
.pill-list span{
  font-size:.8125rem;padding:7px 15px;border-radius:100px;
  background:var(--gold-tint);color:var(--gold-ink);font-weight:500;
}

.price-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:34px 30px;transition:.35s var(--ease);
  display:flex;flex-direction:column;
}
.price-card:hover,.price-card.is-featured{box-shadow:var(--shadow);border-color:transparent;transform:translateY(-6px)}
.price-card.is-featured{border-top:3px solid var(--gold)}
.price-card h3{font-size:1.125rem;margin-bottom:12px}
.price-card ul{margin:22px 0 26px;display:grid;gap:11px;align-content:start;flex:1}
.price-card li{display:flex;gap:10px;font-size:.9rem;align-items:flex-start}
.price-card li svg{width:17px;height:17px;color:var(--gold-ink);flex:none;margin-top:4px}
.price-card .btn{width:100%}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:start}
.info-card{
  display:flex;gap:18px;padding:26px;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;transition:.35s var(--ease);
}
.info-card:hover{box-shadow:var(--shadow);border-color:transparent;transform:translateY(-4px)}
.info-card__icon{
  width:48px;height:48px;border-radius:var(--r);flex:none;display:grid;place-items:center;
  background:var(--gold-tint);color:var(--gold-ink);
}
.info-card__icon svg{width:20px;height:20px}
.info-card h3{font-size:1rem;margin-bottom:6px}
.info-card p,.info-card a{font-size:.9375rem;margin:0;color:var(--body);display:block;overflow-wrap:anywhere}
.info-card a:hover{color:var(--gold-ink)}

/* Contact details as one bordered panel of rows rather than five separate
   cards. Five stacked cards ran to 704px in a 487px column and left the left
   side of the contact grid 237px taller than the form beside it, which is a
   lot of page for a phone number and an address. The panel borrows the
   accordion's language, which the site already uses for exactly this shape. */
.info-list{
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  overflow:hidden;margin-top:32px
}
.info-list li{
  display:grid;grid-template-columns:auto 88px 1fr;align-items:center;
  gap:16px;padding:14px 20px
}
.info-list li + li{border-top:1px solid var(--line)}
.info-list__icon{
  width:38px;height:38px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--gold-tint);color:var(--gold-ink)
}
.info-list__icon svg{width:17px;height:17px}
.info-list__label{font-family:var(--f-head);font-size:.875rem;font-weight:600;color:var(--ink)}
.info-list__value{font-size:.9375rem;color:var(--body);overflow-wrap:break-word}
.info-list__value a{color:var(--body)}
.info-list__value a:hover{color:var(--gold-ink)}
.info-list__note{display:block;font-size:.8125rem;color:var(--body);opacity:.85;margin-top:2px}

.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:38px;box-shadow:var(--shadow-sm)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{margin-bottom:20px}
.field label{
  display:block;font-family:var(--f-head);font-size:.8125rem;font-weight:500;
  color:var(--ink);margin-bottom:8px;letter-spacing:.02em;
}
.field input,.field select,.field textarea{
  width:100%;padding:13px 16px;font:inherit;font-size:.9375rem;color:var(--ink);
  background:var(--tint-2);border:1px solid var(--line);border-radius:var(--r-sm);
  transition:.25s var(--ease);
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-deep);background:#fff;
  box-shadow:0 0 0 3px rgba(238,192,44,.35);
}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:#d94c4c;background:#fef6f6}
.field__error{display:none;font-size:.8125rem;color:#d94c4c;margin-top:6px}
.field.has-error .field__error{display:block}
.form__note{font-size:.8125rem;color:var(--muted);margin-top:16px}
.form__success{
  display:none;align-items:center;gap:12px;margin-bottom:24px;
  padding:16px 20px;border-radius:var(--r-sm);
  background:#eef8f1;border:1px solid #cbe7d4;color:#2c6b41;font-size:.9375rem;
}
.form__success.is-visible{display:flex}
.form__success svg{width:20px;height:20px;flex:none}

.map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--tint)}
.map iframe{width:100%;height:420px;border:0;display:block;filter:grayscale(.25)}
/* The Google embed paints its own pin in red. Desaturating the frame any harder
   than the .25 above starts to swallow the pin, which defeats the map. */
.map--split iframe{height:460px}
.map__head{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-end;margin-bottom:28px}
.map__head h2{margin:0}
.map__note{font-size:.9375rem;color:var(--body);margin:18px 0 0;max-width:660px}
.map__note a{color:var(--gold-ink);font-weight:600}

/* Find us: the map takes the wider column because it is the thing being read. */
.locate{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:center}
.locate__text h2{margin-bottom:14px}
.locate__list{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:20px}
.locate__list li{display:flex;gap:14px;align-items:flex-start}
.locate__list svg{width:20px;height:20px;flex:none;color:var(--gold-ink);margin-top:3px}
.locate__list strong{display:block;color:var(--ink);font-weight:600;font-size:.9375rem;margin-bottom:3px}
.locate__list span{display:block;font-size:.9375rem;color:var(--body)}
.locate__actions{display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-top:34px}

/* ============================================================
   ANIMATION + UTILITIES
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.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}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.to-top{
  position:fixed;right:24px;bottom:24px;z-index:50;
  width:46px;height:46px;border-radius:50%;border:0;
  background:var(--gold);color:var(--ink);display:grid;place-items:center;
  box-shadow:0 12px 26px rgba(138,106,0,.35);
  opacity:0;visibility:hidden;transform:translateY(12px);transition:.3s var(--ease);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top svg{width:16px;height:16px}
.to-top:hover{background:var(--ink);color:#fff;box-shadow:0 12px 26px rgba(16,27,51,.3)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  :root{--section:84px}
  .nav__list{gap:24px}
  .footer__grid{grid-template-columns:1.5fr 1fr 1.4fr;row-gap:44px}
}
@media (max-width:992px){
  .nav{display:none}
  .nav-toggle{display:grid}
  .header__inner{justify-content:space-between;min-height:80px;gap:14px}
  .header__cta{gap:9px}
  .header__cta .btn{padding:11px 18px;font-size:.8125rem}
    .hero__inner,.testimonial,.stats,.split,.svc-row,.contact-grid{grid-template-columns:1fr;gap:44px}
  .svc-detail{grid-template-columns:1fr;gap:36px}
  .prose-row{grid-template-columns:1fr;gap:36px}
  .prose-row__text{max-width:none}
  .prose-row--flip,.svc-detail--flip{grid-template-columns:1fr}
  .prose-row--flip .prose-row__media,.svc-detail--flip .svc-detail__aside{order:0}
  .svc-detail__aside{position:static}
  .locate{grid-template-columns:1fr;gap:40px}
  .map iframe,.map--split iframe{height:360px}
  .svc-row--flip .svc-row__media{order:0}
  .hero{padding-block:56px 72px}
  .hero__bg{display:none}
  .badge--stat{right:12px}
  .badge--rating{left:12px;bottom:-20px}
  .media-stack{padding-right:40px;padding-bottom:50px;max-width:520px}
  .g-3,.g-4,.g-5{grid-template-columns:repeat(2,1fr)}
  .step::after{display:none}
  .section-head--split{flex-direction:column;align-items:flex-start;gap:22px}
}
@media (max-width:768px){
  :root{--section:68px;--gap:22px}
  .reels.is-carousel .reel{flex:0 0 240px}
  .clients__grid{grid-template-columns:repeat(2,1fr)}
  .quote-band{padding:36px 28px;grid-template-columns:1fr;gap:34px}
  .quote-band__panel{border-left:0;border-top:1px solid rgba(255,255,255,.22);padding-left:0;padding-top:28px}
  .quote-band__big{font-size:4rem}
  .footer__grid{grid-template-columns:1fr 1fr}
  .topbar__contact a:nth-child(2){display:none}
}
@media (max-width:600px){
  .logo img{height:40px}
  .logo--panel img{height:40px}
  .logo{gap:10px}
  .logo__text b{font-size:1rem}
  .logo__text span{font-size:.625rem;letter-spacing:.14em}
  .g-2,.g-3,.g-4,.g-5,.form__row,.stats__grid{grid-template-columns:1fr}
  .info-list li{grid-template-columns:auto 1fr;align-items:start;gap:8px 14px}
  .info-list__icon{grid-row:span 2}
  .info-list__label{grid-column:2;align-self:end}
  .info-list__value{grid-column:2;align-self:start}
  .footer__grid{grid-template-columns:1fr}
  .topbar__inner{justify-content:center;padding-block:8px}
  .topbar__contact{gap:16px;font-size:.75rem}
  .topbar .socials{display:none}
  .form{padding:26px 22px}
  .hero__actions{gap:18px}
  .badge--stat{top:16px;right:8px;padding:10px 14px}
  .badge--rating{left:8px;bottom:-16px;padding:10px 14px}
  .badge--rating .badge__num{font-size:1.375rem}
  .footer__bottom{justify-content:center;text-align:center}
}
@media (max-width:430px){
  .logo__text b{font-size:1.0625rem}
  .logo__text span{font-size:.5625rem;letter-spacing:.12em}
  .header__inner{gap:10px}
  .header__cta .btn{padding:11px 15px;font-size:.78125rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   ACCESSIBILITY
   The dashboard had these and the public site did not, which is
   backwards: this is the side real customers use.
   ============================================================ */

/* Keyboard users had no idea where they were. */
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:3px}
.btn:focus-visible,.nav__list > li > a:focus-visible{outline-offset:3px}
.footer :focus-visible,.topbar :focus-visible,.page-hero :focus-visible,
.cta-dark :focus-visible,.project-card:focus-visible{outline-color:var(--gold)}

/* Straight past the header and the whole nav, to the content. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--gold);color:var(--ink);
  font-family:var(--f-head);font-weight:600;font-size:.9375rem;
  padding:14px 22px;border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{left:0}

/* A link that goes nowhere should not look or behave like one that does.
   These jumped the page to the top when clicked, which reads as a bug. */
a[href="#"]{cursor:not-allowed}
.footer__links a[href="#"],.footer__bottom a[href="#"]{opacity:.72}
.footer__links a[href="#"]:hover,.footer__bottom a[href="#"]:hover{transform:none;text-decoration:none}

/* Announced to screen readers, invisible to everyone else. */
.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}

/* The form said "please enter a valid email" in red text only. */
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:#d94c4c;background:#fef6f6;
}