:root{
  --gold:#0E7490; --gold-dk:#0A5A71; --gold-lt:#36A3C0;
  /* --ink is Drew's logo navy, measured off the card he supplied (#112949),
     not a guess at it. Everything dark on the site is this colour or a step
     of it, so the logo sits in the page instead of on it. The neutrals carry
     a slight blue bias for the same reason. */
  --ink:#112949; --ink-2:#1B3A5E; --body:#314760; --mute:#5A6F86;   /* AA on white AND on --sand; the lighter blue-grey missed on both */
  --paper:#FFFFFF; --sand:#F2F5F8; --line:#D9E0E8; --hair:#E9EEF3;
  --ok:#1C7B57;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;background:var(--paper);color:var(--body);
  font-family:"Source Sans 3",system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--gold-dk)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dk)}
h1,h2,h3,.dsp{font-family:Oswald,"Arial Narrow",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.012em;color:var(--ink);line-height:1.08;
  margin:0;text-wrap:balance}
h1{font-size:clamp(34px,5.4vw,62px)}
h2{font-size:clamp(26px,3.6vw,40px)}
h3{font-size:clamp(19px,2.1vw,24px)}
p{margin:0 0 15px}
.lead{font-size:19.5px;color:var(--ink-2)}

/* top strip + nav */
.strip{background:var(--gold);color:#fff;font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;letter-spacing:.09em;text-transform:uppercase}
.strip .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  padding:9px 22px}
.strip a{color:#fff;text-decoration:none;font-weight:500}
nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.3) blur(7px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:22px;padding:13px 22px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand img{border-radius:7px;height:40px;width:auto}
.brand b{font-family:Oswald,sans-serif;font-weight:600;font-size:20px;
  text-transform:uppercase;color:var(--ink);letter-spacing:.02em}
.navlinks{display:flex;gap:22px}
.navlinks a{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.navlinks a:hover{color:var(--gold-dk)}
@media(max-width:900px){.navlinks{display:none}}

.btn{display:inline-block;font-family:Oswald,sans-serif;font-weight:600;font-size:15.5px;
  letter-spacing:.07em;text-transform:uppercase;padding:14px 26px;border-radius:2px;
  text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-p{background:var(--gold);color:#fff}
.btn-p:hover{background:var(--gold-dk)}
.btn-o{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-o:hover{background:var(--ink);color:#fff}
.btn-w{background:#fff;color:var(--gold-dk)}

/* hero with the form */
.hero{background:var(--ink) url("/hero-foam.jpg") center 44%/cover no-repeat;
  color:#DCE7EC;position:relative;overflow:hidden}
/* The foam shot is texture behind the copy, not the subject. Scrim is heaviest
   on the left under the headline and lifts to the right so the foam still
   reads behind the form. Without this the white h1 sits on white suds. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(97deg,rgba(9,24,45,.955) 0%,rgba(9,24,45,.9) 38%,
    rgba(9,24,45,.76) 68%,rgba(9,24,45,.68) 100%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1100px 560px at 12% -10%,rgba(54,163,192,.18),transparent 60%)}
@media(max-width:1000px){
  /* stacked: copy runs the full width, so the scrim has to be even everywhere */
  .hero::before{background:linear-gradient(180deg,rgba(9,24,45,.94) 0%,
    rgba(9,24,45,.9) 55%,rgba(9,24,45,.93) 100%)}}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;
  gap:52px;align-items:start;padding:72px 22px 78px}
.hero h1{color:#fff}
.hero .lead{color:#B9CCD6}
.hero .eyebrow{color:var(--gold-lt)}
.hero ul{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:9px}
.hero li{padding-left:28px;position:relative;color:#CBDBE3}
.hero li::before{content:"";position:absolute;left:0;top:9px;width:13px;height:13px;
  border:2px solid var(--gold-lt);border-right:0;border-top:0;transform:rotate(-45deg)}
.herobtns{display:flex;flex-wrap:wrap;gap:13px}
@media(max-width:1000px){.hero .wrap{grid-template-columns:1fr;gap:38px;padding:52px 22px 58px}}

.card{background:var(--paper);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 20px 46px -26px rgba(11,27,50,.45)}
.form{padding:26px}
.form h3{margin-bottom:4px}
.form .sm{font-size:14.5px;color:var(--mute);margin-bottom:17px}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.field label{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mute)}
.field input,.field select,.field textarea{font-family:inherit;font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:3px;padding:11px 12px;width:100%}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.form .btn{width:100%;text-align:center}
.hp{position:absolute;left:-9999px}

/* reviews under the hero */
.rev{background:var(--sand);padding:56px 0}
.revhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:26px}
.stars{color:var(--gold);font-size:21px;letter-spacing:3px}
.revgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(282px,1fr));gap:18px}
.revcard{background:#fff;border:1px solid var(--line);border-radius:4px;padding:21px 22px}
.revcard .q{color:var(--ink-2);font-size:16px}
.revcard .who{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);margin-top:12px}

section{padding:74px 0}
.sand{background:var(--sand)}
.band{background:var(--gold);color:#fff;padding:62px 0}
.band h2,.band .dsp{color:#fff}
.band p{color:#DFF1F6;margin:0}
.band .eyebrow{color:#C7E9F2}

/* numbered service scenes */
.scene{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.scene.flip > .scenetext{order:2}
.scenenum{font-family:Oswald,sans-serif;font-size:72px;font-weight:600;color:var(--gold);
  line-height:.8;opacity:.22;margin-bottom:8px}
.scenepic{aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:var(--ink-2);
  position:relative;border:1px solid var(--line)}
.scenepic img{width:100%;height:100%;object-fit:cover}
.scenepic.ph{background:
  linear-gradient(135deg,var(--ink) 0%,var(--gold-dk) 58%,var(--gold-lt) 140%)}
.scenepic.ph::after{content:attr(data-n);position:absolute;right:16px;bottom:8px;
  font-family:Oswald,sans-serif;font-size:96px;font-weight:600;color:rgba(255,255,255,.14);
  line-height:1}
@media(max-width:900px){.scene{grid-template-columns:1fr;gap:26px}.scene.flip > .scenetext{order:0}}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:20px}
.tile{background:#fff;border:1px solid var(--line);border-radius:4px;padding:23px}
.tile h3{margin-bottom:6px;font-size:19px}
.tile p{margin:0;font-size:15.5px;color:var(--body)}

.steps{counter-reset:s;display:grid;gap:18px;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;gap:17px;align-items:start}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:Oswald,sans-serif;
  font-size:21px;font-weight:600;color:var(--gold);border:2px solid var(--gold);
  width:48px;height:48px;display:grid;place-items:center;border-radius:2px}
.steps b{font-family:Oswald,sans-serif;font-weight:600;font-size:18px;text-transform:uppercase;
  color:var(--ink);display:block}

.owner{display:grid;grid-template-columns:.78fr 1.22fr;gap:44px;align-items:center}
.ownerpic{aspect-ratio:1;border-radius:4px;background:
  linear-gradient(150deg,var(--ink-2),var(--gold-dk));overflow:hidden;position:relative}
.ownerpic img{width:100%;height:100%;object-fit:cover}
.ownerpic::after{content:"D";position:absolute;inset:0;display:grid;place-items:center;
  font-family:Oswald,sans-serif;font-size:140px;color:rgba(255,255,255,.16)}
.ownerpic.has::after{display:none}
@media(max-width:900px){.owner{grid-template-columns:1fr;gap:26px}}

.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:12px}
.gal img{aspect-ratio:1;object-fit:cover;border-radius:3px;border:1px solid var(--line)}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.chip{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.07em;
  background:#fff;border:1px solid var(--line);border-radius:2px;padding:7px 12px;color:var(--ink-2)}
.band .chip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}

.phoneband{background:var(--ink);color:#fff;padding:62px 0;text-align:center}
.phoneband a.big{font-family:Oswald,sans-serif;font-weight:600;
  font-size:clamp(34px,6.4vw,66px);color:#fff;text-decoration:none;letter-spacing:.02em;
  display:inline-block;margin:10px 0 6px}
.phoneband a.big:hover{color:var(--gold-lt)}
.phoneband p{color:#AEC3CD}

details{border-bottom:1px solid var(--line);padding:16px 0}
details summary{font-family:Oswald,sans-serif;font-weight:600;font-size:18px;
  text-transform:uppercase;color:var(--ink);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:25px;color:var(--gold);line-height:1}
details[open] summary::after{content:"\2212"}
details p{margin:11px 0 0;color:var(--body)}

footer{background:var(--ink);color:#9FB6C2;padding:54px 0 96px;font-size:15px}
/* the lockup is white artwork, so it only lives on the dark surfaces */
.flogo{width:auto;height:92px;margin:0 0 34px;opacity:.95}
@media(max-width:600px){.flogo{height:70px;margin-bottom:26px}}
footer h4{font-family:Oswald,sans-serif;font-weight:600;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin:0 0 13px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:30px}
footer a{color:#C5D7E0;text-decoration:none}
footer a:hover{color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding-top:20px;
  font-size:13.5px;color:#7F97A4;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between}

.callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:var(--gold);box-shadow:0 -6px 20px rgba(0,0,0,.2)}
.callbar a{display:block;text-align:center;padding:15px;color:#fff;text-decoration:none;
  font-family:Oswald,sans-serif;font-weight:600;font-size:18px;letter-spacing:.06em;
  text-transform:uppercase}
@media(max-width:760px){.callbar{display:block}footer{padding-bottom:104px}}

/* reveal: resting state is VISIBLE, so no-JS and failed observers still read */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

.legal{max-width:760px;margin:0 auto;padding:56px 22px 90px}
.legal h1{margin-bottom:8px}
.legal h2{font-size:21px;margin:30px 0 8px}
.legal p,.legal li{font-size:16.5px}