/* HypraWright — MVP
   The Tidal Abyss variant, carrying the real brand mark.

   The logo lives in exactly one place: assets/hyprawright-mark.svg, a single
   flat shape. It is pulled in as a CSS mask rather than an <img>, so its
   colour is decided here — see --mark-fill below — and every instance (bar,
   hero, footer) recolours together. The same shape is baked into
   assets/favicon.svg and assets/og-image.png for the tab and for sharing.

   The same page, taken under. Deepwater's shimmer buffer and its soft-yellow
   vector field are rendered at full strength on a dark hull, and the whole
   type system is inverted to sit on top of it. This is the variant where the
   field stops being background texture and becomes the thing you look at. */

:root{
  --abyss:#04141c;
  --deep:#082a38;
  --sea:#0d5c6b;
  --lagoon:#1aa39b;
  --shallow:#5fd8c4;
  --foam:#d8f5ee;
  --sand:#f3ece0;
  --sun:#ffb570;
  --ink:#dff2ee;
  --paper:#04151d;
  --line:rgba(120,205,205,.16);
  --glass:rgba(11,42,54,.62);
  --shadow:0 24px 60px -28px rgba(0,0,0,.6);
  /* the one dial for logo colour */
  --mark-fill:linear-gradient(152deg,var(--shallow),var(--lagoon) 50%,var(--sea));
  --mark-fill-lit:linear-gradient(152deg,var(--foam),var(--shallow) 46%,var(--lagoon));
  --wrap:1120px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}

/* ---------- the tide: fixed, slow, subtle ---------- */
.tide{position:fixed; inset:0; z-index:0; overflow:hidden; background:#03121a;}
.tide__field{position:absolute; inset:0; width:100%; height:100%; display:block;}
/* deepwater's veil, inverted: enough hull over the field to read type on it */
.tide__veil{position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(3,17,24,.40) 0%, rgba(3,17,24,.50) 38%,
                            rgba(3,17,24,.60) 70%, rgba(3,17,24,.70) 100%),
    radial-gradient(1100px 700px at 74% -8%, rgba(26,163,155,.16), transparent 62%);}
.tide__grain{position:absolute; inset:0; opacity:.4;
  background-image:radial-gradient(rgba(216,245,238,.05) .6px, transparent .7px);
  background-size:4px 4px;}


@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .float,.emblem{animation:none}
  .emblem::before{animation:none;opacity:.85}
}

main,.bar,.foot{position:relative; z-index:1}

/* ---------- floating sticky bar ---------- */
.bar{
  position:sticky; top:14px; z-index:50;
  width:min(var(--wrap),calc(100% - 32px)); margin:14px auto 0;
  display:flex; align-items:center; gap:18px;
  padding:10px 12px 10px 18px; border-radius:999px;
  background:var(--glass); backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(120,205,205,.14);
  box-shadow:0 14px 40px -22px rgba(4,20,28,.55);
}
.bar__mark{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;letter-spacing:-.02em;color:var(--foam)}
.bar__mark b{color:var(--lagoon);font-weight:700}
.bar__word{font-size:16px}

