/* =========================================================
   Kent Studio · shared styles for every page
   Used by the Services and Pricing pages (the home page has its own styles)
   Sections: 1 fonts & colours · 2 basics · 3 top bar · 4 phone menu
   5 page parts · 7 services · 9 pricing · 11 contact band · 13 phones & motion
   14 same top bar, footer and enquiry button as the home page
   ========================================================= */

/* ---------- 1. fonts & colours ---------- */
@font-face{font-family:"GFS Didot";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/gfs-didot-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"GFS Didot";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/gfs-didot-greek-400.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin-wght.woff2) format("woff2-variations"),url(../fonts/inter-latin-wght.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-greek-wght.woff2) format("woff2-variations"),url(../fonts/inter-greek-wght.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}

:root{
  /* brand board: Navy, Midnight, Silver, Mist, White */
  --navy:#13273f; --navy2:#1b3354; --midnight:#0b1726;
  --silver:#bfc5cb; --mist:#ece8e1; --pearl:#f6f4f0;
  --slate:#5a6878; --ink:#4a5868;
  --line:rgba(19,39,63,.16); --line2:rgba(19,39,63,.28);
  --dline:rgba(246,244,240,.14); --dline2:rgba(246,244,240,.3);
  --disp:"GFS Didot",Didot,"Bodoni MT",Georgia,serif;
  --text:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(20px,5vw,56px);
  --bar:76px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. basics ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 20px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--pearl);color:var(--navy);font:400 16px/1.7 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip;
  min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:inherit}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gut)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.dk :focus-visible,.nav :focus-visible,.mnav :focus-visible,.foot :focus-visible{outline-color:var(--silver)}
a,button{-webkit-tap-highlight-color:rgba(0,0,0,0)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--pearl);color:var(--navy);padding:12px 16px;border-radius:2px;
  font:500 12px/1 var(--text);letter-spacing:.12em;text-decoration:none}
.skip:focus{top:12px}

/* labels, headings and buttons used everywhere */
.eb{font:500 12.5px/1.3 var(--text);letter-spacing:.24em;text-transform:uppercase;color:var(--slate)}
.dk .eb{color:var(--silver)}
.h2{font:400 clamp(32px,4.4vw,56px)/1.06 var(--disp);margin-top:16px;max-width:20ch;text-wrap:balance}
.lead{font-size:clamp(16px,1.5vw,18px);line-height:1.7;color:var(--ink);max-width:60ch;margin-top:18px}
.dk .lead{color:rgba(246,244,240,.84)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:16px 24px;
  font:500 12.5px/1.2 var(--text);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;text-align:center;
  background:var(--navy);color:var(--pearl);border:1px solid var(--navy);border-radius:2px;cursor:pointer;
  transition:background .25s,border-color .25s,color .25s}
.btn:hover{background:var(--navy2);border-color:var(--navy2)}
.btn.o{background:transparent;color:var(--navy);border-color:var(--line2)}
.btn.o:hover{border-color:var(--navy);background:rgba(19,39,63,.05)}
.dk .btn{background:var(--pearl);color:var(--navy);border-color:var(--pearl)}
.dk .btn:hover{background:var(--mist);border-color:var(--mist)}
.dk .btn.o{background:transparent;color:var(--pearl);border-color:var(--dline2)}
.dk .btn.o:hover{border-color:var(--pearl);background:rgba(246,244,240,.06)}
.btn:active,.cta:active,.mbtn:active{opacity:.85}
.btn[disabled]{opacity:.55;cursor:default}
.arrow{letter-spacing:0}

