/* ====================================================================
   A K JOHN v3 - Dylan's design pack, adapted.
   Geometry, spacing and type scale are the pack's. The typefaces are ours
   (Playfair Display + Inter, self-hosted) and the logo is his real mark.
   ==================================================================== */
:root{--navy:#102c42;--navy-hover:#1c455f;--ink:#15364c;--muted:#536978;
  --blue:#a6d6ea;--pale:#edf5f8;--line:#cddfe7;--white:#fff;--green:#26764b;
  --danger:#a43036;--radius:8px;--content:1280px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:18px/1.55 'Inter',system-ui,Arial,sans-serif;
  color:var(--ink);background:var(--pale)}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:500;
  line-height:1.08;letter-spacing:-.012em}
h1{font-size:61px}
h2{font-size:49px;margin:22px 0 25px}
h3{font-size:27px}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea,summary{touch-action:manipulation}
button,a{-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
a:hover{text-decoration:underline}
.button:hover{text-decoration:none}
.container{width:min(var(--content),calc(100% - 64px));margin-inline:auto}
.content{position:relative;z-index:2}
#page{position:relative;isolation:isolate;overflow:clip}
#continuous-shards{position:absolute;inset:0;width:100%;height:100%;z-index:1;
  pointer-events:none;overflow:hidden}
.section{position:relative;background:var(--pale);padding-block:90px;
  min-height:var(--sec-h,auto)}
.section::after{content:'';position:absolute;right:1%;bottom:0;width:370px;
  height:285px;background:url('icons/house-linework-blue.svg') center/contain
  no-repeat;opacity:.38;pointer-events:none}
