/* Stripertechnologys — site styles
   One stylesheet for the whole site. Edit colors in the :root block below. */

:root{
  --ink:#0e1a22;
  --slate:#2f4454;
  --muted:#5f7383;
  --accent:#33608c;
  --accent-dark:#254968;
  --accent-light:#5980a6;
  --accent-soft:#eaf1f7;
  --line:#e0e7ea;
  --bg:#ffffff;
  --bg-alt:#f5f8fa;
  --bg-deep:#131c24;
  --ph-red:#e02b2b;
  --maxw:1080px;
  --radius:10px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  overflow-wrap:break-word;
  background:var(--bg);
  color:var(--slate);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;}

h1,h2,h3,h4{color:var(--ink);line-height:1.2;margin:0 0 .5em;font-weight:650;letter-spacing:-.015em;}
h1{font-size:clamp(2rem,4.4vw,3rem);}
h2{font-size:clamp(1.5rem,2.8vw,2rem);margin-top:0;}
h3{font-size:1.15rem;}
p{margin:0 0 1.1em;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
ul,ol{padding-left:1.25em;margin:0 0 1.1em;}
li{margin-bottom:.5em;}
hr{border:0;border-top:1px solid var(--line);margin:3rem 0;}
strong{color:var(--ink);font-weight:640;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.narrow{max-width:760px;}

/* ---------- header ---------- */
.site-header{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:50;}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:680;color:var(--ink);font-size:1.06rem;letter-spacing:-.02em;}
.brand:hover{text-decoration:none;}
.brand-mark{width:26px;height:26px;flex:none;}
nav.main > a{color:var(--slate);font-size:.94rem;font-weight:520;margin-left:24px;}
nav.main > a:hover{color:var(--accent);text-decoration:none;}
nav.main > a.cta{
  background:var(--accent);color:#fff;padding:9px 17px;border-radius:7px;font-weight:600;
}
nav.main > a.cta:hover{background:var(--accent-dark);}
.nav-toggle{display:none;}

@media (max-width:860px){
  .site-header .wrap{flex-wrap:wrap;min-height:0;padding-top:14px;padding-bottom:14px;}
  nav.main{width:100%;display:flex;flex-wrap:wrap;gap:6px 0;padding-top:10px;border-top:1px solid var(--line);margin-top:12px;}
  nav.main > a{margin-left:0;margin-right:20px;font-size:.9rem;}
  nav.main > a.cta{margin-right:0;margin-left:auto;}
}

/* ---------- hero ---------- */
.hero{
  color:#c8d6de;padding:112px 0 116px;
  /* The photo fills the whole banner. The dark gradient on top of it is what
     keeps the white text readable -- lighten those numbers and the headline
     starts to disappear into the sky. */
  background-color:var(--bg-deep);
  background-image:linear-gradient(rgba(10,18,24,.80),rgba(10,18,24,.66)),
                   url('../images/home-hero.jpg');
  background-size:cover;
  background-position:center 38%;
  background-repeat:no-repeat;
}
.hero-copy{max-width:62ch;}
.hero h1{color:#fff;max-width:17ch;}
.hero .lede{font-size:1.2rem;max-width:56ch;color:#adc0cb;}
.eyebrow{
  text-transform:uppercase;letter-spacing:.13em;font-size:.73rem;font-weight:700;
  color:#8fb3d4;margin:0 0 18px;
}
.hero .btn-row{margin-top:30px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--accent);color:#fff;padding:14px 26px;border-radius:8px;
  font-weight:620;font-size:1rem;border:1px solid var(--accent);cursor:pointer;
}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);text-decoration:none;color:#fff;}
.btn-ghost{background:transparent;color:#fff;border-color:#3d5666;margin-left:10px;}
.btn-ghost:hover{background:#1a2a35;border-color:#4d6a7c;color:#fff;}
/* On the banner this button sits straight on the photograph, so its inside
   was simply whatever happened to be behind it -- sky, trees, road -- and it
   changed shade as the photo finished loading. A steady translucent panel
   makes it look the same from the first paint onwards, and the wording is
   easier to read over a busy picture. */
.hero .btn-ghost{background:rgba(10,18,24,.46);border-color:rgba(255,255,255,.42);}
.hero .btn-ghost:hover{background:rgba(10,18,24,.7);border-color:rgba(255,255,255,.75);}
@media (max-width:560px){
  .btn{display:block;text-align:center;}
  .btn-ghost{margin-left:0;margin-top:12px;}
}

/* ---------- sections ---------- */
section{padding:72px 0;}
section.alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
section.tight{padding:52px 0;}
.section-head{max-width:64ch;margin-bottom:40px;}
.section-head p{color:var(--muted);}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:26px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:820px){.grid-2,.grid-3{grid-template-columns:1fr;}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;}
.card h3{margin-bottom:.4em;}
.card p:last-child{margin-bottom:0;}
.card .num{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);
  font-weight:700;font-size:.85rem;margin-bottom:14px;
}

/* ---------- checklist ---------- */
.checks{list-style:none;padding:0;margin:0;}
.checks li{position:relative;padding-left:30px;margin-bottom:.7em;}
.checks li::before{
  content:"";position:absolute;left:0;top:.58em;width:15px;height:8px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg);
}
.crosses{list-style:none;padding:0;margin:0;}
.crosses li{position:relative;padding-left:30px;margin-bottom:.7em;color:var(--muted);}
.crosses li::before{
  content:"×";position:absolute;left:4px;top:-2px;color:#b0bfc8;font-size:1.4rem;line-height:1.5;
}

/* ---------- callout ---------- */
.callout{
  background:var(--accent-soft);border-left:4px solid var(--accent);
  padding:24px 26px;border-radius:0 var(--radius) var(--radius) 0;margin:32px 0;
}
.callout p:last-child{margin-bottom:0;}
.callout h3{margin-top:0;}

.note{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin:28px 0;}
.note p:last-child{margin-bottom:0;}