/* ---------- 3. top bar ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--navy);color:var(--pearl);border-bottom:1px solid rgba(246,244,240,.08)}
.navin{display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--bar)}
.logo{display:inline-flex;align-items:baseline;gap:.5em;font:400 17px/1 var(--disp);letter-spacing:.14em;color:var(--pearl);
  text-decoration:none;white-space:nowrap;position:relative}
.logo span+span{letter-spacing:.2em}
.links{display:flex;align-items:center;gap:clamp(20px,2.6vw,38px)}
.links a{position:relative;display:block;padding:12px 0;font:500 12.5px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:rgba(246,244,240,.74);transition:color .25s}
.links a:hover,.links a[aria-current="page"]{color:var(--pearl)}
.links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:.2em;bottom:4px;height:1px;background:var(--silver)}
.navr{display:flex;align-items:center;gap:10px}
.cta{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;font:500 12.5px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;background:var(--pearl);color:var(--navy);border:1px solid var(--pearl);border-radius:2px;transition:background .25s}
.cta:hover{background:var(--mist)}
.cta[aria-current="page"]{background:transparent;color:var(--pearl);border-color:var(--dline2)}
.mbtn{display:none;align-items:center;justify-content:center;min-height:44px;min-width:72px;padding:0 14px;background:none;
  border:1px solid var(--dline2);border-radius:2px;color:var(--pearl);cursor:pointer;font:500 12.5px/1 var(--text);letter-spacing:.2em}
@media (max-width:980px){.nav nav{display:none}.mbtn{display:inline-flex}}

/* ---------- 4. phone menu ---------- */
.mnav{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  padding:0 var(--gut) calc(28px + env(safe-area-inset-bottom,0px));color:var(--pearl);
  background:radial-gradient(120% 80% at 50% 18%,#1c3553 0%,#13273f 55%,#0c1a2c 100%);
  visibility:hidden;opacity:0;transition:opacity .3s ease,visibility 0s .3s}
.mnav.open{visibility:visible;opacity:1;transition:opacity .3s ease}
.mtop{display:flex;align-items:center;justify-content:space-between;flex:none;height:var(--bar)}
.mnav .mbtn{display:inline-flex}
.mlinks{margin-top:clamp(12px,4vh,40px);border-top:1px solid var(--dline)}
.mlinks a{display:flex;align-items:baseline;gap:18px;padding:clamp(13px,2.4vh,20px) 0;border-bottom:1px solid var(--dline);
  text-decoration:none;color:var(--pearl);font:400 clamp(30px,8.4vw,42px)/1.05 var(--disp)}
.mlinks .mk{flex:none;min-width:22px;font:500 12.5px/1 var(--text);letter-spacing:.2em;color:var(--silver)}
.mlinks a[aria-current="page"]{color:var(--silver)}
.mlinks a[aria-current="page"]::after{content:"You are here";margin-left:auto;align-self:center;font:500 12px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--silver)}
.mfoot{margin-top:auto;padding-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.mfoot .btn{margin-bottom:6px;background:var(--pearl);color:var(--navy);border-color:var(--pearl)}
.mfoot .btn:hover{background:var(--mist);border-color:var(--mist)}
.mcall{font-size:16px;color:var(--pearl);text-decoration:none;border-bottom:1px solid var(--dline2);padding:6px 0 4px}
.mlegal{display:flex;gap:24px;margin-top:6px}
.mlegal a{font:500 12.5px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--silver);text-decoration:none;padding:8px 0}
.mlinks li,.mfoot{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .6s var(--ease)}
.mnav.open .mlinks li,.mnav.open .mfoot{opacity:1;transform:none}
.mnav.open .mlinks li:nth-child(2){transition-delay:.04s}.mnav.open .mlinks li:nth-child(3){transition-delay:.08s}
.mnav.open .mlinks li:nth-child(4){transition-delay:.12s}.mnav.open .mlinks li:nth-child(5){transition-delay:.16s}
.mnav.open .mfoot{transition-delay:.2s}
html.mopen,html.mopen body{overflow:hidden}
@media (min-width:981px){.mnav{display:none}}
@media (max-height:620px){.mlinks{margin-top:4px}.mlinks a{font-size:28px;padding:10px 0}.mfoot{padding-top:18px}}