/* ---------- the brand mark ---------- */
.mark{
  display:inline-block; flex:none; vertical-align:middle;
  background:var(--mark-fill);
  -webkit-mask:url(assets/hyprawright-mark.svg) center/contain no-repeat;
          mask:url(assets/hyprawright-mark.svg) center/contain no-repeat;
}
/* if the browser can't mask, fall back to the pre-coloured artwork */
@supports not (mask-image:linear-gradient(#000,#000)){
  .mark{background:url(assets/hyprawright-mark-color.svg) center/contain no-repeat}
}
.mark--bar{width:30px;height:30px;transition:filter .22s ease,transform .22s ease}
.bar__mark:hover .mark--bar{filter:brightness(1.15) saturate(1.15);transform:rotate(30deg)}
.mark--foot{width:22px;height:22px;margin-right:11px;opacity:.8}

/* hero emblem: the mark at full size, lit from behind */
.emblem{
  position:relative; width:clamp(104px,13vw,148px); aspect-ratio:1/1; margin:0 auto 32px;
  animation:emblem-in 1.2s cubic-bezier(.2,.7,.2,1) both;
}
.emblem::before{
  content:""; position:absolute; inset:-40%; border-radius:50%;
  background:radial-gradient(circle,rgba(95,216,196,.30),rgba(26,163,155,.10) 46%,transparent 70%);
  animation:emblem-breathe 8s ease-in-out infinite;
}
.mark--hero{
  position:relative; width:100%; height:100%;
  background:var(--mark-fill-lit);
  filter:drop-shadow(0 0 20px rgba(95,216,196,.32));
}
@keyframes emblem-in{from{opacity:0;transform:translateY(14px) scale(.94)}}
@keyframes emblem-breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.bar__nav{display:flex;gap:22px;margin-left:auto;font-size:14.5px}
.bar__nav a:not(.btn){text-decoration:none;color:rgba(216,245,238,.68);padding:4px 0;border-bottom:1.5px solid transparent}
.bar__nav a:not(.btn):hover{color:var(--ink);border-color:var(--lagoon)}

/* the mobile menu button — hidden until the bar gets tight */
.bar__burger{
  display:none; margin-left:6px; flex:none;
  width:42px;height:42px;padding:0;
  background:rgba(26,163,155,.12); border:1px solid rgba(95,216,196,.22);
  border-radius:50%; color:var(--foam); cursor:pointer;
  place-items:center; transition:background .18s ease,border-color .18s ease;
}
.bar__burger:hover{background:rgba(26,163,155,.22);border-color:rgba(95,216,196,.4)}
.bar__burger-box{position:relative;display:block;width:18px;height:12px}
/* three bars: the middle one is the element, the outer two its pseudos */
.bar__burger-line,
.bar__burger-line::before,
.bar__burger-line::after{
  position:absolute;left:0;width:18px;height:1.8px;border-radius:2px;
  background:currentColor;transition:transform .24s ease,opacity .18s ease;
}
.bar__burger-line{top:50%;transform:translateY(-50%)}
.bar__burger-line::before{content:"";top:-5.6px}
.bar__burger-line::after{content:"";top:5.6px}
.bar__burger[aria-expanded="true"] .bar__burger-line{transform:translateY(-50%) rotate(45deg)}
.bar__burger[aria-expanded="true"] .bar__burger-line::before{top:0;opacity:0}
.bar__burger[aria-expanded="true"] .bar__burger-line::after{top:0;transform:rotate(-90deg)}
/* the in-menu call button only exists once the header one steps aside */
.bar__nav a.bar__nav-cta{display:none}
.bar__burger:focus-visible,
.bar__nav a:focus-visible,
.bar__mark:focus-visible{outline:2px solid var(--shallow);outline-offset:3px;border-radius:6px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px; padding:15px 28px; border-radius:999px; border:0;
  background:linear-gradient(135deg,var(--sea),var(--lagoon));
  color:#fff; font:inherit; font-weight:600; font-size:15.5px; text-decoration:none; cursor:pointer;
  box-shadow:0 12px 28px -14px rgba(13,92,107,.85);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(13,92,107,.8); filter:saturate(1.1)}
.btn--sm{padding:9px 18px;font-size:14px;box-shadow:none}
.btn--ghost{background:transparent;color:var(--shallow);border:1.5px solid rgba(95,216,196,.4);box-shadow:none}
.btn--ghost:hover{background:rgba(95,216,196,.1)}

/* ---------- hero ---------- */
.hero{min-height:clamp(560px,86vh,860px); display:flex; flex-direction:column; justify-content:center; padding:10vh 24px 7vh}
.float{
  width:min(var(--wrap),100%); margin:0 auto; text-align:left;
  animation:rise .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.eyebrow{
  display:inline-block; margin:0 0 22px; padding:7px 16px; border-radius:999px;
  background:var(--glass); border:1px solid rgba(120,205,205,.14);
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--shallow); font-weight:600;
  backdrop-filter:blur(8px);
}
h1{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(2.5rem,6.4vw,4.6rem); line-height:1.05; letter-spacing:-.025em; color:var(--foam);
}
h1 em{font-style:italic;color:var(--shallow)}
.lede{max-width:58ch;margin:26px 0 0;font-size:clamp(1.05rem,1.6vw,1.28rem);color:rgba(216,245,238,.78)}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;margin:38px 0 0}
.assurances{
  list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;
  margin:38px 0 0;padding:0;font-size:14px;color:rgba(216,245,238,.62)
}
.assurances li::before{content:"◆";color:var(--shallow);margin-right:9px;font-size:11px;vertical-align:2px}

