.services-hero{padding:92px 0 112px;overflow:hidden;background:radial-gradient(700px 500px at 88% 16%,rgba(31,163,196,.14),transparent 64%)}.services-hero-grid{display:grid;grid-template-columns:1.16fr .84fr;gap:80px;align-items:center}.services-hero h1{font-size:clamp(48px,6vw,76px)}.services-hero h1 em{color:var(--deep);font-weight:400}.services-hero .lead{max-width:690px}.service-proof{display:flex;flex-wrap:wrap;gap:16px;color:var(--body);font-size:12px}.service-proof span:before{content:'✓';margin-right:6px;color:var(--brand);font-weight:700}.lead-loop{position:relative;min-height:520px}.lead-loop:before,.lead-loop:after{content:'';position:absolute;border:1px solid rgba(14,124,156,.18);border-radius:50%;inset:80px}.lead-loop:after{inset:130px}.loop-core{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:190px;height:190px;border-radius:50%;display:grid;place-content:center;text-align:center;background:var(--ink);color:#fff;box-shadow:0 24px 60px rgba(14,23,38,.2)}.loop-core b,.loop-core small{display:block}.loop-core b{font:500 26px var(--serif)}.loop-core small{color:var(--soft);font-size:11px}.loop-node{position:absolute;z-index:3;width:170px;padding:18px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 35px rgba(14,23,38,.09)}.loop-node i,.loop-node b,.loop-node span{display:block}.loop-node i{font-style:normal;font-size:10px;color:var(--brand);font-weight:700}.loop-node b{font-size:15px}.loop-node span{font-size:11px;color:var(--body)}.node-one{left:0;top:45px}.node-two{right:0;top:110px}.node-three{right:45px;bottom:25px}.results-strip{background:#fff;border-block:1px solid var(--line)}.results-strip .container{display:grid;grid-template-columns:repeat(4,1fr)}.results-strip .container>div{padding:25px 20px;border-right:1px solid var(--line)}.results-strip .container>div:last-child{border:0}.results-strip strong,.results-strip span{display:block}.results-strip strong{font:500 30px var(--serif);color:var(--deep)}.results-strip span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--body)}.service-detail{display:grid;grid-template-columns:70px 1fr 1fr;gap:40px;align-items:center;padding:58px 0;border-top:1px solid var(--line)}.service-detail.reverse .service-copy{grid-column:3}.service-detail.reverse .product-visual{grid-column:2;grid-row:1}.service-number{align-self:start;color:var(--brand);font:500 14px var(--serif)}.service-copy h3{font:500 clamp(30px,3vw,42px) var(--serif);margin:.3em 0}.service-copy>p:not(.eyebrow){color:var(--body)}.product-visual{min-height:390px;border-radius:20px;background:var(--ink);position:relative;overflow:hidden;padding:34px;box-shadow:0 24px 60px rgba(14,23,38,.13)}.gmb-visual{background:linear-gradient(145deg,#e9f7f8,#fff)}.search-bar{background:#fff;border:1px solid var(--line);border-radius:99px;padding:13px 18px;color:var(--body);font-size:13px;box-shadow:0 8px 24px rgba(14,23,38,.08)}.search-bar span{display:inline-block;width:12px;height:12px;border:2px solid var(--brand);border-radius:50%;margin-right:10px}.map-card{position:absolute;left:34px;right:34px;top:112px;background:#fff;padding:22px;border-radius:14px;display:flex;gap:16px;box-shadow:0 16px 38px rgba(14,23,38,.12)}.map-pin{width:45px;height:45px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;background:var(--brand);color:#fff;font-family:var(--serif)}.map-pin::first-letter{transform:rotate(45deg)}.map-card b,.map-card span,.map-card small{display:block}.map-card span{color:var(--accent);letter-spacing:.06em}.map-card small{color:var(--body)}.review-pop{position:absolute;right:24px;bottom:34px;width:235px;padding:18px;background:var(--ink);color:var(--accent);border-radius:12px;box-shadow:0 12px 28px rgba(14,23,38,.18)}.review-pop b{color:#fff;font-size:12px}.phone-visual{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#174461,var(--ink) 68%)}.phone{width:270px;min-height:335px;border-radius:32px;background:#fff;padding:26px;text-align:center;box-shadow:0 22px 50px rgba(0,0,0,.3)}.phone-top{font-size:10px;text-transform:uppercase;color:var(--body);letter-spacing:.1em}.caller{font:500 25px var(--serif);margin:18px 0}.wave{height:54px;display:flex;gap:5px;align-items:center;justify-content:center}.wave i{width:4px;border-radius:3px;background:var(--brand);height:16px}.wave i:nth-child(2),.wave i:nth-child(6){height:30px}.wave i:nth-child(3),.wave i:nth-child(5){height:44px}.wave i:nth-child(4){height:24px}.phone p{font-size:13px;color:var(--body)}.booking-chip{margin-top:20px;padding:10px;border-radius:8px;background:var(--tint);color:var(--deep);font-size:11px;font-weight:600}.site-visual{display:grid;align-items:center;background:linear-gradient(145deg,var(--ink),#16384a)}.browser{border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 20px 48px rgba(0,0,0,.3)}.browser-top{height:34px;padding:9px;background:#e8edf1;display:flex;gap:5px}.browser-top i{width:7px;height:7px;border-radius:50%;background:#aeb7c3}.browser-top span{margin-left:10px;font-size:8px;color:#778397}.mini-site{padding:32px}.mini-site small,.mini-site b,.mini-site span{display:block}.mini-site small{font-size:8px;color:var(--brand);letter-spacing:.12em}.mini-site b{font:500 30px/1.05 var(--serif);margin:12px 0}.mini-site span{font-size:11px;color:var(--body)}.mini-site button{margin:18px 0;border:0;border-radius:99px;padding:10px 15px;background:var(--ink);color:#fff;font-size:10px}.mini-reviews{color:var(--accent);font-size:11px}.mini-reviews em{color:var(--body);font-style:normal}.system-section{background:var(--ink);color:#fff}.system-section h2{color:#fff}.system-section .eyebrow{color:var(--soft)}.journey{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #2d3a4c;border-radius:18px;overflow:hidden}.journey div{padding:34px;border-right:1px solid #2d3a4c}.journey div:last-child{border:0}.journey i,.journey b,.journey span{display:block}.journey i{width:34px;height:34px;border:1px solid var(--soft);border-radius:50%;display:grid;place-items:center;color:var(--soft);font-style:normal;font-size:12px}.journey b{margin:20px 0 8px}.journey span{color:#aeb8c7;font-size:13px}.industries-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px}.industry-list{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}.industry-list span{padding:9px 13px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--ink2);font-size:12px}.difference{background:#fff;border-block:1px solid var(--line)}.difference-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}.difference-grid article{background:#fff;padding:36px}.difference-grid article>span{color:var(--brand);font:500 13px var(--serif)}.difference-grid h3{font:500 24px var(--serif)}.difference-grid p{color:var(--body)}.checkout-section{padding:90px 0}.checkout-card{padding:60px;border-radius:22px;background:var(--brand);color:#fff;display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:center}.checkout-card h2{color:#fff}.checkout-card .eyebrow{color:#c7ece8}.checkout-card p{color:#e0f2f1}.checkout-notes{display:flex;flex-wrap:wrap;gap:14px;font-size:11px}.checkout-notes span:before{content:'✓';margin-right:5px}.checkout-action{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.checkout-action small{color:#d0edeb}.checkout-action .btn{width:100%}@media(max-width:900px){.services-hero-grid,.industries-grid,.checkout-card{grid-template-columns:1fr}.lead-loop{min-height:460px;max-width:560px;width:100%;margin:auto}.service-detail,.service-detail.reverse{grid-template-columns:50px 1fr}.service-detail .product-visual,.service-detail.reverse .product-visual{grid-column:2;grid-row:auto}.service-detail.reverse .service-copy{grid-column:2}.journey{grid-template-columns:repeat(2,1fr)}.journey div:nth-child(2){border-right:0}.journey div{border-bottom:1px solid #2d3a4c}.journey div:nth-child(3),.journey div:nth-child(4){border-bottom:0}.difference-grid{grid-template-columns:1fr}.results-strip .container{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.services-hero{padding:64px 0 78px}.lead-loop{min-height:400px}.loop-core{width:145px;height:145px}.loop-core b{font-size:20px}.loop-node{width:135px;padding:13px}.node-one{top:25px}.node-two{top:95px}.node-three{right:10px}.results-strip .container>div:nth-child(2){border-right:0}.service-detail,.service-detail.reverse{grid-template-columns:1fr;gap:16px}.service-number,.service-detail .service-copy,.service-detail.reverse .service-copy,.service-detail .product-visual,.service-detail.reverse .product-visual{grid-column:1}.product-visual{min-height:350px;padding:22px}.map-card{left:22px;right:22px}.journey{grid-template-columns:1fr}.journey div,.journey div:nth-child(2),.journey div:nth-child(3){border-right:0;border-bottom:1px solid #2d3a4c}.journey div:last-child{border-bottom:0}.checkout-card{padding:30px}.difference-grid article{padding:28px}}
.service-buy { margin-top: 18px; }
.product-intro { position: static; background: var(--paper) !important; }
.loop-node img { display: block; width: 54px; height: 54px; margin: -4px 0 8px; object-fit: contain; }

/* ============================================================
   Services page — design refresh
   Matches the system in styles.css
   ============================================================ */

/* ---------- Hero ---------- */
.services-hero{
  position:relative;
  padding:84px 0 100px;
  background:
    radial-gradient(760px 540px at 84% 8%,rgba(31,163,196,.16),transparent 62%),
    radial-gradient(600px 450px at 6% 88%,rgba(107,201,194,.10),transparent 66%),
    linear-gradient(180deg,#fff 0%,var(--paper) 64%);
}
.services-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(14,124,156,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,124,156,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(720px 540px at 76% 24%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(720px 540px at 76% 24%,#000 0%,transparent 72%);
}
.services-hero-grid{position:relative;z-index:1;gap:64px}
.services-hero h1 em{
  font-style:normal;font-weight:400;
  background:linear-gradient(104deg,
    var(--logo-blue) 0%,
    #0396EC 22%,
    #10A8DC 44%,
    #2FBBD2 66%,
    #58C9D8 84%,
    var(--logo-teal) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.services-hero .actions{display:flex;gap:24px;align-items:center;margin:34px 0 28px;flex-wrap:wrap}
.service-proof{gap:20px;font-size:12.5px;font-weight:500}
.service-proof span{display:inline-flex;align-items:center;gap:7px}
.service-proof span::before{
  content:'';width:16px;height:16px;flex:none;border-radius:50%;margin:0;
  background:var(--tint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.8' fill='none' stroke='%230E7C9C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:12px;background-position:center;background-repeat:no-repeat;
}

/* ---------- Hero product cards (replaces the orbit diagram) ---------- */
.hero-products{display:flex;flex-direction:column;gap:14px}
.hero-product{
  position:relative;display:grid;
  grid-template-columns:44px 1fr auto;
  grid-template-areas:"ico name num" "ico sub go";
  column-gap:16px;align-items:center;
  padding:22px 24px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);overflow:hidden;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s;
}
.hero-product::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--pop),var(--soft));
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease);
}
.hero-product:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line2)}
.hero-product:hover::before{transform:scaleY(1)}
.hero-product:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
/* Each SVG carries its own brand colours, so the tile must not tint them. */
.hp-ico{
  grid-area:ico;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;padding:6px;
  background:#fff;border:1px solid var(--line);color:inherit;
  box-shadow:0 1px 2px rgba(14,23,38,.05);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s;
}
.hp-ico svg{width:100%;height:100%;display:block}
.hero-product:hover .hp-ico{
  transform:scale(1.06);border-color:var(--line2);
  box-shadow:0 4px 12px rgba(14,23,38,.10);
}
.hp-ico-wave{padding:7px}
.hp-ico-maps svg{transform:translateY(1px)}
.hero-product b{
  grid-area:name;font:600 19px/1.2 var(--serif);
  letter-spacing:-.02em;color:var(--ink);
}
.hp-sub{grid-area:sub;font-size:13px;color:var(--body);margin-top:3px}
.hp-num{grid-area:num;font:600 11px var(--serif);color:var(--muted);letter-spacing:.12em}
.hp-go{
  grid-area:go;font-size:12px;font-weight:600;color:var(--brand);
  margin-top:3px;white-space:nowrap;transition:transform .3s var(--ease);
}
.hero-product:hover .hp-go{transform:translateX(3px)}