/* ---------- 5. page parts ---------- */
.dk{background:var(--navy);color:var(--pearl)}
.ph{background:radial-gradient(110% 130% at 85% 0%,#1f3a5e 0%,#13273f 55%,#0f2036 100%);padding:clamp(56px,9vw,112px) 0 clamp(52px,8vw,96px)}
.ph h1{font:400 clamp(42px,6.4vw,84px)/1.03 var(--disp);margin-top:20px;max-width:16ch;text-wrap:balance}
.sec{padding:clamp(64px,9vw,120px) 0}
.sec.mist{background:var(--mist)}
.ticks{border-top:1px solid var(--line2);margin-top:26px}
.ticks li{position:relative;display:flex;align-items:center;flex-wrap:wrap;column-gap:12px;row-gap:6px;padding:13px 0 13px 30px;
  border-bottom:1px solid var(--line2);font-size:15px;line-height:1.4}
.ticks li::before{content:"";position:absolute;left:3px;top:50%;width:11px;height:6px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-75%) rotate(-45deg)}
.tag{font:600 11.5px/1 var(--text);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  border:1px solid var(--line2);padding:5px 7px 4px;border-radius:2px;white-space:nowrap}
.fade{animation:rise .9s var(--ease) both}
.fade.d1{animation-delay:.08s}.fade.d2{animation-delay:.16s}.fade.d3{animation-delay:.24s}.fade.d4{animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* browser frame used for the example screenshots */
.exf{position:relative;display:block;text-decoration:none;border-radius:10px;background:var(--midnight);border:1px solid rgba(246,244,240,.14);
  box-shadow:0 30px 60px -30px rgba(4,10,20,.55);transition:transform .5s var(--ease)}
a.exf:hover{transform:translateY(-4px)}
.exbar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid rgba(246,244,240,.1)}
.exbar i{width:8px;height:8px;border-radius:50%;background:rgba(246,244,240,.25);flex:none}
.exbar span{margin-left:8px;font:500 12.5px/1 var(--text);letter-spacing:.04em;color:rgba(246,244,240,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exf>img{width:100%;height:auto;border-radius:0 0 10px 10px}
.exp{position:absolute;right:-14px;bottom:-28px;width:26%;max-width:150px;height:auto;border-radius:14px;border:4px solid var(--midnight);
  box-shadow:0 20px 40px -16px rgba(4,10,20,.6)}

/* ---------- 6. home ---------- */
.hero{background:radial-gradient(90% 110% at 75% 30%,#24406a 0%,#172e4c 50%,#0f2036 100%);overflow:hidden}
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(36px,5vw,84px);align-items:center;
  padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(72px,9vw,130px)}
.hero h1{font:400 clamp(46px,6.2vw,92px)/1.01 var(--disp);margin-top:22px;max-width:11ch;text-wrap:balance}
.hero .lead{max-width:40ch}
.hcall{margin-top:24px;font-size:15px;color:rgba(246,244,240,.8)}
.hcall a{color:var(--pearl);text-underline-offset:4px;white-space:nowrap}
.shot{position:relative;display:block;text-decoration:none;margin-right:clamp(0px,1vw,16px);transition:transform .5s var(--ease)}
.shot:hover{transform:translateY(-4px)}
.shot .exp{right:-22px;bottom:-40px;width:25%}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(36px,5vw,56px)}
.card{display:flex;flex-direction:column;gap:12px;height:100%;padding:28px 26px 26px;text-decoration:none;color:var(--navy);
  background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:3px;
  transition:transform .45s var(--ease),border-color .3s,background .3s}
.card:hover{transform:translateY(-3px);border-color:rgba(19,39,63,.45);background:rgba(255,255,255,.8)}
.card .k{font:400 26px/1 var(--disp);color:var(--slate)}
.card h3{font:400 clamp(26px,2.4vw,30px)/1.1 var(--disp)}
.card p{font-size:15px;line-height:1.65;color:var(--ink)}
.go{margin-top:auto;padding-top:14px;font:500 12.5px/1.2 var(--text);letter-spacing:.2em;text-transform:uppercase}
.card.f{background:var(--navy);border-color:var(--navy);color:var(--pearl)}
.card.f .k{color:var(--silver)}
.card.f p{color:rgba(246,244,240,.82)}
.card.f:hover{background:var(--navy2);border-color:var(--navy2)}
.card.f:focus-visible{outline-color:var(--navy)}

/* ---------- 7. services ---------- */
.svcg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.svcc{padding:clamp(28px,3.6vw,48px);background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:3px}
.svtop{display:flex;align-items:center;justify-content:space-between}
.svtop svg{width:44px;height:44px;fill:none;stroke:var(--navy);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.svtop .k{font:400 30px/1 var(--disp);color:var(--slate)}
.svcc h2{font:400 clamp(28px,2.8vw,38px)/1.08 var(--disp);margin-top:26px}
.svcc>p{font-size:16px;line-height:1.7;color:var(--ink);margin-top:10px;max-width:44ch}
.more{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin-top:clamp(36px,5vw,56px);
  padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--line)}
.more p{font:400 clamp(20px,2vw,24px)/1.35 var(--disp);max-width:36ch}
.more .btn{flex:none}

/* ---------- 8. examples ---------- */
.exg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.6vw,52px)}
.exc{display:flex;flex-direction:column;min-width:0}
.exb{padding-top:clamp(40px,5vw,52px)}
.ext{font:500 12.5px/1 var(--text);letter-spacing:.22em;text-transform:uppercase;color:var(--slate)}
.exb h2{font:400 clamp(28px,3vw,38px)/1.1 var(--disp);margin-top:12px}
.exb p:not(.ext){font-size:16px;line-height:1.7;color:var(--ink);max-width:46ch;margin-top:10px}
.exb .btn{margin-top:22px}
.exn{margin-top:clamp(40px,5vw,60px);padding:20px 24px;border-left:2px solid var(--navy);background:rgba(255,255,255,.55);
  font-size:15px;line-height:1.6;max-width:70ch}

/* ---------- 9. pricing ---------- */
.ov{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.ovc{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.6vw,32px) clamp(20px,2.2vw,30px);text-decoration:none;color:var(--navy);
  background:rgba(255,255,255,.5);border:1px solid var(--line2);border-radius:3px;transition:transform .45s var(--ease),border-color .3s,background .3s}
.ovc:hover{transform:translateY(-4px);border-color:rgba(19,39,63,.5);background:rgba(255,255,255,.8)}
.ovn{display:flex;justify-content:space-between;align-items:center;gap:10px;font:400 clamp(22px,2.2vw,26px)/1 var(--disp)}
.ovt{font:500 12.5px/1.3 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.price{font:400 clamp(38px,4vw,48px)/1 var(--disp)}
.from{font:500 12.5px/1 var(--text);letter-spacing:.2em;color:var(--slate);vertical-align:.95em;margin-right:6px}
.ovp{font-size:13.5px;line-height:1.5;border-top:1px solid var(--line);padding-top:12px}
.ovpl{display:block;font:500 12px/1.3 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin-bottom:4px}
.ovp b{font-weight:500}
.ovm{font-size:13.5px;color:var(--ink)}
.ovl{margin-top:auto;padding-top:8px;font:500 12.5px/1 var(--text);letter-spacing:.2em;text-transform:uppercase}
.pill{font:500 11.5px/1 var(--text);letter-spacing:.2em;background:var(--navy);color:var(--pearl);padding:6px 8px;border-radius:2px}
.ovc.f{background:var(--navy);border-color:var(--navy);color:var(--pearl)}
.ovc.f:hover{background:var(--navy2);border-color:var(--navy2)}
.ovc.f .ovt,.ovc.f .ovpl,.ovc.f .from{color:var(--silver)}
.ovc.f .ovm{color:rgba(246,244,240,.82)}
.ovc.f .ovp{border-top-color:var(--dline)}
.ovc.f .pill{background:var(--pearl);color:var(--navy)}
.ovc.f:focus-visible{outline-color:var(--navy)}
.rec{margin-top:26px;font-size:15px;line-height:1.65;color:var(--ink);max-width:70ch;font-style:italic}
.vat{margin-top:6px;font-size:14px;color:var(--ink)}

.td{display:grid;grid-template-columns:minmax(240px,.8fr) 1.6fr;gap:clamp(28px,6vw,110px);
  border-top:1px solid var(--line2);margin-top:clamp(56px,8vw,96px);padding-top:clamp(36px,5vw,60px)}
.tdh{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.tdk{font:400 13px/1 var(--disp);letter-spacing:.2em;color:var(--slate)}
.tdh h2{font:400 clamp(32px,3.4vw,44px)/1.05 var(--disp);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tdh .price{font-size:clamp(42px,4.6vw,58px)}
.tdn{font:500 12.5px/1.3 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin-top:-4px}
.vary{font-size:13px;line-height:1.55;color:var(--ink);border-left:1px solid var(--slate);padding-left:10px;max-width:30ch}
.plan{align-self:stretch;font-size:12.5px;color:var(--slate);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0}
.plan b{display:block;font-weight:400;font-size:14.5px;color:var(--navy);margin-top:4px}
.plan b span{color:var(--slate);font-size:13px}
.tdh .btn{margin-top:8px}
.plus{font:500 12.5px/1.3 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin-bottom:6px}
.fl>li{padding:16px 0;border-bottom:1px solid var(--line)}
.fl>li:first-child{padding-top:4px}
.fl summary,.fl .ft{display:block;position:relative;padding-left:20px;font:400 clamp(18px,1.8vw,21px)/1.25 var(--disp);list-style:none}
.fl summary{cursor:pointer;padding-right:34px}
.fl summary::-webkit-details-marker{display:none}
.fl summary::before,.fl .ft::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--slate)}
.fl summary::after{content:"+";position:absolute;right:2px;top:-2px;font:300 22px/1 var(--text);color:var(--slate)}
.fl details[open] summary::after{content:"−"}
.fl details p{font-size:14.5px;line-height:1.65;color:var(--ink);margin-top:6px;padding-left:20px;max-width:62ch}
.taphint{display:none;font-size:13px;color:var(--slate);margin-bottom:10px}
@media (min-width:861px){.fl summary{cursor:default;padding-right:0}.fl summary::after{display:none}}
@media (max-width:860px){.taphint{display:block}}
.sh{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);
  border-top:1px solid var(--line2);margin-top:clamp(56px,8vw,96px);padding-top:clamp(36px,5vw,60px)}
.sh h2{font:400 clamp(24px,2.4vw,30px)/1.1 var(--disp);margin-bottom:14px}
.shl{font-size:14.5px;line-height:1.65;color:var(--ink);margin-bottom:10px}
.xp{font:400 clamp(38px,4vw,46px)/1 var(--disp);margin:6px 0 14px}
.xp span+span{font:500 12.5px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--slate);vertical-align:.5em;margin-left:6px}
.fine{font-size:13px;line-height:1.65;color:var(--ink);margin-top:clamp(36px,5vw,56px);max-width:80ch}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);margin-top:clamp(36px,5vw,64px)}
.steps li{border-top:1px solid var(--line2);padding-top:22px}
.steps .k{display:block;font:400 clamp(36px,4vw,50px)/1 var(--disp);color:var(--slate)}
.steps p{font:400 clamp(19px,1.8vw,22px)/1.3 var(--disp);margin-top:14px}
.steps .sd{display:block;font-size:14.5px;line-height:1.6;color:var(--ink);margin-top:10px}

