/* Grab Hire Guildford — shared tokens + primitives (the logo's blue, white and yellow).
   Everything is visible with JavaScript off; motion is opt-in through the .js class. */

:root{
  --navy:#0A1F44;        /* deep ink and dark grounds */
  --navy-2:#0C2A5E;      /* lifted dark panel */
  --blue:#0F3D8C;        /* the brand blue (badge fill, ink on light) */
  --blue-2:#1F5FD1;      /* brighter blue for links and accents on dark grounds */
  --blue-3:#7FA3E6;      /* pale blue for small print on navy */
  --vivid:#1A5FE6;       /* the lively blue: accents, eyebrows, links (5.5:1 on white, 5.1:1 on paper) */
  --vivid-2:#3B7BFF;     /* brighter still, for glows and rules on dark grounds only */
  --sky:#EAF1FF;         /* light blue ground */
  --grad-dark:linear-gradient(135deg,#0A1F44 0%,#0F3D8C 58%,#1A5FE6 135%);
  --wash:#E9EFF9;        /* pale brand wash */
  --paper:#F5F7FA;       /* off-white ground */
  --white:#FFFFFF;
  --yellow:#FFC20E;      /* the brand yellow: buttons, marks, the town in the logo */
  --yellow-2:#E6AD00;    /* hover */
  --yellow-ink:#7A5A00;  /* yellow as INK on white needs to be this dark to read (5.1:1) */
  --grey-300:#CDD3DC;    /* mid-light ground, the step most builds forget */
  --grey-200:#E3E7ED;
  --ink:#0A1F44;
  --body:#3D4757;        /* 9.6:1 on white */
  --mute:#5B6675;        /* 5.6:1 on white, 4.6:1 on --paper */
  --line:rgba(10,31,68,.13);
  --line-dark:rgba(255,255,255,.14);
  --on-dark:rgba(255,255,255,.78);
  --on-dark-mute:rgba(255,255,255,.62);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --radius:6px;
  --radius-ctl:8px;
  --shadow-hdr:0 1px 0 var(--line);
  --shadow-pop:0 22px 48px -22px rgba(10,31,68,.45);

  --gutter:clamp(20px,5vw,64px);
  --shell:min(1280px, 100vw - 2*var(--gutter));
  --shell-wide:min(1480px, 100vw - 2*var(--gutter));
  --sec:clamp(52px,5.5vw,80px);     /* section rhythm: 160px between two sections on a big screen, not 256 */
  --sec-tight:clamp(40px,5vw,64px);
  --hdr:88px;
  --rail-lane:0px;

  --font-display:'Barlow Condensed',system-ui,sans-serif;
  --font-body:'Barlow',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 14px)}
