/* ===========================================================
   Focal Spare — token system
=========================================================== */
:root{
  --ink:      #0B2545;   /* deep navy — headings, dark sections */
  --ink-soft: #55607A;
  --paper:    #F4F6FA;
  --paper-2:  #E7EBF3;
  --blue:     #FF4F00;   /* primary accent — links, CTAs */
  --blue-dark:#CC3F00;
  --amber:    #FF9F1C;   /* secondary accent — urgency CTAs, highlights */
  --teal:     #0EA5A3;   /* tertiary accent, used sparingly */
  --line:     rgba(11,37,69,0.13);
  --line-strong: rgba(11,37,69,0.26);

  --font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-s: 4px;
  --radius-m: 8px;
  --container: 1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0 0 .4em; font-weight:700; letter-spacing:-0.01em; }
p{ margin:0 0 1em; color:var(--ink-soft); max-width:64ch; }
ul{ margin:0; padding:0; list-style:none; }
.wrap{ max-width:var(--container); margin:0 auto; padding:0 28px; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* Network-node corner motif */
.node-dot{
  position:fixed; width:8px; height:8px; border-radius:50%;
  background:var(--amber); z-index:60; pointer-events:none; opacity:.55;
}
.node-dot--tl{ top:18px; left:18px; box-shadow:0 0 0 4px rgba(255,159,28,.15); }
.node-dot--tr{ top:18px; right:18px; box-shadow:0 0 0 4px rgba(255,159,28,.15); }
@media (max-width:640px){ .node-dot{ display:none; } }

/* ===========================================================
   Header / topbar / nav
=========================================================== */
.topbar{
  margin:0; background:var(--ink); color:#C9D3E8; font-size:12.5px;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 28px;
}
.topbar-status{ display:flex; align-items:center; gap:8px; }
.status-dot{ width:7px; height:7px; border-radius:50%; background:#3DDC84; display:inline-block; box-shadow:0 0 0 3px rgba(61,220,132,.25); }
.topbar-contact a{ color:#fff; font-weight:500; }
.topbar-sep{ margin:0 8px; opacity:.4; }
@media (max-width:720px){ .topbar-status{ display:none; } .topbar{ justify-content:flex-end; } }

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,246,250,0.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-row{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px; }

.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{ height:52px; width:auto; display:block; }
.brand-mark{
  width:38px; height:38px; border-radius:var(--radius-s);
  background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:15px;
}
.brand-mark--light{ background:var(--blue); }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--ink); }
.brand-name em{ font-style:normal; color:var(--blue); }
.brand-name--light{ color:#fff; }

.nav{ display:flex; align-items:center; gap:30px; }
.nav > a{ font-size:15px; font-weight:500; color:var(--ink); position:relative; white-space:nowrap; }
.nav > a::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--amber); transition:width .2s ease; }
.nav > a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:16px; }
.btn{
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  padding:12px 24px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; display:inline-block; transition:transform .15s ease, background .15s ease;
}
.btn--primary{ background:var(--amber); color:var(--ink); }
.btn--primary:hover{ background:#FFB44D; }
.btn--ghost{ border-color:var(--line-strong); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--ghost-light{ border:1px solid rgba(255,255,255,.4); color:#fff; }
.btn--ghost-light:hover{ border-color:#fff; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav-toggle span{ width:22px; height:2px; background:var(--ink); }

/* --- Nav dropdown (Services mega menu) --- */
.nav-dropdown{ position:relative; }
.nav-dropdown-trigger{
  background:none; border:0; font:inherit; font-size:15px; font-weight:500; color:var(--ink);
  cursor:pointer; display:flex; align-items:center; gap:6px; padding:0;
}
.nav-dropdown-trigger::after{
  content:""; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); margin-top:-3px; transition:transform .15s ease;
}
.nav-dropdown-trigger[aria-expanded="true"]::after{ transform:rotate(-135deg); margin-top:3px; }

.nav-dropdown-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  padding-top:16px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s ease, visibility .15s ease; z-index:70;
}
.nav-dropdown-menu.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
@media (min-width:921px){
  .nav-dropdown:hover .nav-dropdown-menu{ opacity:1; visibility:visible; pointer-events:auto; }
}

.mega-inner{
  display:flex; gap:36px; min-width:640px;
  background:#fff; border:1px solid var(--line-strong); border-radius:var(--radius-m);
  box-shadow:0 24px 50px -20px rgba(11,37,69,.3); padding:26px 30px;
}
.mega-col h4{
  font-family:var(--font-body); font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--blue); margin-bottom:14px;
}
.mega-col{ display:flex; flex-direction:column; min-width:160px; }
.mega-col a{ font-size:14px; padding:7px 0; color:var(--ink); border-radius:4px; }
.mega-col a:hover{ color:var(--blue); padding-left:4px; }

@media (max-width:920px){
  .nav{
    position:fixed; inset:112px 0 auto 0; background:var(--paper);
    flex-direction:column; align-items:flex-start; padding:20px 28px 28px; gap:6px;
    border-bottom:1px solid var(--line); max-height:calc(100vh - 112px); overflow-y:auto;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:transform .2s ease, opacity .2s ease;
  }
  .nav.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav > a{ padding:10px 0; width:100%; }
  .nav-toggle{ display:flex; }
  .nav-dropdown{ width:100%; }
  .nav-dropdown-trigger{ padding:10px 0; width:100%; justify-content:space-between; }
  .nav-dropdown-menu{ position:static; transform:none; padding-top:0; width:100%; }
  .nav-dropdown-menu:not(.is-open){ display:none; }
  .mega-inner{ min-width:0; flex-direction:column; gap:18px; box-shadow:none; border:0; background:none; padding:4px 0 12px 12px; }
  .mega-col h4{ margin-bottom:8px; }
}

/* ===========================================================
   Hero
=========================================================== */
.hero{ padding:70px 0 74px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.kicker{ font-size:14px; color:var(--teal); margin-bottom:16px; font-weight:600; }
h1{ font-size:clamp(2.3rem, 4.6vw, 3.6rem); line-height:1.06; margin-bottom:22px; }
h1 em{ font-style:normal; color:var(--blue); }
.hero-lede{ font-size:17px; max-width:54ch; }
.hero-actions{ display:flex; gap:16px; margin:28px 0 42px; flex-wrap:wrap; }

.badge-strip{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.badge-strip li{ border:1px solid var(--line-strong); border-radius:999px; padding:8px 16px; font-size:13px; color:var(--ink-soft); background:#fff; }

.hero-visual{ position:relative; }
.frame{ position:relative; border:1px solid var(--line-strong); border-radius:var(--radius-m); background:#fff; padding:10px; }
.frame img{ width:100%; height:auto; border-radius:4px; }
.frame-tag{ position:absolute; bottom:20px; left:20px; background:var(--ink); color:#fff; font-size:12px; padding:6px 12px; border-radius:999px; }
.hero--landing .hero-visual{ display:flex; justify-content:center; }
.hero--landing .frame--a{ width:100%; max-width:480px; }

@media (max-width:920px){ .hero-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   Section shared
=========================================================== */
section{ padding:90px 0; }
.section-head{ max-width:660px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(1.8rem, 3vw, 2.4rem); }
.section-head--light p, .section-head--light h2{ color:#fff; }
.text-link{ color:var(--blue); font-weight:600; font-size:15px; border-bottom:1px solid currentColor; padding-bottom:2px; }
.text-link--light{ color:#fff; }

/* Breadcrumb */
.breadcrumb{ border-bottom:1px solid var(--line); background:var(--paper); font-size:13px; color:var(--ink-soft); }
.breadcrumb .wrap{ display:flex; align-items:center; gap:8px; padding:14px 28px; }
.breadcrumb a:hover{ color:var(--blue); }
.breadcrumb span[aria-current]{ color:var(--ink); }

/* Benefit / offer grids */
.benefit-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
.benefit-card{ background:#fff; padding:30px 24px; }
.benefit-card h3{ font-size:1.08rem; margin-bottom:.5em; }
.benefit-card p{ font-size:14px; }
.benefits--alt{ background:var(--paper-2); }
@media (max-width:860px){ .benefit-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .benefit-grid{ grid-template-columns:1fr; } }

.offer{ background:var(--paper-2); }
.offer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.check-list{ display:flex; flex-direction:column; gap:14px; }
.check-list li{ position:relative; padding-left:30px; font-size:15px; color:var(--ink); }
.check-list li::before{ content:""; position:absolute; left:0; top:5px; width:16px; height:16px; border-radius:50%; background:var(--blue); }
.check-list li::after{ content:"\2713"; position:absolute; left:3px; top:3px; font-size:10px; color:#fff; }
@media (max-width:820px){ .offer-grid{ grid-template-columns:1fr; } }

/* Numbered process / step list */
.step-list{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); counter-reset:step; list-style:none; padding:0; margin:0; }
.step-list li{ background:#fff; padding:26px 20px; position:relative; counter-increment:step; }
.step-list li::before{
  content:counter(step); display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff;
  font-family:var(--font-display); font-size:14px; margin-bottom:14px;
}
.step-list h3{ font-size:1rem; margin-bottom:.4em; }
.step-list p{ font-size:13.5px; }
@media (max-width:960px){ .step-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .step-list{ grid-template-columns:1fr; } }

/* Chip list (service areas / related services) */
.chip-list{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0; }
.chip-list li{ border:1px solid var(--line-strong); border-radius:6px; padding:9px 16px; font-size:14px; color:var(--ink-soft); background:#fff; }
.chip-list li a{ color:inherit; }
.chip-list li:has(a):hover{ border-color:var(--blue); color:var(--blue); }

/* Service overview grid (home page) */
.service-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
.service-card{ background:#fff; padding:30px 24px; }
.service-card .icon-dot{ width:40px; height:40px; border-radius:10px; background:var(--paper-2); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--blue); font-weight:700; font-family:var(--font-display); }
.service-card h3{ font-size:1.05rem; margin-bottom:.4em; }
.service-card p{ font-size:13.5px; margin-bottom:14px; }
@media (max-width:860px){ .service-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .service-grid{ grid-template-columns:1fr; } }

/* Why us / dark band */
.why{ background:var(--ink); color:#fff; }
.why h2{ color:#fff; }
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; }
.why-body p{ color:#B9C3DA; font-size:17px; }
.why-body .text-link{ color:var(--amber); }
@media (max-width:820px){ .why-grid{ grid-template-columns:1fr; } }

/* Service areas */
.areas-map-note{ font-size:14px; color:var(--ink-soft); margin-top:18px; }

/* Testimonials (placeholder-ready slider) */
.testimonials{ background:var(--blue); color:#fff; }
.quote-slider{ position:relative; max-width:720px; min-height:140px; }
.quote{ display:none; margin:0; }
.quote.is-active{ display:block; }
.quote p{ color:#fff; font-family:var(--font-display); font-weight:500; font-size:clamp(1.2rem,2.2vw,1.55rem); line-height:1.4; max-width:none; }
.quote cite{ display:block; margin-top:18px; font-style:normal; font-size:14px; color:#CFE0FF; }
.quote-controls{ display:flex; align-items:center; gap:18px; margin-top:34px; }
.quote-controls button{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; cursor:pointer; font-size:16px; }
.quote-controls button:hover{ background:rgba(255,255,255,.12); }
.quote-dots{ display:flex; gap:8px; }
.quote-dots button{ width:8px; height:8px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.4); cursor:pointer; }
.quote-dots button.is-active{ background:#fff; }

/* FAQ accordion */
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-question{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:var(--font-display); font-size:1.1rem; font-weight:600; color:var(--ink);
  padding:22px 34px 22px 0; position:relative;
}
.faq-question::after{ content:"+"; position:absolute; right:0; top:18px; font-size:22px; color:var(--blue); transition:transform .2s ease; }
.faq-question[aria-expanded="true"]::after{ transform:rotate(45deg); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-answer p{ padding-bottom:22px; font-size:15px; }

/* Pricing teaser */
.pricing-teaser{ background:var(--ink); color:#fff; text-align:left; }
.pricing-teaser .section-head p{ color:#B9C3DA; max-width:620px; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.contact-list{ margin-top:28px; }
.contact-list li{ display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:15px; }
.contact-list span{ width:70px; flex:none; color:var(--teal); font-weight:600; }
.contact-list a{ color:var(--blue); }
.contact-form{ display:flex; flex-direction:column; gap:18px; }
.contact-form label{ display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--ink-soft); }
.contact-form input, .contact-form select, .contact-form textarea{
  font-family:var(--font-body); font-size:15px; padding:12px 14px;
  border:1px solid var(--line-strong); border-radius:var(--radius-s); background:#fff; color:var(--ink); resize:vertical;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ border-color:var(--blue); }
.contact-form .btn{ align-self:flex-start; }
.form-note{ font-size:13.5px; color:var(--teal); min-height:1.2em; margin:0; }
/* Honeypot — invisible to real visitors, bots tend to fill every field */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   Footer
=========================================================== */
.site-footer{ background:var(--ink); color:#B9C3DA; padding:64px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.14); }
.footer-brand p{ color:#93A0BC; font-size:14px; margin:16px 0 20px; }
.socials{ display:flex; gap:10px; }
.socials a{ width:34px; height:34px; border:1px solid rgba(255,255,255,.25); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; }
.socials a:hover{ border-color:#fff; }
.site-footer h5{ color:#fff; font-family:var(--font-body); font-weight:600; font-size:13px; margin-bottom:16px; text-transform:uppercase; letter-spacing:.05em; }
.site-footer div a{ display:block; font-size:14px; padding:6px 0; color:#A7B2CB; }
.site-footer div a:hover{ color:#fff; }
.footer-bottom{ padding:20px 0; font-size:12.5px; color:#7C88A6; }
@media (max-width:960px){ .footer-grid{ grid-template-columns:1fr 1fr; } }

/* WhatsApp floating button */
.whatsapp-fab{
  position:fixed; bottom:22px; right:22px; z-index:80;
  background:#25D366; color:#fff; border-radius:999px; padding:14px 20px;
  font-size:14px; font-weight:600; box-shadow:0 14px 30px -10px rgba(37,211,102,.55);
  display:flex; align-items:center; gap:8px;
}
.whatsapp-fab::before{ content:"\260E"; }
@media (max-width:640px){ .whatsapp-fab span{ display:none; } .whatsapp-fab{ padding:14px; } }

/* ===========================================================
   Generic carousel (for future landing pages / portfolio use)
=========================================================== */
.carousel{ position:relative; }
.carousel-viewport{ display:flex; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; }
.carousel-viewport::-webkit-scrollbar{ display:none; }
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong);
  background:#fff; color:var(--ink); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px -10px rgba(11,37,69,.35);
}
.carousel-btn:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }
.carousel-btn--prev{ left:-22px; }
.carousel-btn--next{ right:-22px; }
@media (max-width:640px){ .carousel-btn{ width:36px; height:36px; } .carousel-btn--prev{ left:-10px; } .carousel-btn--next{ right:-10px; } }