/* ---------- Results strip ---------- */
.results-strip .container>div{padding:28px 22px;transition:background .3s}
.results-strip strong{
  font:600 32px var(--serif);letter-spacing:-.035em;
  background:linear-gradient(120deg,var(--deep),var(--pop));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.results-strip span{color:var(--muted);font-weight:700;letter-spacing:.13em}

/* ---------- Product blocks ---------- */
.service-detail{padding:64px 0;border-top:1px solid var(--line)}
/* Colour icon above the number, so each product keeps its own identity. */
.service-mark{align-self:start;display:flex;flex-direction:column;align-items:center;gap:12px}
.sm-ico{
  width:52px;height:52px;padding:8px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh-1);
}
.sm-ico svg{width:100%;height:100%;display:block}
.sm-ico-wave{padding:9px}
.service-mark .service-number{
  width:auto;height:auto;border:0;background:none;box-shadow:none;
  color:var(--muted);font:700 11px var(--sans);letter-spacing:.14em;
}
/* The product NAME is now the big heading; the promise sits under it. */
.service-copy h3{
  font:600 clamp(28px,3.1vw,40px)/1.08 var(--serif);
  letter-spacing:-.03em;margin:.22em 0 .3em;
}
.product-promise{
  font-size:clamp(17px,1.5vw,20px);line-height:1.45;
  color:var(--ink2);font-weight:400;margin:0 0 .9em;
}
.service-copy>p:not(.eyebrow):not(.product-promise){color:var(--body)}
.service-buy{margin-top:22px}