/* ---------- area chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0;}
.chips li{
  background:#fff;border:1px solid var(--line);border-radius:100px;
  padding:8px 18px;font-size:.93rem;color:var(--slate);margin:0;
}

/* ---------- CTA band ---------- */
.band{background:var(--bg-deep);color:#adc0cb;text-align:center;}
.band h2{color:#fff;}
.band p{max-width:52ch;margin-left:auto;margin-right:auto;}

/* ---------- form ---------- */
form .field{margin-bottom:20px;}
label{display:block;font-weight:600;color:var(--ink);font-size:.93rem;margin-bottom:7px;}
input,select,textarea{
  width:100%;padding:12px 14px;border:1px solid #cfdae0;border-radius:7px;
  font:inherit;font-size:1rem;color:var(--ink);background:#fff;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
textarea{min-height:130px;resize:vertical;}
.hp{position:absolute;left:-9999px;}

/* ---------- footer ---------- */
.site-footer{background:var(--bg-deep);color:#8ba1af;padding:66px 0 30px;font-size:.93rem;}
.site-footer a{color:#c8d6de;}
.site-footer a:hover{color:#fff;}
.site-footer h4{color:#8ba1af;font-size:.76rem;text-transform:uppercase;
  letter-spacing:.13em;font-weight:600;margin-bottom:16px;}
.footer-grid{display:grid;grid-template-columns:1.9fr 1fr 1fr 1.1fr;gap:44px;}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin-bottom:.62em;}

/* the wordmark block on the left */
.foot-brand{max-width:38ch;}
.foot-logo{display:flex;align-items:center;gap:11px;margin-bottom:18px;}
.foot-logo svg{width:44px;height:44px;flex:0 0 44px;}
.foot-word{display:flex;flex-direction:column;gap:3px;}
/* Same two classes as the wordmark beside the forms, so site.js stretches
   the slogan to the exact width of the name here too. Only the colours and
   the size change -- this one sits on a dark panel. */
.foot-logo .lead-name{color:#fff;font-size:1.62rem;font-weight:700;
  letter-spacing:-.028em;line-height:1;white-space:nowrap;display:block;}
.foot-logo .lead-name b{color:var(--accent-light);font-weight:700;}
.foot-logo .lead-tag{font-size:.6rem;color:#8fb4d4;}
.foot-brand p{margin:0;line-height:1.7;}

.foot-loc p{margin:0 0 4px;line-height:1.7;}
.foot-social{margin-top:18px!important;}
.foot-social a{display:inline-flex;align-items:center;gap:9px;}
.foot-social img{display:block;width:18px;height:18px;flex:none;}

/* bottom bar */
.legal{border-top:1px solid #24333e;margin-top:46px;padding-top:22px;
  font-size:.83rem;color:#8ba1af;
  display:flex;flex-wrap:wrap;gap:6px 34px;align-items:baseline;}
.legal p{margin:0;}
.legal-copy{flex:0 0 auto;}

@media (max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px 40px;}
  .foot-brand{grid-column:1 / -1;max-width:52ch;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;gap:30px;}
  .foot-brand{grid-column:auto;}
  .legal{gap:12px;}
}

/* ---------- misc ---------- */
.breadcrumb{font-size:.88rem;color:var(--muted);padding-top:28px;}
.breadcrumb a{color:var(--muted);}
.page-head{padding:56px 0 8px;}
.page-head h1{max-width:20ch;}
.page-head .lede{font-size:1.14rem;color:var(--muted);max-width:60ch;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:16px;top:12px;background:#fff;padding:10px 16px;z-index:100;border-radius:6px;}


/* ================= ADDED: top bar, logo, placeholders, FAQ, platforms ============ */

/* --- top utility bar with the phone number --- */
.topbar{background:#0b1319;color:#9db2c0;font-size:.86rem;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;
  gap:6px 16px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap;}
.topbar a{color:#dbe6ed;font-weight:600;}
.topbar .tag{color:#7f96a6;}
.topbar .contact{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;
  min-width:0;}
.topbar .tb-phone{white-space:nowrap;}
/* LinkedIn mark at the far left of the top bar. Sized to the cap height of
   the text opposite so it sits on the same line and the bar stays thin. */
.topbar .tb-li{display:inline-flex;align-items:center;line-height:0;
  margin-right:auto;opacity:.9;transition:opacity .2s ease;}
.topbar .tb-li:hover{opacity:1;}
.topbar .tb-li img{display:block;width:17px;height:17px;}
.topbar .tb-mail{overflow-wrap:anywhere;}
.topbar .contact .tb-mail::before{content:"\00b7";color:#5c7385;
  margin-right:14px;font-weight:400;}
@media (max-width:620px){
  .topbar .tag{display:none;}
  .topbar .wrap{justify-content:space-between;gap:6px 12px;flex-wrap:nowrap;}
  .topbar .tb-li{margin-right:0;order:0;flex:none;}
  .topbar .contact{justify-content:flex-end;text-align:right;}
}
@media (max-width:430px){
  .topbar{font-size:.78rem;}
  .topbar .contact{flex-direction:column;gap:2px;align-items:flex-end;}
  .topbar .contact .tb-mail::before{content:"";margin:0;}
}

.brand-mark{width:34px;height:34px;flex:none;display:block;overflow:visible;}
.site-header .brand span{line-height:1.15;}

/* --- IMAGE PLACEHOLDERS -----------------------------------------------
   Black + red blocks marking where a picture goes. Replace each one with
   an <img> tag. Delete the .ph div when you do. --------------------- */
.ph{
  position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:6px;
  background:#0a0a0a;
  background-image:repeating-linear-gradient(45deg,
     rgba(224,43,43,.16) 0 12px, transparent 12px 24px);
  border:3px dashed var(--ph-red);
  border-radius:var(--radius);
  color:#ff6b6b;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  padding:22px;min-height:210px;overflow:hidden;
}
.ph strong{display:block;color:#fff;font-size:.95rem;letter-spacing:.02em;
  text-transform:none;font-weight:700;}
.ph em{font-style:normal;color:#c76b6b;font-size:.72rem;}
.ph-tall{min-height:330px;}

/* Real photographs. Same shapes the red placeholder blocks occupied, so a
   picture can be swapped in or back out without the layout moving. */
.shot{display:block;width:100%;height:auto;border-radius:var(--radius);
  box-shadow:0 18px 46px rgba(14,26,34,.15);}
.shot-tall{aspect-ratio:4/3;object-fit:cover;}
.shot-sq{aspect-ratio:1/1;object-fit:cover;}
.shot-portrait{aspect-ratio:4/5;object-fit:cover;}
.photo-cap{margin:14px 0 0;font-size:.86rem;font-weight:650;color:var(--muted);
  letter-spacing:.02em;}

/* The "Who are we?" panel. Deliberately not a solid blue block: this is the
   palest blue in the palette with a solid accent edge down one side, and the
   three short bars above the heading are the stripes off the fish in the
   logo. Quieter than the photograph beside it, which is the point. */
.who-copy{
  position:relative;background:var(--accent-soft);
  border-left:5px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:38px 40px;
}
.who-copy::before{
  content:"";display:block;width:44px;height:15px;margin-bottom:20px;
  background:repeating-linear-gradient(90deg,
    var(--accent-light) 0 6px, transparent 6px 19px);
}
.who-copy h2{color:var(--accent-dark);margin:0 0 16px;}
.who-copy p{color:var(--slate);margin:0 0 16px;line-height:1.72;}
.who-copy p:last-child{margin-bottom:0;}
@media (max-width:880px){.who-copy{padding:30px 26px;}}
.ph-wide{min-height:170px;}
.ph-sq{min-height:250px;aspect-ratio:1/1;}
.ph-logo{min-height:78px;padding:12px;font-size:.66rem;border-width:2px;}

.hero-split{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;}
@media (max-width:880px){.hero-split{grid-template-columns:1fr;gap:32px;}}

/* --- platform strip --- */
.platforms{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
@media (max-width:860px){.platforms{grid-template-columns:repeat(3,1fr);}}
@media (max-width:480px){.platforms{grid-template-columns:repeat(2,1fr);}}

/* --- FAQ --- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);padding:4px 0;}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-weight:640;color:var(--ink);font-size:1.05rem;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";position:absolute;right:8px;top:16px;font-size:1.5rem;
  font-weight:400;color:var(--accent);line-height:1.4;
}

.faq summary:hover{color:var(--accent);}
.faq .answer{padding:0 40px 22px 0;color:var(--slate);}
.faq .answer p:last-child{margin-bottom:0;}

/* --- compare / buyer's guide list --- */
.ask{list-style:none;padding:0;margin:0;counter-reset:q;}
.ask li{
  position:relative;padding:0 0 26px 54px;margin:0;counter-increment:q;
}
.ask li::before{
  content:counter(q);position:absolute;left:0;top:0;
  width:34px;height:34px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent-dark);font-weight:700;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
}
.ask h3{margin-bottom:.25em;font-size:1.06rem;}
.ask p{margin-bottom:0;color:var(--muted);font-size:.97rem;}


/* ================= MOTION LAYER =====================================
   Everything below is presentation only. The `.js` prefix means it is
   applied ONLY when JavaScript is running, so with scripts blocked the
   site falls back to plain, fully visible, fully navigable pages.
   `.reduced` is set when the visitor's device asks for less motion. */

/* --- scroll reveals --- */
/* No will-change here on purpose. It was telling the browser to give every
   one of these -- twenty or more per page -- its own drawing layer, from the
   moment the page loaded, whether or not it was anywhere near the screen.
   Safari on iPhone paints those layers a shade off from the page behind
   them, which is what showed up as faint rectangles of the wrong colour over
   the pale sections. The animation is a plain fade and slide; it does not
   need the hint. */
.js .reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1);
}
.js .reveal.shown{opacity:1;transform:none;}
.reduced .reveal,.reduced .reveal.shown{
  opacity:1!important;transform:none!important;transition:none!important;}

/* --- hero: slow-drifting stripes, echoing the fish in the logo --- */
.hero{position:relative;overflow:hidden;}
.hero > .wrap{position:relative;z-index:3;}
.hero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(62% 72% at 76% 28%, rgba(89,128,166,.22), transparent 70%);
}
@keyframes st-drift{from{transform:translateX(0);}to{transform:translateX(48px);}}

/* --- header condenses on scroll --- */
.site-header{transition:box-shadow .28s ease;}
.site-header.scrolled{box-shadow:0 6px 22px rgba(14,26,34,.08);}
.site-header .wrap{transition:min-height .28s ease;}
.site-header.scrolled .wrap{min-height:62px;}
.brand-mark{transition:width .28s ease,height .28s ease;}
.site-header.scrolled .brand-mark{width:28px;height:28px;}
.reduced .site-header .wrap,.reduced .brand-mark{transition:none;}

/* --- logo swims up into place -----------------------------------------
   .swim is added by site.js once per visit (not on every page click).
   Hovering the logo makes the tail flick again.
   For a fish that never stops swimming, set ALWAYS_SWIMMING = true at the
   top of assets/site.js. It is off by default: a logo that moves forever
   in a sticky header gets distracting on a long page. */

.brand-mark .fish,.brand-mark .tail{transform-box:fill-box;}
.brand-mark .fish{transform-origin:50% 50%;}
.brand-mark .tail{transform-origin:100% 50%;}   /* the joint at 26,60 */

.brand-mark.swim .fish{animation:st-rise 1.5s cubic-bezier(.28,.72,.32,1) both;}
.brand-mark.swim .tail{animation:st-beat .42s ease-in-out 4;}

/* rises from below, nose up, then levels off with a small overshoot */
@keyframes st-rise{
  0%  {transform:translateY(30px) rotate(-9deg);opacity:0;}
  22% {opacity:1;}
  55% {transform:translateY(-5px) rotate(4deg);}
  75% {transform:translateY(3px) rotate(-2deg);}
  90% {transform:translateY(-1px) rotate(.6deg);}
  100%{transform:translateY(0) rotate(0);}
}
/* the tail beat, pivoting where it joins the body */
@keyframes st-beat{
  0%,100%{transform:rotate(0deg);}
  25%    {transform:rotate(17deg);}
  75%    {transform:rotate(-17deg);}
}
/* a small bob used for the hover flick */
@keyframes st-hover-bob{
  0%,100%{transform:translateY(0) rotate(0);}
  50%    {transform:translateY(-2.5px) rotate(1.5deg);}
}

/* ---- the never-ending swim (ALWAYS_SWIMMING = true) ----
   Gentler than the arrival animation on purpose. This one runs forever in a
   sticky header, so it has to be calm enough to sit beside text all day. */
@keyframes st-swim{
  0%,100%{transform:translateY(0) rotate(0deg);}
  25%    {transform:translateY(-2.5px) rotate(2deg);}
  50%    {transform:translateY(0) rotate(0deg);}
  75%    {transform:translateY(2.5px) rotate(-2deg);}
}
@keyframes st-beat-loop{
  0%,100%{transform:rotate(0deg);}
  25%    {transform:rotate(13deg);}
  75%    {transform:rotate(-13deg);}
}
.brand-mark.always .fish{animation:st-swim 2.4s ease-in-out infinite;}
.brand-mark.always .tail{animation:st-beat-loop 1.2s ease-in-out infinite;}
/* two tail beats per bob, so the two motions stay in step */

/* pointing at it speeds the tail up rather than interrupting the loop */
.brand:hover .brand-mark.always .tail{animation-duration:.55s;}

/* when it is NOT always swimming, hovering gives it a flick */
.brand:hover .brand-mark:not(.always) .tail{animation:st-beat .4s ease-in-out 2;}
.brand:hover .brand-mark:not(.always) .fish{animation:st-hover-bob .8s ease-in-out;}

.reduced .brand-mark .fish,.reduced .brand-mark .tail,
.reduced .brand:hover .brand-mark .fish,.reduced .brand:hover .brand-mark .tail{
  animation:none!important;}

/* --- cards and buttons lift slightly --- */
.card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(14,26,34,.09);
  border-color:#cbdae4;}
.btn{transition:background .2s ease,border-color .2s ease,transform .15s ease,
  box-shadow .2s ease;}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(51,96,140,.26);}
.btn:active{transform:translateY(0);box-shadow:none;}
.chips li{transition:transform .2s ease,border-color .2s ease,color .2s ease;}
.chips li:hover{transform:translateY(-2px);border-color:var(--accent-light);
  color:var(--accent-dark);}
.reduced .card:hover,.reduced .btn:hover,.reduced .chips li:hover{
  transform:none;box-shadow:none;}

/* --- FAQ opens and closes smoothly --- */
.js .faq .answer{overflow:hidden;
  transition:height .3s cubic-bezier(.22,.61,.36,1);}
.reduced .faq .answer{transition:none;}
.faq summary::after{transition:transform .25s ease;}
.faq details[open] summary::after{transform:rotate(45deg);}

/* --- mobile menu (only exists when JavaScript is running) --- */
.nav-toggle{display:none;background:#fff;border:1px solid var(--line);
  border-radius:8px;width:46px;height:42px;padding:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);
  border-radius:2px;transition:transform .26s ease,opacity .18s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:860px){
  .js .nav-toggle{display:flex;}
  .js .site-header .wrap{flex-wrap:nowrap;}
  .js nav.main{
    position:absolute;left:0;right:0;top:100%;width:auto;
    flex-direction:column;align-items:stretch;
    background:#fff;border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 32px rgba(14,26,34,.10);
    margin:0;padding:6px 24px 20px;gap:0;
    max-height:0;opacity:0;visibility:hidden;overflow:hidden;
    transition:max-height .32s ease,opacity .22s ease,visibility .32s;
  }
  .js nav.main.open{max-height:min(82vh,760px);opacity:1;visibility:visible;
    overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .js nav.main > a{margin:0;padding:13px 0;font-size:1rem;
    border-bottom:1px solid var(--bg-alt);}
  .js nav.main > a.cta{margin:14px 0 0;border-bottom:0;text-align:center;
    padding:13px 20px;}
  .reduced nav.main{transition:none;}
}

/* --- respect the operating-system setting, belt and braces --- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .js .reveal{opacity:1!important;transform:none!important;}
}


/* ================= SERVICES DROPDOWN ================================= */
.has-drop{position:relative;display:inline-flex;align-items:center;margin-left:24px;}
.has-drop .drop-trigger{color:var(--slate);font-size:.94rem;font-weight:520;}
.has-drop .drop-trigger:hover{color:var(--accent);text-decoration:none;}
.has-drop.open .drop-trigger{color:var(--accent);}
.drop-toggle{background:none;border:0;padding:3px 0 3px 6px;margin:0;cursor:pointer;
  color:var(--muted);display:inline-flex;align-items:center;line-height:0;}
.drop-toggle svg{width:11px;height:7px;transition:transform .26s ease;}
.has-drop.open .drop-toggle{color:var(--accent);}
.has-drop.open .drop-toggle svg{transform:rotate(180deg);}

.dropdown{
  position:absolute;top:calc(100% + 14px);left:-16px;width:246px;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px;
  box-shadow:0 14px 34px rgba(14,26,34,.13);z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transform-origin:top left;
  transition:opacity .18s ease,
             transform .24s cubic-bezier(.22,.61,.36,1),
             visibility .24s;
}
.has-drop.open .dropdown{opacity:1;visibility:visible;transform:none;
  transition:opacity .18s ease,
             transform .24s cubic-bezier(.22,.61,.36,1),
             visibility 0s;}
html:not(.js) .has-drop:hover .dropdown{opacity:1;visibility:visible;transform:none;}

/* one plain row per service - no descriptions, no columns */
.dd-grid{display:block;}
.dd-grid a{
  display:block;padding:12px 14px;margin:0;border-radius:6px;
  font-size:.95rem;font-weight:520;color:var(--slate);line-height:1.35;
  opacity:0;transform:translateY(-4px);
  transition:opacity .2s ease,transform .2s ease,background .15s ease,color .15s ease;
}
.has-drop.open .dd-grid a{opacity:1;transform:none;}
html:not(.js) .dd-grid a{opacity:1;transform:none;}
.dd-grid a:hover,.dd-grid a:focus-visible{
  background:var(--accent-soft);color:var(--accent-dark);text-decoration:none;}

.reduced .dropdown,.reduced .dd-grid a,.reduced .drop-toggle svg{transition:none;}

/* dropdown inside the phone menu: a plain indented list, no floating panel */
@media (max-width:860px){
  .js .has-drop{display:block;margin:0;width:100%;}
  .js .has-drop .drop-trigger{display:inline-block;padding:13px 0;font-size:1rem;}
  .js .drop-toggle{float:right;padding:14px 4px;}
  .js .drop-toggle svg{width:14px;height:9px;}
  .js .dropdown{position:static;width:auto;opacity:1;visibility:visible;
    transform:none;box-shadow:none;border:0;border-radius:0;padding:0;
    max-height:0;overflow:hidden;
    transition:max-height .34s cubic-bezier(.22,.61,.36,1);}
  .js .dropdown::before{display:none;}
  .js .has-drop.open .dropdown{max-height:1400px;}
  .js .dd-grid a{padding:11px 0 11px 14px;border-left:2px solid var(--line);
    border-radius:0;}
  .js .has-drop{border-bottom:1px solid var(--bg-alt);padding-bottom:6px;}
}

/* ================= SERVICES: CLICK TO EXPAND ========================= */
.hint{color:var(--muted);font-size:.95rem;font-style:normal;}
.svc-list{border-top:1px solid var(--line);}
.svc{border-bottom:1px solid var(--line);scroll-margin-top:150px;}
.svc-h{margin:0;font-size:1rem;font-weight:400;}
.svc-head{display:flex;align-items:flex-start;gap:16px;width:100%;
  background:none;border:0;padding:22px 0;cursor:pointer;text-align:left;
  font:inherit;color:inherit;}
.svc-num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.76rem;font-weight:700;color:var(--accent);padding-top:5px;
  min-width:22px;letter-spacing:.03em;}
.svc-text{flex:1;min-width:0;}
.svc-title{display:block;font-size:1.13rem;font-weight:650;color:var(--ink);
  line-height:1.35;transition:color .18s ease;}
.svc-short{display:block;color:var(--muted);font-size:.95rem;margin-top:3px;
  line-height:1.5;}
.svc-head:hover .svc-title{color:var(--accent-dark);}
.svc-plus{position:relative;width:18px;height:18px;flex:none;margin-top:7px;}
.svc-plus::before,.svc-plus::after{content:"";position:absolute;
  background:var(--accent);border-radius:2px;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .22s ease;}
.svc-plus::before{left:0;top:8px;width:18px;height:2px;}
.svc-plus::after{left:8px;top:0;width:2px;height:18px;}
.svc[data-open="true"] .svc-plus::after{transform:rotate(90deg);opacity:0;}
.js .svc-body{height:0;overflow:hidden;
  transition:height .34s cubic-bezier(.22,.61,.36,1);}
.svc-body{padding-right:34px;}
.svc-body > *:last-child{margin-bottom:24px;}
.svc-body p{font-size:.99rem;}
.reduced .svc-body,.reduced .svc-plus::before,.reduced .svc-plus::after{
  transition:none;}
@media (max-width:560px){
  .svc-body{padding-right:0;}
  .svc-head{gap:12px;padding:19px 0;}
  .svc-title{font-size:1.05rem;}
}
/* brief highlight when you arrive from a dropdown link */
@keyframes st-flag{0%{background:var(--accent-soft);}100%{background:transparent;}}
.svc.flagged{animation:st-flag 1.6s ease-out;}
.reduced .svc.flagged{animation:none;}

/* ================= HERO CREDENTIALS LINE ============================= */
.hero .creds{
  color:#dfeaf2;font-size:1.08rem;font-weight:600;line-height:1.62;max-width:56ch;
  border-left:3px solid var(--accent-light);padding-left:18px;margin:22px 0 4px;
}
@media (max-width:560px){.hero .creds{font-size:.97rem;padding-left:13px;}}

/* ================= LIVE PLATFORM STATUS ============================== */
.statuswrap{position:relative;}
.status-pill{
  display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.8rem;
  font-weight:600;color:#c7d5df;cursor:pointer;border-radius:100px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  padding:4px 11px 4px 9px;
  transition:background .18s ease,border-color .18s ease;
}
.status-pill:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);}
.status-caret{width:9px;height:6px;opacity:.65;transition:transform .25s ease;}
.statuswrap.open .status-caret{transform:rotate(180deg);}

.dot{width:8px;height:8px;border-radius:50%;flex:none;position:relative;
  background:#7f96a6;transition:background .3s ease;}
.dot[data-state="ok"]{background:#31c48d;}
.dot[data-state="warn"]{background:#f5a524;}
.dot[data-state="down"]{background:#f26d6d;}
/* the quiet pulse only appears when everything really is fine */
.dot[data-state="ok"]::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid #31c48d;opacity:.5;animation:st-ping 2.8s ease-out infinite;}
@keyframes st-ping{
  0%{transform:scale(.55);opacity:.6;}
  70%{transform:scale(1.6);opacity:0;}
  100%{opacity:0;}
}
.reduced .dot::after{animation:none;}

.status-panel{
  position:absolute;top:calc(100% + 11px);left:0;width:min(370px,90vw);
  background:#fff;color:var(--slate);border:1px solid var(--line);
  border-radius:12px;padding:15px 17px;z-index:70;
  box-shadow:0 24px 50px rgba(0,0,0,.3);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease,
             transform .26s cubic-bezier(.22,.61,.36,1),
             visibility .26s;
}
.statuswrap.open .status-panel{opacity:1;visibility:visible;transform:none;
  transition:opacity .2s ease,transform .26s cubic-bezier(.22,.61,.36,1),visibility 0s;}
html:not(.js) .statuswrap:hover .status-panel,
html:not(.js) .statuswrap:focus-within .status-panel{
  opacity:1;visibility:visible;transform:none;}

.sp-head{font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--muted);font-weight:700;margin:0 0 9px;}
.sp-list{list-style:none;margin:0;padding:0;}
.sp-list li{display:grid;grid-template-columns:1fr auto;gap:1px 12px;
  align-items:baseline;padding:9px 0;border-top:1px solid var(--line);margin:0;}
.sp-list li:first-child{border-top:0;padding-top:0;}
.sp-name{font-weight:620;color:var(--ink);font-size:.88rem;}
.sp-state{font-size:.79rem;font-weight:620;text-align:right;white-space:nowrap;}
.sp-state[data-state="ok"]{color:#0f7a55;}
.sp-state[data-state="warn"]{color:#8f5a00;}
.sp-state[data-state="down"]{color:#b4342f;}
.sp-state[data-state="unknown"],.sp-state[data-state="idle"]{
  color:var(--muted);font-weight:520;}
.sp-detail{grid-column:1/-1;font-size:.78rem;color:var(--muted);line-height:1.45;}
.sp-link{grid-column:1/-1;font-size:.76rem;font-weight:600;color:var(--accent);
  justify-self:start;}
.sp-foot{font-size:.71rem;color:var(--muted);margin:12px 0 0;line-height:1.55;
  border-top:1px solid var(--line);padding-top:10px;}
.sp-time{font-size:.71rem;color:var(--muted);margin:6px 0 0;}

@media (max-width:620px){
  .status-panel{left:50%;transform:translate(-50%,-8px);}
  .statuswrap.open .status-panel{transform:translateX(-50%);}
  html:not(.js) .statuswrap:hover .status-panel{transform:translateX(-50%);}
}
@media (max-width:430px){
  .status-pill{font-size:.74rem;padding:3px 9px 3px 8px;}
}

/* ================= SLOGAN BAND ======================================= */
/* The current runs right-to-left while the fish points right, so the mark
   is visibly swimming against it. That is the whole idea of the line. */
.slogan{
  background:#fff;
  border-bottom:1px solid var(--line);
  text-align:center;
  padding:42px 0 46px;
  position:relative;
  overflow:hidden;
}
.slogan::before{
  content:"";position:absolute;inset:-20% -40%;z-index:1;
  background:repeating-linear-gradient(101deg,
    rgba(89,128,166,.13) 0 2px, transparent 2px 44px);
  animation:st-current 24s linear infinite;
}
.slogan::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(70% 100% at 50% 50%,
    rgba(255,255,255,.90) 26%, rgba(255,255,255,0) 80%);
}
@keyframes st-current{from{transform:translateX(0);}to{transform:translateX(-44px);}}
.reduced .slogan::before{animation:none;}

.slogan .wrap{position:relative;z-index:3;}
.slogan-mark{width:40px;height:40px;display:block;margin:0 auto 13px;
  overflow:visible;}
.slogan h2{
  font-size:clamp(1.7rem,3.7vw,2.5rem);
  /* capitals need air between the letters, not less of it */
  letter-spacing:.035em;line-height:1.18;margin:0 0 10px;color:var(--ink);
}
/* The sub-line is meant to sit on ONE line. It needs about 800px to do that,
   so it uses the full-width container and its own size steps down as the
   window narrows to hold a single line as long as physically possible.
   Below roughly 700px no font size can fit 80 characters across, so it is
   allowed to wrap in a balanced two-line block rather than overflow. */
.slogan p{
  font-size:clamp(.95rem,1.35vw,1.13rem);
  color:var(--slate);max-width:none;margin:0 auto;line-height:1.6;
  white-space:nowrap;
}
@media (max-width:720px){
  .slogan p{white-space:normal;font-size:1.02rem;max-width:42ch;
    text-wrap:balance;}
}
@media (max-width:560px){
  .slogan{padding:32px 0 34px;}
  .slogan-mark{width:34px;height:34px;margin-bottom:11px;}
  .slogan p{font-size:1rem;}
}

/* ================= SERVICE ICON TILES ================================ */
.section-head.centered{max-width:none;margin-left:auto;margin-right:auto;
  text-align:center;}
.section-head.centered h2{letter-spacing:.035em;font-size:clamp(1.35rem,2.5vw,1.85rem);}
.section-head.centered p{margin-left:auto;margin-right:auto;max-width:52ch;}

.svc-tiles{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 18px;margin:0 auto;max-width:1000px;
}
.svc-tile{
  flex:0 1 208px;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:14px;padding:22px 10px 20px;border-radius:12px;
  color:var(--slate);text-decoration:none;position:relative;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),background .22s ease;
}
.svc-tile:hover,.svc-tile:focus-visible{
  text-decoration:none;background:#fff;transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(14,26,34,.07);
}
.svc-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.tile-art{
  position:relative;width:76px;height:76px;display:grid;place-items:center;
  color:var(--accent-light);
  transition:color .25s ease;
}
/* soft disc that grows in behind the icon */
.tile-art::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--accent-soft);
  transform:scale(.55);opacity:0;
  transition:transform .34s cubic-bezier(.22,.61,.36,1),opacity .26s ease;
}
.svc-tile:hover .tile-art::before,
.svc-tile:focus-visible .tile-art::before{transform:scale(1);opacity:1;}
.svc-tile:hover .tile-art,
.svc-tile:focus-visible .tile-art{color:var(--accent-dark);}
.tile-art svg{width:55px;height:55px;position:relative;z-index:2;overflow:visible;}

.tile-label{
  font-size:.95rem;font-weight:620;color:var(--ink);line-height:1.35;
  max-width:19ch;transition:color .2s ease;
}
.svc-tile:hover .tile-label,
.svc-tile:focus-visible .tile-label{color:var(--accent-dark);}

.tiles-foot{text-align:center;margin:30px 0 0;font-size:.95rem;}

/* ---- each icon moves in its own way ---- */
.tile-art .ic-spin,.tile-art .ic-pop,.tile-art .ic-bob,.tile-art .ic-grow{
  transform-box:fill-box;
}
.tile-art .ic-spin{transform-origin:50% 50%;}
.tile-art .ic-pop{transform-origin:50% 50%;}
.tile-art .ic-bob{transform-origin:50% 50%;}
.tile-art .ic-grow{transform-origin:50% 100%;}

/* the pulse trace and the connector lines draw themselves */
.tile-art .ic-dash{stroke-dasharray:90;stroke-dashoffset:0;}
.svc-tile:hover .ic-dash,.svc-tile:focus-visible .ic-dash{
  animation:ic-draw .85s ease-out;}
@keyframes ic-draw{from{stroke-dashoffset:90;}to{stroke-dashoffset:0;}}

.tile-art .ic-draw{stroke-dasharray:26;stroke-dashoffset:0;}
.svc-tile:hover .ic-draw,.svc-tile:focus-visible .ic-draw{
  animation:ic-tick .6s ease-out;}
@keyframes ic-tick{from{stroke-dashoffset:26;}to{stroke-dashoffset:0;}}

/* the update arrow drops */
.svc-tile:hover .ic-bob,.svc-tile:focus-visible .ic-bob{
  animation:ic-bob .75s cubic-bezier(.22,.61,.36,1);}
@keyframes ic-bob{
  0%{transform:translateY(-5px);opacity:.35;}
  55%{transform:translateY(2px);opacity:1;}
  100%{transform:translateY(0);opacity:1;}
}

/* the restore arrow turns */
.svc-tile:hover .ic-spin,.svc-tile:focus-visible .ic-spin{
  animation:ic-spin .9s cubic-bezier(.4,0,.2,1);}
@keyframes ic-spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}

/* the envelope and the plus sign give a small nudge */
.svc-tile:hover .ic-pop,.svc-tile:focus-visible .ic-pop{
  animation:ic-pop .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes ic-pop{
  0%{transform:scale(.7);}60%{transform:scale(1.1);}100%{transform:scale(1);}
}

/* the report bars grow up out of the page */
.svc-tile:hover .ic-grow,.svc-tile:focus-visible .ic-grow{
  animation:ic-grow .6s cubic-bezier(.22,.61,.36,1);}
@keyframes ic-grow{from{transform:scaleY(.1);}to{transform:scaleY(1);}}

.reduced .svc-tile,.reduced .tile-art,.reduced .tile-art::before{transition:none;}
.reduced .svc-tile:hover{transform:none;}
.reduced .ic-dash,.reduced .ic-draw,.reduced .ic-bob,
.reduced .ic-spin,.reduced .ic-pop,.reduced .ic-grow,
.reduced .svc-tile:hover .ic-dash,.reduced .svc-tile:hover .ic-draw,
.reduced .svc-tile:hover .ic-bob,.reduced .svc-tile:hover .ic-spin,
.reduced .svc-tile:hover .ic-pop,.reduced .svc-tile:hover .ic-grow{
  animation:none!important;stroke-dashoffset:0!important;}

@media (max-width:820px){
  .svc-tile{flex:0 1 168px;padding:18px 8px 16px;gap:11px;}
  .tile-art{width:74px;height:74px;}
  .tile-art svg{width:48px;height:48px;}
  .tile-label{font-size:.89rem;}
}
@media (max-width:480px){
  .svc-tiles{gap:6px 2px;}
  .svc-tile{flex:0 1 46%;}
}

/* ================= WHY STRIPERTECH =================================== */
.why{background:#fff;padding:0 0 80px;}

/* full-width coloured band with the title, like the reference */
.why-band{
  background:var(--accent);padding:34px 0 36px;text-align:center;
  position:relative;margin-bottom:60px;overflow:hidden;
}
/* the same current that runs behind the hero and the slogan, in white */
.why-band::before{
  content:"";position:absolute;inset:-30% -40%;z-index:1;
  background:repeating-linear-gradient(101deg,
    rgba(255,255,255,.11) 0 2px, transparent 2px 40px);
  animation:st-current 21s linear infinite;
}
.why-band .wrap{position:relative;z-index:2;}
.reduced .why-band::before{animation:none;}
.why-band h2{
  color:#fff;margin:0;letter-spacing:.045em;
  font-size:clamp(1.3rem,2.5vw,1.8rem);
}

.why-grid{
  display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;
}
.why-text p{font-size:1.04rem;line-height:1.75;}
.why-text p.why-lead{
  font-size:1.13rem;color:var(--ink);font-weight:520;line-height:1.68;
}
.why-text p:last-child{margin-bottom:0;}

/* the picture sits in a white card, slightly raised */
.why-media{
  background:#fff;padding:12px;border-radius:12px;
  box-shadow:0 18px 44px rgba(14,26,34,.10);
}
.why-media .ph{min-height:330px;border-radius:8px;}

@media (max-width:880px){
  .why-grid{grid-template-columns:1fr;gap:34px;}
  .why-band{margin-bottom:44px;}
  .why{padding-bottom:62px;}
  .why-media .ph{min-height:250px;}
}
@media (max-width:560px){
  .why-band{padding:26px 0 28px;}
  .why-text p.why-lead{font-size:1.06rem;}
}


/* ---- the title lifts in a word at a time when the band scrolls into view ---- */
.why-band h2 .w{display:inline-block;}
.js .why-band h2 .w{
  opacity:0;transform:translateY(22px);
  transition:opacity .5s ease, transform .62s cubic-bezier(.22,.61,.36,1);
}
.js .why-band.in h2 .w{opacity:1;transform:none;}
.reduced .why-band h2 .w{opacity:1!important;transform:none!important;transition:none;}

/* ================= LEAD CAPTURE BAND ================================= */
.lead{background:var(--bg-alt);border-top:1px solid var(--line);padding:78px 0 84px;}
.lead-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;}

/* ---- left column ---- */
/* logo lockup: mark on the left, name and slogan stacked beside it */
.lead-brand{display:flex;align-items:center;gap:15px;margin-bottom:26px;}
.lead-mark{width:58px;height:58px;flex:none;overflow:visible;}
.lead-brandtext{display:flex;flex-direction:column;gap:3px;}
.lead-name{font-weight:700;color:var(--ink);font-size:2.05rem;
  letter-spacing:-.028em;line-height:1.05;white-space:nowrap;}
/* The slogan is set to span exactly the width of the wordmark above it.
   The starting letter-spacing here is a sensible default; site.js measures
   both lines and fine-tunes it so the two edges line up on any screen and
   whatever font actually loads. Without JavaScript this value stands and
   still looks right, just not pixel-matched. */
.lead-tag{
  font-size:.685rem;font-weight:640;color:var(--accent);
  text-transform:uppercase;letter-spacing:.06em;line-height:1.2;
  white-space:nowrap;display:block;
}

/* Sized as a headline, a sub-headline and a question. They are h2/h3/h4 in
   the markup, not h1 - the page already has one h1 up in the hero, and a
   second one confuses both search engines and screen readers. The look is
   what matters here, and the look is unchanged by that. */
.lead-copy h2{font-size:clamp(1.75rem,3.4vw,2.35rem);line-height:1.18;
  letter-spacing:-.025em;margin:0 0 16px;max-width:20ch;}
.lead-sub{font-size:1.12rem;font-weight:650;color:var(--slate);margin:0 0 28px;
  line-height:1.55;max-width:42ch;}
.lead-q{font-size:1rem;font-weight:500;color:var(--muted);margin:0 0 20px;
  letter-spacing:0;}

.ticks{list-style:none;padding:0;margin:0;}
.ticks li{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;
  line-height:1.6;}
.ticks li span:last-child{font-size:1rem;color:var(--slate);}
.ticks strong{color:var(--ink);font-weight:660;}

/* The rounded tick square. Not green - a gradient of the two blues already
   in the palette, which keeps the section unmistakably part of this site. */
.tick{
  width:31px;height:31px;border-radius:50%;flex:none;margin-top:2px;
  background:linear-gradient(155deg,var(--accent-light),var(--accent-dark));
  box-shadow:0 4px 10px rgba(37,73,104,.26);
  display:grid;place-items:center;
}
.tick svg{width:17px;height:17px;}
.tick path{fill:none;stroke:#fff;stroke-width:2.7;
  stroke-linecap:round;stroke-linejoin:round;}
/* each tick draws itself when the band scrolls into view */
.js .lead .tick path{stroke-dasharray:24;stroke-dashoffset:24;}
.lead.in .tick path{animation:lf-tick .45s ease-out forwards;}
.lead.in .ticks li:nth-child(1) .tick path{animation-delay:.05s;}
.lead.in .ticks li:nth-child(2) .tick path{animation-delay:.17s;}
.lead.in .ticks li:nth-child(3) .tick path{animation-delay:.29s;}
.lead.in .ticks li:nth-child(4) .tick path{animation-delay:.41s;}
@keyframes lf-tick{to{stroke-dashoffset:0;}}
.reduced .lead .tick path{stroke-dashoffset:0!important;animation:none!important;}

/* ---- right column: the form card ---- */
.lead-form{
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 22px 52px rgba(14,26,34,.13);
}
.lf-head{
  background:var(--accent);color:#fff;margin:0;padding:17px 24px;
  font-weight:650;font-size:1.06rem;letter-spacing:.015em;text-align:center;
}
.lf-body{padding:24px;}
.lf-field{margin-bottom:16px;}
.lf-field label{font-size:.88rem;}
.req{color:var(--accent);font-weight:700;}

.lf-phone{display:flex;align-items:stretch;}
.lf-cc{
  flex:0 0 172px;width:172px;max-width:172px;
  padding:12px 10px;border:1px solid #cfdae0;border-right:0;
  border-radius:7px 0 0 7px;background:var(--bg-alt);
  font:inherit;font-size:.9rem;font-weight:600;color:var(--slate);
  text-overflow:ellipsis;cursor:pointer;
}
.lf-cc:focus{outline:2px solid var(--accent);outline-offset:1px;
  border-color:var(--accent);position:relative;z-index:2;}
.lf-phone input{border-radius:0 7px 7px 0;min-width:0;}
@media (max-width:560px){
  .lf-phone{flex-direction:column;gap:8px;}
  .lf-cc{flex:none;width:100%;max-width:none;border-right:1px solid #cfdae0;
    border-radius:7px;}
  .lf-phone input{border-radius:7px;}
}

/* ---- the country picker, once JavaScript takes over -------------------
   Closed it shows only the flag and the dialling code, so the number field
   keeps the room it needs. Open it shows the country names. A plain
   <select> cannot do that - it must show the same text in both states -
   so this is a custom control built on top of the real select, which stays
   in the form and keeps holding the value. */
.js .lf-phone .lf-cc{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.cc-wrap{position:relative;flex:0 0 auto;}
.cc-btn{
  display:flex;align-items:center;gap:6px;height:100%;
  padding:12px 10px 12px 12px;border:1px solid #cfdae0;border-right:0;
  border-radius:7px 0 0 7px;background:var(--bg-alt);
  font:inherit;font-size:.95rem;font-weight:620;color:var(--slate);
  cursor:pointer;white-space:nowrap;
}
.cc-btn:hover{background:#eef3f6;}
.cc-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;
  border-color:var(--accent);position:relative;z-index:2;}
.cc-flag{font-size:1.15rem;line-height:1;}
.cc-dial{font-variant-numeric:tabular-nums;}
.cc-caret{width:9px;height:6px;opacity:.55;transition:transform .2s ease;}
.cc-wrap.open .cc-caret{transform:rotate(180deg);}

.cc-panel{
  position:absolute;top:calc(100% + 6px);left:0;z-index:80;
  width:min(320px,calc(100vw - 56px));
  background:#fff;border:1px solid var(--line);border-radius:11px;
  box-shadow:0 18px 44px rgba(14,26,34,.18);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .2s ease,visibility .2s;
}
.cc-wrap.open .cc-panel{opacity:1;visibility:visible;transform:none;
  transition:opacity .16s ease,transform .2s ease,visibility 0s;}
.cc-search{padding:9px;border-bottom:1px solid var(--line);}
.cc-search input{padding:9px 11px;font-size:.9rem;border-radius:7px;}
.cc-list{list-style:none;margin:0;padding:5px;max-height:264px;overflow-y:auto;}
.cc-list li{
  display:flex;align-items:center;gap:10px;margin:0;
  padding:9px 11px;border-radius:7px;cursor:pointer;font-size:.92rem;
  color:var(--ink);line-height:1.25;
}
.cc-list li .cc-name{flex:1;min-width:0;}
.cc-list li .cc-code{color:var(--muted);font-size:.86rem;
  font-variant-numeric:tabular-nums;flex:none;}
.cc-list li:hover,.cc-list li.active{background:var(--accent-soft);}
.cc-list li[aria-selected="true"]{font-weight:660;}
.cc-list li[aria-selected="true"] .cc-code{color:var(--accent-dark);}
.cc-none{padding:16px 12px;color:var(--muted);font-size:.9rem;}
.reduced .cc-panel,.reduced .cc-caret{transition:none;}
/* with the picker now narrow, the number field no longer needs its own row */
@media (max-width:560px){
  .js .lf-phone{flex-direction:row;gap:0;}
  .js .lf-phone input{border-radius:0 7px 7px 0;}
}
/* friendly errors, hidden until there is something to say */
.lf-err{margin:6px 0 0;font-size:.82rem;color:#b4342f;font-weight:520;line-height:1.45;}
.lf-err:empty{display:none;}
.lf-field input[aria-invalid="true"],
.lf-field textarea[aria-invalid="true"]{border-color:#d98481;background:#fffafa;}
.lf-field input[aria-invalid="true"]:focus,
.lf-field textarea[aria-invalid="true"]:focus{outline-color:#b4342f;}

.lf-submit{width:100%;margin-top:4px;padding:15px 24px;font-size:1.02rem;}
.lf-submit[disabled]{opacity:.65;cursor:default;transform:none;box-shadow:none;}
.lf-note{font-size:.8rem;color:var(--muted);text-align:center;margin:12px 0 0;}

/* ---- the thank-you that replaces the form ---- */
.lf-thanks{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 22px 52px rgba(14,26,34,.13);
  padding:46px 32px;text-align:center;
}
.lf-thanks h3{margin:0 0 10px;font-size:1.3rem;}
.lf-thanks p{margin:0;color:var(--slate);}
.lf-thanks-tick{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 20px;
  background:linear-gradient(155deg,var(--accent-light),var(--accent-dark));
  box-shadow:0 8px 20px rgba(37,73,104,.28);
}
.lf-thanks-tick svg{width:30px;height:30px;}
.lf-thanks-tick path{fill:none;stroke:#fff;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24;animation:lf-tick .5s ease-out .12s forwards;}
.reduced .lf-thanks-tick path{stroke-dashoffset:0;animation:none;}

@media (max-width:880px){
  .lead{padding:60px 0 66px;}
  .lead-grid{grid-template-columns:1fr;gap:40px;}   /* form drops below the text */
}
@media (max-width:560px){
  .lead-sub{font-size:1.04rem;}
  .lead-mark{width:48px;height:48px;}
  .lead-name{font-size:1.72rem;}
  .lead-tag{font-size:.58rem;letter-spacing:.05em;}
  .lf-body{padding:20px 18px;}
  .lf-head{font-size:1rem;padding:15px 18px;}
  .ticks li{gap:12px;}
  .lf-thanks{padding:38px 22px;}
}

.lf-formerror{text-align:center;margin-top:10px;}

/* ================= ABOUT PAGE ======================================== */
.sec-head{margin:0 0 26px;font-size:clamp(1.35rem,2.6vw,1.75rem);}
.about-hero{padding:80px 0 84px;}
.bh-eyebrow{margin:0 0 12px;font-size:.76rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#8fb4d4;}
.about-hero h1{color:#fff;margin:0 0 14px;max-width:22ch;
  font-size:clamp(1.85rem,3.8vw,2.6rem);letter-spacing:-.02em;line-height:1.15;}

/* the four figures, on a pale band of their own */
.figures-band{background:#fff;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:50px 0;}
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.fig{text-align:center;padding:0 8px;}
.fig + .fig{border-left:1px solid var(--line);}
.fig-n{display:block;font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:700;
  color:var(--accent);letter-spacing:-.03em;line-height:1;margin-bottom:10px;}
.fig-l{display:block;font-size:.9rem;color:var(--muted);line-height:1.5;
  max-width:22ch;margin:0 auto;}
@media (max-width:760px){
  .figures{grid-template-columns:1fr;gap:0;}
  .fig + .fig{border-left:0;border-top:1px solid var(--line);
    padding-top:26px;margin-top:26px;}
}
@media (max-width:420px){
  .figures{grid-template-columns:1fr;}
  .fig + .fig{border-left:0;border-top:1px solid var(--line);padding-top:26px;}
}

/* --- Our North Star: the three promises, same panel treatment as the
       "Who are we?" block so the About page reads as one piece. --- */
.ns-intro{max-width:66ch;margin:0 0 34px;}
.ns-intro p{margin:0 0 14px;line-height:1.72;}
.ns-intro p:last-child{margin-bottom:0;}

.northstar{gap:26px;}
.ns-card{
  background:var(--accent-soft);
  border-left:5px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:30px 28px;
}
.ns-ic{display:block;width:48px;height:48px;color:var(--accent);
  margin-bottom:16px;}
.ns-ic svg{width:100%;height:100%;overflow:visible;}
.ns-card h3{margin:0 0 10px;font-size:1.08rem;color:var(--accent-dark);
  line-height:1.35;}
.ns-card p{margin:0;color:var(--slate);font-size:.96rem;line-height:1.68;}

/* the icons come alive when the card is pointed at, same as the service
   tiles -- the dash lengths match the paths drawn in build.py */
.ns-card .ic-dash{stroke-dasharray:30;stroke-dashoffset:0;}
.ns-card:hover .ic-dash{animation:ic-draw-ns .8s ease-out;}
@keyframes ic-draw-ns{from{stroke-dashoffset:30;}to{stroke-dashoffset:0;}}
.ns-card .ic-draw{stroke-dasharray:18;stroke-dashoffset:0;}
.ns-card:hover .ic-draw{animation:ic-draw-ns2 .7s ease-out;}
@keyframes ic-draw-ns2{from{stroke-dashoffset:18;}to{stroke-dashoffset:0;}}
.ns-card .ic-pop{transform-box:fill-box;transform-origin:0% 50%;}
.ns-card:hover .ic-pop{animation:ic-pop .5s cubic-bezier(.34,1.56,.64,1);}
.reduced .ns-card .ic-dash,.reduced .ns-card .ic-draw,
.reduced .ns-card .ic-pop{animation:none!important;}

@media (max-width:900px){
  .northstar{grid-template-columns:1fr;gap:20px;}
}

/* --- the closing panel on the About page --- */
.cta-panel{padding:0 0 84px;background:#fff;}
.ctap{
  background:var(--accent-dark);border-radius:var(--radius);
  padding:52px 56px;color:#c9dbeb;
}
.ctap h2{color:#fff;margin:0 0 26px;max-width:26ch;
  font-size:clamp(1.5rem,3.2vw,2.15rem);line-height:1.2;letter-spacing:-.018em;}
.ctap-row{display:grid;grid-template-columns:1.4fr auto;gap:40px;
  align-items:center;}
.ctap-row p{margin:0;line-height:1.7;max-width:52ch;font-size:.99rem;}
/* white button rather than another blue one -- on a blue panel a blue
   button is invisible, and white is the only high-contrast colour already
   in the palette. */
.ctap-btn a{
  display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  background:#fff;color:var(--accent-dark);font-weight:680;font-size:1rem;
  padding:15px 26px;border-radius:8px;text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.ctap-btn a:hover{background:var(--accent-soft);text-decoration:none;
  transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.22);}
.ctap-btn a:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.ctap-btn svg{width:18px;height:18px;transition:transform .2s ease;}
.ctap-btn a:hover svg{transform:translateX(4px);}
.reduced .ctap-btn a,.reduced .ctap-btn svg{transition:none;}

@media (max-width:820px){
  .ctap{padding:38px 30px;}
  .ctap-row{grid-template-columns:1fr;gap:26px;}
  .ctap-btn a{width:100%;justify-content:center;}
}

/* ================= CONTACT PAGE ====================================== */
.eyebrow-a{
  margin:0 0 12px;font-size:.78rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);
}
.eyebrow-a.centered{text-align:center;}

.contact-lead{background:#fff;border-top:0;padding:52px 0 78px;}
/* Two separate columns of equal height -- the photograph is its own block
   beside the form, not tucked behind it. align-items:stretch gives the row a
   definite height, which is what lets the picture fill it. */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;
  align-items:stretch;}

.contact-photo{display:grid;}
.shot-book{width:100%;height:100%;object-fit:cover;
  border-radius:var(--radius);}

.contact-panel{
  background:var(--bg-alt);border-radius:var(--radius);
  padding:44px 46px;margin:0;
  box-shadow:0 22px 54px rgba(14,26,34,.10);
}
.contact-panel h1{margin:0 0 14px;font-size:clamp(1.7rem,3.4vw,2.4rem);
  letter-spacing:-.022em;line-height:1.15;}
.contact-lede{color:var(--muted);margin:0 0 26px;max-width:52ch;
  font-size:1rem;line-height:1.65;}

/* on this page the form has no coloured heading bar and no card of its own --
   the panel around it is the card */
.lead-form-bare{background:none;border:0;border-radius:0;box-shadow:none;}
.lead-form-bare .lf-body{padding:0;}
.lf-two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
.contact-panel .lf-field input,
.contact-panel .lf-field textarea,
.contact-panel .lf-field select{background:#fff;}
#lf-service{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);
  padding:12px 14px;border:1px solid #cfdae0;border-radius:7px;
  background:#fff;cursor:pointer;
}
.contact-lead .lf-submit{width:auto;min-width:230px;}

/* --- reach us directly --- */
.reach{background:#fff;padding:0 0 86px;}
.reach h2{text-align:center;margin:0 0 34px;
  font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;}
.reach-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,380px));
  gap:24px;justify-content:center;max-width:860px;margin:0 auto;perspective:900px;}
/* the deeper blue used on the About panel, so the two pages match, with the
   three stripes off the logo along the top edge */
.reach-card{
  position:relative;overflow:hidden;
  background:var(--accent-dark);color:#c9dbeb;border-radius:var(--radius);
  padding:36px 26px 32px;text-align:center;
  transition:transform .25s ease,box-shadow .25s ease;
}
.reach-card::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:60px;height:4px;
  background:repeating-linear-gradient(90deg,
    var(--accent-light) 0 8px, transparent 8px 26px);
}
.reach-card:hover{transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(14,26,34,.20);}
.reduced .reach-card{transition:none;}
.reach-ic{display:block;width:44px;height:44px;margin:0 auto 14px;
  object-fit:contain;}
.reach-card h3{color:#fff;margin:0 0 10px;font-size:1.06rem;}
.reach-card p{margin:0;line-height:1.6;font-size:.97rem;}
.reach-card a{color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.45);}
.reach-card a:hover{border-bottom-color:#fff;text-decoration:none;}

.reach-hours{margin:30px 0 0;color:var(--muted);font-size:.95rem;
  text-align:center;}
.reach-fit{max-width:74ch;margin:34px auto 0;color:var(--muted);
  font-size:.95rem;line-height:1.7;}
.reach-fit p{margin:0 0 12px;}
.reach-onsite{padding-top:12px;border-top:1px solid var(--line);}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:24px;}
  .shot-book{aspect-ratio:16/10;height:auto;}
  .contact-panel{padding:34px 26px;}
  .reach-cards{grid-template-columns:minmax(0,1fr);max-width:420px;}
}
@media (max-width:560px){
  .lf-two{grid-template-columns:1fr;}
  .contact-panel{padding:28px 22px;}
  .contact-lead .lf-submit{width:100%;}
}

/* ================= BLOG ============================================== */
/* Screen-reader-only label: present for assistive tech, invisible on screen. */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

/* --- dark banner at the top of the blog index --- */
.blog-hero{
  position:relative;background:var(--bg-deep);color:#fff;
  padding:74px 0 78px;overflow:hidden;
  /* To use a photo instead of the plain dark panel, uncomment this and drop
     the file in images/. The dark layer keeps the text readable.
  background-image:linear-gradient(rgba(14,26,34,.78),rgba(14,26,34,.78)),
                   url('../images/blog-hero.jpg'); */
  background-size:cover;background-position:center;
}
.blog-hero::before{
  content:"";position:absolute;inset:-15% -35%;z-index:1;
  background:repeating-linear-gradient(101deg,
    rgba(137,178,214,.10) 0 3px, transparent 3px 48px);
  animation:st-drift 30s linear infinite;
}
.reduced .blog-hero::before{animation:none;}
.blog-hero .wrap{position:relative;z-index:2;}
.blog-hero h1{color:#fff;margin:0 0 10px;font-size:clamp(1.9rem,4vw,2.7rem);
  letter-spacing:-.02em;}
.blog-hero .bh-sub{margin:0;color:#b9cbdb;font-size:1.05rem;}

/* --- filter + search bar --- */
.blog-tools{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:20px;margin:0 0 40px;
}
/* display:flex would otherwise beat the browser's own rule for the hidden
   attribute, so without JavaScript the dead toolbar would still show. */
.blog-tools[hidden]{display:none;}
.bt-cat label{display:block;font-size:.8rem;font-weight:700;color:var(--slate);
  text-transform:uppercase;letter-spacing:.09em;margin-bottom:8px;}
.bt-cat select{
  font:inherit;font-size:.95rem;color:var(--slate);background:#fff;
  border:1px solid #cfdae0;border-radius:7px;padding:10px 12px;min-width:210px;
  cursor:pointer;
}
.bt-cat select:focus{outline:2px solid var(--accent);outline-offset:1px;}
.bt-search{position:relative;flex:0 1 380px;min-width:230px;}
.bt-search input{
  width:100%;font:inherit;font-size:.95rem;padding:12px 46px 12px 14px;
  border:1px solid #cfdae0;border-radius:7px;background:#fff;color:var(--ink);
}
.bt-search input:focus{outline:2px solid var(--accent);outline-offset:1px;
  border-color:var(--accent);}
.bt-icon{
  position:absolute;top:0;right:0;bottom:0;width:44px;
  display:grid;place-items:center;color:var(--accent);pointer-events:none;
}
.bt-icon svg{width:19px;height:19px;}

/* --- the card grid --- */
.post-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:44px 34px;align-items:start;
}
.post-card{display:flex;flex-direction:column;}
.post-card[hidden]{display:none;}
.pc-img{display:block;margin-bottom:18px;border-radius:var(--radius);
  overflow:hidden;}
.pc-img .ph{min-height:0;aspect-ratio:8/5;padding:16px;font-size:.68rem;
  border-width:2px;}
.pc-img .ph strong{font-size:.8rem;line-height:1.3;}
.pc-img img{display:block;width:100%;height:100%;object-fit:cover;}
.post-card:hover .pc-img{opacity:.92;}
.pc-cat{
  margin:0 0 9px;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
}
.post-card h2{font-size:1.2rem;margin:0 0 10px;line-height:1.35;}
.post-card h2 a{color:var(--ink);}
.post-card h2 a:hover{color:var(--accent);text-decoration:none;}
.post-card p{margin:0 0 10px;}
.pc-sum{font-size:.95rem;color:var(--muted);line-height:1.6;}
.post-more{margin-top:auto;padding-top:6px;}
.post-date{font-size:.82rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.09em;font-weight:640;margin:0 0 8px;}
.post-more a{font-weight:620;font-size:.95rem;}
.blog-none{color:var(--muted);padding:34px 0;font-size:1.02rem;}
.bt-clear{
  font:inherit;font-size:1rem;background:none;border:0;padding:0;
  color:var(--accent);font-weight:620;text-decoration:underline;cursor:pointer;
}

@media (max-width:640px){
  .blog-hero{padding:54px 0 58px;}
  .blog-tools{flex-direction:column;align-items:stretch;gap:16px;}
  .bt-search{flex:1 1 auto;}
  .post-grid{grid-template-columns:1fr;gap:38px;}
}
.blog-empty{color:var(--muted);padding:34px 0;}
.post-body h2{font-size:1.35rem;margin-top:1.9em;}
.post-body ol{padding-left:1.3em;}
.post-body ol li{margin-bottom:.9em;}
.post-back{margin-top:2.4em;padding-top:1.4em;border-top:1px solid var(--line);
  font-weight:620;}

/* ================= SERVICES PAGE ===================================== */
.eyebrow.dark{color:var(--accent);}
.page-head .hint{color:var(--muted);font-size:.97rem;max-width:58ch;}

.svc-overview .card{display:flex;flex-direction:column;}
.svc-overview .card h2{font-size:1.35rem;margin-bottom:6px;}
.card-sub{color:var(--muted);font-size:.98rem;margin:0 0 16px;}
.svc-overview .checks{margin-bottom:18px;}
.svc-overview .checks li{font-size:.97rem;}
.card-more{margin:auto 0 0;font-weight:620;}

.svc-sub{font-size:1.1rem;font-weight:640;color:var(--accent-dark);
  margin:-4px 0 18px;}
.block-head{font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;
  font-weight:700;color:var(--muted);margin:2.6em 0 1.2em;
  padding-bottom:.7em;border-bottom:1px solid var(--line);}

/* the numbered steps reuse the .ask list from elsewhere on the site */
.ask li h3{font-size:1.02rem;}

.outcomes{margin-top:4px;}
.outcomes .card{padding:22px;}
.outcomes .card h3{font-size:1.02rem;margin-bottom:.4em;}
.outcomes .card p{font-size:.95rem;margin:0;color:var(--slate);}

/* anchors land below the sticky header rather than under it */
section[id],.faq details[id]{scroll-margin-top:150px;}
/* The heading above already draws a rule, and the accordion draws its own
   across the top - which stacked two lines a few pixels apart. Drop the
   accordion's, since the heading's is the one doing the work. */
.faq.svc-acc{border-top:0;}
.svc-acc{margin-bottom:4px;}
.svc-acc details:first-of-type{border-top:0;}
.svc-acc summary{font-size:1.02rem;}
.svc-acc .answer p{font-size:.99rem;}
@media (max-width:560px){
  .svc-sub{font-size:1.03rem;}
  .block-head{margin-top:2.2em;}
}

/* ================= SERVICES PAGE BANNER ============================== */
/* TO ADD A PHOTO: put the file in images/ and uncomment the background-image
   line below. The dark tint in front of it keeps the title readable over any
   picture, so you don't have to find a conveniently dark one. */
.svc-hero{
  position:relative;color:#fff;
  display:grid;place-items:center;text-align:center;
  padding:112px 0 116px;overflow:hidden;
  /* The river photo fills the whole banner. The dark layer over it is what
     keeps the white title readable -- lighten it and the title fades into
     the water. Replace images/services-hero.jpg to change the picture. */
  background-color:var(--bg-deep);
  background-image:linear-gradient(rgba(10,18,24,.72),rgba(10,18,24,.60)),
                   url('../images/services-hero.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.svc-hero .wrap{position:relative;z-index:2;}
.svc-hero h1{
  color:#fff;margin:0;letter-spacing:.09em;font-weight:700;
  font-size:clamp(1.9rem,4.2vw,2.9rem);text-transform:uppercase;
}

.svc-band{background:var(--accent);text-align:center;padding:40px 0 44px;
  color:#d5e3ef;}
.svc-band h2{color:#fff;margin:0 0 12px;letter-spacing:.05em;
  font-size:clamp(1.15rem,2.4vw,1.55rem);}
.svc-band p{margin:0 auto;max-width:60ch;font-size:1.01rem;line-height:1.6;}

.svc-two{max-width:64ch;margin:34px auto 0;color:var(--muted);
  font-size:.97rem;line-height:1.65;}

@media (max-width:560px){
  .svc-hero{padding:58px 0 62px;}
  .svc-band{padding:30px 0 34px;}
  .svc-band p{font-size:.97rem;}
}

/* nine icons read better as a balanced 3x3 than as 4 + 4 + a lonely one */
.svc-tiles.nine{max-width:700px;}
@media (max-width:820px){.svc-tiles.nine{max-width:520px;}}
@media (max-width:480px){.svc-tiles.nine{max-width:none;}}

/* ---- the same form again, on its own, at the foot of the services page ---- */
.lead-solo{background:#fff;border-top:0;padding:62px 0 84px;}
.solo-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;
  align-items:center;}
.solo-brand{display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:6px;}
.solo-brand .lead-mark{width:128px;height:128px;overflow:visible;}
.solo-brand .lead-name{font-size:2.05rem;font-weight:700;color:var(--ink);
  letter-spacing:-.028em;line-height:1.05;white-space:nowrap;margin-top:14px;}
/* The card sits fully below the blue band -- it does not overlap it. */
.lead-solo .lead-formwrap{max-width:430px;margin:0;}

/* The fish swims here too. It needs its OWN, gentler keyframes rather than
   the header's: the tail pivots at its narrow tip, so the far edge sweeps an
   arc about thirty times wider than the pivot itself moves. At 34px in the
   header that is a flick. At 128px the same angle throws the tail clean past
   the body and the fish looks broken. Same motion, smaller angles. */
@keyframes st-swim-big{
  0%,100%{transform:translateY(0) rotate(0deg);}
  25%    {transform:translateY(-2px) rotate(1.1deg);}
  50%    {transform:translateY(0) rotate(0deg);}
  75%    {transform:translateY(2px) rotate(-1.1deg);}
}
@keyframes st-beat-big{
  0%,100%{transform:rotate(0deg);}
  25%    {transform:rotate(4.5deg);}
  75%    {transform:rotate(-4.5deg);}
}
.lead-mark .fish,.lead-mark .tail{transform-box:fill-box;}
.lead-mark .fish{transform-origin:50% 50%;
  animation:st-swim-big 3s ease-in-out infinite;}
.lead-mark .tail{transform-origin:100% 50%;
  animation:st-beat-big 1.5s ease-in-out infinite;}
.reduced .lead-mark .fish,.reduced .lead-mark .tail{animation:none;}

@media (max-width:880px){
  .solo-grid{grid-template-columns:1fr;gap:30px;}
  .solo-brand{order:2;}
  .lead-solo .lead-formwrap{max-width:430px;margin:0 auto;order:1;}
}
@media (max-width:560px){
  .lead-solo{padding-bottom:58px;}
  .solo-brand .lead-mark{width:104px;height:104px;}
  .solo-brand .lead-name{font-size:1.72rem;}
}