/*
Theme Name: Colibri Services
Theme URI: https://colibriservices.co.za
Author: Colibri Services
Author URI: https://colibriservices.co.za
Description: Custom brochure theme for Colibri Services - independent electrical engineering, technical assurance, and owner's engineering.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: colibri-services
*/

:root{
    --ink:#20252B;--slate:#2B3138;--panel:#191D22;--paper:#FFFFFF;--paper-2:#F5F6F7;
    --emerald:#0078D4;--emerald-dim:#0063B1;--gorget:#00AEEF;--text:#2E343B;
    --fog:#6B7480;--fog-dark:#9AA4AE;--line:#D9DDE2;--line-ink:rgba(255,255,255,.10);
    --maxw:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--text);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,56px)}
  h1,h2,h3{font-family:'Spectral',Georgia,serif;font-weight:400;line-height:1.14;letter-spacing:-.01em}
  h2{font-size:clamp(1.9rem,3.8vw,2.8rem);margin:.5rem 0 .5rem}
  .sub{font-family:'Spectral',serif;font-size:1.15rem;color:var(--emerald-dim);margin-bottom:1rem}
  .section.dark .sub{color:var(--fog-dark)}
  p{max-width:64ch}
  .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--emerald-dim);font-weight:500;display:inline-flex;align-items:center;gap:.6em}
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--emerald)}
  .eyebrow.on-ink{color:var(--emerald)}
  .lead{font-size:1.1rem;color:var(--fog);max-width:64ch}
  .section.dark .lead{color:#AEB6BF}

  /* header */
  header{position:sticky;top:0;z-index:100;background:rgba(32,37,43,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-ink)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:70px}
  .brand{display:flex;align-items:center;gap:12px;color:var(--paper)}
  .brand .mark{width:40px;height:auto;flex:none}
  .brand b{font-family:'Spectral',serif;font-weight:500;font-size:1.15rem}
  .brand span{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.2em;color:var(--fog-dark);text-transform:uppercase;display:block;margin-top:1px}
  .navlinks{display:flex;gap:24px;align-items:center}
  .navlinks a{font-size:.88rem;color:var(--fog-dark);transition:color .2s}
  .navlinks a:hover{color:var(--paper)}
  .btn{font-family:'Inter',sans-serif;font-size:.85rem;font-weight:500;padding:11px 20px;border-radius:2px;transition:.22s;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:.5em;white-space:nowrap}
  .btn-primary{background:var(--emerald);color:#FFFFFF}
  .btn-primary:hover{background:#2A93E0;transform:translateY(-1px)}
  .btn-ghost{border-color:var(--line-ink);color:var(--paper)}
  .btn-ghost:hover{border-color:var(--emerald);color:var(--emerald)}
  .menu-toggle{display:none;background:none;border:0;color:var(--paper);cursor:pointer;padding:8px}

  /* hero */
  .hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden}
  .hero-photo{position:absolute;inset:0;background:var(--hero-img,none) center/cover no-repeat;opacity:.5}
  .hero-scene{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;opacity:.16}
  .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,37,43,.72),rgba(32,37,43,.86)),radial-gradient(120% 90% at 82% 20%,rgba(0,120,212,.12),transparent 60%);pointer-events:none}
  .hero .wrap{position:relative;z-index:3;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-top:clamp(60px,9vw,110px);padding-bottom:clamp(60px,9vw,110px)}
  .hero h1{font-size:clamp(2.4rem,5.4vw,4rem);font-weight:300;margin:1.1rem 0 1.2rem}
  .hero h1 em{font-style:normal;color:var(--emerald)}
  .hero p{color:#C9CFD6;font-size:1.08rem;max-width:52ch}
  .hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
  .hero-tags{margin-top:32px;font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.12em;color:var(--fog-dark);text-transform:uppercase;display:flex;gap:12px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line-ink)}
  .hero-art{display:flex;justify-content:center}
  .hero-art svg{width:100%;max-width:420px;height:auto;overflow:visible}
  .hero-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
  .hero-fig figcaption{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fog-dark);display:flex;align-items:center;gap:.7em;text-align:center}
  .hero-fig figcaption::before{content:"";width:22px;height:1px;background:var(--emerald);flex:none}

  /* section rhythm */
  .section{padding:clamp(60px,8vw,104px) 0}
  .section.tint{background:var(--paper-2)}
  .section.dark{background:var(--ink);color:var(--paper)}
  .section.dark h2{color:var(--paper)}
  .center{text-align:center}
  .center .eyebrow{justify-content:center}
  .center p{margin-left:auto;margin-right:auto}

  /* trust strip */
  .trust{background:var(--slate);color:var(--paper);border-top:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink)}
  .trust .wrap{padding:34px 0;display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .trust b{font-family:'Spectral',serif;font-weight:500;font-size:1.15rem}
  .trust .sectors{display:flex;gap:10px;flex-wrap:wrap}
  .trust .sectors span{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fog-dark);border:1px solid var(--line-ink);padding:7px 13px;border-radius:2px}

  /* about */
  .about-grid{display:block}
  .about-grid .col p+p{margin-top:1rem}
  .about-points{margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
  .about-points li{list-style:none;font-size:.92rem;color:var(--fog);display:flex;gap:9px;align-items:flex-start}
  .about-points li::before{content:"";width:14px;height:14px;margin-top:4px;flex:none;border:1.5px solid var(--emerald);border-radius:50%}

  /* cards grid */
  .grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:40px}
  .g3{grid-template-columns:repeat(3,1fr)}
  .card{background:var(--paper);padding:30px 26px;transition:.25s}
  .section.tint .card{background:var(--paper-2)}
  .card:hover{background:#fff}
  .card .idx{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--emerald-dim);letter-spacing:.1em}
  .card h3{font-size:1.15rem;font-weight:500;margin:12px 0 8px}
  .card p{font-size:.9rem;color:var(--fog)}
  .svc-ico{width:40px;height:40px;fill:none;stroke:var(--emerald-dim);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:14px}

  /* industry image cards */
  .ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
  .ind-card{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;transition:.25s}
  .section.tint .ind-card{background:var(--paper)}
  .ind-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(32,37,43,.10)}
  .ind-figure{position:relative;background:var(--panel);aspect-ratio:16/9;min-height:190px;overflow:hidden}
  .ind-figure::after{content:attr(data-tag);position:absolute;left:14px;top:12px;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fog-dark)}
  .ind-scene{position:absolute;inset:0;width:100%;height:100%}
  .ind-body{padding:22px 22px 26px}
  .ind-body h3{font-size:1.18rem;font-weight:500;margin-bottom:8px}
  .ind-body p{font-size:.9rem;color:var(--fog)}

  /* expertise spec grid */
  .spec{margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-ink);border:1px solid var(--line-ink)}
  .spec span{background:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:#C9CFD6;padding:14px 16px;transition:.2s;display:flex;align-items:center;gap:9px}
  .spec span::before{content:"";width:5px;height:5px;background:var(--emerald);flex:none;border-radius:50%}
  .spec span:hover{background:var(--slate);color:#fff}

  /* figure */
  .dwg{margin-top:48px;border:1px solid var(--line);background:rgba(0,120,212,.03);padding:clamp(20px,3vw,32px);border-radius:2px}
  .section.dark .dwg{border-color:var(--line-ink);background:rgba(255,255,255,.025)}
  .dwg svg{width:100%;height:auto;display:block}
  .dwg figcaption{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fog);margin-top:16px;display:flex;align-items:center;gap:.7em}
  .dwg figcaption::before{content:"";width:22px;height:1px;background:var(--emerald);flex:none}
  .section.dark .dwg figcaption{color:var(--fog-dark)}

  /* projects */
  .proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
  .proj{background:#fff;border:1px solid var(--line);border-left:2px solid var(--emerald);border-radius:2px;padding:28px 26px;transition:.25s}
  .section.tint .proj{background:var(--paper)}
  .proj:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(32,37,43,.10)}
  .proj h3{font-size:1.2rem;font-weight:500;margin-bottom:14px}
  .proj .tags{display:flex;flex-wrap:wrap;gap:8px}
  .proj .tags span{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--emerald-dim);background:rgba(0,120,212,.08);padding:6px 11px;border-radius:2px}

  /* standards */
  .std-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
  .std-grid span{font-family:'IBM Plex Mono',monospace;font-size:.86rem;letter-spacing:.06em;color:var(--text);border:1px solid var(--line);padding:12px 20px;border-radius:2px;background:#fff}
  .section.tint .std-grid span{background:var(--paper)}

  /* why */
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 40px;margin-top:44px}
  .why h3{display:flex;align-items:baseline;gap:12px;font-size:1.1rem;font-weight:500;margin-bottom:9px}
  .why h3 i{font-family:'IBM Plex Mono',monospace;font-style:normal;font-size:.78rem;color:var(--emerald-dim)}
  .why p{font-size:.9rem;color:var(--fog)}

  /* process timeline */
  .steps{margin-top:44px;border-top:1px solid var(--line-ink)}
  .step{display:grid;grid-template-columns:76px 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line-ink);align-items:baseline;transition:.25s}
  .step:hover{padding-left:10px}
  .step .n{display:flex;flex-direction:column;gap:13px;align-items:flex-start;font-family:'IBM Plex Mono',monospace;font-size:1.05rem;color:var(--emerald)}
  .p-ico{width:24px;height:24px;fill:none;stroke:var(--emerald);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .step h3{font-size:1.2rem;color:var(--paper);margin-bottom:5px}
  .step p{color:#9AA4AE;font-size:.92rem}

  /* stats / capability */
  .cap-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px}
  .cap h3{font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--emerald);font-weight:500;margin-bottom:18px}
  .cap .chips{display:flex;flex-wrap:wrap;gap:10px}
  .cap .chips span{font-size:.9rem;color:#C9CFD6;border:1px solid var(--line-ink);padding:9px 15px;border-radius:2px}

  /* contact */
  .contact{background:var(--slate);color:var(--paper);position:relative;overflow:hidden}
  .contact::before{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;background:radial-gradient(circle,rgba(0,174,239,.14),transparent 68%)}
  .contact .wrap{position:relative;z-index:2}
  .contact h2{font-weight:300}
  .contact h2 em{font-style:normal;color:var(--emerald)}
  .contact-art{position:absolute;top:26px;right:26px;width:158px;height:auto;opacity:.6;stroke:var(--emerald);fill:none;pointer-events:none}
  .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 34px;margin-top:38px}
  .cinfo .k{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fog-dark);margin-bottom:6px}
  .cinfo .v{font-size:1rem;color:var(--paper)}
  .cinfo a.v{color:var(--emerald)}
  .contact-cta{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

  /* footer */
  footer{background:var(--ink);color:var(--fog-dark);padding:64px 0 34px;border-top:1px solid var(--line-ink)}
  .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
  .foot-brand .brand{margin-bottom:14px}
  .foot-brand p{font-size:.88rem;color:var(--fog-dark);max-width:34ch}
  .foot-col h4{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--emerald);font-weight:500;margin-bottom:14px}
  .foot-col a,.foot-col p{display:block;font-size:.86rem;color:var(--fog-dark);padding:5px 0;transition:color .2s}
  .foot-col a:hover{color:var(--emerald)}
  .foot-bottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--line-ink);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.05em}
  .foot-bottom a:hover{color:var(--emerald)}

  /* reveal (progressive enhancement: hidden only when JS present) */
  .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
  .js .reveal.in{opacity:1;transform:none}

  @media(max-width:960px){
    .navlinks{position:fixed;inset:70px 0 auto 0;background:var(--slate);flex-direction:column;gap:0;padding:8px 0;transform:translateY(-130%);transition:transform .3s;border-bottom:1px solid var(--line-ink)}
    .navlinks.open{transform:none}
    .navlinks a{padding:13px 32px;width:100%}
    .navlinks .btn{margin:10px 32px;justify-content:center}
    .menu-toggle{display:block}
    .hero .wrap{grid-template-columns:1fr}
    .hero-art{order:-1;max-width:280px}
    .about-grid{grid-template-columns:1fr}
    .g3{grid-template-columns:1fr}
    .ind-grid{grid-template-columns:1fr 1fr}
    .spec{grid-template-columns:1fr 1fr}
    .proj-grid,.why-grid,.cap-grid,.about-points{grid-template-columns:1fr}
    .why-grid{gap:26px}
    .contact-grid{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:560px){
    .ind-grid,.contact-grid,.foot-grid{grid-template-columns:1fr}
    .step{grid-template-columns:52px 1fr;gap:14px}
    .foot-bottom{flex-direction:column}
    .contact-art{display:none}
  }
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}html{scroll-behavior:auto}}