/* ==========================================================================
   Russell Electrical — design system
   Palette: white (bg) · black (structure) · orange (accent, from logo)
   Display: Archivo  ·  Body: Inter  ·  Signature: rotated "diamond" node
   ========================================================================== */

:root {
  /* Colour */
  --white:      #ffffff;
  --paper:      #f6f6f7;
  --paper-2:    #efeff1;
  --ink:        #161616;   /* near-black — headings, from logo */
  --body:       #3f3f46;   /* body text */
  --muted:      #6c6c74;   /* captions, meta */
  --line:       #e7e7ea;   /* hairlines, borders */
  --orange:     #f47c20;   /* accent, from logo bolt */
  --orange-deep:#e0561b;   /* gradient end, from logo wordmark */
  --orange-tint:#fff3ea;   /* soft orange wash */
  --black-bg:   #141414;   /* hero / footer ground */
  --black-bg-2: #1d1d1f;

  --grad: linear-gradient(95deg, #f9912f 0%, #e0561b 100%);

  /* Type */
  --display: "Archivo", system-ui, sans-serif;
  --body-font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.12vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.36rem + 0.7vw, 2rem);
  --step-3:  clamp(2rem, 1.7rem + 1.5vw, 3rem);
  --step-4:  clamp(2.6rem, 2rem + 3vw, 4.4rem);

  /* Space + structure */
  --wrap: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(20,20,20,.06), 0 2px 8px rgba(20,20,20,.04);
  --shadow-md: 0 10px 30px rgba(20,20,20,.10);
  --shadow-lg: 0 24px 60px rgba(20,20,20,.16);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body {
  font-family: var(--body-font);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width:100%; display:block; height:auto; }
a { color: inherit; }
ul { list-style: none; padding:0; }
h1,h2,h3,h4 { font-family: var(--display); color: var(--ink); line-height: 1.06; font-weight: 800; letter-spacing:-.01em; }

/* ---------- Layout helpers ---------- */
.wrap { width: min(var(--wrap), 100% - var(--gutter)*2); margin-inline: auto; }
.section { padding: clamp(3.4rem, 7vw, 6rem) 0; }
.section--tight { padding: clamp(2.4rem, 5vw, 3.6rem) 0; }
.bg-paper { background: var(--paper); }
.bg-ink { background: var(--black-bg); color: #d8d8da; }
.center { text-align:center; }
.lede { font-size: var(--step-1); color: var(--body); font-weight:400; line-height:1.5; }
.bg-ink .lede { color:#bdbdc2; }
.mx-auto-prose { max-width: 65ch; }

/* Skip link */
.skip { position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1.1rem; z-index:200; border-radius:0 0 8px 0; }
.skip:focus { left:0; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 3px; }

/* ---------- Signature: diamond node ---------- */
.diamond { display:inline-block; width:.7em; height:.7em; background: var(--grad); transform: rotate(45deg); border-radius:2px; flex:none; }

/* Eyebrow label */
.eyebrow {
  display:inline-flex; align-items:center; gap:.6rem;
  font-family: var(--display); font-weight:700;
  font-size: var(--step--1); letter-spacing:.16em; text-transform:uppercase;
  color: var(--orange-deep);
}
.bg-ink .eyebrow { color: var(--orange); }
.eyebrow::before { content:""; width:.55rem; height:.55rem; background:var(--grad); transform:rotate(45deg); border-radius:1px; }

/* Headings rhythm */
.h-xl { font-size: var(--step-4); letter-spacing:-.022em; }
.h-lg { font-size: var(--step-3); letter-spacing:-.018em; }
.h-md { font-size: var(--step-2); }
.h-sm { font-size: var(--step-1); }
.accent { background: var(--grad); -webkit-background-clip:text; background-clip:text; color: transparent; }

.section-head { max-width: 64ch; }
.section-head.center { margin-inline:auto; }
.section-head h2 { margin:.7rem 0 .6rem; }
.section-head p { color: var(--muted); font-size: var(--step-1); }
.bg-ink .section-head p { color:#a9a9b0; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink); --fg:#fff; --bd: var(--ink);
  display:inline-flex; align-items:center; gap:.55rem;
  font-family: var(--display); font-weight:700; font-size: var(--step-0);
  letter-spacing:.005em; line-height:1;
  padding: .92rem 1.35rem; border-radius: 10px;
  background: var(--bg); color: var(--fg); border:1.5px solid var(--bd);
  text-decoration:none; cursor:pointer;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn--primary { --bg: var(--orange-deep); --bd: var(--orange-deep); background: var(--grad); }
.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--line); }
.bg-ink .btn--ghost { --fg:#fff; --bd:#3a3a3e; }
.btn--ghost:hover { --bd: var(--ink); }
.bg-ink .btn--ghost:hover { --bd:#fff; }
.btn--lg { padding: 1.05rem 1.7rem; font-size: var(--step-1); }
.btn svg { width:1.05em; height:1.05em; }
.btn-row { display:flex; flex-wrap:wrap; gap:.8rem; }

/* ---------- Utility / top bar ---------- */
.topbar { background: var(--ink); color:#cfcfd4; font-size: var(--step--1); }
.topbar__in { display:flex; align-items:center; justify-content:center; gap:1rem; padding:.5rem 0; flex-wrap:wrap; }
.topbar a { color:#fff; text-decoration:none; font-weight:600; }
.topbar__contact { display:inline-flex; gap:1.2rem; align-items:center; flex-wrap:wrap; justify-content:center; }
.topbar__loc { display:inline-flex; align-items:center; gap:.4rem; color:#fff; font-weight:600; }
.topbar__contact a { display:inline-flex; align-items:center; gap:.4rem; }
.topbar svg { width:.95em; height:.95em; color: var(--orange); }
@media (max-width: 560px){
  .topbar { font-size:.72rem; }
  .topbar__contact { gap:.55rem .85rem; }
}

/* ---------- Header / nav ---------- */
.site-header { position: sticky; top:0; z-index:100; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
.nav { display:flex; align-items:center; justify-content:flex-start; gap:1rem; padding:.7rem 0; }
.brand { display:inline-flex; align-items:center; }
.brand img { height: 46px; width:auto; }
.nav__links { display:flex; align-items:center; gap:.3rem; margin-left:1.5rem; }
.nav__links a { font-family: var(--display); font-weight:600; font-size:.97rem; color: var(--ink); text-decoration:none; padding:.5rem .7rem; border-radius:8px; position:relative; }
.nav__links a:hover { background: var(--paper); }
.nav__links a[aria-current="page"] { color: var(--orange-deep); }
.nav__links a[aria-current="page"]::after { content:""; position:absolute; left:.7rem; right:.7rem; bottom:.28rem; height:2px; background: var(--grad); border-radius:2px; }
.nav__cta { display:flex; align-items:center; gap:.6rem; margin-left:auto; }
.nav__cta .btn { padding:.7rem 1.1rem; }
.nav-toggle { display:none; }

@media (max-width: 960px){
  .nav__cta .btn--ghost { display:none; }
}
@media (max-width: 880px){
  .nav-toggle {
    display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:46px; border:1.5px solid var(--line); background:#fff; border-radius:10px; cursor:pointer; order:3;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content:""; display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.25s var(--ease); position:relative; }
  .nav-toggle span::before { position:absolute; top:-6px; } .nav-toggle span::after { position:absolute; top:6px; }
  .nav-toggle[aria-expanded="true"] span { background:transparent; }
  .nav-toggle[aria-expanded="true"] span::before { top:0; transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after { top:0; transform:rotate(-45deg); }
  /* Horizontal links hide on mobile; the full-screen overlay takes over. */
  .nav__links { display:none; }
}

/* ---------- Mobile menu: full-screen takeover ---------- */
.mobile-menu { display:none; }
@media (max-width: 880px){
  .mobile-menu {
    display:flex; flex-direction:column;
    position:fixed; inset:0; z-index:400;
    padding: 1rem clamp(1.2rem,5vw,1.8rem) calc(1.4rem + env(safe-area-inset-bottom));
    background:
      radial-gradient(120% 80% at 100% 0%, rgba(244,124,32,.22), transparent 55%),
      linear-gradient(165deg, #1c1c1f 0%, #111113 100%);
    overflow-y:auto;
    opacity:0; visibility:hidden; transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .3s;
  }
  /* faint diamond-grid texture */
  .mobile-menu::before {
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
    background-image:
      linear-gradient(45deg, rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(-45deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:42px 42px;
    -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);
            mask-image:linear-gradient(180deg,#000,transparent 75%);
  }
  .mobile-menu.open { opacity:1; visibility:visible; transform:none; }
  .mobile-menu > * { position:relative; z-index:1; }

  .mm-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
  .mm-brand img { height:32px; width:auto; }
  .mm-close {
    width:46px; height:46px; flex:none; display:grid; place-items:center;
    border-radius:12px; border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06);
    color:#fff; cursor:pointer; transition:border-color .2s, background .2s, transform .2s var(--ease);
  }
  .mm-close:hover, .mm-close:focus-visible { border-color:var(--orange); background:rgba(244,124,32,.14); transform:rotate(90deg); }
  .mm-close svg { width:22px; height:22px; }

  .mm-nav { display:flex; flex-direction:column; margin-top: clamp(1.2rem,4vw,2.2rem); }
  .mm-nav a {
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding: clamp(.85rem,3.2vw,1.15rem) 0;
    font-family:var(--display); font-weight:800; letter-spacing:-.01em;
    font-size: clamp(1.55rem,7.5vw,2.1rem); line-height:1.05;
    color:#fff; text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.09);
    /* staggered reveal */
    opacity:0; transform: translateY(14px);
    transition: color .2s, opacity .45s var(--ease), transform .45s var(--ease);
  }
  .mm-nav a .mm-arrow { width:1.1em; height:1.1em; color:rgba(255,255,255,.25); transition: color .2s, transform .25s var(--ease); flex:none; }
  .mm-nav a:hover { color:var(--orange); }
  .mm-nav a:hover .mm-arrow { color:var(--orange); transform: translateX(4px); }
  .mm-nav a[aria-current="page"] { color:var(--orange); }
  .mm-nav a[aria-current="page"] .mm-arrow { color:var(--orange); }
  .mobile-menu.open .mm-nav a { opacity:1; transform:none; }
  .mobile-menu.open .mm-nav a:nth-child(1){ transition-delay:.08s; }
  .mobile-menu.open .mm-nav a:nth-child(2){ transition-delay:.13s; }
  .mobile-menu.open .mm-nav a:nth-child(3){ transition-delay:.18s; }
  .mobile-menu.open .mm-nav a:nth-child(4){ transition-delay:.23s; }
  .mobile-menu.open .mm-nav a:nth-child(5){ transition-delay:.28s; }

  .mm-foot { margin-top:auto; padding-top: clamp(1.4rem,5vw,2rem); display:grid; gap:1rem;
    opacity:0; transform: translateY(14px); transition: opacity .5s var(--ease) .3s, transform .5s var(--ease) .3s; }
  .mobile-menu.open .mm-foot { opacity:1; transform:none; }
  .mm-foot .mm-cta { width:100%; justify-content:center; }
  .mm-contact { display:flex; gap:.7rem; }
  .mm-contact a {
    flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.85rem 1rem; border-radius:11px; text-decoration:none;
    font-family:var(--display); font-weight:700; font-size:.98rem;
    border:1.5px solid rgba(255,255,255,.18); color:#fff; background:rgba(255,255,255,.04);
    transition: border-color .2s, background .2s;
  }
  .mm-contact a svg { width:1.1em; height:1.1em; }
  .mm-contact a.mm-wa { background:#25D366; border-color:#25D366; }
  .mm-contact a.mm-wa svg { fill:currentColor; }
  .mm-contact a:not(.mm-wa):hover { border-color:#fff; }
  .mm-area { display:inline-flex; align-items:center; gap:.5rem; color:#9a9aa1; font-size:.86rem; }
  .mm-area .diamond { width:.5rem; height:.5rem; }

  /* hide the separate WhatsApp FAB and cookie banner while the menu is open */
  .mobile-menu.open ~ .wa-fab { opacity:0; pointer-events:none; }
  .mobile-menu.open ~ .cookie { opacity:0; visibility:hidden; pointer-events:none; }
}
@media (prefers-reduced-motion: reduce){
  .mobile-menu, .mm-nav a, .mm-foot { transition: opacity .001ms !important; transform:none !important; }
}


/* ---------- Hero ---------- */
.hero { position:relative; background: var(--black-bg); color:#fff; overflow:hidden; isolation:isolate; }
.hero__media { position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
.hero::after { /* overlay */ content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(15,15,15,.72), rgba(15,15,15,.86)),
              radial-gradient(120% 90% at 85% 0%, rgba(244,124,32,.22), transparent 55%);
}
/* diamond grid texture so hero looks intentional even with no photo */
.hero__grid { position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
  mask-image: linear-gradient(180deg, #000, transparent 80%);
}
.hero__in { padding: clamp(3.5rem,8vw,6.5rem) 0 clamp(3rem,7vw,5.5rem); position:relative; }
.hero__in .eyebrow { color: var(--orange); }
.hero h1 { color:#fff; font-size: var(--step-4); max-width: 20ch; margin:0 0 1rem; }
.hero p { color:#d6d6da; font-size: var(--step-1); max-width: 54ch; }
.hero .btn-row { margin-top: 1.8rem; }
.hero__domains { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:2.2rem; }
.hero__domains span { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--display); font-weight:600; font-size:.92rem; color:#eaeaec; border:1px solid #34343a; background:rgba(255,255,255,.03); padding:.5rem .9rem; border-radius:999px; }
.hero__domains .diamond { width:.55rem; height:.55rem; }

/* ---------- Trust strip ---------- */
.trust { border-bottom:1px solid var(--line); background:#fff; }
.trust__row { display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--line); border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); }
.trust__item { background:#fff; padding:1.4rem 1.2rem; display:flex; gap:.85rem; align-items:flex-start; }
.trust__item .ico { width:40px; height:40px; flex:none; border-radius:10px; background: var(--orange-tint); color: var(--orange-deep); display:grid; place-items:center; }
.trust__item .ico svg { width:22px; height:22px; }
.trust__item strong { font-family:var(--display); color:var(--ink); display:block; font-size:1.02rem; }
.trust__item span { font-size:.86rem; color: var(--muted); }
@media (max-width:780px){ .trust__row { grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .trust__row { grid-template-columns: 1fr; } .trust__item { padding:1.1rem 1.2rem; } }

/* ---------- Cards / services ---------- */
.grid { display:grid; gap: clamp(1rem, 2.5vw, 1.6rem); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 920px){ .grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 1.7rem; transition: transform .22s var(--ease), box-shadow .25s var(--ease), border-color .25s; position:relative; overflow:hidden; }
a.card { text-decoration:none; color:inherit; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #dcdce0; }
.card__ico { width:54px; height:54px; border-radius:13px; background: var(--ink); color:#fff; display:grid; place-items:center; margin-bottom:1.1rem; position:relative; }
.card__ico::after { content:""; position:absolute; right:-7px; bottom:-7px; width:16px; height:16px; background:var(--grad); transform:rotate(45deg); border-radius:3px; }
.card__ico svg { width:26px; height:26px; }
.card h3 { font-size: var(--step-1); margin-bottom:.5rem; }
.card p { color: var(--body); font-size:.97rem; }
.card__list { margin-top:1rem; display:grid; gap:.5rem; }
.card__list li { display:flex; gap:.6rem; align-items:flex-start; font-size:.93rem; color:var(--body); }
.card__list .diamond { width:.55rem; height:.55rem; margin-top:.45rem; }
.card__link { margin-top:1.2rem; display:inline-flex; align-items:center; gap:.4rem; font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--orange-deep); text-decoration:none; }
.card__link svg{ width:1em;height:1em; transition: transform .2s var(--ease); }
.card__link:hover svg{ transform: translateX(3px); }

/* feature list (why choose) */
.feature { display:flex; gap:1rem; align-items:flex-start; }
.feature .ico { width:46px;height:46px;flex:none;border-radius:11px;background:var(--orange-tint);color:var(--orange-deep);display:grid;place-items:center; }
.feature .ico svg{width:24px;height:24px;}
.feature h3{ font-size:1.12rem; margin-bottom:.3rem; }
.feature p{ font-size:.95rem; color:var(--muted); }
.bg-ink .feature p { color:#a9a9b0; }
.bg-ink .feature h3 { color:#fff; }
.bg-ink .feature .ico { background:rgba(244,124,32,.14); color:var(--orange); }

/* split media block */
.split { display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.8rem,4vw,3.5rem); align-items:center; }
.split--rev .split__media { order:2; }
@media (max-width: 860px){ .split { grid-template-columns:1fr; } .split--rev .split__media{ order:2; } }
.media-frame { position:relative; border-radius: var(--radius); overflow:hidden; background:
   linear-gradient(135deg,#1d1d1f,#2a2a2d); aspect-ratio: 4/3; box-shadow: var(--shadow-md); }
.media-frame > img { width:100%; height:100%; object-fit:cover; }
.media-frame::before { /* fallback watermark when no img */ content:""; position:absolute; inset:0; background:
  radial-gradient(60% 60% at 50% 45%, rgba(244,124,32,.16), transparent 70%); }
.media-frame__tag { position:absolute; left:1rem; bottom:1rem; z-index:2; background:rgba(20,20,20,.74); color:#fff; backdrop-filter:blur(4px); font-family:var(--display); font-weight:600; font-size:.82rem; padding:.5rem .85rem; border-radius:8px; display:inline-flex; gap:.5rem; align-items:center; }
.media-frame__tag .diamond{ width:.5rem;height:.5rem;}

/* ---------- Process steps ---------- */
.steps { counter-reset: step; display:grid; gap:1.2rem; grid-template-columns: repeat(4,1fr); }
@media (max-width: 860px){ .steps { grid-template-columns:1fr 1fr; } }
@media (max-width: 520px){ .steps { grid-template-columns:1fr; } }
.step { position:relative; padding:1.6rem 1.3rem; background:#fff; border:1px solid var(--line); border-radius: var(--radius); }
.step__n { font-family:var(--display); font-weight:800; font-size:1rem; color:#fff; width:38px;height:38px; background:var(--grad); border-radius:9px; display:grid; place-items:center; transform:rotate(0); margin-bottom:.9rem; }
.step h3 { font-size:1.08rem; margin-bottom:.35rem; }
.step p { font-size:.92rem; color:var(--muted); }

/* ---------- Gallery ---------- */
.gallery { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(.8rem,2vw,1.2rem); }
@media (max-width: 820px){ .gallery { grid-template-columns:1fr 1fr; } }
@media (max-width: 520px){ .gallery { grid-template-columns:1fr; } }
.shot { position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio: 4/3;
  background: linear-gradient(135deg,#202023,#2c2c30); box-shadow: var(--shadow-sm); }
.shot::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 60% at 50% 40%, rgba(244,124,32,.18), transparent 70%); }
.shot img { width:100%; height:100%; object-fit:cover; position:relative; z-index:1; transition: transform .5s var(--ease); }
.shot:hover img { transform: scale(1.05); }
.shot figcaption { position:absolute; z-index:2; left:0; right:0; bottom:0; padding:1.4rem 1rem .9rem;
  background: linear-gradient(transparent, rgba(15,15,15,.82)); color:#fff;
  font-family:var(--display); font-weight:600; font-size:.95rem; display:flex; align-items:center; gap:.5rem; }
.shot figcaption .diamond{ width:.5rem;height:.5rem;}
.shot--tall { grid-row: span 2; aspect-ratio: 4/5; }
@media (max-width:520px){ .shot--tall{ aspect-ratio:4/3; grid-row:auto; } }

/* ---------- CTA band ---------- */
.cta-band { background: var(--grad); color:#fff; border-radius: clamp(16px,3vw,26px); padding: clamp(2.2rem,5vw,3.6rem); position:relative; overflow:hidden; }
.cta-band::after { content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px; background:rgba(255,255,255,.12); transform:rotate(45deg); border-radius:30px; }
.cta-band__in { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap; }
.cta-band h2 { color:#fff; font-size: var(--step-3); max-width:18ch; }
.cta-band p { color:rgba(255,255,255,.92); margin-top:.5rem; max-width:46ch; }
.cta-band .btn--primary { background:#fff; color:var(--orange-deep); border-color:#fff; }
.cta-band .btn--ghost { color:#fff; border-color:rgba(255,255,255,.55); }
.cta-band .btn--ghost:hover { border-color:#fff; background:rgba(255,255,255,.1); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: var(--black-bg); color:#fff; position:relative; overflow:hidden; }
.page-hero__grid { position:absolute; inset:0; opacity:.5; background-image:
   linear-gradient(45deg, rgba(255,255,255,.04) 1px, transparent 1px),
   linear-gradient(-45deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size:42px 42px;
   -webkit-mask-image:linear-gradient(180deg,#000,transparent); mask-image:linear-gradient(180deg,#000,transparent); }
.page-hero__in { position:relative; padding: clamp(2.6rem,6vw,4.4rem) 0 clamp(2.2rem,5vw,3.2rem); }
.page-hero h1 { color:#fff; font-size: var(--step-3); margin:.6rem 0 .6rem; max-width:20ch; }
.page-hero p { color:#c9c9ce; max-width:58ch; font-size:var(--step-1); }
.page-hero .eyebrow { color:var(--orange); }

/* Breadcrumbs */
.crumbs { font-size:.86rem; color: var(--muted); padding: .9rem 0; border-bottom:1px solid var(--line); }
.crumbs ol { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; list-style:none; padding:0; margin:0; }
.crumbs a { color: var(--muted); text-decoration:none; }
.crumbs a:hover { color: var(--orange-deep); }
.crumbs li[aria-current] { color: var(--ink); font-weight:600; }
.crumbs .sep { color: var(--line); }

/* ---------- Prose (legal/about pages) ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--step-2); margin: 2.2rem 0 .8rem; }
.prose h3 { font-size: var(--step-1); margin: 1.6rem 0 .5rem; }
.prose p, .prose li { color: var(--body); font-size: 1.02rem; line-height:1.75; }
.prose p { margin-bottom: 1rem; }
.prose ul { margin: 0 0 1.2rem; display:grid; gap:.55rem; }
.prose ul li { position:relative; padding-left:1.5rem; }
.prose ul li::before { content:""; position:absolute; left:0; top:.62em; width:.5rem;height:.5rem; background:var(--grad); transform:rotate(45deg); border-radius:1px; }
.prose ol { padding-left:1.2rem; display:grid; gap:.55rem; margin-bottom:1.2rem; }
.prose ol li { padding-left:.3rem; }
.prose a { color: var(--orange-deep); text-decoration: underline; text-underline-offset:2px; }
.prose strong { color: var(--ink); }
.toc { background: var(--paper); border:1px solid var(--line); border-radius: var(--radius); padding:1.3rem 1.5rem; margin-bottom:2rem; }
.toc h2 { margin:0 0 .6rem; font-size:1.05rem; }
.toc ul { display:grid; gap:.35rem; }
.toc a { color: var(--body); text-decoration:none; font-size:.95rem; }
.toc a:hover { color: var(--orange-deep); }
.note { background: var(--orange-tint); border:1px solid #f6d8be; border-radius: var(--radius-sm); padding:1rem 1.2rem; font-size:.92rem; color:#8a4a18; margin:1.4rem 0; }

/* ---------- Forms ---------- */
.form-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem,3vw,2.3rem); box-shadow: var(--shadow-sm); }
.field { margin-bottom:1.1rem; }
.field label { display:block; font-family:var(--display); font-weight:600; font-size:.92rem; color:var(--ink); margin-bottom:.4rem; }
.field .req { color: var(--orange-deep); }
.field input, .field select, .field textarea {
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  padding:.8rem .95rem; border:1.5px solid var(--line); border-radius:10px; background:#fff;
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height:130px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(244,124,32,.15); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.form-aside { display:grid; gap:1.2rem; align-content:start; }
.form-aside .feature .ico { background:rgba(255,255,255,.08); color:var(--orange); }
.consent { display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem; color:var(--muted); }
.consent input { width:auto; margin-top:.25rem; }
.honey { position:absolute; left:-9999px; }
.form-success { display:none; background:#ecfdf3; border:1px solid #abefc6; color:#067647; padding:1rem 1.2rem; border-radius:10px; margin-bottom:1.2rem; font-weight:600; }

/* contact list */
.contact-list { display:grid; gap:1rem; }
.contact-list a, .contact-list div { display:flex; gap:.8rem; align-items:flex-start; text-decoration:none; color:inherit; }
.contact-list .ico { width:42px;height:42px;border-radius:10px;background:var(--orange-tint);color:var(--orange-deep);display:grid;place-items:center;flex:none; }
.bg-ink .contact-list .ico { background:rgba(244,124,32,.14); color:var(--orange); }
.contact-list .ico svg{ width:20px;height:20px; }
.contact-list strong{ font-family:var(--display); color:var(--ink); display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; }
.bg-ink .contact-list strong{ color:#9a9aa1; }
.contact-list span{ color:var(--ink); font-size:1.02rem; }
.bg-ink .contact-list span{ color:#fff; }

/* faq */
.faq { display:grid; gap:.8rem; max-width:820px; margin-inline:auto; }
.faq details { background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); overflow:hidden; }
.faq summary { cursor:pointer; padding:1.1rem 1.3rem; font-family:var(--display); font-weight:600; color:var(--ink); font-size:1.05rem; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after { content:"+"; font-size:1.4rem; color:var(--orange-deep); transition:.2s; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { padding:0 1.3rem 1.2rem; color:var(--body); margin:0; }

/* stat row */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
@media (max-width:680px){ .stats{ grid-template-columns:1fr 1fr; } }
.stat .num { font-family:var(--display); font-weight:800; font-size: var(--step-3); line-height:1; }
.stat .num .accent { display:inline; }
.bg-ink .stat .num { color:#fff; }
.stat .lbl { color:var(--muted); font-size:.92rem; margin-top:.4rem; }
.bg-ink .stat .lbl { color:#9a9aa1; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black-bg); color:#bdbdc2; padding: clamp(3rem,6vw,4.5rem) 0 0; }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(1.6rem,3vw,2.6rem); padding-bottom: 2.8rem; border-bottom:1px solid #2a2a2e; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand img { height:42px; width:auto; max-width:240px; }
.footer-brand p { margin-top:1rem; font-size:.93rem; color:#9a9aa1; max-width:34ch; }
.footer-col h4 { font-family:var(--display); color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; }
.footer-col ul { display:grid; gap:.6rem; }
.footer-col a { color:#a9a9b0; text-decoration:none; font-size:.94rem; }
.footer-col a:hover { color:var(--orange); }
.footer-col .ic { display:inline-flex; gap:.55rem; align-items:flex-start; }
.footer-col .ic svg{ width:1.05em;height:1.05em;color:var(--orange);flex:none;margin-top:.15rem;}
.footer-bottom { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.5rem 0; font-size:.85rem; color:#7e7e85; }
.footer-bottom ul { display:flex; gap:1.2rem; flex-wrap:wrap; }
.footer-bottom a { color:#9a9aa1; text-decoration:none; }
.footer-bottom a:hover { color:var(--orange); }

/* ---------- Cookie banner ---------- */
.cookie { position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:300; max-width:560px; margin-inline:auto;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding:1.2rem 1.3rem; transform: translateY(150%); transition: transform .4s var(--ease); }
.cookie.show { transform: translateY(0); }
.cookie p { font-size:.9rem; color:var(--body); margin-bottom:.9rem; }
.cookie p a { color:var(--orange-deep); }
.cookie__btns { display:flex; gap:.6rem; flex-wrap:wrap; }
.cookie .btn { padding:.6rem 1.1rem; font-size:.9rem; }

/* reveal on scroll */
.reveal { opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* misc */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}
.mb-0{margin-bottom:0}
.text-muted{ color:var(--muted); }

/* ---------- Slim page hero (inner pages: title only) ---------- */
.page-hero--slim .page-hero__in { padding: clamp(2rem,5vw,3.4rem) 0 clamp(1.7rem,4vw,2.6rem); }
.page-hero--slim h1 { margin: 0; max-width: 24ch; }

/* ---------- WhatsApp floating button (mobile only) ---------- */
.wa-fab { display: none; }
@media (max-width: 880px){
  .wa-fab {
    display: grid; place-items: center;
    position: fixed; right: 1rem; bottom: 1rem; z-index: 250;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
    transition: transform .18s var(--ease), box-shadow .25s var(--ease);
  }
  .wa-fab:hover, .wa-fab:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.32); }
  .wa-fab svg { width: 30px; height: 30px; fill: currentColor; }
}

/* ---------- Footer socials ---------- */
.socials { display:flex; gap:.6rem; margin-top:1.2rem; }
.socials a { width:38px; height:38px; display:grid; place-items:center; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid #2a2a2e; color:#cfcfd4; transition:color .2s, border-color .2s, background .2s; }
.socials a:hover { color:#fff; border-color:var(--orange); background:rgba(244,124,32,.14); }
.socials svg { width:19px; height:19px; }

/* ---------- "Got a question?" popup ---------- */
.qpop {
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:360;
  width:min(330px, calc(100vw - 2rem));
  background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg);
  padding:1.4rem;
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.98);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.qpop.show { opacity:1; visibility:visible; transform:none; }
.qpop__close { position:absolute; top:.6rem; right:.6rem; width:30px; height:30px; display:grid; place-items:center;
  border:none; background:transparent; color:var(--muted); cursor:pointer; border-radius:8px; transition:.2s; }
.qpop__close:hover { background:var(--paper); color:var(--ink); }
.qpop__close svg { width:18px; height:18px; }
.qpop__icon { display:inline-grid; place-items:center; width:46px; height:46px; border-radius:13px;
  background:var(--orange-tint); color:var(--orange-deep); margin-bottom:.8rem; }
.qpop__icon svg { width:24px; height:24px; }
.qpop h3 { font-family:var(--display); font-size:1.3rem; color:var(--ink); }
.qpop p { font-size:.92rem; color:var(--muted); margin:.3rem 0 1.1rem; }
.qpop__actions { display:grid; gap:.6rem; }
.qpop__btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.78rem 1rem;
  border-radius:11px; font-family:var(--display); font-weight:700; font-size:.95rem; text-decoration:none; color:#fff; }
.qpop__btn svg { width:1.05em; height:1.05em; }
.qpop__call { background:var(--grad); }
.qpop__wa { background:#25D366; }
.qpop__wa svg { fill:currentColor; }
.qpop__phone { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.78rem 1rem;
  border-radius:11px; font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); }
.qpop__phone svg { width:1.05em; height:1.05em; color:var(--orange-deep); }
/* desktop shows the number as text; mobile shows a tap-to-call link */
.qpop__call { display:none; }
.qpop__phone { display:inline-flex; }
@media (max-width:880px){
  .qpop { right:1rem; left:1rem; bottom:1rem; width:auto; }
  .qpop__call { display:inline-flex; }
  .qpop__phone { display:none; }
  body.qpop-open .wa-fab { opacity:0; visibility:hidden; pointer-events:none; }
}
@media (prefers-reduced-motion: reduce){ .qpop { transition:opacity .001ms !important; transform:none !important; } }