/* ---------- marquee-less quote strip ---------- */
.strip{border-block:1px solid var(--line);background:rgba(255,255,255,.03);backdrop-filter:blur(6px)}
.strip__inner{
  width:min(var(--wrap),calc(100% - 48px));margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:4px 0;padding:26px 0
}
.strip__inner p{margin:0;padding:6px 22px;font-family:var(--serif);font-style:italic;font-size:1.02rem;color:rgba(216,245,238,.6);border-left:1px solid var(--line)}
.strip__inner p:first-child{border-left:0}

/* ---------- panels ---------- */
.panel{width:min(var(--wrap),calc(100% - 48px));margin:0 auto;padding:96px 0}
.panel--tint{
  width:100%;padding-inline:24px;
  background:linear-gradient(180deg,transparent,rgba(26,163,155,.10) 18%,rgba(26,163,155,.10) 82%,transparent);
}
.panel--tint > *{width:min(var(--wrap),100%);margin-inline:auto}
.panel__head{max-width:60ch;margin-bottom:44px}
h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.12;letter-spacing:-.02em;color:var(--foam)}
.panel__head p{margin:14px 0 0;color:rgba(216,245,238,.68);font-size:1.06rem}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.card{
  padding:30px 28px 32px;border-radius:20px;
  background:var(--glass);border:1px solid rgba(120,205,205,.14);
  backdrop-filter:blur(12px);box-shadow:var(--shadow);
  transition:transform .22s ease, box-shadow .22s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -26px rgba(4,20,28,.5)}
.card h3{margin:0 0 10px;font-size:1.16rem;letter-spacing:-.01em;color:var(--shallow)}
.card p{margin:0;color:rgba(216,245,238,.76);font-size:.98rem}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px}
.steps li{position:relative;padding-top:22px;border-top:2px solid rgba(95,216,196,.28)}
.steps__n{font-family:var(--serif);font-size:.9rem;letter-spacing:.2em;color:var(--lagoon)}
.steps h3{margin:8px 0 8px;font-size:1.24rem;color:var(--foam)}
.steps p{margin:0;font-size:.97rem;color:rgba(216,245,238,.72)}

.split{width:min(var(--wrap),calc(100% - 48px));margin:0 auto;padding:40px 0 96px;display:grid;grid-template-columns:1.15fr .85fr;gap:28px}
.split__col{padding:36px 32px;border-radius:22px;background:var(--glass);border:1px solid rgba(120,205,205,.14);backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.split__col--muted{background:rgba(216,245,238,.04);box-shadow:none;border-color:var(--line)}
.split h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:20px}
.check,.cross{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.check li,.cross li{position:relative;padding-left:32px;color:rgba(216,245,238,.78);font-size:.99rem}
.check li::before{content:"";position:absolute;left:4px;top:.5em;width:11px;height:6px;border-left:2px solid var(--lagoon);border-bottom:2px solid var(--lagoon);transform:rotate(-45deg)}
.cross li::before{content:"—";position:absolute;left:2px;top:0;color:rgba(216,245,238,.35)}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.about p{color:rgba(216,245,238,.76)}
.about h2{margin-bottom:18px}
.def{
  margin-top:24px;padding:20px 24px;border-left:3px solid var(--sun);
  background:rgba(255,181,112,.10);border-radius:0 14px 14px 0;
  font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--foam)
}
.about__side{padding:32px;border-radius:20px;background:rgba(26,163,155,.10);color:var(--foam);border:1px solid rgba(95,216,196,.2);box-shadow:var(--shadow)}
.about__side h3{margin:0 0 14px;font-family:var(--serif);font-weight:400;font-size:1.4rem;color:var(--shallow)}
.about__side p{color:rgba(216,245,238,.82);font-size:.98rem}