body{
  margin:0; overflow-x:clip; background:var(--white); color:var(--body);
  font-family:var(--font-body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-bottom:var(--rail-lane);
}
img,svg,video{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; color:var(--ink); font-family:var(--font-display); font-weight:700; line-height:1.04; text-wrap:balance}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
strong,b{font-weight:600}
:focus-visible{outline:3px solid var(--yellow); outline-offset:3px}
::selection{background:var(--yellow); color:var(--navy)}
.wrap{width:var(--shell); margin-inline:auto}
.wrap-wide{width:var(--shell-wide); margin-inline:auto}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* ---------- micro type ---------- */
.eyebrow,.head .eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 18px;
  font-family:var(--font-body); font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--vivid);
}
.eyebrow::before{content:""; width:26px; height:3px; background:var(--yellow); border-radius:2px}
.on-dark .eyebrow,.eyebrow.light{color:var(--yellow)}
.lead{font-size:clamp(1.1rem,1.5vw,1.3rem); line-height:1.55; color:var(--body); max-width:62ch}
.on-dark .lead{color:var(--on-dark)}
.on-dark{color:var(--on-dark)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark p{color:var(--on-dark)}
.small{font-size:.88rem; color:var(--mute)}
.on-dark .small{color:var(--on-dark-mute)}
.sec{padding-block:var(--sec)}
.sec-tight{padding-block:var(--sec-tight)}
.head{max-width:720px; margin-bottom:clamp(36px,5vw,64px)}
.head h2{font-size:clamp(2.1rem,4vw,3.6rem); margin-bottom:16px}
.head p{font-size:1.1rem; max-width:60ch}
.head.centre{margin-inline:auto; text-align:center}
.head.centre .eyebrow{justify-content:center}
.head.centre p{margin-inline:auto}
em.acc{font-style:italic; color:var(--vivid)}
.on-dark em.acc{color:var(--yellow)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 28px; border-radius:var(--radius-ctl); border:2px solid transparent;
  font-family:var(--font-body); font-size:1rem; font-weight:600; letter-spacing:.01em; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  white-space:nowrap; position:relative; overflow:hidden; isolation:isolate;
}
.btn::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%); transform:translateX(-130%); transition:transform .65s var(--ease)}
.btn:hover::after{transform:translateX(130%)}
.btn:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.btn::after{display:none} .btn:hover{transform:none}}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--yellow); color:var(--navy); border-color:var(--yellow)}
.btn-primary:hover{background:var(--yellow-2); border-color:var(--yellow-2); box-shadow:0 14px 28px -12px rgba(255,194,14,.75)}
.btn-navy{background:var(--navy); color:#fff; border-color:var(--navy)}
.btn-navy:hover{background:var(--blue); border-color:var(--blue)}
.btn-blue{background:var(--blue); color:#fff; border-color:var(--blue)}
.btn-blue:hover{background:var(--navy); border-color:var(--navy)}
.btn-ghost{background:transparent; color:var(--ink); border-color:rgba(10,31,68,.28)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-ghost-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.btn-ghost-light:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.btn-white{background:#fff; color:var(--navy); border-color:#fff}
.btn-white:hover{background:var(--wash); border-color:var(--wash)}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}

/* ---------- header skeleton (each demo shapes its own) ---------- */
.hdr{position:fixed; inset:0 0 auto 0; z-index:60; height:var(--hdr); transition:background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease)}
.hdr .wrap-wide{display:flex; align-items:center; gap:clamp(14px,2.6vw,40px); height:100%}
.lockup{display:inline-flex; align-items:center; flex:none}
.lockup img{height:var(--logo-h,54px); width:auto}
.lockup .mark-on-light{display:none}
.hdr.solid .lockup .mark-on-dark,.hdr-light .lockup .mark-on-dark{display:none}
.hdr.solid .lockup .mark-on-light,.hdr-light .lockup .mark-on-light{display:block}
.nav{display:flex; align-items:center; gap:clamp(18px,2vw,34px); margin-left:auto}
.nav a{font-size:.94rem; font-weight:500; color:#fff; position:relative; padding:6px 0; white-space:nowrap}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--yellow); transform:scaleX(0); transform-origin:0 50%; transition:transform .3s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.hdr.solid .nav a,.hdr-light .nav a{color:var(--ink)}
.hdr-tel{display:inline-flex; align-items:center; gap:9px; font-weight:600; color:#fff; white-space:nowrap}
.hdr-tel svg{color:var(--yellow)}
.hdr.solid .hdr-tel,.hdr-light .hdr-tel{color:var(--ink)}
.btn-hdr{
  display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 20px; border-radius:var(--radius-ctl);
  background:var(--yellow); color:var(--navy); font-weight:600; font-size:.94rem; white-space:nowrap; flex:none;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.btn-hdr:hover{background:var(--yellow-2)}
.burger{
  display:none; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:none; cursor:pointer;
  align-items:center; justify-content:center; color:#fff; flex:none; margin-left:auto;
}
.burger span{position:relative; width:20px; height:2px; background:currentColor; display:block}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:currentColor}
.burger span::before{top:-6px} .burger span::after{top:6px}
.hdr.solid .burger,.hdr-light .burger{border-color:var(--line); color:var(--ink)}

/* ---------- drawer (phones) ---------- */
.drawer{
  position:fixed; inset:0; z-index:70; background:var(--navy); color:#fff; padding:22px var(--gutter) 40px;
  transform:translateX(100%); transition:transform .45s var(--ease-out); overflow:auto; display:flex; flex-direction:column;
}
.drawer.open{transform:none}
.drawer-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:34px}
.drawer-close{width:48px; height:48px; border:1px solid rgba(255,255,255,.3); background:none; border-radius:50%; color:#fff; font-size:26px; cursor:pointer; display:flex; align-items:center; justify-content:center}
.drawer nav{display:flex; flex-direction:column}
.drawer nav a{padding:16px 0; border-bottom:1px solid var(--line-dark); font-family:var(--font-display); font-size:clamp(1.7rem,7vw,2.3rem); font-weight:700; color:#fff; line-height:1.05}
.drawer-foot{margin-top:auto; padding-top:30px; display:flex; flex-direction:column; gap:12px}
.drawer-foot a{display:flex; align-items:center; gap:10px; color:#fff; font-size:1.05rem; font-weight:500}
.drawer-foot a svg{color:var(--yellow)}
.no-js-nav{display:none}
.d2-progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:75; pointer-events:none}
.d2-progress i{display:block; height:100%; width:100%; background:var(--yellow); transform:scaleX(var(--p,0)); transform-origin:0 50%}
.skip{position:absolute; left:-9999px; top:12px; z-index:100; padding:12px 18px; border-radius:var(--radius-ctl); background:var(--yellow); color:var(--navy); font-weight:600}
.skip:focus{left:12px; outline:3px solid var(--navy)}

/* ---------- nav dropdowns (hover or focus on desktop, a chevron button for keyboards and touch) ---------- */
.nav .has-sub{position:relative; display:flex; align-items:center; gap:2px}
.sub-tog{width:26px; height:26px; border:0; background:none; padding:0; display:flex; align-items:center; justify-content:center; color:inherit; cursor:pointer; border-radius:50%; transition:transform .3s var(--ease), background .25s var(--ease)}
.nav .sub-tog{color:#fff}
.hdr.solid .nav .sub-tog{color:var(--ink)}
.sub-tog:hover{background:rgba(255,255,255,.14)}
.hdr.solid .sub-tog:hover{background:var(--wash)}
.has-sub.open .sub-tog{transform:rotate(180deg)}
.sub{position:absolute; left:-14px; top:100%; padding-top:14px; min-width:250px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s; z-index:5}
.sub-in{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-pop); border:1px solid var(--line); padding:8px; display:grid}
.hdr .nav .sub a,.hdr.solid .nav .sub a{color:var(--ink); padding:10px 14px; border-radius:6px; font-weight:500; white-space:nowrap}
.nav .sub a::after{display:none}
.hdr .nav .sub a:hover,.hdr .nav .sub a:focus-visible,.hdr.solid .nav .sub a:hover,.hdr.solid .nav .sub a:focus-visible{background:var(--wash); color:var(--blue)}
.hdr .nav .sub a[aria-current="page"],.hdr.solid .nav .sub a[aria-current="page"]{color:var(--blue); font-weight:600}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{opacity:1; visibility:visible; transform:none; transition-delay:0s}
.nav > a[aria-current="page"]::after,.has-sub > a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- drawer accordions ---------- */
.drawer .dr-sub{border-bottom:1px solid var(--line-dark)}
.drawer .dr-sub summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; font-family:var(--font-display); font-size:clamp(1.7rem,7vw,2.3rem); font-weight:700; color:#fff; line-height:1.05}
.drawer .dr-sub summary::-webkit-details-marker{display:none}
.drawer .dr-sub summary i{position:relative; flex:none; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.3); transition:transform .3s var(--ease)}
.drawer .dr-sub summary i::before,.drawer .dr-sub summary i::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; background:#fff; transform:translate(-50%,-50%)}
.drawer .dr-sub summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.drawer .dr-sub[open] summary i{transform:rotate(45deg); background:var(--yellow); border-color:var(--yellow)}
.drawer .dr-sub[open] summary i::before,.drawer .dr-sub[open] summary i::after{background:var(--navy)}
.drawer .dr-sub-in{display:grid; padding:0 0 12px}
.drawer nav .dr-sub-in a{font-family:var(--font-body); font-size:1.08rem; font-weight:500; padding:10px 0 10px 14px; border:0; border-left:2px solid rgba(255,255,255,.18); color:rgba(255,255,255,.86)}
.drawer nav .dr-sub-in a:hover{color:var(--yellow); border-left-color:var(--yellow)}

/* ---------- marquee strip (one per page at most) ---------- */
.strip{overflow:hidden; background:var(--yellow); color:var(--navy)}
.strip-track{display:flex; width:max-content; animation:strip 42s linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
.strip-set{display:flex; flex:none}
.strip-set span{display:inline-flex; align-items:center; gap:22px; padding:16px 26px 16px 0; font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap}
.strip-set span::after{content:""; width:7px; height:7px; border-radius:50%; background:var(--navy); opacity:.55}
@keyframes strip{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none}}

/* ---------- forms ---------- */
.enq{display:grid; gap:16px}
.enq-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column; gap:7px; font-size:.88rem; font-weight:600; letter-spacing:.04em; color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; border-radius:var(--radius-ctl); border:1px solid var(--line); background:#fff; color:var(--ink);
  font:inherit; font-size:1rem; font-weight:400; letter-spacing:0; transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field select{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230A1F44' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(15,61,140,.15)}
.field textarea{resize:vertical; min-height:120px}
.on-dark .field{color:#fff}
.on-dark .field input,.on-dark .field select,.on-dark .field textarea{background-color:rgba(255,255,255,.07); border-color:rgba(255,255,255,.22); color:#fff}
.on-dark .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E")}
.on-dark .field select option{color:var(--ink); background:#fff}
.on-dark .field input:focus,.on-dark .field select:focus,.on-dark .field textarea:focus{border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,194,14,.2)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-ok{display:none; padding:14px 18px; border-radius:var(--radius-ctl); background:var(--wash); color:var(--ink); font-weight:500}
.enq.sent .form-ok{display:block}
.enq.sent .btn{display:none}
.form-note{font-size:.88rem; color:var(--mute)}
/* the live form: security code row and the status line */
.enq-cap-row{display:flex; gap:10px; align-items:stretch}
.enq-cap-row img{flex:0 0 120px; width:120px; height:44px; align-self:center; border:1px solid var(--line); border-radius:var(--radius-ctl); background:#fff; object-fit:cover}
.enq-cap-row input{flex:1 1 auto; min-width:0}
.enq-cap-new{flex:0 0 auto; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:var(--radius-ctl); background:#fff; color:var(--ink); font:inherit; font-size:.88rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:border-color .25s var(--ease), color .25s var(--ease)}
.enq-cap-new:hover{border-color:var(--vivid); color:var(--vivid)}
.on-dark .enq-cap-new{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.22); color:#fff}
.enq [aria-invalid="true"]{border-color:#C0392B !important; box-shadow:0 0 0 3px rgba(192,57,43,.15)}
.form-msg{display:none; padding:14px 18px; border-radius:var(--radius-ctl); font-weight:500; font-size:.96rem}
.form-msg.is-good{display:block; background:#DDF3E4; color:#0F5F32}
.form-msg.is-bad{display:block; background:#FBE0DC; color:#8E2418}
.form-msg:focus{outline:none}
@media (max-width:420px){.enq-cap-row{flex-wrap:wrap} .enq-cap-row input{flex-basis:100%}}
.on-dark .form-note{color:var(--on-dark-mute)}
.on-dark .form-ok{background:rgba(255,255,255,.1); color:#fff}
@media (max-width:560px){.enq-row{grid-template-columns:1fr}}

/* ---------- floating action rail ----------
   Desktop: a compact vertical panel docked in the bottom-right CORNER (never vertically
   centred over the reading column). Under 1024px: a full-width bar in its own reserved lane,
   so it covers nothing. Colours come from --rail-* so each demo tones it. */
.rail{
  position:fixed; right:18px; bottom:18px; z-index:55; display:flex; flex-direction:column; gap:6px;
  padding:7px; border-radius:100px; background:var(--rail-bg,rgba(10,31,68,.9)); border:1px solid var(--rail-line,rgba(255,255,255,.16));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.rail-b{
  position:relative; width:46px; height:46px; border-radius:50%; border:0; background:transparent; color:var(--rail-fg,#fff);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease);
}
.rail-b:hover{background:var(--rail-hover,var(--yellow)); color:var(--rail-hover-fg,var(--navy))}
.rail-l{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.rail-top{display:none}
.rail-top.on{display:flex}
.rail.sw-off{opacity:0; pointer-events:none; transform:translateY(12px)}
@media (max-width:1023px){
  :root{--rail-lane:calc(58px + env(safe-area-inset-bottom))}
  .rail{
    right:0; bottom:0; left:0; flex-direction:row; justify-content:space-around; border-radius:0; border:0; padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    border-top:1px solid var(--rail-line,rgba(255,255,255,.16)); gap:4px;
  }
  .rail.sw-off{opacity:1; pointer-events:auto; transform:none}
  .rail-b{width:auto; height:46px; flex:1; border-radius:var(--radius-ctl); gap:8px; font-size:.88rem; font-weight:600}
  .rail-l{position:static; width:auto; height:auto; clip-path:none}
  .rail-top{display:none !important}
}

/* ---------- reveal (visible by default; JS opts in) ---------- */
.js [data-reveal]{opacity:0; transform:translateY(16px)}
[data-anim="wipe"].js [data-reveal]{transform:translateX(-18px); clip-path:inset(0 100% 0 0)}
[data-anim="settle"].js [data-reveal]{transform:translateY(26px) scale(.985)}
[data-anim="rise"].js [data-reveal]{transform:translateY(12px); filter:blur(7px)}
.js [data-reveal].in{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease)}
[data-anim="wipe"].js [data-reveal].in{transform:none; clip-path:inset(0 0 0 0); transition:opacity .45s linear, transform .62s var(--ease-out), clip-path .62s var(--ease-out)}
[data-anim="settle"].js [data-reveal].in{transform:none; transition:opacity .82s var(--ease), transform .82s cubic-bezier(.2,.9,.24,1)}
[data-anim="rise"].js [data-reveal].in{transform:none; filter:blur(0px); transition:opacity 1s var(--ease), transform 1s var(--ease), filter .9s var(--ease)}
.js.no-reveal [data-reveal]{opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important}
.js.no-reveal .wm-w{opacity:1 !important; transform:none !important}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important}
}
/* photo masks: a picture wipes into view from the bottom, no fade or drift */
[data-anim].js [data-reveal="mask"]{opacity:1; transform:none; clip-path:inset(0 0 100% 0)}
[data-anim].js [data-reveal="mask"].in{clip-path:inset(0 0 0 0); transition:clip-path 1.1s var(--ease-out)}
@media (prefers-reduced-motion:reduce){[data-anim].js [data-reveal="mask"]{clip-path:none !important}}
.js.no-reveal [data-reveal="mask"]{clip-path:none !important}
/* headline word masks (settle + rise) */
.wm-m{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.12em; margin-bottom:-.12em}
.js .wm-w{display:inline-block; transform:translateY(110%); opacity:0; transition:transform .9s var(--ease-out), opacity .6s var(--ease)}
.js .wm-on .wm-w{transform:none; opacity:1}
@media (prefers-reduced-motion:reduce){.js .wm-w{transform:none; opacity:1}}

/* ---------- photo grading: one grade over every content photograph ---------- */
.ph{filter:saturate(1.08) contrast(1.04)}

/* ---------- credentials strip (the one place the parent company is named) ---------- */
.cred{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,40px)}
.cred-item{display:flex; gap:16px; align-items:flex-start}
.cred-item svg{flex:none; color:var(--yellow); margin-top:3px}
.cred-item b{display:block; font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:var(--ink); margin-bottom:4px; line-height:1.1}
.cred-item p{font-size:.94rem; color:var(--mute)}
.on-dark .cred-item b{color:#fff}
.on-dark .cred-item p{color:var(--on-dark-mute)}
@media (max-width:900px){.cred{grid-template-columns:1fr}}

/* ---------- footer skeleton ---------- */
.ftr{background:var(--navy); color:var(--on-dark); padding:clamp(56px,7vw,88px) 0 34px}
/* The services column is sized to its longest label (max-content), so no service ever breaks
   onto a second line; the other three columns share what is left. Under 1180px it goes 2-up. */
.ftr-grid{display:grid; grid-template-columns:1.1fr max-content .9fr 1.2fr; gap:clamp(28px,4vw,56px)}
.ftr h3{font-family:var(--font-body); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); margin-bottom:18px; font-weight:600}
.ftr li{padding:5px 0; font-size:.94rem}
.ftr li a{white-space:nowrap}
.ftr a:hover{color:#fff}
.ftr-about p{max-width:42ch; margin-top:18px; font-size:.94rem}
.ftr-contact li{display:flex; gap:10px; align-items:flex-start}
.ftr-contact li a{white-space:normal}
.ftr-contact svg{color:var(--yellow); flex:none; margin-top:5px}
.ftr-hours{margin-top:14px; padding-top:14px; border-top:1px solid var(--line-dark)}
.ftr-hours li{display:flex; justify-content:space-between; gap:12px}
.ftr-hours b{color:#fff; white-space:nowrap}
.ftr-bot{margin-top:clamp(36px,5vw,56px); padding-top:22px; border-top:1px solid var(--line-dark); display:grid; gap:6px; font-size:.82rem; color:var(--on-dark-mute)}
.ftr-bot b{color:#fff; font-weight:600}
.ftr-bot a{text-decoration:underline; text-underline-offset:3px}
@media (max-width:1180px){
  .ftr-grid{grid-template-columns:1fr 1fr}
  .ftr li a{white-space:normal}
}
@media (max-width:640px){.ftr-grid{grid-template-columns:1fr}}

/* ---------- shared responsive ---------- */
@media (max-width:980px){
  .nav,.hdr-tel,.hdr .btn-hdr{display:none}
  .burger{display:flex}
}
@media (max-width:700px){
  :root{--hdr:74px}
  body .eyebrow,body .head .eyebrow{font-size:.7rem; letter-spacing:.11em}
  body{font-size:16.5px}
  .btn{width:100%; max-width:360px}
  .btn.auto{width:auto}
  .head h2{font-size:clamp(1.9rem,8vw,2.6rem)}
}
@media (pointer:coarse){a,button{-webkit-tap-highlight-color:transparent}}