.dark{background:var(--navy);color:#fff}
.dark .eyebrow{color:var(--blue)}
.dark .lede{color:#dce9ef}
.dark::after{right:auto;left:1%;opacity:.12}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:2.6px;line-height:1.4;
  color:var(--muted);text-transform:uppercase}
.lede{max-width:800px;color:var(--muted);font-size:18px;line-height:1.55}
.services .lede,.work .lede,.process .lede{max-width:none}
.button{border:1px solid transparent;min-height:54px;display:inline-flex;
  align-items:center;justify-content:space-between;gap:24px;padding:13px 20px;
  background:var(--navy);color:#fff;border-radius:5px;font-size:15px;
  font-weight:700;cursor:pointer;line-height:1.4}
.button:hover{background:var(--navy-hover)}
.button.white{background:#fff;color:var(--navy)}
.button.white:hover{background:var(--pale)}
.button.outline{color:var(--navy);background:transparent;border-color:var(--navy)}
.button.outline:hover{background:#fff}
.button.outline-light{color:#fff;background:transparent;border-color:var(--blue)}
.button.outline-light:hover{background:rgba(255,255,255,.12)}
/* WhatsApp is WhatsApp green with the white mark and the word, everywhere it
   appears as a button. It was an outlined ghost button sitting next to a solid
   white Call, which made the thing people actually tap look like the secondary
   option, and nothing about it said WhatsApp except the label. */
.button.whatsapp{background:#25d366;color:#fff;border-color:#25d366;
  justify-content:center;gap:12px}
.button.whatsapp:hover{background:#1da851;border-color:#1da851}
.button.whatsapp:focus-visible{outline:3px solid #0b5c2e;outline-offset:3px}
.button.whatsapp .icon{width:26px;height:26px}
.button:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.icon{width:24px;height:24px;flex:0 0 auto}
.button .icon{width:20px;height:20px}
:focus-visible{outline:3px solid #3486ae;outline-offset:4px}
.dark :focus-visible{outline-color:#a6d6ea}
.skip-link{position:fixed;left:16px;top:-200px;padding:14px 20px;
  background:#fff;color:var(--navy);z-index:40;border-radius:4px;
  font-weight:700}
.skip-link:focus,.skip-link:focus-visible{top:16px}

/* ---- header -------------------------------------------------------- */
.utility{height:36px;background:var(--navy);position:relative;z-index:3;
  font-size:13px;color:#fff}
.utility .container{height:100%;display:flex;justify-content:flex-end;gap:45px;
  align-items:center}
.utility a{display:inline-flex;align-items:center;gap:8px;color:#fff}
.utility .icon{width:16px;height:16px}
.header{height:100px;background:#fff;position:relative;z-index:5;color:var(--ink)}
.header-inner{display:flex;align-items:center;justify-content:space-between;
  height:100%}
.brand{width:300px;flex:none}
.brand img{width:100%;height:auto}
.brand picture{display:block}
.header nav{display:flex;gap:31px;align-items:center;font-size:13px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.header .button{margin-left:22px}
/* ---- nav dropdowns --------------------------------------------------
   Services and Areas each open the full list of their pages. The parent is
   still a link to the hub, so it keeps working with no JS and for anybody who
   just clicks it; the chevron beside it is a real <button>, which is what makes
   Enter, Space and a tap work without inventing keyboard handling for a link.
   Hover opens it on a pointer, :focus-within opens it on Tab, and .open is the
   click-to-pin state that outlives both. */
.nav-item{position:relative;display:flex;align-items:center;gap:4px}
.sub-toggle{border:0;background:none;padding:6px;margin:0;cursor:pointer;
  display:inline-flex;align-items:center;line-height:0;border-radius:3px}
.sub-toggle:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.sub-toggle img{width:12px;height:12px;transition:transform .15s ease}
.nav-item.open .sub-toggle img{transform:rotate(180deg)}
.sub{position:absolute;top:100%;left:-14px;margin-top:14px;min-width:268px;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px;
  box-shadow:0 18px 34px #102c4226;list-style:none;z-index:40;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s}
/* the gap between the header and the panel would close it on the way down */
.sub::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.nav-item:hover>.sub,.nav-item:focus-within>.sub,.nav-item.open>.sub{
  opacity:1;visibility:visible;transform:none}
/* Escape has to beat :focus-within. Focus lands back on the toggle, which lives
   INSIDE .nav-item, so focus-within stays true and the panel stayed open with
   aria-expanded="false" against it: the state said shut and the eye said open.
   .closed is dropped again the moment the item is used in any other way. */
.nav-item.closed>.sub{opacity:0;visibility:hidden;transform:translateY(6px)}
.sub a{display:block;padding:10px 12px;border-radius:5px;font-size:14px;
  font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap;
  color:var(--ink)}
.sub a:hover,.sub a:focus-visible{background:var(--pale);text-decoration:none}
.sub .sub-all{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
.sub .sub-all a{color:var(--navy);font-weight:700}
.menu-toggle{display:none;border:1px solid var(--line);border-radius:4px;
  background:#fff;padding:10px;cursor:pointer;min-height:44px;min-width:44px}

/* ---- hero ---------------------------------------------------------- */
.hero{padding:0;min-height:860px}
.services{--sec-h:1040px}
/* 15 cards, not 6: the grid wraps to five rows and the section grows
   with it. The shard layer is drawn from scrollHeight, so it follows. */
.services .service-grid{align-items:stretch}
.service-card{display:flex;flex-direction:column}
.service-card .service-body{flex:1;display:flex;flex-direction:column}
.service-card .service-body p{flex:1}

/* ---- past work slideshow -------------------------------------------
   A native scroll-snap track. The arrows and dots are progressive: with no JS
   it is still a swipeable, keyboard-scrollable strip, which is what a phone
   does with it anyway. */
.slider{position:relative;margin-top:36px}
.slider-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-bottom:6px}
.slider-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start;
  background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column}
.slide img{width:100%;height:260px;object-fit:cover;display:block}
.slide figcaption{padding:14px 16px;font-size:14px;color:var(--muted);flex:1}
.slide .real-label{display:inline-block;margin:14px 16px 0;padding:3px 9px;
  border-radius:3px;background:var(--pale);color:var(--navy);font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.slider-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;
  align-items:center}
.slider-dots{display:flex;gap:7px;margin-right:auto}
.slider-dot{width:8px;height:8px;border-radius:50%;background:var(--line);
  border:0;padding:0;cursor:pointer}
.slider-dot[aria-current="true"]{background:var(--navy);width:22px;border-radius:4px}
.slider-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:#fff;cursor:pointer;display:grid;place-items:center}
.slider-btn:hover{background:var(--pale)}
.slider-btn[disabled]{opacity:.35;cursor:default}
.slider-btn img{width:18px;height:18px}
.slider-btn.prev img{transform:rotate(180deg)}

/* ---- contact strip -------------------------------------------------- */
/* ---- three ways to start, with the short form in the band ------------ */
.ways-band{background:var(--navy);color:#fff}
.ways-band .eyebrow{color:var(--blue)}
.ways-band h2{color:#fff}
.ways-band .lede{color:#dce9ef;max-width:46ch}
.ways-layout{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:60px;
  align-items:start}
.ways{display:grid;gap:14px;margin-top:30px}
.way{display:grid;grid-template-columns:54px 1fr 24px;gap:16px;align-items:center;
  padding:18px 20px;background:#17384f;border:1px solid #40647a;border-radius:9px;
  color:#fff;transition:background .15s ease,transform .15s ease}
.way:hover{background:#1c455f;text-decoration:none;transform:translateY(-2px)}
.way:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.way .way-badge{width:54px;height:54px;border-radius:50%;display:grid;
  place-items:center;background:var(--navy)}
/* navy glyph on the pale blue badge: white on #a6d6ea is 1.56:1 and this is
   a UI component, which wants 3.0. Navy on it is 9.19. */
.way .way-badge.call{background:var(--blue)}
.way .way-badge.wa{background:#25d366}
.way .way-badge img{width:26px;height:26px}
.way-text{display:grid;gap:3px}
.way-text strong{font-size:18px;font-weight:700}
.way-text span{font-size:14px;color:#c6d8e3}
.way-arrow img{width:20px;height:20px}
.ways-form{background:#fff;border-radius:12px;padding:26px;color:var(--ink)}
.ways-form h3{font-size:22px;margin:0 0 4px}
.ways-form-note{font-size:14px;color:var(--muted);margin:0 0 16px}
.quick-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick-form .button{width:100%;justify-content:center;margin-top:4px}

/* ---- how we do it --------------------------------------------------- */
.section.pale{background:var(--pale)}
.how-list{list-style:none;margin:36px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:26px 40px;counter-reset:none}
.how-step{display:flex;gap:18px;align-items:flex-start}
.how-num{flex:0 0 46px;height:46px;border-radius:50%;background:var(--navy);
  color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;
  letter-spacing:.04em}
.how-step h3{font-size:19px;margin:6px 0 6px}
.how-step p{font-size:15px;color:var(--muted);margin:0}

/* ---- case studies ---------------------------------------------------- */
.cases{display:grid;gap:26px;margin-top:40px}
.case{display:grid;grid-template-columns:460px 1fr;gap:30px;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:22px;align-items:start}
.case-shots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.case-shots img{width:100%;height:150px;object-fit:cover;border-radius:6px;
  display:block}
.case-shots img:first-child{grid-column:1/-1;height:230px}
.case-body h3{font-size:24px;margin:6px 0 14px}
.case-story{margin:0 0 18px}
.case-story dt{font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--navy);margin-top:12px}
.case-story dd{margin:3px 0 0;font-size:15px;color:var(--muted);line-height:1.6}
.case-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.case-actions .button{min-height:48px;font-size:14px}
.case-quote{font-weight:700;font-size:14px;display:inline-flex;align-items:center;
  gap:7px}
.case-note{font-size:13px;color:var(--muted);margin:14px 0 0}
.process{--sec-h:860px}
.work{--sec-h:850px}
.contact{--sec-h:900px}
.areas{--sec-h:1030px}
.footer{--sec-h:650px}
.hero-image{position:absolute;inset:136px 0 0;overflow:hidden}
/* the photo is wrapped in <picture>, which is inline by default and therefore
   has no height for the img's height:100% to resolve against. Without this the
   hero rendered as flat navy. */
.hero-image picture{display:block;width:100%;height:100%}
.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-image::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(7,27,43,.94),rgba(16,44,66,.58) 64%,
    rgba(16,44,66,.18))}
.hero::after{bottom:0}
.hero-layout{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:100px;
  padding-top:29px;min-height:621px}
.hero-copy{padding-top:43px}
.hero h1{margin:20px 0 23px}
.hero .lede{font-size:21px;color:#e5eff4;max-width:670px}
.actions{display:flex;gap:24px;margin-top:43px;flex-wrap:wrap}
.ticks{list-style:none;margin:19px 0 0;padding:0;font-size:17px;line-height:1.8}
.ticks li{padding-left:33px;background:url('icons/check-blue.svg') left 5px/20px
  no-repeat}
.trust-strip{background:#fff;border:1px solid var(--line);border-radius:8px;
  color:var(--ink);min-height:94px;padding:20px;overflow:hidden;
  /* it used to sit flush against the bottom of the hero form card: measured at
     a 0px gap. The hero keeps its height, this just stops them touching. */
  margin-top:36px}
.trust-track{display:flex;width:max-content;
  animation:trust-spin 34s linear infinite}
.trust-strip:hover .trust-track,
.trust-strip:focus-within .trust-track{animation-play-state:paused}
/* half the track is the second copy, so -50% lands the duplicate exactly where
   the original started and the loop has no seam */
@keyframes trust-spin{from{transform:translateX(0)}
                      to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.trust-track{animation:none}}
.trust-item{display:flex;gap:15px;align-items:center;flex:0 0 auto;
  width:clamp(240px,23vw,320px);padding-right:18px;margin-right:18px;
  border-right:1px solid var(--line)}
.trust-item>.icon{width:48px;height:48px;padding:13px;background:var(--pale);
  border-radius:50%}
.trust-item strong{display:block;font-size:17px}
.trust-item span{display:block;font-size:13px;color:var(--muted);
  line-height:1.4;margin-top:5px}

/* ---- forms --------------------------------------------------------- */
.quote-form{background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:25px 31px 20px;align-self:start}
.quote-form h2.form-title{font-size:30px;margin:0;line-height:1.1}
.form-intro{font-size:16px;line-height:1.5;color:var(--muted);margin:7px 0 14px}
.field{display:block;margin-bottom:16px;min-width:0}
.field>span:first-child{display:block;font-size:12px;font-weight:700;
  margin-bottom:7px;line-height:1.4}
.field input,.field select,.field textarea{display:block;width:100%;
  min-width:0;min-height:46px;border:1px solid var(--line);border-radius:4px;
  background:#fff;color:var(--ink);padding:10px 12px;font-size:16px;
  line-height:1.5}
.field select{appearance:none;background:#fff url('icons/chevron-navy.svg')
  right 11px center/16px no-repeat;padding-right:34px}
.field textarea{resize:vertical;min-height:66px}
.compact-form textarea{height:66px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--navy);outline-offset:1px}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:var(--danger)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field-row.thirds{grid-template-columns:repeat(3,1fr)}
.quote-form>.button{width:100%;margin-top:0}
.form-note{font-size:13px;color:var(--muted);margin-top:8px}
.form-status{font-size:14px;color:var(--ink);margin-top:12px;padding:12px;
  background:var(--pale);border-radius:4px}
.form-status.error{color:var(--danger);background:#fbeaea}
.form-status.ok{color:var(--green);background:#eaf5ef}
.file-help{display:block;font-size:12px;color:var(--muted);margin-top:5px}
/* 16px or iOS zooms the whole page when it gets focus */
.field input[type=file]{font-size:16px;padding:8px}
.field input::file-selector-button{border:0;padding:6px 9px;
  background:var(--pale);color:var(--ink);border-radius:3px;margin-right:9px}

/* ---- services ------------------------------------------------------ */
.section-action{position:absolute;right:0;top:16px}
.services .section-heading{max-width:890px}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 25px;
  margin-top:69px}
.service-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;display:block;color:inherit}
.service-card picture{display:block}
.service-card .photo{height:172px;width:100%;object-fit:cover}
.service-card:hover{text-decoration:none}
.service-body{position:relative;padding:33px 24px 28px;min-height:164px}
.number{position:absolute;top:-23px;left:20px;background:var(--navy);color:#fff;
  padding:6px 10px;font-weight:700;font-size:17px;border-radius:4px}
.service-body h3{display:flex;align-items:center;gap:12px;font-size:27px}
.service-body p{font-size:16px;line-height:1.45;margin-top:15px;
  padding-right:48px;color:var(--muted)}
.circle-link{display:flex;align-items:center;justify-content:center;width:34px;
  height:34px;border-radius:50%;background:var(--pale);position:absolute;
  right:18px;bottom:17px}
.circle-link .icon{width:18px;height:18px}
.service-card:hover .circle-link{background:var(--blue)}

/* ---- process ------------------------------------------------------- */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  margin-top:86px}
.process-card{position:relative;min-height:484px;background:#17384f;border:1px solid #40647a;
  border-radius:8px;overflow:hidden}
.process-card picture{display:block}
.process-card .photo{width:100%;height:184px;object-fit:cover}
.process-body{position:relative;padding:60px 23px 24px}
.process-icon{position:absolute;left:23px;top:-28px;display:grid;
  place-items:center;width:54px;height:54px;background:var(--blue);
  border-radius:50%}
.step{position:absolute;right:24px;top:22px;color:var(--blue);font-size:14px;
  font-weight:700}
.process-body h3{font-size:27px;line-height:1.12;min-height:62px}
.process-body p{font-size:17px;line-height:1.5;color:#dce9ef;margin-top:20px}

/* ---- work ---------------------------------------------------------- */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:27px 25px;
  margin-top:66px}
.work-card{position:relative;height:248px;overflow:hidden;border-radius:8px;
  color:#fff;display:block}
.work-card picture{display:block;width:100%;height:100%}
.work-card .photo{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.work-card:hover .photo{transform:scale(1.025)}
.work-card::after{content:'';position:absolute;inset:40% 0 0;
  background:linear-gradient(transparent,rgba(7,27,43,.94))}
.example-label{position:absolute;top:17px;left:18px;font-size:10px;
  font-weight:700;letter-spacing:.7px;color:var(--navy);background:#fff;
  padding:4px 9px;border-radius:3px;z-index:1;text-transform:uppercase}
.work-card h3{position:absolute;bottom:19px;left:22px;right:63px;z-index:1;
  font-size:21px;line-height:1.2;color:#fff}
.work-card .circle-link{z-index:1;background:transparent;
  border:1px solid #ffffff80;bottom:21px}

/* ---- contact ------------------------------------------------------- */
.contact{background:#e7f1f6;padding-top:60px}
.contact-layout{display:grid;grid-template-columns:490px minmax(0,1fr);gap:120px}
.contact .section-heading{padding-top:38px}
.contact h2{font-size:49px}
.contact-methods{margin-top:60px;display:grid;gap:35px}
.contact-method{display:flex;gap:17px;align-items:center}
.contact-method .eyebrow{margin:0 0 10px}
.contact-method a,.contact-method>div>p:not(.eyebrow){font-size:19px}
.contact-badge{display:grid;place-items:center;width:58px;height:58px;
  background:#fff;border-radius:50%;flex:none}
.full-form .form-intro{margin-bottom:28px}
.full-form .field{margin-bottom:18px}
.full-form textarea{min-height:104px}
.full-form .form-note{margin-top:28px}

/* ---- areas and FAQ ------------------------------------------------- */
.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:19px 37px;
  margin-top:39px}
.area-chip{display:flex;gap:13px;align-items:center;min-height:52px;
  border:1px solid var(--line);border-radius:5px;background:#fff;font-size:16px;
  padding:12px 14px}
.area-chip:hover{background:var(--pale);text-decoration:none}
.area-chip .icon{width:20px;height:20px}
.faq-group{margin-top:50px;border-top:1px solid var(--line);padding-top:53px}
.faq-group h2{font-size:45px;margin-bottom:34px}
.faq{background:#fff;border:1px solid var(--line);border-radius:5px;
  margin-top:5px}
.faq summary{display:flex;align-items:center;justify-content:space-between;
  list-style:none;cursor:pointer;padding:19px 24px;font-size:19px;gap:20px;
  line-height:1.4;min-height:65px}
.faq summary::-webkit-details-marker{display:none}
.faq-indicator{font-size:25px;line-height:1;flex:0 0 auto}
.faq-answer{padding:0 24px 24px;max-width:1150px;font-size:16px;
  color:var(--muted);line-height:1.6}

/* ---- footer -------------------------------------------------------- */
.footer{padding-top:95px;padding-bottom:40px}
.footer-grid{display:grid;grid-template-columns:300px 150px 215px 225px 170px;
  gap:35px}
.footer .eyebrow{margin-bottom:25px;color:var(--blue)}
.footer-about>img{width:300px;margin-bottom:24px}
.footer-about>p{font-size:17px;color:#dce9ef;line-height:1.6;margin-bottom:28px}
.footer-about>a{display:flex;align-items:center;gap:11px;font-size:15px;
  margin-bottom:18px;overflow-wrap:anywhere;color:#e2ecf2}
.footer-about>a .icon{width:18px;height:18px;flex:0 0 18px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{font-size:15px;line-height:1.4;margin-bottom:15px;color:#e2ecf2}
.sticky-bar{display:none}
/* The one floating WhatsApp control, at every width. It used to be
   mobile-only, which left the desktop with none, and the engine's own
   dock filled the gap with an unstyled grey button. 60px, clear of the
   sticky bar on a phone. */
.wa-float{display:grid;position:fixed;right:20px;bottom:20px;z-index:30;
  width:60px;height:60px;border-radius:50%;background:#25d366;
  place-items:center;box-shadow:0 6px 18px rgba(7,27,43,.28);
  transition:transform .16s ease}
.wa-float:hover,.wa-float:focus-visible{transform:translateY(-2px)}
.wa-float:focus-visible{outline:3px solid #0b5c2e;outline-offset:3px}
.wa-float img{width:33px;height:33px}
.footer-bottom{display:flex;justify-content:space-between;
  border-top:1px solid #3b576b;padding-top:28px;margin-top:63px;font-size:13px;
  color:#c6d8e3;gap:20px;flex-wrap:wrap}

/* ---- inner pages --------------------------------------------------- */
.page-hero{min-height:0;padding:0}
.page-hero .hero-layout{min-height:420px;padding-top:40px;padding-bottom:40px}
.page-hero .hero-image{inset:136px 0 0}
.page-hero h1{font-size:49px}
.crumbs{font-size:13px;color:#cfe0e8;margin-bottom:10px}
.crumbs a:hover{text-decoration:underline}
.prose{max-width:760px}
.prose h2{font-size:36px;margin:48px 0 18px}
.prose h3{font-size:24px;margin:32px 0 12px}
.prose p{font-size:18px;line-height:1.7;color:var(--ink);margin-bottom:18px}
.prose ul{margin:0 0 20px;padding-left:22px;color:var(--ink);line-height:1.7}
.prose li{margin-bottom:8px}
/* the first paragraph of a long explanation carries the summary, so it is
   sized to be read when the rest is skimmed */
.prose > p:first-of-type{font-size:20px;line-height:1.65;color:var(--ink)}
.prose-aside{position:sticky;top:24px;display:grid;gap:16px}
.prose-aside img{width:100%;height:230px;object-fit:cover;border-radius:8px;
  display:block}
.prose-aside figure{margin:0;position:relative}
.prose-aside figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.aside-card{background:var(--pale);border:1px solid var(--line);border-radius:10px;
  padding:22px;display:grid;gap:12px}
.aside-points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.aside-points li{font-size:15px;color:var(--ink);line-height:1.5;
  padding-left:26px;position:relative}
.aside-points li::before{content:"";position:absolute;left:0;top:6px;width:15px;
  height:8px;border-left:2px solid var(--navy);border-bottom:2px solid var(--navy);
  transform:rotate(-45deg)}
.aside-card .button{justify-content:center;min-height:50px}
.aside-note{font-size:13px;color:var(--muted);margin:2px 0 0}

/* ---- three points instead of three paragraphs ----------------------- */
.points-layout{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:50px;
  align-items:start;margin-top:36px}
.points{display:grid;gap:18px}
.point{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:20px 22px}
/* span both rows, or row 1 is sized by the 52px badge and the heading sits in
   the top of it with 28px of slack between it and its own paragraph */
.point-badge{width:52px;height:52px;border-radius:50%;background:var(--pale);
  display:grid;place-items:center;grid-row:1/3}
.point-badge img{width:24px;height:24px}
.point h3{font-size:18px;margin:4px 0 6px;grid-column:2}
.point p{font-size:15px;line-height:1.6;color:var(--muted);margin:0;grid-column:2}
.points-layout figure{margin:0}
/* > figure img, NOT .points-layout img: the broad selector also caught the
   24px icon inside every .point-badge and stretched it to 52x300, so each card
   had a giant navy glyph hanging out of the bottom of it. */
.points-layout > figure img{width:100%;height:300px;object-fit:cover;
  border-radius:9px;display:block}
.points-layout figcaption{font-size:13px;color:var(--muted);margin-top:8px}

/* ---- what is in the quote ------------------------------------------- */
.quote-items{list-style:none;margin:32px 0 0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:12px 20px}
.qi{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px 18px;
  font-size:15px;line-height:1.55;color:var(--ink)}
.qi-tick{width:30px;height:30px;border-radius:50%;background:var(--pale);
  display:grid;place-items:center}
.qi-tick img{width:16px;height:16px}
.quote-why{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:16px 18px;
  align-items:center;margin:24px 0 0;padding:22px 24px;background:var(--navy);
  color:#fff;border-radius:9px}
.quote-why p{margin:0;font-size:16px;line-height:1.6}
.quote-why-icon img{width:26px;height:26px;filter:brightness(0) invert(1)}
.quote-why-actions{display:flex;gap:12px}
.quote-why-actions .button{min-height:48px;font-size:14px;white-space:nowrap}

/* ---- pre-footer: a form and the map, on every page ------------------- */
.prefooter{background:var(--pale)}
.prefooter-grid{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:56px;
  align-items:start;margin-top:8px}
.prefooter .quick-form{background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:24px;margin-top:24px}
.prefooter-map h3{font-size:22px;margin:0 0 4px}
.map-note{font-size:14px;color:var(--muted);margin:0 0 16px}
.map-frame{border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:#fff}
.map-frame iframe{display:block;width:100%;height:300px;border:0}
.map-contact{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.map-contact li{display:flex;gap:12px;align-items:center;font-size:15px}
.map-contact img{width:20px;height:20px;flex:0 0 auto}
.point-badge img{width:24px;height:24px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:70px;
  align-items:start}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:28px}
.cta-band{background:var(--navy);color:#fff;border-radius:8px;padding:44px;
  display:flex;justify-content:space-between;align-items:center;gap:30px;
  flex-wrap:wrap;margin-top:70px}
.cta-band h2{margin:0 0 8px;font-size:36px}
.cta-band p{color:#dce9ef}

@media(max-width:1399px){
  .hero-layout{gap:50px}
  .header nav{gap:20px}
  .header .button{margin-left:0}
  .brand{width:260px}
  h1{font-size:54px}
  .service-body h3{font-size:24px}
  .contact-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:60px}
  .footer-grid{grid-template-columns:1.4fr .7fr 1fr 1fr .8fr;gap:24px}
  .footer-about>img{width:260px}
  .section-action{position:static;margin-top:24px}
  .services .service-grid{margin-top:40px}
  .split{grid-template-columns:minmax(0,1fr) 380px;gap:40px}
}
@media(max-width:1100px){
  .section{--sec-h:auto}
  .process-card{min-height:435px}
  .process-body h3{min-height:0}
  .hero-layout{grid-template-columns:minmax(0,1fr) 425px;gap:28px}
  .header nav{gap:14px}
  .header nav>.button{display:none}
  .hero h1{font-size:46px}
  .hero .lede{font-size:18px}
  .hero-copy{padding-top:30px}
  .actions{gap:12px;margin-top:30px}
  .actions .button{font-size:13px;gap:15px;padding-inline:15px}
  .trust-strip{padding:15px;margin-top:26px}
  .trust-track{animation-duration:26s}
  .trust-item{gap:9px;width:76vw;padding-right:12px;margin-right:12px}
  .trust-item strong{font-size:14px}
  .trust-item span{font-size:12px}
  .trust-item>.icon{width:40px;height:40px;padding:10px}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .contact-layout{gap:35px}
  .contact h2{font-size:43px}
  .contact-method a{font-size:16px}
  .field-row.thirds{grid-template-columns:1fr}
  .area-grid{column-gap:16px}
  .footer-grid{grid-template-columns:repeat(4,1fr)}
  .footer-about{grid-column:1/-1;max-width:600px}
  .footer-about>img{width:300px}
  .footer-about>a{display:inline-block;margin-right:20px}
  .footer-about>p{margin-bottom:16px}
  .footer-bottom{margin-top:35px}
  .split{grid-template-columns:1fr;gap:40px}
  .related{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:800px){
  .container{width:calc(100% - 48px)}
  .hero{min-height:0}
  .section{padding-block:64px}
  .section::after{width:220px;height:170px;opacity:.22}
  .hero{padding:0 0 40px;min-height:0}
  .utility{height:auto;min-height:32px}
  .utility .container{justify-content:center;font-size:12px;min-height:32px;
    gap:22px}
  .utility .u-email{display:none}
  .header{height:88px}
  .brand{width:235px}
  .hero-image{inset:120px 0 0}
  .hero-image img{object-position:60% top}
  .menu-toggle{display:block}
  .header nav{display:none;position:absolute;top:88px;left:0;right:0;
    background:#fff;padding:20px 24px;box-shadow:0 14px 25px #102c4220}
  .header nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .header nav>a{padding:12px;min-height:44px;display:flex;align-items:center}
  /* In the drawer a dropdown is an expandable section, not a floating panel.
     Hover and focus-within must stop opening it or a tap that moves focus into
     the item springs the whole list open under the thumb. */
  .header nav .nav-item{flex-wrap:wrap;justify-content:space-between;
    border-bottom:1px solid var(--line)}
  .header nav .nav-item>a{flex:1;padding:12px;min-height:44px;display:flex;
    align-items:center}
  .sub-toggle{min-width:44px;min-height:44px;justify-content:center}
  .sub-toggle img{width:14px;height:14px}
  .sub{position:static;opacity:1;visibility:visible;transform:none;
    display:none;margin:0 0 8px;min-width:0;width:100%;border:0;padding:0 0 0 12px;
    box-shadow:none;background:none;transition:none}
  .sub::before{display:none}
  .nav-item:hover>.sub,.nav-item:focus-within>.sub{display:none}
  .nav-item.open>.sub{display:block}
  .sub a{min-height:44px;display:flex;align-items:center}
  .hero-layout{grid-template-columns:1fr;padding-top:44px;gap:36px;min-height:0}
  .hero-copy{padding-top:0}
  .hero h1{font-size:43px;line-height:1.06}
  .hero h1 br{display:none}
  .hero .lede{font-size:18px;line-height:1.55}
  .eyebrow{font-size:11px;letter-spacing:2px}
  .hero .eyebrow{font-size:10px}
  .actions{margin-top:27px;gap:12px}
  .actions .button{font-size:14px;gap:10px;flex:1;padding-inline:14px;
    white-space:nowrap}
  .ticks{font-size:15px;margin-top:23px}
  .hero .quote-form{width:100%}
  .quote-form{padding:24px 22px}
  h2{font-size:37px}
  .trust-strip{grid-template-columns:1fr 1fr;min-height:0}
  .trust-item:nth-child(2n){border-right:0;padding-right:0}

  .process-grid,.work-grid{grid-template-columns:1fr;
    margin-top:40px;gap:40px 0}
  /* Fifteen services stacked one per screen is a very long scroll past the
     rest of the page. On a phone the grid becomes a snap carousel instead:
     one card and a peek of the next, so it reads as swipeable without a
     control to explain it. Native scrolling, so it works with no JS and the
     scrollbar is the only thing hidden. */
  .service-grid{display:flex;grid-template-columns:none;margin-top:40px;
    gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:4px 24px 8px;margin-left:-24px;margin-right:-24px}
  .service-grid::-webkit-scrollbar{display:none}
  .service-grid>.service-card{flex:0 0 86%;scroll-snap-align:center}
  .service-grid>.service-card:last-child{margin-right:24px}
  .process-card{min-height:0}
  .slide{flex:0 0 86%}
  .slide img{height:230px}
  .ways-layout{grid-template-columns:1fr;gap:28px}
  .ways{gap:12px}
  .way{grid-template-columns:46px 1fr 20px;gap:12px;padding:14px 16px}
  .way .way-badge{width:46px;height:46px}
  .ways-form{padding:20px}
  .quick-form .field-row{grid-template-columns:1fr}
  .how-list{grid-template-columns:1fr;gap:22px}
  .case{grid-template-columns:1fr;gap:18px;padding:16px}
  .case-shots img{height:120px}
  .case-shots img:first-child{height:190px}
  .case-actions .button{width:100%;justify-content:center}
  .prose-aside{position:static}
  .points-layout{grid-template-columns:1fr;gap:26px}
  .point{grid-template-columns:44px 1fr;gap:14px;padding:16px}
  .point-badge{width:44px;height:44px}
  .points-layout > figure img{height:220px}
  .quote-items{grid-template-columns:1fr;gap:10px}
  .quote-why{grid-template-columns:1fr;gap:14px}
  .quote-why p{font-size:15px}
  .quote-why-actions{flex-direction:column}
  .quote-why-actions .button{width:100%;justify-content:center}
  .prefooter-grid{grid-template-columns:1fr;gap:34px}
  .map-frame iframe{height:240px}
  .split{grid-template-columns:1fr;gap:30px}
  .contact-layout{grid-template-columns:1fr;gap:34px}
  .contact .section-heading{padding-top:0}
  .contact h2{font-size:37px}
  .contact-methods{margin-top:30px;gap:24px}
  .area-grid{grid-template-columns:1fr 1fr;gap:12px}
  .faq-group{margin-top:34px;padding-top:34px}
  .faq-group h2{font-size:33px}
  .faq summary{font-size:17px;padding:16px 18px}
  .footer{padding-top:60px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  /* A full-width button is not a shrink-wrapped one. .button is
     space-between, which is right when the width comes from the content (the
     Send Enquiry bar wants its arrow on the far edge) and wrong the moment the
     hero buttons go full width on a phone: it threw the icon against the left
     edge and the label against the right with a void between them. */
  .hero .actions .button,
  .sticky-bar .button{justify-content:center}
  /* 44px tap targets on a phone. The visible text stays the same size; the
     link just gets the room round it that a thumb needs. */
  .footer li{margin-bottom:4px}
  .footer li a{display:flex;align-items:center;min-height:44px}
  .footer-about>a{min-height:44px}
  .area-chip{min-height:48px}
  .circle-link{width:44px;height:44px}
  .faq summary{min-height:56px}
  .footer-about{grid-column:1/-1}
  .footer-about>img{width:240px}
  .related{grid-template-columns:1fr}
  .cta-band{padding:28px;margin-top:44px}
  .cta-band h2{font-size:28px}
  /* sticky call bar */
  .sticky-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;
    gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:#fff;border-top:1px solid var(--line)}
  .sticky-bar .button{flex:1;min-height:48px;justify-content:center;gap:10px}
  body{padding-bottom:78px}
  .wa-float{right:14px;bottom:92px}

}
@media(max-width:370px){
  .container{width:calc(100% - 36px)}
  .actions{flex-direction:column}
  .actions .button{width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .work-card .photo{transition:none}
}
@media print{#continuous-shards,.sticky-bar,.wa-float{display:none}}