/* TaxCorner – Atique Raza CPA Inc. · shared styles
   Layout: built from the logo. Rounded-square tiles (the logo's frame) and
   checkmarks as the recurring mark; deep blue with a warm yellow accent. */
:root {
  --bg: #f6f8fc;
  --paper: #ffffff;
  --ink: #0b1a30;
  --muted: #55647a;
  --rule: #dce3ee;
  --blue: #0b4f96;
  --blue-text: #0b4f96;
  --blue-2: #2a7ad6;
  --navy: #061e3c;
  --night: #04142b;
  --sky: #e5eefa;
  --yellow: #fbc22d;
  --yellow-soft: #fff4d4;
  --on-yellow: #10223a;
  --on-dark-muted: #c2d2e8;
  /* Calibri where installed (Windows, Office on Mac); Carlito is its metric-compatible twin. */
  --display: Calibri, Carlito, "Segoe UI", Candara, Arial, sans-serif;
  --body: Calibri, Carlito, "Segoe UI", Candara, Arial, sans-serif;
  /* Dates, countdowns and small labels use Calibri too (owner's choice: one font everywhere). */
  --mono: Calibri, Carlito, "Segoe UI", Candara, Arial, sans-serif;
  --r: 22px;
  --wrap: 1220px;
  --ease: cubic-bezier(.2, .75, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07101e; --paper: #0e1a2d; --ink: #e8eef7; --muted: #9dadc5; --rule: #1d2c44;
    --blue-text: #80b3f0; --sky: #10203a; --yellow-soft: #2a2410;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #07101e; --paper: #0e1a2d; --ink: #e8eef7; --muted: #9dadc5; --rule: #1d2c44;
  --blue-text: #80b3f0; --sky: #10203a; --yellow-soft: #2a2410;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Linked sections stop below the floating header instead of underneath it. */
html { scroll-behavior: smooth; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 96px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--body); overflow-x: hidden; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(34px, 4.6vw, 58px); font-weight: 800; }
h3 { font-size: 22px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.15; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.kicker { display: inline-flex; align-items: center; gap: 9px; font: 600 14px/1 var(--body); color: var(--blue-text); }
.kicker svg { flex: none; }
.lede { color: var(--muted); max-width: 62ch; font-size: 18.5px; }
.hl { color: var(--yellow); }
.skip { position: fixed; left: 12px; top: 8px; z-index: 50; background: var(--yellow); color: var(--on-yellow); padding: 10px 14px; border-radius: 10px; font-weight: 700; transform: translateY(-200%); transition: transform .2s; }
.skip:focus { transform: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 26px; border-radius: 14px; font: 650 16px/1 var(--body); text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .25s; }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn.yellow { background: var(--yellow); color: var(--on-yellow); box-shadow: 0 10px 24px -12px rgba(251,194,45,.9); }
.btn.yellow:hover { box-shadow: 0 18px 34px -12px rgba(251,194,45,1); }
.btn.blue { background: var(--blue); color: #fff; }
.btn.soft { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); backdrop-filter: blur(8px); }
.btn.soft:hover { background: rgba(255,255,255,.2); }
/* "outline", not "line": .line is the contact-details row and its grid layout broke the button. */
.btn.outline { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.btn.outline:hover { box-shadow: inset 0 0 0 1px var(--blue-text); }
/* Dark text on WhatsApp green: white on this green is only 2:1 contrast. */
.btn.wa { background: #25d366; color: #052e1c; }
.btn.wa:hover { background: #3be07a; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.box-h { font-family: var(--display); font-size: 19px; font-weight: 750; line-height: 1.15; letter-spacing: -0.01em; }
.bsummary .box-h { color: #fff; font-size: 24px; }
.svc.svc-yellow { background: var(--yellow); border-color: transparent; }
.svc.svc-yellow .ti { background: var(--navy); color: #fff; }
.svc.svc-yellow h3, .svc.svc-yellow p, .svc.svc-yellow .more { color: var(--on-yellow); }
.svc.svc-navy { background: linear-gradient(150deg, var(--blue), var(--navy)); border-color: transparent; }
.svc.svc-navy .ti { background: #25d366; color: #052e1c; }
.svc.svc-navy h3 { color: #fff; } .svc.svc-navy p { color: var(--on-dark-muted); } .svc.svc-navy .more { color: var(--yellow); }
.svc.svc-yellow:hover .ti, .svc.svc-navy:hover .ti { transform: rotate(-8deg); }

/* Header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--night); }
header.top { position: fixed; z-index: 20; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 0; right: 0; pointer-events: none; transition: transform .4s var(--ease); }
header.top.hide { transform: translateY(-140%); }
.announce { pointer-events: auto; overflow: hidden; max-height: 60px; margin-bottom: 10px; transition: max-height .4s var(--ease), margin .4s var(--ease), opacity .3s; }
.announce p { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; padding: 8px 16px; border-radius: 14px; background: var(--yellow); color: var(--on-yellow); font: 600 14px/1.35 var(--body); }
.announce a { font-weight: 700; }
.top.solid .announce { max-height: 0; margin-bottom: 0; opacity: 0; }
@media (max-width: 640px) { .announce p { font-size: 12.5px; padding: 7px 12px; } .announce .long { display: none; } }
.bar { pointer-events: auto; display: flex; align-items: center; gap: 14px; padding: 9px 9px 9px 14px; border-radius: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background .35s var(--ease), border-color .35s, box-shadow .35s; }
.top.solid .bar { background: rgba(255,255,255,.95); border-color: var(--rule); box-shadow: 0 14px 40px -24px rgba(6,30,60,.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .top.solid .bar { background: rgba(14,26,45,.94); } }
:root[data-theme="dark"] .top.solid .bar { background: rgba(14,26,45,.94); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; transition: color .35s; }
.top.solid .brand { color: var(--blue-text); }
/* The name is one word: TaxCorner. "Corner" takes the logo yellow so it stays easy to read. */
.wordmark { font: 800 24px/1 var(--display); letter-spacing: -0.01em; white-space: nowrap; }
.wordmark span { color: var(--yellow); }
.top.solid .wordmark span, .foot .wordmark span { color: #e0a400; }
nav.links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
nav.links > a, .dd > button { text-decoration: none; font: 600 15px/1 var(--body); color: rgba(255,255,255,.88); padding: 11px 13px; border-radius: 12px; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .2s, color .2s; }
nav.links > a:hover, nav.links > a.on, .dd > button:hover, .dd.open > button { background: rgba(255,255,255,.12); color: #fff; }
.top.solid nav.links > a, .top.solid .dd > button { color: var(--muted); }
.top.solid nav.links > a:hover, .top.solid nav.links > a.on, .top.solid .dd > button:hover, .top.solid .dd.open > button { background: var(--sky); color: var(--blue-text); }
.dd { position: relative; }
.dd > button svg { transition: transform .25s var(--ease); }
.dd.open > button svg { transform: rotate(180deg); }
.menu { position: absolute; top: calc(100% + 12px); left: 50%; width: 600px; transform: translate(-50%, 8px); opacity: 0; visibility: hidden; padding: 12px; border-radius: 20px; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 30px 60px -30px rgba(6,30,60,.55); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; transition: opacity .25s, transform .3s var(--ease), visibility .25s; }
.dd.open .menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.menu a { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; text-decoration: none; color: var(--ink); transition: background .2s; }
.menu a:hover { background: var(--sky); }
.menu a b { display: block; font-size: 15px; }
.menu a small { color: var(--muted); font-size: 13px; line-height: 1.35; display: block; margin-top: 2px; }
.menu .mi { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--sky); color: var(--blue-text); }
.menu a.all { grid-column: 1 / -1; justify-content: center; background: var(--sky); font-weight: 700; color: var(--blue-text); }
.bar .btn { padding: 12px 18px; font-size: 15px; border-radius: 13px; }
.callnum { font-family: var(--mono); font-size: 14px; }
.top .call { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 8px; padding: 0 4px; transition: color .35s; }
.top.solid .call { color: var(--ink); }
.menu-btn { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; border-radius: 13px; background: var(--yellow); cursor: pointer; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 20px; height: 2px; background: var(--on-yellow); margin: 0 auto; position: relative; border-radius: 2px; transition: transform .25s var(--ease), background .25s; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
.menu-btn span::before { top: -6px; } .menu-btn span::after { top: 6px; }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-btn span::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav { display: none; }
@media (max-width: 1120px) {
  nav.links, .top .call, .bar .btn { display: none; }
  .menu-btn { display: block; }
  .mobile-nav { display: block; position: fixed; z-index: 19; inset: 0; overflow-y: auto; padding: calc(env(safe-area-inset-top, 0px) + 100px) max(18px, env(safe-area-inset-right, 0px)) 40px max(18px, env(safe-area-inset-left, 0px)); background: var(--night); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .menu-open .mobile-nav { opacity: 1; visibility: visible; }
  .mobile-nav a.l { display: block; font: 800 32px/1.15 var(--display); font-stretch: 108%; letter-spacing: -0.02em; color: #fff; text-decoration: none; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .mobile-nav .sub { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; padding: 10px 0 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .mobile-nav .sub a { color: var(--on-dark-muted); text-decoration: none; padding: 6px 0; font-size: 15.5px; }
  .mobile-nav .btn { margin-top: 22px; }
}
@media (max-width: 420px) { .mobile-nav .sub { grid-template-columns: 1fr; } }

/* Home hero */
.hero { position: relative; min-height: min(900px, 100svh); display: grid; align-items: end; overflow: hidden; color: #fff; background: var(--night); }
.media { position: absolute; inset: 0; }
.media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); animation: kb 30s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,20,43,.93) 0%, rgba(4,20,43,.72) 42%, rgba(4,20,43,.2) 80%), linear-gradient(0deg, rgba(4,20,43,.9) 0%, rgba(4,20,43,0) 45%); }
.spot { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px circle at var(--x, 70%) var(--y, 40%), rgba(251,194,45,.13), transparent 60%); }
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-block: calc(env(safe-area-inset-top, 0px) + 190px) 36px; }
.pill-tag { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); font: 600 14px/1.2 var(--body); color: var(--on-dark-muted); }
.pill-tag b { background: var(--yellow); color: var(--on-yellow); padding: 5px 9px; border-radius: 999px; font-weight: 700; font-size: 12.5px; }
.hero h1 { margin-block: 26px; font-weight: 800; }
/* Company name lockup: logo mark beside stacked TAX / CORNER, echoing the logo. */
.lockup { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); margin-bottom: clamp(16px, 2.4vw, 28px); animation: lift 1.1s var(--ease) both; }
.lockup svg { flex: none; width: clamp(68px, 9.5vw, 132px); height: clamp(68px, 9.5vw, 132px); filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); }
.lockup .wm { display: block; min-width: 0; font: 800 clamp(48px, 10vw, 140px)/0.9 var(--display); letter-spacing: -0.02em; white-space: nowrap; color: #fff; text-shadow: 0 10px 40px rgba(0,0,0,.35); }
.lockup .wm span { color: var(--yellow); }
.lk-text { display: grid; gap: clamp(4px, .8vw, 10px); min-width: 0; }
.lockup .by { display: block; font: 600 clamp(15px, 2vw, 26px)/1.1 var(--body); letter-spacing: 0.01em; color: var(--on-dark-muted); white-space: nowrap; }
/* Header and footer: "by Atique Raza CPA Inc." sits small under the TaxCorner wordmark. */
.wm-stack { display: grid; gap: 2px; line-height: 1; }
.brand .by { font: 600 11px/1 var(--body); letter-spacing: 0.02em; color: rgba(255,255,255,.75); white-space: nowrap; transition: color .35s; }
.top.solid .brand .by, .foot .brand .by { color: var(--muted); }
.hero h1 .tag { display: block; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.01em; max-width: 20ch; }
.hero h1 .w { display: inline-block; animation: blurIn 1.1s var(--ease) both; }
.hero h1 .w:nth-child(1) { animation-delay: .15s; } .hero h1 .w:nth-child(2) { animation-delay: .25s; } .hero h1 .w:nth-child(3) { animation-delay: .35s; } .hero h1 .w:nth-child(4) { animation-delay: .5s; } .hero h1 .w:nth-child(5) { animation-delay: .6s; }
/* No blur filter: it's expensive to draw on phones and slowed the home page. */
@keyframes blurIn { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
/* The company name is the largest thing on the home page, so it stays visible while it
   settles into place; fading it in from invisible delayed when the page counts as loaded. */
@keyframes lift { from { transform: translateY(18px) scale(.97); } to { transform: none; } }
.hero .lede { color: var(--on-dark-muted); font-size: 19.5px; max-width: 56ch; animation: up 1s .5s var(--ease) both; }
@keyframes up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .ctas { animation: up 1s .6s var(--ease) both; }
.hero-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; justify-content: space-between; margin-top: 52px; animation: up 1s .75s var(--ease) both; }
.proof { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.proof > span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); font-size: 14.5px; color: var(--on-dark-muted); }
.proof b { color: #fff; }
.stars { color: var(--yellow); letter-spacing: 1px; }
.dl-strip { display: flex; align-items: center; gap: 16px; padding: 10px 18px 10px 10px; border-radius: 18px; background: rgba(6,30,60,.6); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); text-decoration: none; color: #fff; transition: background .3s, transform .3s var(--ease); }
.dl-strip:hover { background: rgba(6,30,60,.8); transform: translateY(-3px); }
.ring { flex: none; width: 64px; height: 64px; }
.ring circle { fill: none; stroke-width: 9; }
.ring .bgc { stroke: rgba(255,255,255,.16); }
.ring .fg { stroke: var(--yellow); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.8s var(--ease); }
.ring text { fill: #fff; font: 800 30px var(--display); }
.dl-k { display: block; font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
.dl-what { display: block; font: 700 16.5px/1.25 var(--body); margin-top: 5px; }
.dl-date { display: block; font: 500 12.5px/1 var(--mono); color: var(--on-dark-muted); margin-top: 5px; }
@media (max-width: 700px) { .hero .wrap { padding-bottom: 40px; } }

/* Inner page hero */
.phero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(120% 140% at 85% 0%, #1666bb 0%, var(--blue) 30%, var(--navy) 70%, var(--night) 100%); padding-block: calc(env(safe-area-inset-top, 0px) + 180px) clamp(56px, 7vw, 90px); }
/* Vancouver photo behind each page header, tinted so the text stays readable. */
/* The image and its tint are set inline on each header (a relative url() inside a CSS
   variable would resolve from this stylesheet's folder and miss the file). */
.phero-media { position: absolute; inset: 0; z-index: 0; background-repeat: no-repeat; background-size: auto, auto, cover; background-position: center, center, center 60%; animation: drift-img 34s ease-in-out infinite alternate; }
@keyframes drift-img { from { transform: scale(1); } to { transform: scale(1.05); } }
.phero::before, .phero::after { z-index: 1; }
.phero .wrap { z-index: 2; }
.phero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); }
.phero::after { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; bottom: -200px; border-radius: 50%; background: var(--yellow); opacity: .14; filter: blur(80px); animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(-80px, -40px, 0) scale(1.15); } }
.phero .wrap { position: relative; z-index: 1; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--on-dark-muted); margin-bottom: 22px; padding: 0; list-style: none; }
.crumbs a { color: #fff; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.phero h1 { font-size: clamp(40px, 6vw, 76px); font-weight: 850; max-width: 18ch; }
.phero .lede { color: var(--on-dark-muted); margin-top: 20px; font-size: 19px; }
.phero .meta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.phero .meta-row > span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); font-size: 14px; color: var(--on-dark-muted); }
.phero .meta-row b { color: #fff; }
.phero .ctas { margin-top: 30px; }

/* Reveal */
.rv { transition: transform 1s var(--ease), opacity 1s var(--ease); }
.js .rv.pre { transform: translateY(44px); opacity: .15; }
.js .rv.zoom.pre { transform: scale(.94); }
.rv.d1 { transition-delay: .1s; } .rv.d2 { transition-delay: .2s; } .rv.d3 { transition-delay: .3s; }
.split .sw { display: inline-block; transition: transform .9s var(--ease), opacity .9s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.js .split.pre .sw { transform: translateY(0.6em) rotate(3deg); opacity: 0; }
.js .split.pre { opacity: 1; transform: none; }

section.band { padding-block: clamp(72px, 9vw, 120px); position: relative; }
section.band.tight { padding-top: 0; }
.sec-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 5vw, 52px); max-width: 780px; }
.sec-head.row { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
@media (max-width: 760px) { .sec-head.row { grid-template-columns: 1fr; } }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 16px; }
.tile { position: relative; border-radius: var(--r); background: var(--paper); border: 1px solid var(--rule); padding: 26px; overflow: hidden; display: grid; align-content: space-between; gap: 14px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.tile.tilt:hover { box-shadow: 0 30px 60px -36px rgba(11,79,150,.5); }
.tile.summary { grid-column: span 2; grid-row: span 2; background: linear-gradient(150deg, #0b4f96 0%, #073a72 100%); color: #fff; border: 0; }
.tile.summary h2 { font-size: clamp(30px, 3.4vw, 44px); color: #fff; }
.scrub { font-size: 18px; line-height: 1.6; color: #dbe7f7; }
.js .scrub .sw { color: rgba(255,255,255,.45); transition: color .3s; }
.js .scrub .sw.lit { color: #fff; }
.tile.summary .fold { position: absolute; right: -50px; bottom: -50px; width: 230px; opacity: .13; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tile.photo { grid-column: span 2; grid-row: span 2; padding: 0; }
.tile.photo img { width: 100%; height: 120%; object-fit: cover; }
.tile .big { font: 850 clamp(52px, 5.4vw, 72px)/0.9 var(--display); font-stretch: 112%; letter-spacing: -0.04em; color: var(--blue-text); font-variant-numeric: tabular-nums; }
.tile .lbl { color: var(--muted); font-weight: 600; font-size: 15px; }
.tile.yellow { background: var(--yellow); border: 0; }
.tile.yellow .big, .tile.yellow .lbl { color: var(--on-yellow); }
.tile.wide { grid-column: span 2; display: flex; align-items: center; gap: 20px; }
.tile .pin { flex: none; width: 58px; height: 58px; border-radius: 16px; background: var(--sky); color: var(--blue-text); display: grid; place-items: center; animation: bob 3s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.tile.wide b { display: block; font-size: 19px; }
.tile.wide span { color: var(--muted); }
.tile.who { grid-column: span 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; align-content: stretch; }
.tile.who > div { padding: 26px; display: grid; gap: 10px; align-content: start; border-left: 1px solid var(--rule); transition: background .3s; }
.tile.who > div:first-child { border-left: 0; }
.tile.who > div:hover { background: var(--sky); }
.ti { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--blue); color: #fff; transition: transform .4s var(--ease), background .3s, color .3s; flex: none; }
.tile.who > div:hover .ti { transform: rotate(-8deg) scale(1.08); background: var(--yellow); color: var(--on-yellow); }
.tile.who p { color: var(--muted); }
.tile.who a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile.photo { min-height: 280px; } .tile.who { grid-column: 1 / -1; grid-template-columns: 1fr; } .tile.who > div { border-left: 0; border-top: 1px solid var(--rule); } .tile.who > div:first-child { border-top: 0; } }
@media (max-width: 560px) { .tile.summary, .tile.photo, .tile.wide { grid-column: 1 / -1; } .tile { padding: 20px; } }

/* Service cards */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }
.svc { --mx: 50%; --my: 50%; position: relative; overflow: hidden; border-radius: 22px; background: var(--paper); border: 1px solid var(--rule); padding: 26px; display: grid; gap: 12px; align-content: start; text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.svc::before { content: ""; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--mx) var(--my), rgba(251,194,45,.16), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.svc:hover { transform: translateY(-6px); box-shadow: 0 28px 50px -30px rgba(11,79,150,.55); border-color: var(--blue-text); }
.svc:hover::before { opacity: 1; }
.svc:hover .ti { background: var(--yellow); color: var(--on-yellow); transform: rotate(-8deg); }
.svc p { color: var(--muted); font-size: 16px; }
.svc .more { font: 650 14.5px/1 var(--body); color: var(--blue-text); margin-top: 4px; display: inline-flex; gap: 6px; }

/* Languages strip */
.langs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 22px 26px; border-radius: 22px; background: var(--paper); border: 1px solid var(--rule); }
.langs b { font: 750 20px/1.2 var(--display); font-stretch: 105%; }
.langs .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: var(--sky); color: var(--blue-text); font-weight: 650; font-size: 15px; }
.chip i { font-style: normal; color: var(--muted); font-weight: 500; }

/* Reviews */
.reviews { position: relative; overflow: hidden; color: #fff; background: var(--navy); }
.reviews-bg { position: absolute; inset: -10% 0; background-position: center; background-size: cover; will-change: transform; }
.reviews::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,20,43,.88), rgba(6,30,60,.82)); }
.reviews .wrap { position: relative; z-index: 1; }
.reviews h2 { color: #fff; text-align: center; }
.g-head { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 18px; margin: 28px auto 40px; padding: 14px 22px; width: fit-content; max-width: 100%; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); text-decoration: none; color: #fff; transition: background .3s, transform .3s var(--ease); }
.g-head:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.g-logo { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.g-head .num { font: 850 48px/1 var(--display); font-stretch: 112%; letter-spacing: -0.04em; }
.g-head .meta { display: grid; gap: 4px; }
.g-head .meta b { font-size: 17px; }
.g-head .meta small { color: var(--on-dark-muted); font-size: 14px; }
.g-head .all { font: 600 14px/1 var(--body); padding: 10px 14px; border-radius: 11px; background: var(--yellow); color: var(--on-yellow); }
.bigstars { display: inline-flex; gap: 3px; }
.bigstars svg { width: 20px; height: 20px; }
.bigstars .s { fill: rgba(255,255,255,.2); }
.bigstars .f { fill: #fbbc05; }
.js .bigstars .f { clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease); }
.js .lit-stars .bigstars .f { clip-path: inset(0 0 0 0); }
.lit-stars .bigstars svg:nth-child(2) .f { transition-delay: .1s; } .lit-stars .bigstars svg:nth-child(3) .f { transition-delay: .2s; } .lit-stars .bigstars svg:nth-child(4) .f { transition-delay: .3s; } .lit-stars .bigstars svg:nth-child(5) .f { transition-delay: .4s; }
.carousel { position: relative; }
.rv-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 4px 10px; scrollbar-width: none; }
.rv-track::-webkit-scrollbar { display: none; }
.gcard { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; margin: 0; background: #fff; color: #202124; border-radius: 18px; padding: 28px 24px 20px; display: grid; justify-items: center; text-align: center; gap: 14px; align-content: start; box-shadow: 0 24px 50px -30px rgba(0,0,0,.7); transition: transform .35s var(--ease); }
.gcard:hover { transform: translateY(-6px); }
.gav { position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 34px/1 var(--body); }
.gav .gb { position: absolute; right: -4px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.gstars { color: #fbbc05; font-size: 22px; letter-spacing: 2px; line-height: 1; }
.gcard blockquote { margin: 0; font: 500 17px/1.5 var(--body); color: #202124; min-height: 3em; }
.gcard .nt { color: #70757a; font-style: italic; font-size: 15px; }
.gcard .full { color: #188038; font-weight: 600; font-size: 15px; text-decoration: none; }
.gcard .full:hover { text-decoration: underline; }
.gfoot { display: flex; align-items: center; gap: 10px; width: 100%; padding-top: 14px; border-top: 1px solid #eceff3; font-size: 14px; color: #70757a; text-align: left; }
.gfoot b { color: #3c4043; }
.carr { position: absolute; top: 50%; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); color: #0b1a30; cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); transform: translateY(-50%); transition: transform .25s var(--ease), background .25s; }
.carr:hover { background: var(--yellow); transform: translateY(-50%) scale(1.08); }
.carr.prev { left: -22px; } .carr.next { right: -22px; }
.cdots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.cdots button { width: 10px; height: 10px; border-radius: 999px; border: 0; padding: 0; background: rgba(255,255,255,.35); cursor: pointer; transition: width .3s var(--ease), background .3s; }
.cdots button[aria-current="true"] { width: 28px; background: var(--yellow); }
.review-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.rating-panel { max-width: 880px; margin: 34px auto 0; padding: clamp(28px, 5vw, 52px); border-radius: 30px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; justify-items: center; text-align: center; gap: 18px; }
.g-logo.big { width: 72px; height: 72px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); }
.rp-score { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.rp-score .num { font: 850 clamp(80px, 11vw, 132px)/0.9 var(--display); font-stretch: 112%; letter-spacing: -0.05em; }
.rp-score .bigstars svg { width: clamp(30px, 4vw, 42px); height: clamp(30px, 4vw, 42px); }
.rp-line { color: var(--on-dark-muted); font-size: 19px; max-width: 46ch; }
.rp-line b { color: #fff; }
.rp-pts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin-top: 8px; }
.rp-pt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); text-align: left; }
.rp-pt .ti { width: 40px; height: 40px; background: rgba(255,255,255,.1); }
.rp-pt b { display: block; color: #fff; }
.rp-pt small { color: var(--on-dark-muted); font-size: 13.5px; line-height: 1.35; display: block; }
.rating-panel .review-cta { margin-top: 6px; }
@media (max-width: 760px) { .rp-pts { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .gcard { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 620px) { .gcard { flex-basis: 86%; } .carr { display: none; } }

/* Deadlines */
.updated { display: block; margin-top: 10px; font: 500 14px/1.3 var(--mono); color: var(--muted); }
.timeline { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
.ev { display: grid; grid-template-columns: 110px minmax(0, 1fr) 160px; gap: 22px; align-items: center; padding: 18px 24px; border-radius: 20px; background: var(--paper); border: 1px solid var(--rule); transition: transform .35s var(--ease), border-color .3s, opacity 1s var(--ease); }
.ev:hover { transform: translateX(8px); border-color: var(--blue-text); }
.js .ev.pre { transform: translateX(-40px); opacity: .15; }
.cal { display: block; width: 100%; max-width: 88px; border-radius: 16px; overflow: hidden; text-align: center; border: 1px solid var(--rule); background: var(--paper); }
.cal .m { display: block; background: var(--blue); color: #fff; font: 700 12.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 7px 0; }
.cal .d { display: block; font: 850 32px/1 var(--display); padding: 8px 0 2px; font-variant-numeric: tabular-nums; }
.cal .y { display: block; font: 500 11.5px/1 var(--mono); color: var(--muted); padding-bottom: 8px; }
.ev b { display: block; font-size: 18px; }
.ev .n { color: var(--muted); font-size: 15.5px; }
.ev .wd { font: 500 13px/1 var(--mono); color: var(--muted); display: block; margin-top: 6px; }
.ev .left { text-align: right; }
.pill { display: inline-block; padding: 8px 12px; border-radius: 10px; font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; background: var(--sky); color: var(--blue-text); }
.bar2 { height: 6px; border-radius: 6px; background: var(--sky); margin-top: 12px; overflow: hidden; }
.bar2 i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--blue); transition: width 1.6s var(--ease); }
.ev.next { border-color: var(--yellow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 30%, transparent); background: linear-gradient(90deg, var(--yellow-soft), var(--paper) 60%); }
.ev.next .cal .m { background: var(--yellow); color: var(--on-yellow); }
.ev.next .pill { background: var(--yellow); color: var(--on-yellow); animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.ev.next .bar2 i { background: var(--yellow); }
.ev.past { opacity: .5; }
.ev[hidden] { display: none; }
.note { margin-top: 18px; font-size: 15px; color: var(--muted); max-width: 80ch; }
@media (max-width: 700px) { .ev { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 16px; } .ev .left { grid-column: 1 / -1; text-align: left; } .cal .d { font-size: 26px; } }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq-side { position: sticky; top: 110px; display: grid; gap: 16px; }
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 18px; background: var(--paper); border: 1px solid var(--rule); transition: border-color .25s, box-shadow .25s; }
.faq details[open] { border-color: var(--blue-text); box-shadow: 0 18px 40px -30px rgba(11,79,150,.6); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 20px 22px; font: 650 18px/1.3 var(--body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b4f96' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center no-repeat; transition: transform .35s var(--ease), background-color .3s; }
.faq details[open] summary::after { transform: rotate(135deg); background-color: var(--yellow); }
.faq details p, .faq details ul { color: var(--muted); padding: 0 22px 22px; max-width: 66ch; margin: 0; animation: up .45s var(--ease); }
.faq details ul { padding-left: 42px; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } .faq-side { position: static; } }

/* Inner page layout: article + sticky sidebar */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }
.prose { display: grid; gap: 22px; min-width: 0; }
.prose > section { display: grid; gap: 16px; }
.prose h2 { font-size: clamp(28px, 3.2vw, 40px); }
.prose h3 { font-size: 21px; }
.prose p { color: var(--muted); font-size: 17.5px; max-width: 68ch; }
.prose p strong, .prose li strong { color: var(--ink); }
.prose ul.dots { margin: 0; padding-left: 22px; color: var(--muted); display: grid; gap: 8px; }
.answer { padding: 22px 24px; border-radius: 20px; background: var(--sky); border-left: 5px solid var(--yellow); }
.answer p { color: var(--ink); font-size: 18.5px; }
.answer .k { font: 700 12.5px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-text); margin-bottom: 10px; display: block; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.ticks svg { flex: none; margin-top: 4px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .cols2 { grid-template-columns: 1fr; } }
.box { padding: 24px; border-radius: 20px; background: var(--paper); border: 1px solid var(--rule); display: grid; gap: 14px; align-content: start; }
.box h3 { font-size: 19px; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0; margin: 0; counter-reset: s; }
.steps li { list-style: none; position: relative; padding: 22px; border-radius: 20px; background: var(--paper); border: 1px solid var(--rule); display: grid; gap: 8px; overflow: hidden; }
.steps li::before { counter-increment: s; content: "0" counter(s); font: 850 40px/1 var(--display); font-stretch: 112%; color: var(--blue-text); opacity: .25; }
.steps p { font-size: 16px; }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }
.facts { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.facts li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 14px 18px; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); }
.facts li b { font: 600 14px/1.4 var(--mono); color: var(--blue-text); }
.facts li span { color: var(--muted); }
@media (max-width: 560px) { .facts li { grid-template-columns: 1fr; gap: 4px; } }
.side { position: sticky; top: 110px; display: grid; gap: 14px; }
.side-card { border-radius: 22px; padding: 24px; background: linear-gradient(160deg, var(--blue), var(--navy)); color: #fff; display: grid; gap: 14px; }
.side-card h3 { color: #fff; font-size: 22px; }
.side-card p { color: var(--on-dark-muted); font-size: 15.5px; }
.side-card .btn { width: 100%; }
.side-list { border-radius: 22px; padding: 18px; background: var(--paper); border: 1px solid var(--rule); display: grid; gap: 2px; }
.side-list h4 { margin: 4px 6px 8px; font: 700 13px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.side-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 15.5px; transition: background .2s; }
.side-list a:hover, .side-list a[aria-current="page"] { background: var(--sky); color: var(--blue-text); }
@media (max-width: 980px) { .side { position: static; } }
.byline { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 13.5px/1.3 var(--mono); color: var(--on-dark-muted); margin-top: 18px; }

/* Guides */
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .guide-grid { grid-template-columns: 1fr; } }
.guide { display: grid; gap: 12px; padding: 26px; border-radius: 22px; background: var(--paper); border: 1px solid var(--rule); text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s; }
.guide:hover { transform: translateY(-5px); border-color: var(--blue-text); box-shadow: 0 28px 50px -32px rgba(11,79,150,.55); }
.guide .gm { font: 500 12.5px/1 var(--mono); color: var(--muted); }
.guide h3 { font-size: 23px; }
.guide p { color: var(--muted); font-size: 16px; }
.guide .go { font: 650 14.5px/1 var(--body); color: var(--blue-text); }
.guide .go .arr { display: inline-block; transition: transform .25s var(--ease); }
.guide:hover .go .arr { transform: translateX(4px); }
.prose a { color: var(--blue-text); font-weight: 600; }
.prose .svc, .prose .btn { font-weight: inherit; }

/* About */
.profile { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(26px, 4vw, 52px); align-items: center; }
.portrait { position: relative; aspect-ratio: 4 / 5; max-width: 100%; border-radius: 28px; overflow: hidden; background: linear-gradient(160deg, #0b4f96, #04142b); display: grid; place-items: center; color: #fff; }
.portrait .mono { font: 850 110px/1 var(--display); font-stretch: 112%; letter-spacing: -0.04em; }
.portrait .cap { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.95); color: #0b1a30; font-size: 14px; }
.portrait .cap b { display: block; font-size: 16px; }
.creds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.creds div { padding: 16px; border-radius: 16px; background: var(--paper); border: 1px solid var(--rule); }
.creds b { display: block; font: 850 28px/1 var(--display); font-stretch: 110%; color: var(--blue-text); }
.creds span { color: var(--muted); font-size: 14px; }
@media (max-width: 760px) { .profile { grid-template-columns: 1fr; } .portrait { max-width: 320px; } .creds { grid-template-columns: 1fr 1fr; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.office { border-radius: 24px; padding: 28px; background: var(--paper); border: 1px solid var(--rule); display: grid; gap: 18px; }
.office h2 { font-size: clamp(28px, 3vw, 38px); }
.lines { display: grid; gap: 0; }
.line { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule); }
.line:first-child { border-top: 0; }
.line .k { font: 700 12.5px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.line .v { font-weight: 600; overflow-wrap: anywhere; }
.copy { font: 600 13px/1 var(--body); padding: 9px 12px; border-radius: 10px; border: 0; background: var(--sky); color: var(--blue-text); cursor: pointer; transition: background .2s; }
.copy:hover { background: var(--yellow); color: var(--on-yellow); }
@media (max-width: 440px) { .line { grid-template-columns: minmax(0, 1fr) auto; } .line .k { grid-column: 1 / -1; } }
.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: 10px 0; border-top: 1px solid var(--rule); }
.hours td:last-child { text-align: right; font-family: var(--mono); font-size: 14.5px; }

/* Form */
.form { background: var(--paper); color: var(--ink); border-radius: 24px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--rule); box-shadow: 0 30px 60px -40px rgba(0,0,0,.5); display: grid; gap: 14px; }
.form h3 { font-size: 28px; font-weight: 800; }
.form .sub { color: var(--muted); font-size: 15px; margin-top: -6px; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld { display: grid; gap: 6px; }
.fld > label { font: 600 13.5px/1 var(--body); color: var(--muted); }
.fld input, .fld select, .fld textarea { width: 100%; font: 500 16px/1.4 var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; }
.fld textarea { min-height: 96px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--blue-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-text) 22%, transparent); }
.fld .err { color: #c0392b; font-size: 13px; }
.sendrow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sendrow .btn { width: 100%; }
.sendrow .btn[aria-disabled="true"] { opacity: .45; }
.form .fine { font-size: 13px; color: var(--muted); }
@media (max-width: 520px) { .f2, .sendrow { grid-template-columns: 1fr; } }

/* Booking */
.booking-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(20px, 3vw, 36px); align-items: start; }
@media (max-width: 980px) { .booking-wrap { grid-template-columns: 1fr; } }
.booker { display: grid; gap: 16px; }
.bstep { margin: 0; padding: clamp(20px, 3vw, 28px); border-radius: 24px; background: var(--paper); border: 1px solid var(--rule); display: grid; gap: 16px; min-width: 0; }
.bstep legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; padding: 0; font: 700 24px/1.2 var(--display); }
.bstep legend + * { clear: both; }
.bn { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--yellow); color: var(--on-yellow); font: 700 17px/1 var(--body); flex: none; }
.types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .types { grid-template-columns: 1fr; } }
.type { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--rule); background: var(--bg); cursor: pointer; transition: border-color .2s, background .2s, transform .25s var(--ease); }
.type:hover { border-color: var(--blue-text); transform: translateY(-2px); }
/* Native radios stay focusable but are clipped inside their own card, so they can't push the page wider. */
.type input, .slot input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.type .ti { width: 42px; height: 42px; background: var(--sky); color: var(--blue-text); }
.type b { display: block; font-size: 16px; line-height: 1.25; }
.type small { color: var(--muted); font-size: 13.5px; }
.type:has(input:checked) { border-color: var(--blue); background: var(--sky); box-shadow: 0 0 0 2px var(--blue) inset; }
.type:has(input:checked) .ti { background: var(--yellow); color: var(--on-yellow); }
.type:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 2px; }
.lbl2 { font: 600 13.5px/1 var(--body); color: var(--muted); }
.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slot { position: relative; }
.slot span { display: inline-block; padding: 10px 14px; border-radius: 11px; border: 1px solid var(--rule); background: var(--bg); font-weight: 600; font-size: 15px; cursor: pointer; transition: background .2s, border-color .2s; }
.slot span:hover { border-color: var(--blue-text); }
.slot input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.slot input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.bsummary { position: sticky; top: 110px; padding: 26px; border-radius: 24px; background: linear-gradient(160deg, var(--blue), var(--navy)); color: #fff; display: grid; gap: 12px; }
.bsummary h3 { color: #fff; font-size: 24px; }
.bsummary dl { margin: 0 0 6px; display: grid; gap: 0; }
.bsummary dl div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.14); }
.bsummary dt { color: var(--on-dark-muted); font-size: 14px; }
.bsummary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.bsummary .btn { width: 100%; }
.bsummary .btn[aria-disabled="true"] { opacity: .45; }
.bsummary .fine { color: var(--on-dark-muted); font-size: 13.5px; }
.bsummary .fine a { color: #fff; font-weight: 600; }
@media (max-width: 980px) { .bsummary { position: static; } }

/* Booking page: progress, day cards, grouped times, meeting and language pickers */
.stepper { list-style: none; margin: 0; padding: 14px 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-radius: 20px; background: var(--paper); border: 1px solid var(--rule); position: relative; }
.stepper li { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; color: var(--muted); }
.stepper .sn { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--sky); color: var(--blue-text); font-weight: 700; font-size: 14px; transition: background .3s, color .3s; }
.stepper li.done { color: var(--ink); }
.stepper li.done .sn { background: var(--yellow); color: var(--on-yellow); font-size: 0; }
.stepper li.done .sn::after { content: "✓"; font-size: 15px; }
@media (max-width: 520px) { .stepper li { font-size: 13px; gap: 6px; } .stepper .sn { width: 26px; height: 26px; } }
.type:has(em.free) { padding-right: 62px; }
.type em.free { position: absolute; top: 10px; right: 10px; font-style: normal; font: 700 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 7px; background: var(--yellow); color: var(--on-yellow); }
.lbl2 small { font-weight: 500; color: var(--muted); }
.days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
/* Phones: one swipeable row of days. */
@media (max-width: 560px) { .days { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 66px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }
.day { position: relative; scroll-snap-align: start; }
.day input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; clip-path: inset(50%); }
.day > span { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--rule); background: var(--bg); cursor: pointer; transition: border-color .2s, background .2s, transform .25s var(--ease); }
.day > span:hover { border-color: var(--blue-text); transform: translateY(-2px); }
.day small { font: 600 12px/1 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.day b { font: 800 24px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.day em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.day input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 12px 24px -16px rgba(11,79,150,.8); }
.day input:checked + span small, .day input:checked + span em { color: #cfe0f6; }
.day input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.other-date { margin-top: 4px; }
.other-date summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--blue-text); width: fit-content; padding: 10px 0; }
.other-date .fld { margin-top: 10px; max-width: 260px; }
.slot-groups { display: grid; gap: 12px; }
.sg { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center; }
.sg-h { font: 700 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 520px) { .sg { grid-template-columns: 1fr; gap: 6px; } }
.picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .picks { grid-template-columns: 1fr; } }
.pick { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--rule); background: var(--bg); cursor: pointer; transition: border-color .2s, background .2s; }
.pick input, .chip-r input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; clip-path: inset(50%); }
.pick .ti { width: 42px; height: 42px; background: var(--sky); color: var(--blue-text); }
.pick b { display: block; } .pick small { color: var(--muted); font-size: 13.5px; }
.pick:hover { border-color: var(--blue-text); }
.pick:has(input:checked) { border-color: var(--blue); background: var(--sky); box-shadow: 0 0 0 2px var(--blue) inset; }
.pick:has(input:checked) .ti { background: var(--yellow); color: var(--on-yellow); }
.pick:has(input:focus-visible), .chip-r:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 2px; }
.chips-r { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-r { position: relative; }
.chip-r span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--bg); font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s; }
.chip-r span:hover { border-color: var(--blue-text); }
.chip-r input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.bs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bs-meter { width: 90px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.18); overflow: hidden; }
.bs-meter i { display: block; height: 100%; width: 33%; border-radius: 6px; background: var(--yellow); transition: width .5s var(--ease); }
.bsummary dt { display: flex; align-items: center; gap: 8px; }
.bsummary .si { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(255,255,255,.1); color: var(--yellow); }
.bs-done { padding: 12px 14px; border-radius: 14px; background: rgba(251,194,45,.16); border: 1px solid rgba(251,194,45,.45); font-size: 14.5px; color: #fff; }
.bs-next { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); }
.bs-next ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; color: var(--on-dark-muted); }
.bs-next b { color: #fff; font-weight: 600; }
.bs-trust { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14px; color: var(--on-dark-muted); }
.bs-trust span { display: inline-flex; align-items: center; gap: 8px; }
.bs-trust a { color: #fff; font-weight: 600; display: inline-block; padding: 8px 0; }

/* CTA */
.cta { position: relative; overflow: hidden; color: #fff; background: var(--navy); clip-path: inset(var(--ci, 0px) var(--ci, 0px) round 34px); }
/* The skyline sits along the bottom at (close to) its natural width so it is never
   blown up to fill the tall band, and its sky fades into the navy above. */
.cta-media { position: absolute; inset: -4% 0; background-repeat: no-repeat; background-position: center bottom; background-size: max(100%, 1100px) auto; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 50%); mask-image: linear-gradient(to bottom, transparent 0%, #000 50%); will-change: transform; }
.cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(4,20,43,.96) 0%, rgba(4,20,43,.82) 50%, rgba(4,20,43,.4) 100%); }
.cta-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(30px, 5vw, 64px); align-items: center; padding: clamp(48px, 7vw, 100px) max(18px, calc((100% - var(--wrap)) / 2 + 18px)); }
.cta .kicker { color: var(--yellow); }
.cta h2 { color: #fff; margin-top: 16px; font-size: clamp(38px, 5.4vw, 68px); }
.cta .lede { color: var(--on-dark-muted); margin-top: 16px; }
.consult { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 26px; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.consult .badge2 { flex: none; width: 52px; height: 52px; border-radius: 15px; background: var(--yellow); color: var(--on-yellow); display: grid; place-items: center; }
.consult b { display: block; font-size: 17px; }
.consult small { color: var(--on-dark-muted); font-size: 14px; }
.consult .btn { margin-left: auto; padding: 12px 18px; }
.mini { display: grid; gap: 8px; margin-top: 22px; color: var(--on-dark-muted); font-size: 15.5px; }
.mini div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mini b { color: #fff; font-weight: 600; }
.mini .copy { padding: 6px 10px; font-size: 12px; background: rgba(255,255,255,.12); color: #fff; }
@media (max-width: 900px) { .cta-in { grid-template-columns: 1fr; } }

/* Footer */
footer.site { padding-block: 56px 110px; color: var(--muted); font-size: 15px; }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-top: 36px; border-top: 1px solid var(--rule); }
.foot h4 { margin: 0 0 12px; font: 700 13px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.foot a { text-decoration: none; display: block; padding: 3px 0; }
.foot a:hover { color: var(--blue-text); }
.foot .brand { color: var(--blue-text); margin-bottom: 14px; display: inline-flex; }
.foot address { font-style: normal; }
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--sky); color: var(--blue-text); transition: background .25s, color .25s, transform .25s var(--ease); padding: 0; }
.social a:hover { background: var(--yellow); color: var(--on-yellow); transform: translateY(-3px); }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 30px; font-size: 14px; }
@media (max-width: 900px) { .foot { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot { grid-template-columns: 1fr; } }

/* Floating UI */
.progress { position: fixed; z-index: 31; top: env(safe-area-inset-top, 0px); left: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--blue-2), var(--yellow)); transform-origin: left; transform: scaleX(var(--sp, 0)); }
.totop { position: fixed; z-index: 15; right: max(16px, calc(env(safe-area-inset-right, 0px) + 16px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); width: 52px; height: 52px; border-radius: 16px; border: 0; background: var(--yellow); color: var(--on-yellow); cursor: pointer; display: grid; place-items: center; box-shadow: 0 14px 30px -14px rgba(0,0,0,.5); transform: translateY(160%); transition: transform .4s var(--ease); }
.totop.show { transform: none; }
.wa-float { position: fixed; z-index: 15; left: max(16px, calc(env(safe-area-inset-left, 0px) + 16px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 12px; border-radius: 999px; background: #25d366; color: #052e1c; text-decoration: none; font: 700 15px/1 var(--body); box-shadow: 0 14px 30px -12px rgba(37,211,102,.8); transition: transform .3s var(--ease); }
.wa-float:hover { transform: translateY(-3px) scale(1.03); }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 999px; animation: waPulse 2.4s infinite; }
@keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.6); } 70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
.book-float { position: fixed; z-index: 15; left: max(16px, calc(env(safe-area-inset-left, 0px) + 16px)); right: calc(max(16px, env(safe-area-inset-right, 0px)) + 66px); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); transform: translateY(160%); transition: transform .5s var(--ease); }
.book-float.show { transform: none; }
@media (min-width: 1121px) { .book-float { display: none; } }
/* The labelled pill needs a wide side margin; on narrower screens it shrinks to a round icon so it doesn't cover page text. */
@media (max-width: 1599px) { .wa-float span { display: none; } .wa-float { padding: 13px; } }
@media (max-width: 1120px) { .wa-float span { display: none; } .wa-float { padding: 13px; left: auto; right: max(16px, calc(env(safe-area-inset-right, 0px) + 16px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv.pre, .js .ev.pre { transform: none; opacity: 1; }
  .js .split.pre .sw { transform: none; opacity: 1; }
  .js .scrub .sw { color: #dbe7f7; }
  .js .bigstars .f { clip-path: none; }
}