/* ---------- faq ---------- */
.faq{display:grid;gap:2px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:rgba(255,255,255,.03)}
details{background:rgba(255,255,255,.035);border-bottom:1px solid var(--line)}
details:last-child{border-bottom:0}
summary{
  cursor:pointer;list-style:none;padding:22px 28px;font-weight:600;color:var(--foam);
  display:flex;justify-content:space-between;align-items:center;gap:18px
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--serif);font-size:1.5rem;color:var(--lagoon);line-height:1;transition:transform .2s ease}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:0;padding:0 28px 24px;max-width:72ch;color:rgba(216,245,238,.75)}

/* ---------- contact ---------- */
.contact{width:100%;padding:0 24px 96px}
.contact__inner{
  width:min(var(--wrap),100%);margin:0 auto;padding:56px clamp(24px,5vw,64px) 52px;
  border-radius:28px;color:var(--foam);
  background:linear-gradient(140deg,var(--abyss),var(--deep) 45%,var(--sea));
  box-shadow:0 40px 80px -40px rgba(4,20,28,.8);
}
.contact h2{color:#fff}
.contact__inner > p{max-width:56ch;color:rgba(216,245,238,.8)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.field{display:flex;flex-direction:column;gap:8px}
.field--wide{grid-column:1/-1}
label{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(216,245,238,.65)}
input,textarea{
  font:inherit;font-size:16px;color:#fff;padding:13px 16px;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(216,245,238,.22);resize:vertical
}
input:focus,textarea:focus{outline:2px solid var(--shallow);outline-offset:1px;background:rgba(255,255,255,.12)}
::placeholder{color:rgba(216,245,238,.4)}
.form .btn{background:linear-gradient(135deg,var(--shallow),var(--sun));color:var(--abyss);justify-self:start}
.contact__alt{margin:26px 0 0;font-size:.95rem;color:rgba(216,245,238,.7)}
.contact__alt a{color:var(--shallow)}

/* ---------- footer ---------- */
.foot{
  width:min(var(--wrap),calc(100% - 48px));margin:0 auto;padding:34px 0 56px;
  display:flex;flex-wrap:wrap;gap:8px 32px;align-items:baseline;
  border-top:1px solid var(--line);font-size:14px;color:rgba(216,245,238,.6)
}
.foot p{margin:0}
.foot__brand{display:flex;align-items:center}
.foot__fine{margin-left:auto;font-style:italic}

@media (max-width:860px){
  /* the primary nav becomes a panel that drops out of the bar */
  .bar{gap:10px;padding:10px 10px 10px 16px}
  .bar__mark{margin-right:auto}
  .bar__burger{display:grid}
  .bar__nav{
    position:absolute; top:calc(100% + 10px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:4px;
    margin-left:0; padding:10px; font-size:16px;
    border-radius:22px; border:1px solid rgba(120,205,205,.16);
    /* opaque on purpose: the panel hangs outside the bar, so it sits outside
       the bar's backdrop root and a blur here would never sample the page */
    background:linear-gradient(180deg,#0a2b38,#061e29);
    box-shadow:0 24px 60px -28px rgba(0,0,0,.7);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .bar__nav.is-open{opacity:1;visibility:visible;transform:none}
  .bar__nav a:not(.btn){
    padding:13px 14px;border-bottom:0;border-radius:14px;
    color:rgba(216,245,238,.86);
  }
  .bar__nav a:not(.btn):hover,
  .bar__nav a:not(.btn):active{background:rgba(26,163,155,.16);color:var(--foam)}
  .bar__nav a[aria-current="page"]{background:rgba(26,163,155,.12);color:var(--shallow)}
  .emblem{margin-bottom:22px}
  .about,.split{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .panel{padding:64px 0}
  .strip__inner p{border-left:0}
}

/* ============================================================
   Sections added from the UpdateSections comps.
   Everything below leans on the tokens above — no new palette,
   and nothing here touches the tide/background layer.
   ============================================================ */

/* ---------- line icons ---------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{
  width:1.15em;height:1.15em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
/* the circled icon chip, in four sizes */
.ic{
  display:grid;place-items:center;flex:none;
  width:56px;height:56px;border-radius:50%;color:var(--shallow);
  background:rgba(26,163,155,.13);border:1px solid rgba(95,216,196,.20);
}
.ic .ico{width:26px;height:26px}
.ic--lg{width:64px;height:64px}
.ic--lg .ico{width:30px;height:30px;stroke-width:1.4}
.ic--sm{width:50px;height:50px}
.ic--sm .ico{width:24px;height:24px}
.ic--xs{width:36px;height:36px}
.ic--xs .ico{width:17px;height:17px}
.ic--plain{background:transparent;border-color:rgba(95,216,196,.42)}

/* ---------- shared section scaffolding ---------- */
.sec{width:min(var(--wrap),calc(100% - 48px));margin:0 auto;padding:96px 0}
.sec__head{max-width:none}
.tag{
  margin:0 0 16px;font-size:12.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--shallow);
}
.tag--rule::after{content:"";display:block;width:46px;height:2px;margin-top:11px;background:var(--lagoon);border-radius:2px}
.sec h2 em{font-style:italic;color:var(--lagoon)}
.sec__lede{margin:22px 0 0;max-width:58ch;font-size:1.06rem;color:rgba(216,245,238,.78)}
/* the italic sub-line that sits under a section head */
.sec__sub{margin:18px 0 0;font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.3;color:var(--lagoon)}
.hl{color:var(--shallow)}
.link{display:inline-flex;align-items:center;gap:10px;color:var(--shallow);text-decoration:none;font-weight:600;font-size:1rem}
.link:hover{color:var(--foam)}
.link:hover .ico{transform:translateX(3px)}
.link .ico{transition:transform .18s ease}

/* ---------- buttons: the warm gradient + full-width variants ---------- */
.btn--warm{
  background:linear-gradient(100deg,var(--shallow) 0%,#9fdcae 46%,var(--sun) 100%);
  color:#05202a;box-shadow:0 16px 32px -18px rgba(255,181,112,.6);
}
.btn--warm:hover{box-shadow:0 22px 38px -18px rgba(255,181,112,.55)}
.btn--block{display:flex;justify-content:center;width:100%;margin-top:34px;font-size:1.06rem;padding:19px 26px}
.btn--outline,.form .btn--outline{
  display:flex;justify-content:center;width:100%;padding:19px 26px;font-size:1.12rem;
  background:transparent;color:var(--shallow);border:1.5px solid rgba(95,216,196,.55);box-shadow:none;
}
.btn--outline:hover,.form .btn--outline:hover{background:rgba(95,216,196,.09)}

/* ---------- hero assurances strip ---------- */
.assure{
  list-style:none;margin:64px auto 0;padding:0;
  width:min(var(--wrap),calc(100% - 48px));
  display:grid;grid-template-columns:repeat(3,1fr);
}
.assure li{
  display:flex;align-items:center;gap:16px;padding:10px 34px;
  border-left:1px solid var(--line);
  font-size:15.5px;line-height:1.35;color:rgba(216,245,238,.86);
}
.assure li:first-child{border-left:0}

/* ---------- sound familiar ---------- */
.familiar{position:relative}
.familiar__glyph{
  position:absolute;top:8px;right:8px;pointer-events:none;
  font-family:var(--serif);font-size:11rem;line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(95,216,196,.22);
}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.qcard{
  display:flex;align-items:center;gap:20px;padding:24px 26px;border-radius:16px;
  background:var(--glass);border:1px solid rgba(120,205,205,.14);
  backdrop-filter:blur(12px);box-shadow:var(--shadow);
  transition:transform .22s ease,box-shadow .22s ease;
}
.qcard:hover{transform:translateY(-3px);box-shadow:0 30px 60px -26px rgba(4,20,28,.5)}
.qcard__body{flex:1}
.qcard__mark{display:block;font-family:var(--serif);font-size:2rem;line-height:.55;color:var(--shallow);margin-bottom:14px}
/* the mirrored close, parked at the end of the quote */
.qcard__mark--end{margin:18px 0 0;text-align:right}
.qcard p{margin:0;font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.45;color:var(--foam)}
.qcard p em{font-style:italic}

.banner{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  margin-top:18px;padding:24px 30px;border-radius:16px;
  background:var(--glass);border:1px solid rgba(120,205,205,.14);backdrop-filter:blur(12px);
}
.banner__text{margin:0;font-size:1.08rem;line-height:1.5;color:var(--foam)}
.banner__text b{font-weight:400;color:var(--shallow)}
.banner .link{margin-left:auto}

/* ---------- services ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.svc__card{
  padding:30px 28px 32px;border-radius:18px;
  background:var(--glass);border:1px solid rgba(120,205,205,.14);
  backdrop-filter:blur(12px);box-shadow:var(--shadow);
  transition:transform .22s ease,box-shadow .22s ease;
}
.svc__card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -26px rgba(4,20,28,.5)}
.svc__top{display:flex;align-items:center;gap:20px}
.svc__card h3{margin:0;font-size:1.3rem;font-weight:600;line-height:1.22;letter-spacing:-.01em;color:var(--shallow)}
.svc__card p{margin:24px 0 0;font-size:1rem;color:rgba(216,245,238,.78)}

/* ---------- process ---------- */
.proc__head{display:grid;grid-template-columns:.95fr 1.05fr;gap:40px;align-items:start}
.proc__note{
  display:flex;gap:24px;padding:28px 30px;border-radius:18px;
  background:var(--glass);border:1px solid rgba(120,205,205,.14);backdrop-filter:blur(12px);
}
.proc__note h3{margin:0 0 10px;font-family:var(--serif);font-weight:400;font-size:1.26rem;line-height:1.25;color:var(--foam)}
.proc__note p{margin:0;font-size:.99rem;color:rgba(216,245,238,.78)}

.flow{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.step{
  position:relative;display:flex;flex-direction:column;
  padding:32px 22px 22px;border-radius:18px;
  background:var(--glass);border:1px solid rgba(120,205,205,.14);backdrop-filter:blur(12px);
}
.step > .ic{margin:0 auto}
.step h3{margin:28px 0 0;font-family:var(--serif);font-weight:400;font-size:1.55rem;letter-spacing:-.01em;color:var(--foam)}
.step__sub{margin:9px 0 0;font-size:1rem;line-height:1.35;color:var(--shallow)}
.step hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.step > p{margin:0 0 16px;font-size:.95rem;color:rgba(216,245,238,.76)}
.step__out{
  display:flex;align-items:flex-start;gap:12px;margin-top:auto;
  padding:15px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);
}
.step__out p{margin:0;min-width:0}
.step__out b{display:block;font-weight:600;color:var(--shallow)}
.step__out span{font-size:.93rem;color:rgba(216,245,238,.78)}
.step__arrow{
  position:absolute;top:64px;right:-26px;z-index:2;transform:translateY(-50%);
  display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(11,42,54,.95);border:1px solid rgba(95,216,196,.35);color:var(--shallow);
}
.step__arrow .ico{width:13px;height:13px}
.step__arrow::before,.step__arrow::after{
  content:"";position:absolute;top:50%;width:13px;border-top:2px dotted rgba(95,216,196,.38);
}
.step__arrow::before{right:100%;margin-right:3px}
.step__arrow::after{left:100%;margin-left:3px}

.ready{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  margin-top:22px;padding:24px 30px;border-radius:18px;
  background:var(--glass);border:1px solid rgba(120,205,205,.14);backdrop-filter:blur(12px);
}
.ready__t{margin:0;font-size:1.28rem;font-weight:700;color:var(--foam)}
.ready__sub{margin:5px 0 0;font-size:.99rem;line-height:1.45;color:rgba(216,245,238,.78)}
.ready__btns{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}

/* ---------- let's talk / contact ---------- */
.talk{
  width:min(var(--wrap),calc(100% - 48px));margin:0 auto;
  padding:40px 0 110px;display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:start;
}
.talk h2{margin:0}
.talk h2 em{font-style:italic;color:var(--lagoon)}
.talk__lede{margin:24px 0 0;font-size:1.06rem;color:rgba(216,245,238,.82)}
.or{
  display:flex;align-items:center;gap:16px;margin:30px 0 28px;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(216,245,238,.55);
}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.perks li{display:flex;align-items:flex-start;gap:20px}
.perks .ic{width:60px;height:60px}
.perks .ic .ico{width:27px;height:27px}
.perks p{margin:0}
.perks b{display:block;font-size:1.05rem;font-weight:600;color:var(--foam)}
.perks span{font-size:.96rem;color:rgba(216,245,238,.74)}

.formcard{
  padding:38px;border-radius:22px;
  background:var(--glass);border:1px solid rgba(120,205,205,.16);
  backdrop-filter:blur(12px);box-shadow:var(--shadow);
}
.formcard .form{margin-top:0;gap:24px 22px}
.formcard label{font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--foam)}
.req{color:#ff6f61}
.formcard input,.formcard textarea{
  background:rgba(255,255,255,.035);border:1px solid rgba(120,205,205,.22);
  border-radius:10px;padding:15px 16px;
}
.formcard textarea{line-height:1.55}
.privacy{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px 0 0;font-size:.93rem;color:rgba(216,245,238,.72)}
.formcard__rule{border:0;border-top:1px solid var(--line);margin:28px 0 24px}
.write{display:flex;align-items:flex-start;gap:20px}
.write p{margin:0}
.write b{display:block;margin-bottom:5px;font-size:1.06rem;font-weight:600;color:var(--shallow)}
.write span{font-size:.98rem;color:rgba(216,245,238,.78)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .qgrid,.svc{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr);gap:26px}
  .step__arrow{display:none}
  .proc__head,.talk{grid-template-columns:1fr}
}
@media (max-width:860px){
  .sec{padding:64px 0}
  .assure{grid-template-columns:1fr;gap:16px;margin-top:44px}
  .assure li{border-left:0;padding:0}
  .qgrid,.svc,.flow{grid-template-columns:1fr}
  .familiar__glyph{display:none}
  .banner .link,.ready__btns{margin-left:0}
  .formcard{padding:26px}
  .talk{padding-bottom:72px}
}

/* ---------- narrow phones: the bar keeps only the mark and the menu ---------- */
@media (max-width:430px){
  .bar > .btn{display:none}
  .bar__nav a.bar__nav-cta{display:inline-flex;justify-content:center;margin-top:6px;padding:13px 18px;font-size:15px}
  .bar__nav-cta:hover{transform:none}
  .bar__word{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .bar__nav,.bar__burger-line,
  .bar__burger-line::before,.bar__burger-line::after{transition:none}
}