/* ---------- 10. contact ---------- */
.cgrid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,6vw,100px);align-items:start}
.ways h2,.fcard h2{font:400 clamp(26px,2.6vw,32px)/1.1 var(--disp)}
.big{display:block;width:max-content;max-width:100%;margin-top:18px;font:400 clamp(20px,2.1vw,26px)/1.3 var(--disp);text-decoration:none;
  border-bottom:1px solid var(--line2);padding-bottom:4px;overflow-wrap:anywhere}
.big:hover{border-bottom-color:var(--navy)}
.base{margin-top:22px;font-size:15px;line-height:1.65;color:var(--ink);max-width:40ch}
.next{margin-top:clamp(40px,5vw,56px);padding-top:30px;border-top:1px solid var(--line)}
.next ol{margin-top:18px;display:grid;gap:18px}
.next li{display:grid;grid-template-columns:34px 1fr;column-gap:14px}
.next .k{font:400 28px/1 var(--disp);color:var(--slate)}
.next b{display:block;font:400 19px/1.3 var(--disp)}
.next li span:not(.k){display:block;font-size:14.5px;line-height:1.6;color:var(--ink);margin-top:4px}
.next a{display:inline-block;margin-top:20px;font:500 12.5px/1.2 var(--text);letter-spacing:.2em;text-transform:uppercase;text-underline-offset:5px}
.fcard{padding:clamp(24px,3.4vw,44px);background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:3px}
.fcard>p{font-size:15px;color:var(--ink);margin-top:8px}
form{display:flex;flex-direction:column;gap:16px;margin-top:24px}
label>span{display:block;font:500 12.5px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin-bottom:8px}
input,select,textarea{width:100%;background:#fff;border:1px solid var(--line2);border-radius:2px;padding:13px 14px;font-size:16px;color:var(--navy)}
select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2313273f' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 15px center}
textarea{min-height:140px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy);outline-offset:2px;border-color:var(--navy)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fsend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.fstat{font-size:14.5px;line-height:1.5;max-width:44ch}
.fstat.good{color:var(--navy);font-weight:500}
.fstat.bad{color:#7a1010}
.fnote{font-size:13.5px;line-height:1.6;color:var(--ink)}
.fnote a{text-underline-offset:3px}

/* ---------- 11. contact band ---------- */
.band{padding:clamp(56px,8vw,100px) 0;background:var(--navy);color:var(--pearl)}
.bandin{display:flex;align-items:flex-end;justify-content:space-between;gap:28px 48px;flex-wrap:wrap}
.band h2{font:400 clamp(30px,3.8vw,50px)/1.08 var(--disp);max-width:18ch;text-wrap:balance}
.band p{font-size:16px;line-height:1.7;color:rgba(246,244,240,.84);max-width:48ch;margin-top:14px}
.band .btns{margin-top:0}

/* ---------- 12. footer ---------- */
.foot{background:var(--midnight);color:var(--silver);padding:clamp(48px,6vw,72px) 0 36px}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:32px}
.foot .logo{font-size:20px}
.fbrand p{font-size:14px;margin-top:14px;color:rgba(191,197,203,.9)}
.fh{font:500 12.5px/1 var(--text);letter-spacing:.22em;text-transform:uppercase;color:var(--pearl);margin-bottom:16px}
.foot ul{display:grid;gap:6px}
.foot ul a{display:inline-block;padding:4px 0;font-size:14px;color:var(--silver);text-decoration:none;overflow-wrap:anywhere}
.foot ul a:hover{color:var(--pearl);text-decoration:underline;text-underline-offset:3px}
.fcopy{margin-top:clamp(40px,5vw,56px);padding-top:22px;border-top:1px solid rgba(246,244,240,.1);font-size:12.5px;color:rgba(191,197,203,.85)}

/* ---------- 13. tablets, phones & motion ---------- */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fbrand{grid-column:1/-1}
}
@media (max-width:980px){
  .hgrid{grid-template-columns:minmax(0,1fr);gap:56px}
  .hero h1{max-width:12ch}
  .shot{max-width:640px;margin:0 22px 0 0}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
}
@media (max-width:860px){
  .svcg,.exg,.ov,.td,.sh,.cgrid{grid-template-columns:minmax(0,1fr)}
  .td{gap:28px}
  .exg{gap:64px}
}
@media (max-width:640px){
  :root{--bar:64px}
  .fget{grid-column:1/-1}
  .card{padding:24px 22px 22px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr);row-gap:0}
  .steps li{display:grid;grid-template-columns:40px 1fr;column-gap:12px;padding:18px 0}
  .steps .k{font-size:30px;grid-row:span 2}
  .steps p{margin-top:0}
  .steps .sd{margin-top:4px}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bandin .btns,.hero .btns{width:100%}
  .bandin .btn,.hero .btn{flex:1 1 200px}
  .exp{right:-6px;width:30%}
  .shot .exp{right:-8px;bottom:-30px;width:29%}
  .shot{margin:0 8px 0 0}
}
@media (max-width:420px){
  .logo{font-size:15px;gap:.42em;letter-spacing:.12em}
  .logo span+span{letter-spacing:.16em}
  .cta{padding:0 12px;letter-spacing:.14em}
  .mbtn{min-width:0;padding:0 12px;letter-spacing:.14em}
  .navin{gap:10px}.navr{gap:8px}
}
@media (max-width:350px){
  .logo{font-size:14px;letter-spacing:.08em}.logo span+span{letter-spacing:.12em}
  .cta,.mbtn{padding:0 10px;font-size:12px;letter-spacing:.1em}
}
@media (pointer:coarse){
  .logo::after{content:"";position:absolute;left:-6px;right:-6px;top:-14px;bottom:-14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- 14. same top bar, footer and enquiry button as the home page ---------- */
.navin{max-width:none;padding:0 clamp(16px,3vw,40px)}
.navr{min-width:75px;justify-content:flex-end}
.after{padding:56px clamp(20px,8vw,140px) 48px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--midnight);color:var(--pearl)}
.after .logo{font-size:20px}
.after p{font-size:12.5px;color:rgba(246,244,240,.66);margin-top:10px}
.after p.addr{margin-top:4px}
.after ul{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.after ul a{font:500 12.5px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:rgba(246,244,240,.66)}
.after ul a:hover,.after ul a[aria-current="page"]{color:var(--pearl)}
.after :focus-visible{outline-color:var(--silver)}
@media (pointer:coarse){.after ul a{display:inline-block;padding:7px 0}}
.enq{position:fixed;z-index:70;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);padding:15px 20px;
  font:500 12.5px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  background:var(--pearl);color:var(--navy);border:1px solid rgba(19,39,63,.35);border-radius:2px;
  box-shadow:0 14px 34px -12px rgba(4,10,20,.8);transition:opacity .35s,transform .35s,background .3s}
.enq:hover{background:var(--mist)}
.enq.away{opacity:0;transform:translateY(10px);pointer-events:none}

/* ---------- 15. back to home buttons (top of the page and end of the content) ---------- */
.back{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;margin-bottom:30px;border:1px solid var(--line2);border-radius:2px;
  font:500 12.5px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--navy);transition:background .25s,border-color .25s}