/* ---------- Product mockups (the real UI, not 3D clipart) ---------- */
.product-visual{
  min-height:420px;border-radius:var(--r-xl);
  box-shadow:var(--sh-3);border:1px solid rgba(14,23,38,.06);
}
.gmb-visual{background:linear-gradient(150deg,#E9F7F8 0%,#fff 62%)}
.search-bar{font-weight:500}
.map-card{box-shadow:var(--sh-2)}
/* The pin SVG is already pin-shaped, so drop the old rotate/teardrop trick. */
.map-pin{
  width:44px;height:44px;flex:none;
  border-radius:0;transform:none;background:none;
  display:block;padding:0;
}
.map-pin svg{width:100%;height:100%;display:block}
.map-pin::first-letter{transform:none}
.map-card b{font-size:15px}
.map-card span{font-size:13px;font-weight:600}
.map-card small{font-size:12px;margin-top:2px}
.review-pop{background:var(--ink);box-shadow:0 14px 34px rgba(14,23,38,.24)}
.phone-visual{background:radial-gradient(circle at 50% 42%,#17506E,var(--ink) 70%)}
.phone{box-shadow:0 26px 60px rgba(0,0,0,.36)}
.caller{font-weight:600;letter-spacing:-.02em}
.wave i{background:linear-gradient(180deg,var(--pop),var(--brand))}
.booking-chip{
  background:linear-gradient(180deg,var(--tint),#fff);
  border:1px solid rgba(14,124,156,.18);
}
.site-visual{background:linear-gradient(150deg,var(--ink) 0%,#164559 100%)}
.browser{box-shadow:0 24px 56px rgba(0,0,0,.36)}
.mini-site b{font-weight:600;letter-spacing:-.025em}
.mini-site button{
  background:linear-gradient(120deg,var(--deep),var(--brand));
  font-weight:600;padding:11px 18px;
}

/* ---------- Journey (dark) ---------- */
.system-section{position:relative;overflow:hidden}
.system-section::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(660px 470px at 86% 0%,rgba(31,163,196,.20),transparent 64%),
    radial-gradient(540px 410px at 4% 100%,rgba(107,201,194,.10),transparent 68%);
}
.system-section>.container{position:relative;z-index:1}
.journey{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.025);
  border-radius:var(--r-lg);
}
.journey div{border-right-color:rgba(255,255,255,.1);transition:background .35s var(--ease)}
.journey div:hover{background:rgba(255,255,255,.045)}
.journey i{border-color:rgba(107,201,194,.35);font:600 12px var(--serif)}
.journey b{font-size:16.5px;letter-spacing:-.01em;color:#fff}
.journey span{color:#9FAABB}

/* ---------- Trades ---------- */
.industry-list span{
  padding:10px 15px;font-size:12.5px;font-weight:500;
  box-shadow:var(--sh-1);
  transition:transform .25s var(--ease),border-color .25s,color .25s;
}
.industry-list span:hover{transform:translateY(-2px);border-color:var(--brand);color:var(--deep)}

/* ---------- Difference ---------- */
.difference-grid{border-radius:var(--r-lg)}
.difference-grid article{padding:40px;transition:background .35s var(--ease)}
.difference-grid article:hover{background:var(--paper)}
.difference-grid article>span{
  display:inline-block;color:var(--deep);font:600 13px var(--serif);
  letter-spacing:.08em;margin-bottom:14px;
  width:34px;height:34px;line-height:32px;text-align:center;
  border:1px solid var(--line);border-radius:50%;
}
.difference-grid h3{font:600 22px var(--serif);letter-spacing:-.02em;margin:0 0 10px}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .services-hero::before{display:none}
  .hero-products{max-width:560px;margin:auto;width:100%}
  .service-detail,.service-detail.reverse{gap:32px}
  .product-visual{min-height:380px}
}
@media(max-width:600px){
  .services-hero{padding:56px 0 68px}
  .services-hero .actions{align-items:stretch;flex-direction:column;gap:14px}
  .services-hero .actions .btn{width:100%}
  .hero-product{padding:18px 20px;column-gap:13px;grid-template-columns:40px 1fr auto}
  .hp-ico{width:40px;height:40px}
  .hero-product b{font-size:17px}
  .hp-sub{font-size:12.5px}
  .hp-go{display:none}
  .service-detail{padding:44px 0}
  .service-mark{flex-direction:row;gap:12px;align-items:center;margin-bottom:6px}
  .sm-ico{width:44px;height:44px}
  .product-visual{min-height:340px}
  .service-buy{width:100%}
  .difference-grid article{padding:28px}
}