/*
Theme Name: Control Concepts
Theme URI: https://controlconcepts.co.za/
Author: Control Concepts
Description: Fast, accessible, SEO-focused theme for Control Concepts - time and attendance solutions. Zero jQuery, single stylesheet, no page builder.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: controlconcepts
*/

/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --navy:#02315B;          /* sampled from the Control Concepts logo */
  --navy-900:#01182D;
  --navy-800:#022746;
  --navy-700:#053C6D;
  --accent:#00C2FF;
  --accent-2:#22E5C8;
  --accent-ink:#003D52;
  --ink:#0E1B2A;
  --body:#46586B;
  --muted:#6B7C8E;
  --line:#E3EAF2;
  --bg:#FFFFFF;
  --bg-soft:#F4F8FC;

  --wrap:1180px;
  --gut:clamp(1.25rem,4vw,2.5rem);
  --radius:0px;
  --radius-lg:0px;

  --shadow-sm:0 1px 2px rgba(2,49,91,.06),0 2px 8px rgba(2,49,91,.05);
  --shadow-md:0 4px 12px rgba(2,49,91,.08),0 12px 32px rgba(2,49,91,.07);
  --shadow-lg:0 12px 28px rgba(2,49,91,.10),0 32px 64px rgba(2,49,91,.12);

  --sans:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--sans);
  font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--navy-700);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4,h5,h6{color:var(--ink);font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.25rem,1.4rem + 3.6vw,4rem)}
h2{font-size:clamp(1.85rem,1.25rem + 2.4vw,3rem)}
h3{font-size:clamp(1.25rem,1.05rem + .9vw,1.6rem)}
h4{font-size:1.125rem}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.25em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:0}

/* ============================================================
   3. LAYOUT HELPERS
   ============================================================ */
.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.section{padding:clamp(3.5rem,7vw,6.5rem) 0}
.section--soft{background:var(--bg-soft)}
.section--tight{padding:clamp(2.5rem,5vw,4rem) 0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--navy);color:#fff;
  padding:.85rem 1.25rem;border-radius:0;font-weight:700}
