/* =========================================================================
   Call Paul Contracting Inc. — Edmonton Electrical & Smart Energy Solutions
   Design system. Brand pulled from the business card: vertical blue gradient
   (electric blue -> deep navy/indigo) on white, futuristic wordmark.
   ========================================================================= */

:root{
  /* Brand blues (sampled from the card) */
  --blue:      #2A7DE1;   /* card top — bright electric blue (primary accent) */
  --blue-bright:#3DA0FF;  /* glow / hover energy */
  --royal:     #1C45B5;   /* card mid */
  --indigo:    #141A5C;   /* card bottom — deep navy-indigo */
  --navy-900:  #0B1030;   /* deepest background */
  --navy-800:  #0F1640;   /* dark section bg */
  --navy-700:  #16205C;   /* raised dark card */

  --white:     #FFFFFF;
  --mist:      #F4F7FB;   /* light section bg */
  --cloud:     #EAF0FA;   /* tinted light card */
  --ink:       #0E1430;   /* text on light */
  --slate:     #54608A;   /* muted text on light */
  --line:      #E2E8F4;   /* hairline on light */
  --line-dk:   rgba(255,255,255,.12);
  --gold:      #E9B949;   /* Bespoke stamp only */

  /* The card gradient */
  --grad: linear-gradient(157deg, #2A7DE1 0%, #1C45B5 46%, #141A5C 100%);
  --grad-soft: linear-gradient(157deg, #2E84EC 0%, #1C45B5 55%, #10164A 100%);

  --maxw: 1200px;
  --ease: cubic-bezier(.16,1,.3,1);
  --radius: 18px;
  --shadow-sm: 0 2px 8px rgba(15,22,64,.06);
  --shadow:    0 18px 50px rgba(15,22,64,.14);
  --shadow-blue: 0 16px 40px rgba(28,69,181,.35);

  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mark: "Audiowide", "Sora", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.08; margin:0; letter-spacing:-.02em; font-weight:700; }
p{ margin:0; }
ul{ margin:0; }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.section{ padding:88px 0; position:relative; }
@media (max-width:760px){ .section{ padding:60px 0; } }

/* skip link */
.skip{ position:absolute; left:-999px; top:0; background:var(--royal); color:#fff; padding:10px 16px; border-radius:0 0 10px 0; z-index:1000; }
.skip:focus{ left:0; }

/* focus ring */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--blue-bright); outline-offset:2px; border-radius:6px;
}

/* ---------- Typographic helpers ---------- */
.eyebrow{
  font-family:var(--font-display); font-weight:600; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--royal);
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow.on-dark{ color:#9FC2FF; }
.eyebrow::before{ content:""; width:26px; height:2px; background:currentColor; border-radius:2px; opacity:.7; }
.h-xl{ font-size:clamp(2.1rem,5.6vw,3.75rem); }
.h-lg{ font-size:clamp(1.8rem,4vw,2.8rem); }
.h-md{ font-size:clamp(1.4rem,2.6vw,1.9rem); }
.lead{ font-size:clamp(1.02rem,1.4vw,1.18rem); color:var(--slate); }
.on-dark .lead, .lead.on-dark{ color:#C3CCE8; }
.accent-word{ background:var(--grad-soft); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* On dark/blue backgrounds the accent must be light to stay legible */
.hero .accent-word, .phero .accent-word, .on-dark .accent-word, .cta .accent-word{
  background:linear-gradient(110deg,#A8D4FF 0%,#FFFFFF 60%); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.text-balance{ text-wrap:balance; }
.text-pretty{ text-wrap:pretty; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:.97rem;
  padding:14px 24px; border-radius:999px; cursor:pointer; border:2px solid transparent;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .2s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{ background:var(--grad); color:#fff; box-shadow:var(--shadow-blue); }
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 22px 50px rgba(42,125,225,.5); }
.btn-ghost{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.12); transform:translateY(-3px); border-color:#fff; }
.btn-ghost-dark{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-ghost-dark:hover{ border-color:var(--royal); color:var(--royal); transform:translateY(-3px); }
.btn-lg{ padding:16px 30px; font-size:1.03rem; }
.btn-block{ width:100%; }

/* ---------- Logo lockup ---------- */
.logo{ display:inline-flex; align-items:center; gap:12px; }
.logo-mark{
  width:42px; height:42px; border-radius:11px; background:var(--grad);
  display:grid; place-items:center; box-shadow:0 6px 16px rgba(28,69,181,.35);
  flex:none;
}
.logo-mark svg{ width:23px; height:23px; }
.logo-text{ display:flex; flex-direction:column; line-height:1; }
.logo-l1{ font-family:var(--font-mark); font-size:1.05rem; letter-spacing:.02em; color:var(--ink); }
.logo-l2{ font-family:var(--font-display); font-weight:600; font-size:.6rem; letter-spacing:.28em; color:var(--slate); margin-top:4px; text-transform:uppercase; }
.on-dark .logo-l1, .logo.on-dark .logo-l1{ color:#fff; }
.on-dark .logo-l2, .logo.on-dark .logo-l2{ color:#9FB2DD; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:900; height:74px;
  display:flex; align-items:center;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease);
}
.nav.scrolled{ background:rgba(255,255,255,.86); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line), 0 10px 30px rgba(15,22,64,.06); height:66px; }
.nav .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.nav-links{ display:flex; align-items:center; gap:6px; list-style:none; padding:0; margin:0; }
.nav-links a{
  font-family:var(--font-display); font-weight:500; font-size:.95rem; color:var(--ink);
  padding:9px 14px; border-radius:9px; position:relative; transition:color .2s;
}
.nav-links a::after{ content:""; position:absolute; left:14px; right:14px; bottom:5px; height:2px; background:var(--grad); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-links a[aria-current="page"]{ color:var(--royal); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-phone{ font-family:var(--font-display); font-weight:600; font-size:.95rem; color:var(--ink); display:inline-flex; align-items:center; gap:8px; }
.nav-phone svg{ width:17px; height:17px; color:var(--royal); }
.nav-phone span{ border-bottom:2px solid transparent; transition:border-color .2s; }
.nav-phone:hover span{ border-color:var(--blue); }

/* Pre-scroll (over hero) nav is on dark */
.nav:not(.scrolled) .nav-links a{ color:#E8EEFB; }
.nav:not(.scrolled) .nav-links a[aria-current="page"]{ color:#fff; }
.nav:not(.scrolled) .logo-l1{ color:#fff; }
.nav:not(.scrolled) .logo-l2{ color:#A9BEE6; }
.nav:not(.scrolled) .nav-phone{ color:#fff; }
.nav:not(.scrolled) .nav-phone svg{ color:#9FC2FF; }
.nav:not(.scrolled) .nav-toggle span{ background:#fff; }

.nav-toggle{ display:none; width:46px; height:46px; border:none; background:transparent; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav-toggle span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:950; background:var(--navy-900);
  display:flex; flex-direction:column; padding:90px 28px 36px;
  transform:translateX(100%); transition:transform .4s var(--ease); visibility:hidden;
}
.drawer.open{ transform:translateX(0); visibility:visible; }
.drawer a{ font-family:var(--font-display); color:#fff; font-size:1.5rem; font-weight:600; padding:16px 0; border-bottom:1px solid var(--line-dk); }
.drawer .btn{ margin-top:24px; }
.drawer-meta{ margin-top:auto; color:#9FB2DD; font-size:.95rem; }
.drawer-close{ position:absolute; top:22px; right:24px; width:44px; height:44px; border:none; background:rgba(255,255,255,.08); color:#fff; border-radius:12px; font-size:1.5rem; cursor:pointer; }

/* ---------- HERO (centered gradient) ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff; overflow:hidden; background:var(--navy-900);
  padding:120px 0 80px;
}
.hero-bg{ position:absolute; inset:0; background:var(--grad); }
.hero-bg::after{ /* deep vignette to seat content */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 0%, rgba(61,160,255,.35), transparent 55%),
             radial-gradient(100% 80% at 50% 120%, rgba(8,11,40,.85), transparent 60%);
}
.hero-grid{ position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(circle at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 30%, transparent 78%);
}
.hero-glow{ position:absolute; border-radius:50%; filter:blur(60px); pointer-events:none; }
.hero-glow.g1{ width:520px; height:520px; background:rgba(61,160,255,.28); top:-160px; left:-120px; animation:float1 14s var(--ease) infinite alternate; }
.hero-glow.g2{ width:440px; height:440px; background:rgba(42,125,225,.22); bottom:-160px; right:-100px; animation:float2 16s var(--ease) infinite alternate; }
@keyframes float1{ to{ transform:translate(60px,40px); } }
@keyframes float2{ to{ transform:translate(-50px,-30px); } }
.hero-spark{ position:absolute; width:6px; height:6px; border-radius:50%; background:#bfe0ff; box-shadow:0 0 12px 2px rgba(120,190,255,.9); opacity:.0; animation:spark 6s linear infinite; }
@keyframes spark{ 0%{opacity:0; transform:translateY(10px) scale(.5);} 25%{opacity:.9;} 50%{opacity:.2;} 100%{opacity:0; transform:translateY(-26px) scale(1);} }

.hero-inner{ position:relative; z-index:3; max-width:880px; padding-inline:24px; }
.hero .logo-hero{ display:inline-flex; flex-direction:column; align-items:center; gap:0; margin-bottom:22px; }
.hero .wm1{ font-family:var(--font-mark); font-size:clamp(2.2rem,7vw,4.4rem); color:#fff; letter-spacing:.01em; text-shadow:0 3px 24px rgba(8,12,45,.5); line-height:.95; }
.hero .wm2{ font-family:var(--font-display); font-weight:600; letter-spacing:.42em; font-size:clamp(.7rem,1.7vw,1rem); color:#CFE0FF; margin-top:12px; text-transform:uppercase; padding-left:.42em; }
.hero h1{ font-size:clamp(1.5rem,3.6vw,2.5rem); margin:18px auto 0; max-width:18ch; font-weight:600; }
.hero .lead{ color:#D6E2FB; margin:18px auto 0; max-width:60ch; }
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.hero-trust{ display:flex; gap:10px 26px; justify-content:center; flex-wrap:wrap; margin-top:34px; color:#C7D5F2; font-size:.92rem; }
.hero-trust span{ display:inline-flex; align-items:center; gap:8px; }
.hero-trust svg{ width:16px; height:16px; color:#7FB2FF; }
.stars{ color:#FFCB3D; letter-spacing:1px; }

/* badge chip */
.chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#EAF1FF;
  font-family:var(--font-display); font-weight:600; font-size:.8rem; letter-spacing:.04em; backdrop-filter:blur(6px); }
.chip svg{ width:16px; height:16px; color:#9FD0FF; }

.scroll-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; color:rgba(255,255,255,.7); display:grid; place-items:center; gap:6px; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; }
.scroll-cue .mouse{ width:22px; height:36px; border:2px solid rgba(255,255,255,.5); border-radius:12px; position:relative; }
.scroll-cue .mouse::after{ content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; background:#fff; border-radius:2px; transform:translateX(-50%); animation:wheel 1.6s infinite; }
@keyframes wheel{ 0%{opacity:1; top:7px;} 70%{opacity:0; top:16px;} 100%{opacity:0;} }

/* ---------- Section heading ---------- */
.sec-head{ max-width:680px; margin-bottom:48px; }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head .eyebrow{ margin-bottom:16px; }
.sec-head p{ margin-top:16px; }

/* ---------- Credential strip ---------- */
.creds{ background:var(--navy-900); color:#fff; }
.creds-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.cred{ text-align:center; padding:14px; }
.cred .num{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,4vw,2.7rem); background:linear-gradient(120deg,#7FB2FF,#fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cred .lbl{ color:#AFC0E6; font-size:.92rem; margin-top:6px; }
@media (max-width:760px){ .creds-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } }

/* ---------- Services grid ---------- */
.svc-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.svc-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
  display:flex; flex-direction:column; height:100%;
}
.svc-card::before{ content:""; position:absolute; inset:0; border-radius:var(--radius); padding:1.5px;
  background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s; pointer-events:none; }
.svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.svc-card:hover::before{ opacity:1; }
.svc-num{ font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--blue); letter-spacing:.1em; }
.svc-ico{ width:54px; height:54px; border-radius:14px; background:var(--cloud); display:grid; place-items:center; margin:14px 0 16px; transition:background .35s; }
.svc-ico svg{ width:27px; height:27px; color:var(--royal); }
.svc-card:hover .svc-ico{ background:var(--grad); }
.svc-card:hover .svc-ico svg{ color:#fff; }
.svc-card h3{ font-size:1.18rem; }
.svc-card p{ color:var(--slate); font-size:.96rem; margin-top:9px; flex:1; }
.svc-card .more{ margin-top:16px; font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--royal); display:inline-flex; align-items:center; gap:7px; }
.svc-card .more svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.svc-card:hover .more svg{ transform:translateX(4px); }
.svc-card.feature{ background:var(--grad); border-color:transparent; color:#fff; }
.svc-card.feature .svc-num{ color:#BCD7FF; }
.svc-card.feature .svc-ico{ background:rgba(255,255,255,.16); }
.svc-card.feature .svc-ico svg{ color:#fff; }
.svc-card.feature p{ color:#D7E3FB; }
.svc-card.feature .more{ color:#fff; }
.svc-card.feature::before{ display:none; }
.svc-card.feature .tag{ position:absolute; top:18px; right:18px; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; background:rgba(255,255,255,.18); padding:5px 10px; border-radius:999px; font-family:var(--font-display); font-weight:600; }

@media (max-width:980px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){
  .svc-grid{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:-24px; padding:4px 24px 16px; }
  .svc-grid::-webkit-scrollbar{ display:none; }
  .svc-card{ flex:0 0 80%; scroll-snap-align:start; }
}

/* ---------- Why-us split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.split-media{ position:relative; border-radius:24px; overflow:hidden; box-shadow:var(--shadow); }
.split-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.split-badge{
  position:absolute; left:22px; bottom:22px; background:rgba(11,16,48,.78); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18); color:#fff; padding:16px 20px; border-radius:16px; max-width:230px;
}
.split-badge .big{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:#9FD0FF; }
.split-badge .sm{ font-size:.82rem; color:#CcD6F0; margin-top:2px; }
.checklist{ list-style:none; padding:0; margin:22px 0 28px; display:grid; gap:14px; }
.checklist li{ display:flex; gap:13px; align-items:flex-start; font-size:1.02rem; }
.checklist .ck{ flex:none; width:25px; height:25px; border-radius:50%; background:var(--grad); display:grid; place-items:center; margin-top:2px; }
.checklist .ck svg{ width:14px; height:14px; color:#fff; }
.checklist b{ font-weight:600; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; gap:34px; } .split-media img{ aspect-ratio:16/11; } }

/* ---------- Portfolio ---------- */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.work-card{ position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-sm); }
.work-card img{ width:100%; height:340px; object-fit:cover; transition:transform .6s var(--ease); }
.work-card:hover img{ transform:scale(1.06); }
.work-card figcaption{ position:absolute; inset:auto 0 0 0; padding:46px 20px 18px; color:#fff;
  background:linear-gradient(transparent, rgba(8,11,40,.86)); font-family:var(--font-display); }
.work-card figcaption .t{ font-weight:600; font-size:1.04rem; }
.work-card figcaption .s{ font-size:.84rem; color:#BCD0F2; font-weight:400; }
@media (max-width:880px){ .work-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .work-grid{ grid-template-columns:1fr; } .work-card img{ height:280px; } }

/* ---------- Testimonials ---------- */
.reviews{ background:var(--mist); }
.rev-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:40px; }
.gbadge{ display:inline-flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 20px; box-shadow:var(--shadow-sm); }
.gbadge .g{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
.gbadge .score{ font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:var(--ink); line-height:1; }
.gbadge .sub{ font-size:.82rem; color:var(--slate); }
.rev-grid{ columns:3; column-gap:20px; }
.rev-card{ break-inside:avoid; background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; margin-bottom:20px; box-shadow:var(--shadow-sm); }
.rev-stars{ color:#FFB400; letter-spacing:2px; font-size:1rem; }
.rev-card p{ margin:12px 0 16px; color:#26304F; font-size:.98rem; }
.rev-who{ display:flex; align-items:center; gap:12px; }
.rev-av{ width:40px; height:40px; border-radius:50%; background:var(--grad); display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:700; }
.rev-name{ font-family:var(--font-display); font-weight:600; font-size:.95rem; }
.rev-src{ font-size:.78rem; color:var(--slate); display:flex; align-items:center; gap:5px; }
@media (max-width:980px){ .rev-grid{ columns:2; } }
@media (max-width:640px){ .rev-grid{ columns:1; } }

/* ---------- FAQ ---------- */
.faq-wrap{ max-width:820px; margin-inline:auto; }
.faq{ border-bottom:1px solid var(--line); }
.faq button{ width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:22px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family:var(--font-display); font-weight:600; font-size:1.08rem; color:var(--ink); }
.faq .ic{ flex:none; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; transition:.3s var(--ease); position:relative; }
.faq .ic::before,.faq .ic::after{ content:""; position:absolute; background:var(--royal); border-radius:2px; }
.faq .ic::before{ width:13px; height:2px; }
.faq .ic::after{ width:2px; height:13px; transition:transform .3s var(--ease); }
.faq[aria-expanded="true"] .ic{ background:var(--grad); border-color:transparent; }
.faq[aria-expanded="true"] .ic::before,.faq[aria-expanded="true"] .ic::after{ background:#fff; }
.faq[aria-expanded="true"] .ic::after{ transform:rotate(90deg); }
.faq-body{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.faq-body p{ padding:0 4px 24px; color:var(--slate); max-width:70ch; }

/* ---------- CTA band ---------- */
.cta{ position:relative; overflow:hidden; background:var(--grad); color:#fff; border-radius:28px; padding:64px 40px; text-align:center; }
.cta::after{ content:""; position:absolute; inset:0; background:radial-gradient(80% 120% at 50% -10%, rgba(120,190,255,.35), transparent 60%); }
.cta-inner{ position:relative; z-index:2; max-width:640px; margin-inline:auto; }
.cta h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); }
.cta p{ color:#D6E2FB; margin:14px auto 28px; }
.cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta .btn-primary{ background:#fff; color:var(--royal); }
.cta .btn-primary:hover{ background:#fff; box-shadow:0 22px 50px rgba(0,0,0,.25); }
@media (max-width:600px){ .cta{ padding:48px 22px; } }

/* ---------- Footer ---------- */
.footer{ background:var(--navy-900); color:#C3CFE9; padding:64px 0 28px; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:40px; }
.footer h4{ font-family:var(--font-display); color:#fff; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px; }
.foot-links{ list-style:none; padding:0; display:grid; gap:11px; }
.foot-links a{ color:#AFC0E6; font-size:.95rem; transition:color .2s; }
.foot-links a:hover{ color:#fff; }
.foot-brand p{ color:#9FB0D6; font-size:.95rem; margin-top:16px; max-width:34ch; }
.foot-contact{ display:grid; gap:12px; }
.foot-contact a, .foot-contact span{ display:flex; gap:11px; align-items:flex-start; color:#C3CFE9; font-size:.95rem; }
.foot-contact svg{ width:18px; height:18px; color:#7FB2FF; flex:none; margin-top:2px; }
.social{ display:flex; gap:12px; margin-top:18px; }
.social a{ width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.07); display:grid; place-items:center; transition:.3s var(--ease); }
.social a:hover{ background:var(--grad); transform:translateY(-3px); }
.social svg{ width:19px; height:19px; color:#fff; }
.foot-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line-dk); display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.86rem; color:#8A9BC4; }
.foot-legal{ display:flex; gap:18px; flex-wrap:wrap; }
.bespoke{ display:inline-flex; align-items:center; gap:9px; color:#9FB0D6; transition:color .2s; }
.bespoke:hover{ color:#fff; }
.bespoke .b{ width:24px; height:24px; border-radius:7px; background:linear-gradient(135deg,#E9B949,#C8902a); display:grid; place-items:center; color:#1a1300; font-family:var(--font-display); font-weight:700; font-size:.92rem; }
@media (max-width:880px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:30px; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }

/* ---------- Page hero (interior pages) ---------- */
.phero{ position:relative; background:var(--navy-900); color:#fff; padding:140px 0 70px; overflow:hidden; text-align:center; }
.phero .hero-bg{ background:var(--grad); }
.phero-inner{ position:relative; z-index:3; max-width:760px; margin-inline:auto; padding-inline:24px; }
.phero h1{ font-size:clamp(2rem,5vw,3.2rem); margin-top:14px; }
.phero p{ color:#D6E2FB; margin:16px auto 0; max-width:60ch; }
.crumbs{ font-size:.84rem; color:#A9C0EC; }
.crumbs a:hover{ color:#fff; }

/* ---------- Services detail ---------- */
.svc-detail{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; padding:46px 0; border-bottom:1px solid var(--line); scroll-margin-top:90px; }
.svc-detail:nth-child(even) .svc-detail-media{ order:2; }
.svc-detail-media{ border-radius:22px; overflow:hidden; box-shadow:var(--shadow); }
.svc-detail-media img{ width:100%; aspect-ratio:5/4; object-fit:cover; }
.svc-detail .svc-ico{ margin:0 0 18px; }
.svc-detail h2{ font-size:clamp(1.5rem,3vw,2.1rem); }
.svc-detail .lead{ margin:14px 0 18px; }
.feat-list{ list-style:none; padding:0; display:grid; gap:11px; }
.feat-list li{ display:flex; gap:11px; align-items:flex-start; color:#2a3454; }
.feat-list .ck{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--cloud); display:grid; place-items:center; margin-top:2px; }
.feat-list .ck svg{ width:13px; height:13px; color:var(--royal); }
@media (max-width:860px){ .svc-detail{ grid-template-columns:1fr; gap:26px; } .svc-detail:nth-child(even) .svc-detail-media{ order:0; } }

/* placeholder media (gradient) when no photo */
.media-grad{ background:var(--grad); position:relative; display:grid; place-items:center; aspect-ratio:5/4; }
.media-grad svg{ width:34%; height:34%; color:rgba(255,255,255,.85); }
.media-grad::after{ content:""; position:absolute; inset:0; background:radial-gradient(70% 70% at 30% 20%, rgba(255,255,255,.16), transparent 60%); }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start; }
.form-card{ background:#fff; border:1px solid var(--line); border-radius:24px; padding:34px; box-shadow:var(--shadow); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--font-display); font-weight:600; font-size:.86rem; margin-bottom:7px; color:var(--ink); }
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--line); border-radius:12px; font-family:var(--font-body);
  font-size:1rem; color:var(--ink); background:#fff; transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(42,125,225,.14); }
.field textarea{ resize:vertical; min-height:120px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note{ font-size:.82rem; color:var(--slate); margin-top:6px; }
.form-status{ margin-top:14px; padding:13px 16px; border-radius:12px; font-size:.95rem; display:none; }
.form-status.ok{ display:block; background:#E9F8EF; color:#1b7a44; border:1px solid #BfE8CF; }
.form-status.err{ display:block; background:#FDECEC; color:#b3261e; border:1px solid #F5C6C6; }
.info-card{ background:var(--navy-900); color:#fff; border-radius:24px; padding:32px; }
.info-card h3{ color:#fff; }
.info-list{ display:grid; gap:18px; margin-top:22px; }
.info-list a, .info-list div{ display:flex; gap:14px; align-items:flex-start; color:#D3DEF5; }
.info-list .ic{ flex:none; width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.08); display:grid; place-items:center; }
.info-list .ic svg{ width:19px; height:19px; color:#9FC2FF; }
.info-list .k{ font-family:var(--font-display); font-weight:600; color:#fff; font-size:.95rem; }
.info-list .v{ font-size:.92rem; color:#AFC0E6; }
.map-embed{ margin-top:26px; border-radius:18px; overflow:hidden; border:1px solid var(--line); }
.map-embed iframe{ width:100%; height:300px; border:0; display:block; filter:grayscale(.2); }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:28px; } .field-row{ grid-template-columns:1fr; } }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .hero-glow,.hero-spark,.scroll-cue .mouse::after{ animation:none !important; }
}

/* utility */
.center{ text-align:center; }
.mt-s{ margin-top:14px; } .mt-m{ margin-top:26px; }
.nowrap{ white-space:nowrap; }
.hide-mobile{ }
@media (max-width:860px){
  .nav-links, .nav-phone.desk, .nav-quote{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (min-width:861px){ .drawer{ display:none; } }