.back .arrow{font-size:14px;letter-spacing:0}
.back:hover{border-color:var(--navy);background:rgba(19,39,63,.05)}
.dk .back{color:var(--pearl);border-color:var(--dline2)}
.dk .back:hover{border-color:var(--pearl);background:rgba(246,244,240,.06)}
.backend{margin-top:clamp(40px,6vw,64px)}
.backend .back{margin-bottom:0}

/* ---------- 16. Services page in detail: one section per service ---------- */
.jump{background:var(--pearl);border-bottom:1px solid var(--line)}
.jump .wrap{display:flex;flex-wrap:wrap;gap:0 clamp(20px,3vw,40px);padding-top:6px;padding-bottom:6px}
.jump a{display:inline-block;padding:14px 0;font:500 12.5px/1.2 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--navy);
  text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:7px}
.jump a:hover{text-decoration-color:var(--navy)}
.svdg{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.5fr);gap:clamp(32px,6vw,100px);align-items:start}
.svdh{position:sticky;top:calc(var(--bar) + 32px)}
.svdh h2{font:400 clamp(34px,3.8vw,50px)/1.05 var(--disp);margin-top:24px}
.svdh .one{font:400 clamp(20px,1.9vw,24px)/1.35 var(--disp);margin-top:14px;max-width:26ch}
.svdh .more2{font-size:16px;line-height:1.7;color:var(--ink);margin-top:14px;max-width:44ch}
.svdh .btn{margin-top:26px}
.sdl{border-top:1px solid var(--line2)}
.sdl li{padding:18px 0;border-bottom:1px solid var(--line)}
.sdt{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.sdt b{font:400 clamp(19px,1.8vw,22px)/1.25 var(--disp)}
.sdl p{font-size:15px;line-height:1.65;color:var(--ink);margin-top:6px;max-width:62ch}
.tag.all{color:var(--slate);border-color:var(--line)}
.svend2 .more{margin-top:0;padding-top:0;border-top:0}
@media (max-width:860px){.svdg{grid-template-columns:minmax(0,1fr)}.svdh{position:static}}