.skip-link:focus{left:0}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.78rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy-700);margin:0 0 1rem}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.section-head{max-width:62ch;margin:0 0 clamp(2rem,4vw,3rem)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.lead{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);color:var(--body)}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.6rem;border-radius:0;font-weight:700;font-size:1rem;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  color:var(--accent-ink);box-shadow:0 6px 20px rgba(0,194,255,.35)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,194,255,.45)}
.btn--navy{background:var(--navy);color:#fff;box-shadow:var(--shadow-md)}
.btn--navy:hover{transform:translateY(-2px);background:var(--navy-700)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
.btn--outline{background:transparent;color:var(--navy);border-color:var(--line)}
.btn--outline:hover{border-color:var(--navy);transform:translateY(-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}

/* ============================================================
   5. SITE HEADER
   ============================================================ */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 2px 16px rgba(2,49,91,.07)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:78px;padding-block:.6rem}
.brand{display:inline-flex;align-items:center;flex:none;text-decoration:none}
.brand img{width:clamp(132px,14vw,164px);height:auto}
.nav-toggle{display:none}

.main-nav ul{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0}
.main-nav a{position:relative;display:block;padding:.6rem .95rem;border-radius:0;
  color:var(--ink);font-weight:600;font-size:1rem;text-decoration:none;
  transition:color .2s var(--ease),background .2s var(--ease)}
.main-nav a::after{content:"";position:absolute;left:.95rem;right:.95rem;bottom:.35rem;height:2px;
  border-radius:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.main-nav a:hover{background:var(--bg-soft)}
.main-nav a:hover::after,.main-nav .current-menu-item>a::after,.main-nav .current_page_item>a::after{transform:scaleX(1)}
.main-nav .current-menu-item>a,.main-nav .current_page_item>a{color:var(--navy)}

.header-cta{display:flex;align-items:center;gap:.75rem;flex:none}
.header-phone{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;
  color:var(--navy);text-decoration:none;white-space:nowrap}
.header-phone svg{width:18px;height:18px}
.header-phone:hover{color:var(--accent-ink)}

/* Mobile nav */
@media (max-width:960px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
    border:1px solid var(--line);border-radius:0;background:#fff;cursor:pointer;flex:none}
  .nav-toggle span{position:relative;width:20px;height:2px;background:var(--navy);border-radius:0;
    transition:background .2s var(--ease)}
  .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;
    background:var(--navy);border-radius:0;transition:transform .3s var(--ease),top .3s var(--ease)}
  .nav-toggle span::before{top:-6px}
  .nav-toggle span::after{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)}
  .header-cta .header-phone{display:none}
  .main-nav{position:fixed;inset:78px 0 auto;background:#fff;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);padding:1rem var(--gut) 1.75rem;
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
  .main-nav.is-open{opacity:1;visibility:visible;transform:translateY(0)}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:.15rem}
  .main-nav a{padding:.85rem .5rem;font-size:1.1rem;border-bottom:1px solid var(--line)}
  .main-nav a::after{display:none}
  .main-nav li:last-child a{border-bottom:0}
  .mobile-only-cta{display:flex;gap:.75rem;margin-top:1.1rem}
  .mobile-only-cta .btn{flex:1}
}
@media (min-width:961px){.mobile-only-cta{display:none}}

/* On the narrowest phones the logo, the quote button and the menu toggle no
   longer fit on one row and push the page into horizontal scroll. The quote
   button is dropped here because it is repeated inside the open menu. */
@media (max-width:430px){
  .header-cta .btn--primary{display:none}
  .brand img{width:118px}
  .header-inner{gap:.75rem}
}

/* ============================================================
   6. HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(155deg,var(--navy-900) 0%,var(--navy) 48%,var(--navy-700) 100%);
  color:#fff;padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(4rem,9vw,7rem)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 40%,#000 35%,transparent 78%);
  mask-image:radial-gradient(ellipse 85% 70% at 50% 40%,#000 35%,transparent 78%)}
.hero::after{content:"";position:absolute;z-index:-1;width:52rem;height:52rem;right:-14rem;top:-20rem;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,194,255,.30) 0%,rgba(34,229,200,.12) 40%,transparent 68%);
  animation:float 18s ease-in-out infinite alternate}
@keyframes float{from{transform:translate3d(0,0,0)}to{transform:translate3d(-3rem,3rem,0)}}

.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:2.75rem}}

.hero h1{color:#fff;margin-bottom:.35em;text-wrap:balance}
.hero h1 .grad,
.page-hero h1 .grad{background:linear-gradient(100deg,var(--accent) 0%,var(--accent-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{color:rgba(255,255,255,.82);font-size:clamp(1.08rem,1rem + .5vw,1.28rem);max-width:56ch}
.hero .eyebrow,
.page-hero .eyebrow{color:rgba(255,255,255,.92)}
.hero .btn-row{margin-top:2rem}


/* Hero visual: floating reader card */
.hero-visual{position:relative;display:flex;justify-content:center}
.hero-card{position:relative;width:min(100%,380px);padding:2rem;border-radius:var(--radius-lg);
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 32px 64px rgba(0,0,0,.32);animation:bob 7s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(-8px)}to{transform:translateY(8px)}}
.hero-card img{margin-inline:auto;max-height:290px;width:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.hero-chip{position:absolute;display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem .95rem;border-radius:0;background:rgba(255,255,255,.96);color:var(--navy);
  font-size:.82rem;font-weight:800;box-shadow:var(--shadow-lg);white-space:nowrap}
.hero-chip svg{width:15px;height:15px;color:var(--navy-700)}
.hero-chip--1{top:8%;left:-8%;animation:bob 6s ease-in-out infinite alternate-reverse}
.hero-chip--2{bottom:12%;right:-6%;animation:bob 8s ease-in-out .5s infinite alternate}
@media (max-width:520px){.hero-chip--1{left:-2%}.hero-chip--2{right:0}}

/* ============================================================
   7. TRUST BAR / PARTNER LOGOS
   ============================================================ */
.trustbar{background:#fff;border-bottom:1px solid var(--line);padding:2.5rem 0 2.75rem;overflow:hidden}
.trustbar p{text-align:center;font-size:.8rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 1.75rem}

/* Continuously scrolling client carousel. The logo set is rendered twice and the
   track is translated by exactly -50%, which makes the loop seamless. */
.marquee{position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__track{display:flex;align-items:stretch;gap:1.25rem;width:max-content;
  animation:marquee 34s linear infinite}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}

.logo-tile{position:relative;display:grid;place-items:center;flex:none;
  width:clamp(160px,20vw,208px);padding:1.5rem 1.35rem 1.25rem;background:#fff;
  border:1px solid var(--line);border-top:4px solid var(--tile,var(--accent));
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.logo-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
/* Full colour - the logos are the point, so they are never greyed out. */
.logo-tile img{height:clamp(34px,4.5vw,48px);width:auto;max-width:100%;object-fit:contain}
.logo-tile:nth-child(5n+1){--tile:#00C2FF}
.logo-tile:nth-child(5n+2){--tile:#22E5C8}
.logo-tile:nth-child(5n+3){--tile:#FFB020}
.logo-tile:nth-child(5n+4){--tile:#FF5C8A}
.logo-tile:nth-child(5n+5){--tile:#7C5CFF}

/* ============================================================
   8. CARDS
   ============================================================ */
.grid{display:grid;gap:clamp(1.15rem,2.2vw,1.75rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr))}

.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.5rem,2.6vw,2rem);box-shadow:var(--shadow-sm);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#CFE0F0}
.card h3{margin-bottom:.5rem}
.card p:last-child{margin-bottom:0}
.card__icon{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:0;margin-bottom:1.15rem;color:#fff;
  background:linear-gradient(140deg,var(--navy) 0%,var(--navy-700) 100%);
  box-shadow:0 8px 18px rgba(2,49,91,.22)}
.card__icon svg{width:24px;height:24px}
.card--accent .card__icon{background:linear-gradient(140deg,var(--accent) 0%,var(--accent-2) 100%);
  color:var(--accent-ink);box-shadow:0 8px 18px rgba(0,194,255,.3)}

/* ============================================================
   9. STATS
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden}
.stat{background:#fff;padding:clamp(1.6rem,3vw,2.25rem);text-align:center}
.stat dt{order:2;font-size:.87rem;font-weight:700;color:var(--muted);
  letter-spacing:.05em;text-transform:uppercase}
.stat dd{order:1;margin:0 0 .35rem;font-size:clamp(2.25rem,1.6rem + 2.4vw,3.25rem);
  font-weight:800;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-700) 60%,var(--accent) 130%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat{display:flex;flex-direction:column}

/* ============================================================
   10. TIMELINE
   ============================================================ */
.timeline{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:clamp(1.5rem,3vw,2.25rem);margin-top:1rem}
.timeline::before{content:"";position:absolute;left:0;right:0;top:26px;height:2px;
  background:linear-gradient(90deg,var(--line) 0%,var(--accent) 35%,var(--accent-2) 70%,var(--line) 100%)}
@media (max-width:640px){.timeline::before{display:none}}
.tl-item{position:relative;padding-top:0}
.tl-dot{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:0;background:#fff;border:2px solid var(--line);
  color:var(--navy);margin-bottom:1.15rem;box-shadow:var(--shadow-sm);
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.tl-dot svg{width:24px;height:24px}
.tl-item:hover .tl-dot{border-color:var(--accent);transform:scale(1.06)}
.tl-year{display:block;font-size:.82rem;font-weight:800;letter-spacing:.12em;
  color:var(--accent-ink);margin-bottom:.3rem}
.tl-item h3{font-size:1.15rem;margin-bottom:.4rem}
.tl-item p{font-size:.97rem;margin:0}

/* ============================================================
   11. SPLIT / FEATURE SECTIONS
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--reverse .split__media{order:-1}
@media (max-width:880px){.split{grid-template-columns:1fr;gap:2.25rem}
  .split--reverse .split__media{order:0}}
.split__media{position:relative}
.media-frame{position:relative;border-radius:var(--radius-lg);padding:clamp(1.75rem,4vw,3rem);
  background:linear-gradient(150deg,var(--bg-soft) 0%,#E8F1FA 100%);
  border:1px solid var(--line);display:grid;place-items:center;min-height:260px}
.media-frame::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);
  background:radial-gradient(circle at 78% 18%,rgba(0,194,255,.16),transparent 58%);pointer-events:none}
.media-frame img{position:relative;max-height:320px;width:auto;
  filter:drop-shadow(0 20px 34px rgba(2,49,91,.22))}

/* A landscape logo in the tall portrait frame built for product photography left a
   small image adrift in a lot of empty gradient - this modifier shrinks the frame
   down to the logo instead of the logo up to the frame. */
.media-frame--compact{min-height:0;max-width:420px;margin-inline:auto;
  padding:clamp(2.25rem,5vw,3rem) clamp(1.75rem,4vw,2.5rem)}
.media-frame--compact img{max-height:72px}
@media (max-width:880px){.media-frame--compact{max-width:100%}}

.checklist{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.85rem}
.checklist li{display:flex;align-items:flex-start;gap:.75rem;font-weight:500}
.checklist svg{flex:none;width:22px;height:22px;margin-top:.18rem;color:var(--accent-ink)}

/* ============================================================
   12. PRODUCT CARDS
   ============================================================ */
.product{display:flex;flex-direction:column;overflow:hidden;padding:0}
.product__media{position:relative;display:grid;place-items:center;padding:2.25rem 1.5rem;
  background:linear-gradient(150deg,var(--bg-soft) 0%,#E9F2FB 100%);border-bottom:1px solid var(--line)}
.product__media img{max-height:200px;width:auto;filter:drop-shadow(0 14px 24px rgba(2,49,91,.2));
  transition:transform .4s var(--ease)}
.product:hover .product__media img{transform:scale(1.05)}
.product__flag{position:absolute;top:1rem;right:1rem;padding:.34rem .75rem;border-radius:0;
  font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink)}
.product__body{padding:clamp(1.4rem,2.5vw,1.85rem);display:flex;flex-direction:column;flex:1}
.product__body h3{font-size:1.2rem;margin-bottom:.15rem}
.product__sub{font-size:.9rem;font-weight:700;color:var(--accent-ink);margin:0 0 .85rem}
.product__body p{font-size:.98rem}
.specs{list-style:none;padding:0;margin:auto 0 0;display:flex;flex-wrap:wrap;gap:.45rem;padding-top:1.15rem}
.specs li{display:inline-flex;align-items:center;gap:.35rem;padding:.34rem .7rem;border-radius:0;
  background:var(--bg-soft);border:1px solid var(--line);font-size:.8rem;font-weight:700;color:var(--navy)}
.specs li[data-no="1"]{opacity:.55;text-decoration:line-through}

/* ============================================================
   13. FLOATING ACTIONS (WhatsApp + back to top)
   ============================================================ */
.float-actions{position:fixed;right:1.25rem;bottom:1.25rem;z-index:95;
  display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}

.wa-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.15rem;
  background:#25D366;color:#06331A;text-decoration:none;font-weight:800;font-size:.95rem;
  border:2px solid #128C7E;box-shadow:0 8px 22px rgba(37,211,102,.4);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
.wa-btn:hover{background:#1FBF5B;transform:translateY(-2px);box-shadow:0 12px 28px rgba(37,211,102,.5)}
.wa-btn svg{width:22px;height:22px;flex:none}
@media (max-width:600px){
  /* Collapse to a square icon button so it never covers page content. */
  .wa-btn__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .wa-btn{padding:.85rem}
}

/* ============================================================
   14. FAQ
   ============================================================ */
.faq{display:grid;gap:.85rem;max-width:860px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:0 1.4rem;box-shadow:var(--shadow-sm);transition:border-color .25s var(--ease)}
.faq details[open]{border-color:#CFE0F0}
.faq summary{list-style:none;cursor:pointer;padding:1.25rem 2.25rem 1.25rem 0;position:relative;
  font-weight:700;color:var(--ink);font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.35rem;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--navy-700);border-bottom:2.5px solid var(--navy-700);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq details > div{padding:0 0 1.35rem;color:var(--body)}
.faq details > div p:last-child{margin-bottom:0}

/* ============================================================
   15. PAGE HERO (interior pages)
   ============================================================ */
.page-hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:linear-gradient(150deg,var(--navy-900) 0%,var(--navy) 60%,var(--navy-700) 100%);
  padding:clamp(3rem,6vw,5rem) 0 clamp(3.25rem,6vw,5rem)}
.page-hero::before{content:"";position:absolute;z-index:-1;inset:0;
  background:radial-gradient(ellipse 55% 90% at 82% 20%,rgba(0,194,255,.26),transparent 60%)}
.page-hero h1{color:#fff;margin-bottom:.4rem;max-width:20ch}
.page-hero .lead{color:rgba(255,255,255,.82);max-width:62ch;margin-bottom:0}
.breadcrumbs{font-size:.88rem;margin:0 0 1.25rem;color:rgba(255,255,255,.62)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.breadcrumbs li:not(:last-child)::after{content:"/";margin-left:.5rem;color:rgba(255,255,255,.34)}
.breadcrumbs a{color:rgba(255,255,255,.85);text-decoration:none}
.breadcrumbs a:hover{color:#fff;text-decoration:underline}
.breadcrumbs [aria-current]{color:#fff;font-weight:600}

/* ============================================================
   16. CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr}}
.contact-methods{display:grid;gap:1rem}
.contact-method{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:1.35rem;text-decoration:none;color:inherit;
  box-shadow:var(--shadow-sm);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.contact-method:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#CFE0F0}
.contact-method__icon{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:0;
  background:linear-gradient(140deg,var(--navy),var(--navy-700));color:#fff}
.contact-method__icon svg{width:21px;height:21px}
.contact-method__icon--wa{background:#25D366;color:#06331A}
/* Only the small label is uppercased - the value below it must keep its own case
   (an uppercased email address reads as a mistake). */
.contact-method > span:not(.contact-method__icon){display:block;min-width:0}
.contact-method > span:not(.contact-method__icon) > span{display:block;font-size:.78rem;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
.contact-method strong{display:block;font-size:1.08rem;color:var(--ink);font-weight:800;
  text-transform:none;letter-spacing:0;overflow-wrap:anywhere}

.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3.2vw,2.5rem);box-shadow:var(--shadow-md)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field label{font-weight:700;font-size:.9rem;color:var(--ink)}
.field .req{color:#C2410C}
.field input,.field textarea,.field select{width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);
  border-radius:0;font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(0,194,255,.16)}
.field textarea{min-height:140px;resize:vertical}
.form-note{font-size:.87rem;color:var(--muted);margin:.35rem 0 0}
.form-msg{padding:1rem 1.15rem;border-radius:0;margin-bottom:1.35rem;font-weight:600}
.form-msg--ok{background:#ECFDF5;border:1px solid #A7F3D0;color:#065F46}
.form-msg--err{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}

/* ============================================================
   17. FOOTER
   ============================================================ */
.site-footer{background:var(--navy-900);color:rgba(255,255,255,.68);
  padding:clamp(3rem,6vw,4.5rem) 0 0;font-size:.98rem}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:clamp(2rem,5vw,4rem);
  padding-bottom:3rem}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr;gap:2.25rem}}
.site-footer img.footer-logo{width:172px;margin-bottom:1.25rem}
.site-footer h2{color:#fff;font-size:1rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:1.1rem}
.site-footer a{color:rgba(255,255,255,.78);text-decoration:none;transition:color .2s var(--ease)}
.site-footer a:hover{color:var(--accent-2);text-decoration:underline}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.65rem}
.footer-contact li{display:flex;gap:.7rem;align-items:flex-start}
.footer-contact svg{flex:none;width:18px;height:18px;margin-top:.24rem;color:var(--accent)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.11);padding:1.5rem 0;
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;
  font-size:.9rem;color:rgba(255,255,255,.5)}

/* ============================================================
   18. SCROLL REVEAL + UTILITIES
   ============================================================ */
/* Reveal is opt-in via the .js class set in the document head. Without JavaScript
   - or if the script fails to run - every .reveal element stays fully visible,
   so content is never hidden from a reader or a crawler by a broken animation. */
.js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .65s var(--ease),transform .65s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}
.screen-reader-text{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.to-top{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);
  background:#fff;color:var(--navy);cursor:pointer;box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:var(--navy)}
.to-top svg{width:20px;height:20px}

/* Editor content fallback for pages edited in WP */
.entry-content{max-width:74ch}
.entry-content > *:last-child{margin-bottom:0}

/* ============================================================
   19. JARRISON TIME PAGE
   ============================================================ */
/* Components used only on /jarrison-time/. The point of them is that the page
   should not read as the home page with different words: no icon cards, no
   timeline, no image splits, no accordion. Everything here is flat, typographic
   and text-led, which also suits a page whose job is to answer questions. */

.wrap--narrow{max-width:940px}

/* Hero fact strip: three claims on one line, divided by rules rather than boxes. */
.fact-strip{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;margin:2.25rem 0 0;padding:0;
  font-size:.82rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.78)}
.fact-strip li{display:flex;align-items:center}
.fact-strip li:not(:first-child)::before{content:"";width:1px;height:1em;margin-right:1.5rem;
  background:rgba(255,255,255,.28)}
/* Wrapped, the dividers would start a line - so stack them instead. */
@media (max-width:640px){
  .fact-strip{display:grid;gap:.45rem}
  .fact-strip li:not(:first-child)::before{content:none}
}
.page-hero .btn-row{margin-top:2rem}

/* Scope table. A real table because it is real tabular content - a term and what
   it covers - and because nothing else on the site looks like one. */
.scope{width:100%;border-collapse:collapse;margin-top:2.5rem;text-align:left}
.scope tr{border-top:1px solid var(--line)}
.scope tr:last-child{border-bottom:1px solid var(--line)}
.scope th{width:26%;padding:1.35rem 1.5rem 1.35rem 0;vertical-align:top;
  color:var(--navy);font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.scope td{padding:1.35rem 0;vertical-align:top;color:var(--body)}
@media (max-width:700px){
  .scope,.scope tbody,.scope tr,.scope th,.scope td{display:block;width:auto}
  .scope tr{padding:1.35rem 0}
  .scope th{padding:0 0 .35rem}
  .scope td{padding:0}
}

/* Numbered steps. Two columns of large outline numerals - deliberately unlike the
   home page's dotted timeline, which is icon-led and vertical. */
.steps{counter-reset:step;list-style:none;margin:2.5rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:2.25rem clamp(2rem,4vw,3.5rem)}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:2rem}}
.steps li{counter-increment:step;position:relative;padding-left:4.25rem}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:-.15rem;
  font-size:2.1rem;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--navy);
  opacity:.22}
.steps li h3{margin-bottom:.35rem}
.steps li p{margin:0}

/* Dark band. Breaks the page in half and gives the takeover pitch - the highest
   intent copy on the site - somewhere it cannot be scrolled past. */
.band{background:var(--navy-900);color:rgba(255,255,255,.8);position:relative;overflow:hidden;
  isolation:isolate;padding:clamp(2.75rem,5vw,4rem) 0}
.band::before{content:"";position:absolute;z-index:-1;inset:0;
  background:radial-gradient(ellipse 60% 120% at 88% 30%,rgba(0,194,255,.22),transparent 62%)}
.band__inner{display:grid;grid-template-columns:1.5fr auto;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media (max-width:860px){.band__inner{grid-template-columns:1fr}}
.band h2{color:#fff;font-size:clamp(1.5rem,1.1rem + 1.5vw,2.1rem);margin-bottom:.6rem}
.band p{margin:0;max-width:62ch}
.band .btn-row{margin:0}

/* Flat Q&A. The home page uses an accordion; this page shows every answer, which
   suits a visitor comparing resellers and is what FAQ schema expects anyway. */
.qa{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem clamp(2rem,4vw,3.5rem);margin-top:2.5rem}
@media (max-width:760px){.qa{grid-template-columns:1fr;gap:1.75rem}}
.qa__item{border-top:2px solid var(--navy);padding-top:1.1rem}
.qa__item h3{font-size:1.12rem;margin-bottom:.4rem}
.qa__item p{margin:0}
.qa__foot{margin:2.5rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line);color:var(--muted)}