/*
Theme Name: Cartovum
Theme URI: https://cartovum.com/
Author: Cartovum
Description: Custom theme for Cartovum, a digital growth agency. The design system is ported from the Cartovum one-page concept and recoloured with the Cartovum brand palette.
Version: 0.12.1
Requires at least: 6.2
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: cartovum
*/

/* ==========================================================================
   Contents
    1. Tokens
    2. Base
    3. Header: topbar, navigation, buttons
    4. Hero and dashboard mockup
    5. Sections, trust bar, industry cards
    6. Growth system steps and services
    7. Split, feature box, checks, stats
    8. Portfolio
    9. Testimonials and FAQ
   10. CTA and footer
   11. Additions: variants the reference HTML doesn't have
   12. WordPress content and utility classes
   13. Responsive

   Component rules keep the reference HTML's layout, spacing, radius and
   shadow geometry unchanged. Only colour values differ (see README).
   ========================================================================== */

/* 1. Tokens
   ========================================================================== */
:root{
  /* Brand: the logo gradient runs red → orange-mid → orange */
  --brand-red:#FD2820;
  --brand-orange-mid:#FA4709;
  --brand-orange:#F05F05;
  --accent-amber:#E98304;
  --accent-text:#C2410C; /* kickers, text links, nav hover on light surfaces; 5.2:1 on white */

  /* Trend indicators only */
  --positive:#16a34a;
  --positive-on-dark:#22c55e;

  /* Light neutrals, warmed from the reference's slate greys */
  --ink:#0A0A0A;
  --bg:#faf8f6;
  --surface:#ffffff;
  --surface-2:#f5f0ec;
  --muted:#6b6360;
  --line:#ece6e1;
  --tint:#fff1e8;

  /* Warm darks, replacing the reference's navy */
  --dark-950:#0f0806; /* topbar, footer */
  --dark-900:#140b08; /* .system */
  --dark-850:#160c09; /* .feature-box */
  --dark-800:#170d0a; /* .dashboard */
  --dark-750:#1c110d; /* .step, .metric */
  --dark-700:#231612; /* .d-body */
  --dark-line:#3d2c24;
  --on-dark-muted:#ada39b;

  --font-sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --max:1180px;
  --gutter:40px;
  --section-y:95px;

  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-xl:30px;
  --radius-2xl:32px;
  --radius-pill:999px;

  --shadow:0 24px 70px rgba(22,12,9,.10);
  --shadow-btn:0 15px 35px rgba(22,12,9,.18);
  --shadow-btn-hover:0 20px 42px rgba(22,12,9,.24);
  --shadow-float:0 22px 50px rgba(22,12,9,.25);
  --shadow-dashboard:0 35px 90px rgba(22,12,9,.25);
  --shadow-menu:0 20px 50px rgba(22,12,9,.12);
}

/* 2. Base
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--ink);background:var(--bg);line-height:1.6}
a{text-decoration:none;color:inherit}
img,video{max-width:100%;height:auto}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--brand-orange);outline-offset:3px}

h1{font-size:clamp(46px,5.8vw,76px);line-height:1.02;letter-spacing:-4px;max-width:720px}
h2{font-size:clamp(32px,4vw,49px);line-height:1.05;letter-spacing:-2.2px}
.gradient-text{background:linear-gradient(100deg,var(--brand-red),var(--brand-orange-mid) 55%,var(--brand-orange));-webkit-background-clip:text;background-clip:text;color:transparent}

.container{width:min(var(--max),calc(100% - var(--gutter)));margin:auto}

/* 3. Header: topbar, navigation, buttons
   ========================================================================== */
.topbar{background:var(--dark-950);color:#beb5b0;font-size:13px}
.topbar-inner{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.top-left,.top-right{display:flex;gap:20px;align-items:center}
.topbar a:hover{color:#fff}

.nav-wrap{
  position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(236,230,225,.8)
}
.admin-bar .nav-wrap{top:32px}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-weight:850;font-size:22px;letter-spacing:-.8px}
.logo-image{display:block;height:35px;width:auto}
.logo-mark{
  width:35px;height:35px;border-radius:11px;
  background:linear-gradient(135deg,var(--brand-red),var(--brand-orange-mid),var(--brand-orange));
  display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:0 10px 25px rgba(250,71,9,.28)
}
.nav .nav-links{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:650;color:#5f554e;list-style:none}
.nav .nav-links a:hover{color:var(--accent-text)}
.nav .nav-links .menu-item-cta{display:none} /* the phone-only copy of the header CTA, see section 13 */
.nav .nav-links .nav-cta:hover{color:#fff}
.menu-btn{display:none;border:0;background:transparent;font-size:25px;color:var(--ink);cursor:pointer}

.nav-cta,.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-sm);padding:12px 18px;font-weight:750;font-size:14px;
  transition:.25s ease
}
.nav-cta{background:var(--ink);color:#fff}
.nav-cta:hover{transform:translateY(-2px);background:#302822}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{background:var(--ink);color:#fff;box-shadow:var(--shadow-btn)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-btn-hover)}
.btn-secondary{background:#fff;border:1px solid var(--line)}
.btn-secondary:hover{border-color:#c0b6b0;transform:translateY(-2px)}

/* 4. Hero and dashboard mockup
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;padding:92px 0 80px;
  background:
    radial-gradient(circle at 78% 28%,rgba(250,71,9,.17),transparent 30%),
    radial-gradient(circle at 60% 80%,rgba(233,131,4,.12),transparent 25%),
    linear-gradient(180deg,#fff 0%,var(--bg) 100%);
}
.hero-grid{display:grid;grid-template-columns:1fr .92fr;gap:55px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid #e9e3df;
  background:#fff;border-radius:var(--radius-pill);font-size:12px;font-weight:800;color:#695f58;margin-bottom:22px
}
.dot{width:7px;height:7px;background:var(--accent-amber);border-radius:50%;box-shadow:0 0 0 5px rgba(233,131,4,.12)}
.hero-copy p{font-size:18px;color:var(--muted);max-width:590px;margin:25px 0 30px}
.mini-proof{display:flex;align-items:center;gap:13px;margin-top:28px;color:var(--muted);font-size:13px}
.avatars{display:flex}
.avatar{width:31px;height:31px;border-radius:50%;border:2px solid #fff;background:linear-gradient(135deg,#ffe4d6,#fdc4a5);margin-left:-7px}
.avatar:first-child{margin-left:0}

.dashboard{
  position:relative;min-height:480px;border-radius:var(--radius-2xl);background:var(--dark-800);
  padding:18px;box-shadow:var(--shadow-dashboard);overflow:hidden
}
.dashboard:before{
  content:"";position:absolute;width:300px;height:300px;right:-80px;top:-100px;
  background:radial-gradient(circle,rgba(250,71,9,.55),transparent 68%);
}
.d-top{height:42px;display:flex;align-items:center;justify-content:space-between;color:var(--on-dark-muted);font-size:12px}
.dots{display:flex;gap:6px}
.dots span{width:7px;height:7px;border-radius:50%;background:#4a4039}
.d-body{position:relative;background:var(--dark-700);border:1px solid var(--dark-line);border-radius:20px;padding:20px;min-height:390px}
.d-label{font-size:12px;color:var(--on-dark-muted)}
.d-number{font-size:38px;font-weight:850;color:#fff;letter-spacing:-1.5px;margin-top:3px}
.d-up{color:var(--positive-on-dark);font-size:12px;font-weight:800}
.chart{height:145px;margin:18px 0 16px;display:flex;align-items:end;gap:9px}
.bar{flex:1;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,var(--brand-red),var(--brand-orange-mid) 50%,var(--brand-orange));opacity:.9}
.bar:nth-child(1){height:35%}.bar:nth-child(2){height:49%}.bar:nth-child(3){height:43%}.bar:nth-child(4){height:65%}
.bar:nth-child(5){height:56%}.bar:nth-child(6){height:76%}.bar:nth-child(7){height:68%}.bar:nth-child(8){height:91%}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.metric{background:var(--dark-750);border:1px solid var(--dark-line);border-radius:14px;padding:13px}
.metric b{display:block;color:#fff;font-size:17px}
.metric span{font-size:10px;color:#9a8f89}
.float-card{
  position:absolute;right:-22px;bottom:42px;background:#fff;color:#291f1b;padding:16px 17px;
  border-radius:17px;box-shadow:var(--shadow-float);width:180px
}
.float-card small{color:var(--muted)}
.float-card strong{display:block;font-size:24px;margin:2px 0}
.positive{color:var(--positive);font-size:12px;font-weight:800}

/* 5. Sections, trust bar, industry cards
   ========================================================================== */
.section{padding:var(--section-y) 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:38px}
.section-head p{max-width:470px;color:var(--muted)}
.kicker{font-size:12px;text-transform:uppercase;letter-spacing:1.8px;color:var(--accent-text);font-weight:850;margin-bottom:10px}

.trust{padding:35px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-row{display:grid;grid-template-columns:repeat(var(--trust-cols,5),1fr);gap:20px;align-items:center;text-align:center;color:#aea69f;font-size:18px;font-weight:850}
.trust-row span{filter:grayscale(1)}

.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.industry{
  min-height:230px;border-radius:var(--radius-lg);padding:23px;display:flex;flex-direction:column;justify-content:space-between;
  background:#fff;border:1px solid var(--line);transition:.3s;overflow:hidden;position:relative
}
.industry:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:#e2dad6}
.industry .icon{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:var(--tint);font-size:20px}
.industry h3{font-size:19px;margin-top:18px}
.industry p{font-size:13px;color:var(--muted);margin-top:6px}
.arrow{align-self:flex-end;font-size:20px}

/* 6. Growth system steps and services
   ========================================================================== */
.system{background:var(--dark-900);color:#fff}
.system .kicker{color:var(--brand-orange)} /* --accent-text is too dark on warm dark */
.system .section-head p{color:#b5aaa4}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.step{padding:27px;border:1px solid var(--dark-line);background:var(--dark-750);border-radius:var(--radius-lg);min-height:210px}
.step-num{color:var(--accent-amber);font-weight:900;font-size:13px}
.step h3{font-size:21px;margin:25px 0 8px}
.step p{color:var(--on-dark-muted);font-size:14px}

.services{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.service{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:25px;min-height:220px;
  transition:.3s
}
.service:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.service-icon{font-size:24px;margin-bottom:27px;color:var(--accent-amber)}
.service h3{font-size:18px;margin-bottom:7px}
.service p{font-size:13px;color:var(--muted)}
.service a{display:inline-block;margin-top:17px;color:var(--accent-text);font-weight:800;font-size:13px}

/* 7. Split, feature box, checks, stats
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}
.section-copy{color:var(--muted);margin-top:20px;max-width:560px}
.feature-box{background:var(--dark-850);color:#fff;border-radius:var(--radius-xl);padding:35px;min-height:440px;position:relative;overflow:hidden}
.feature-box:after{content:"";position:absolute;width:300px;height:300px;right:-90px;bottom:-130px;border-radius:50%;background:rgba(250,71,9,.28);filter:blur(15px)}
.feature-box h3{font-size:31px;line-height:1.15;max-width:430px}

.checks{display:grid;gap:16px;margin-top:30px}
.check{display:flex;gap:12px;align-items:flex-start}
.check-mark{width:23px;height:23px;border-radius:50%;background:#4a2410;color:var(--accent-amber);display:grid;place-items:center;font-size:12px;flex:none}
.check b{display:block;font-size:15px}
.check span:not(.check-mark){font-size:13px;color:#a0968f}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px}
.stat{padding:22px;border-radius:20px;background:#f6f3f1;color:var(--ink)}
.stat b{font-size:35px;letter-spacing:-1.5px}
.stat span{display:block;color:var(--muted);font-size:12px}

/* 8. Portfolio
   ========================================================================== */
.portfolio{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}
.project{border-radius:26px;overflow:hidden;min-height:270px;position:relative;background:linear-gradient(135deg,#ffe6d8,#fdd9c7)}
.project.large{min-height:560px}
.project:nth-child(2){background:linear-gradient(135deg,#fff0db,#ffe6d8)}
.project:nth-child(3){background:linear-gradient(135deg,#fde5df,#f6e9df)}
.project:before{
  content:"";position:absolute;inset:0;background:
  linear-gradient(135deg,rgba(22,12,9,.03),rgba(22,12,9,.12));
}
.project-ui{position:absolute;inset:35px 35px auto 35px;height:245px;background:#fff;border-radius:18px;box-shadow:0 25px 55px rgba(22,12,9,.15);padding:18px}
.project.large .project-ui{height:400px}
.ui-line{height:9px;background:#f0ece9;border-radius:10px;width:55%;margin-bottom:13px}
.ui-line.short{width:30%}
.ui-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:12px;margin-top:17px;height:170px}
.ui-panel{background:#f8f6f5;border-radius:12px}
.ui-panel:first-child{background:linear-gradient(145deg,#ffe8dc,#fdd0b4)}
.project-info{position:absolute;bottom:28px;left:30px;color:var(--ink);z-index:2}
.project-info b{font-size:20px}
.project-info span{display:block;color:#5f554e;font-size:12px}

/* 9. Testimonials and FAQ
   ========================================================================== */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px}
.stars{color:var(--accent-amber);letter-spacing:2px}
.quote p{font-size:15px;margin:18px 0;color:#4a4039}
.person{display:flex;align-items:center;gap:10px}
.person-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#fdc4a5,#ffe6c7)}
.person small{color:var(--muted)}

.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}
.faq-intro p{color:var(--muted);margin-top:18px}
.faq-list{display:grid;gap:10px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:20px 22px}
.faq-item b,.faq-item summary{display:flex;justify-content:space-between;gap:20px}
.faq-item summary{font-weight:700;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
/* The +/× icon is a small fixed square beside the first line, so rotating it
   doesn't move it when a question wraps onto several lines */
.faq-item summary .faq-icon{flex:none;display:inline-grid;place-items:center;align-self:flex-start;width:20px;height:20px;margin:3px 4px 0 0;transition:transform .25s ease}
.faq-item[open] summary .faq-icon{transform:rotate(45deg)}
.faq-item p{font-size:13px;color:var(--muted);margin-top:8px}

/* 10. CTA and footer
   ========================================================================== */
.cta{padding:90px 0}
.cta-box{
  border-radius:var(--radius-xl);padding:65px;text-align:center;color:#fff;overflow:hidden;position:relative;
  background:
    radial-gradient(circle at 20% 10%,rgba(233,131,4,.25),transparent 30%),
    radial-gradient(circle at 80% 80%,rgba(250,71,9,.35),transparent 30%),
    linear-gradient(135deg,#110907,#28160f)
}
.cta-box h2{max-width:760px;margin:auto}
.cta-box p{max-width:610px;margin:17px auto 28px;color:#c0b8b3}
.cta-box .btn{background:#fff;color:var(--ink)}
.feature-box .kicker,.cta-box .kicker{color:var(--accent-amber)}

/* Five columns (brand, Services, Company, Legal, Contact) per the content spec;
   the reference HTML has four. */
.site-footer{background:var(--dark-950);color:#fff;padding:70px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr .8fr .8fr;gap:45px;padding-bottom:50px}
.footer-brand p{color:#a59a94;max-width:330px;margin:18px 0}
.site-footer h4{font-size:13px;margin-bottom:16px}
.footer-links{display:grid;gap:9px;list-style:none;font-size:13px;color:#a59a94}
.footer-links a{font-size:13px;color:#a59a94}
.footer-links a:hover{color:#fff}
.copy{border-top:1px solid #302822;padding-top:20px;color:#8a7f78;font-size:12px;display:flex;justify-content:space-between}

/* 11. Additions: variants the reference HTML doesn't have
   Each one reuses the tokens and styling of an existing component.
   ========================================================================== */
.section--alt{background:var(--surface-2)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.checks--grid{grid-template-columns:repeat(3,1fr);gap:16px 28px}

/* Flow chain, e.g. "Your Store → Product Data → Merchant Center" */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.flow-item{display:inline-flex;align-items:center;padding:10px 16px;border:1px solid var(--line);background:#fff;border-radius:var(--radius-pill);font-size:14px;font-weight:750}
.flow-arrow{color:var(--accent-amber);font-weight:800}
.system .flow-item,.feature-box .flow-item{background:var(--dark-750);border-color:var(--dark-line);color:#fff}

/* Secondary button on dark surfaces */
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-ghost:hover{border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
.cta-box .actions{justify-content:center}
.cta-box .btn-ghost{background:transparent;color:#fff}
.cta-box .cta-note{margin:20px auto 0;font-size:13px}

/* 11b. Page builder sections
   What the page builder layouts need beyond the components above, built from
   their tokens and styling.
   ========================================================================== */
.hero-grid--text{grid-template-columns:1fr}
.hero-image{border-radius:var(--radius-2xl);overflow:hidden;box-shadow:var(--shadow-dashboard)}
.hero-image img{display:block;width:100%;height:auto}

/* Dashboard mockup: grey bars stand in for numbers until real ones are entered */
.ph-bar{display:block;height:10px;width:70%;margin:5px 0 7px;border-radius:10px;background:rgba(255,255,255,.14)}
.d-number .ph-bar{height:26px;width:150px;margin:10px 0 6px}
.float-card .ph-bar{height:18px;width:110px;margin:7px 0;background:#f0ece9}
.metrics--4{grid-template-columns:repeat(4,1fr)}

/* Sample content: only logged-in editors ever see it */
.sample-badge{
  position:absolute;top:12px;right:12px;z-index:3;padding:3px 8px;border-radius:var(--radius-pill);
  background:var(--brand-red);color:#fff;font-size:10px;font-weight:800;letter-spacing:1px;line-height:1.4;text-transform:uppercase
}
.quote,.stat{position:relative}
.faq-item summary .sample-badge{position:static;margin-left:auto;align-self:center}

.trust-heading{margin-bottom:18px;text-align:center;color:var(--muted);font-size:14px;font-weight:650}

.industry .card-kicker{margin:18px 0 0}
.industry .card-kicker+h3{margin-top:4px}
.industry>div>:first-child{margin-top:0}
.icon-image{display:block;width:24px;height:24px;object-fit:contain}
.service-icon .icon-image{width:28px;height:28px}
.services--3{grid-template-columns:repeat(3,1fr)}

.section-actions{margin-top:38px}
.system .section-actions .btn-primary{background:#fff;color:var(--ink);box-shadow:none}
.section-head+.checks{margin-top:0}
.checks--2{grid-template-columns:repeat(2,1fr)}

.stats-row{grid-template-columns:repeat(var(--stat-cols,4),1fr);margin-top:0}
.section:not(.system) .stats-row .stat{background:#fff;border:1px solid var(--line)}

.logo-grid{row-gap:28px}
.logo-grid a{filter:grayscale(1)}
.logo-grid img{display:block;max-height:34px;width:auto;margin:auto}

.split--text{grid-template-columns:1fr}
.split--text>div{max-width:760px}
.split--reverse>:first-child{order:2}
.split-image{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow)}
.split-image img{display:block;width:100%;height:auto}
.split .checks,.split .flow{margin-top:26px}
.feature-box .feature-copy{margin-top:14px;max-width:430px;color:#b5aaa4}
.feature-box .flow{margin-top:28px}
a.flow-item{transition:.25s ease}
a.flow-item:hover{border-color:#c0b6b0;transform:translateY(-2px)}
.flow-rows{display:grid;gap:18px}
.flow-label{margin-bottom:8px;color:var(--muted);font-size:13px;font-weight:750}
.system .flow-label{color:var(--on-dark-muted)}
.flow-links{margin-top:34px}
.flow+.cards{margin-top:28px}

/* Location pages */
.intro-content{max-width:760px}
.intro-content .section-copy{max-width:none;font-size:17px}
.cards--fit{grid-template-columns:repeat(var(--card-cols,5),1fr)} /* fewer than five industry cards share the row */

/* Breadcrumbs above the hero heading on industry and service pages */
.breadcrumbs{margin-bottom:18px;font-size:13px;color:var(--muted)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none}
.breadcrumbs li+li:before{content:"›";margin-right:8px;color:#b8aea8}
.breadcrumbs a:hover{color:var(--accent-text)}
.breadcrumbs [aria-current]{color:var(--ink);font-weight:650}

/* Primary navigation dropdowns (Industry ▾, Location ▾, Services ▾).
   The panel reuses the mobile menu's white card. */
.nav .nav-links>li{position:relative;display:flex;align-items:center;gap:2px}
.submenu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:24px;min-height:24px;padding:4px 2px;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.submenu-toggle:hover{color:var(--accent-text)}
.submenu-chevron{font-size:11px;line-height:1;transition:transform .2s ease}
.nav .nav-links>li.is-open>.submenu-toggle .submenu-chevron{transform:rotate(180deg)}
.nav .nav-links .sub-menu{
  position:absolute;top:calc(100% + 24px);left:-16px;z-index:20;min-width:240px;padding:10px;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-menu);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease,visibility .2s
}
.nav .nav-links .sub-menu:before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px} /* keeps hover alive across the gap */
.nav .nav-links .sub-menu a{display:block;padding:9px 12px;border-radius:10px;white-space:nowrap}
.nav .nav-links .sub-menu a:hover,.nav .nav-links .sub-menu .current-menu-item>a{background:var(--surface-2);color:var(--accent-text)}
.nav .nav-links>li.is-open>.sub-menu{opacity:1;visibility:visible;transform:none}
.nav .nav-links .current-menu-item>a,.nav .nav-links .current-menu-ancestor>a,.nav .nav-links .current-menu-ancestor>.submenu-toggle{color:var(--accent-text)}
@media(hover:hover) and (min-width:1100px){
  .nav .nav-links>li.menu-item-has-children:hover>.sub-menu{opacity:1;visibility:visible;transform:none}
}
@media(max-width:1099px){
  .nav .nav-links.is-open{max-height:calc(100vh - 100px);overflow-y:auto}
  .nav .nav-links>li{flex-wrap:wrap;width:100%}
  .nav .nav-links>li>.submenu-toggle{margin-left:auto}
  .nav .nav-links>li>.submenu-toggle--label{margin-left:0;width:100%;justify-content:space-between}
  .nav .nav-links .sub-menu{
    position:static;display:none;width:100%;min-width:0;margin-top:8px;padding:2px 0 2px 14px;
    border:0;border-left:2px solid var(--line);border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none;transition:none
  }
  .nav .nav-links .sub-menu:before{content:none}
  .nav .nav-links>li.is-open>.sub-menu{display:block}
  .nav .nav-links .sub-menu a{padding:8px 10px;white-space:normal}
}

/* 11c. Responsive hardening
   ========================================================================== */
/* Topbar: its items never wrap mid-line, and below 980px the tagline makes
   room for the contact details and social links. The reference topbar held
   only a tagline and an email address. */
.top-left>*,.top-right>*{white-space:nowrap}
@media(max-width:980px){
  .topbar-tagline{display:none}
}

/* Long words, addresses, code, tables and embeds in headings and editor
   content fit the column instead of widening the page. */
h1,h2,h3,h4{overflow-wrap:break-word}
.entry-content{overflow-wrap:break-word}
.entry-content pre{max-width:100%;overflow-x:auto}
.entry-content th,.entry-content td{overflow-wrap:anywhere}
.entry-content iframe,.entry-content embed,.entry-content object{max-width:100%}

/* Touch targets below 1100px: the ☰ button and dropdown toggles get a 44px
   / 40px hit area; negative margins keep the layout unchanged. */
@media(max-width:1099px){
  .menu-btn{min-width:44px;min-height:44px;margin-right:-10px}
  .nav .nav-links>li>.submenu-toggle{min-height:40px;margin-block:-9px}
  .nav .nav-links>li>.submenu-toggle:not(.submenu-toggle--label){min-width:44px;margin-right:-10px}
}

/* 11d. Text pages, articles, listings, search, 404 and comments
   Built from the hero, card and button styles above.
   ========================================================================== */
.hero.hero--compact{padding:72px 0 56px}
.hero--compact h1{font-size:clamp(38px,4.6vw,58px);letter-spacing:-2.4px;max-width:880px}
.hero--compact .hero-copy p{margin:18px 0 0;max-width:680px}
.hero--compact .actions,.hero--compact .search-form{margin-top:26px}
.hero--compact .mini-proof{margin-top:18px}

/* Readable long-form text */
.prose{max-width:760px;color:#2e2724;font-size:17px;line-height:1.75}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(26px,3vw,34px);line-height:1.15;letter-spacing:-1px;margin-top:1.8em}
.prose h3{font-size:22px;line-height:1.25;letter-spacing:-.4px;margin-top:1.6em}
.prose h4{font-size:18px;margin-top:1.4em}
.prose>:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.4em}
.prose img{border-radius:var(--radius-md)}
.prose figcaption{margin-top:8px;font-size:13px;color:var(--muted)}
.prose hr{margin:2.2em 0;border:0;border-top:1px solid var(--line)}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th,.prose td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{font-weight:750}
.prose code{padding:2px 6px;border-radius:6px;background:var(--surface-2);font-size:.9em}
.prose pre{padding:18px 20px;border-radius:var(--radius-md);background:var(--dark-850);color:#f5eee9;font-size:14px;line-height:1.6}
.prose pre code{padding:0;background:none;color:inherit}
.prose blockquote{padding:4px 0 4px 20px;border-left:3px solid var(--accent-amber);color:#4a4039;font-size:19px}
.editor-note{padding:14px 18px;border-radius:var(--radius-sm);background:var(--tint);color:var(--accent-text);font-size:14px}
.page-links{display:flex;flex-wrap:wrap;gap:8px;font-weight:700}

/* Articles */
.post-article{max-width:760px}
.post-featured{margin:0 0 36px;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow)}
.post-featured img{display:block;width:100%;height:auto}
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px;list-style:none}
.post-tags .flow-item{padding:7px 13px;font-size:13px}
.post-navigation{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.post-navigation .nav-links{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.post-navigation a{display:block;height:100%;padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;transition:.25s ease}
.post-navigation a:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.post-navigation .nav-next{grid-column:2;text-align:right}
.post-nav-label{display:block;color:var(--accent-text);font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}
.post-nav-title{display:block;margin-top:6px;font-weight:750}

/* Article cards */
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.post-card{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);transition:.3s}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.post-card-media{display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#ffe6d8,#fdd9c7)}
.post-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.post-card-placeholder{display:grid;place-items:center;width:100%;height:100%}
.post-card-placeholder .logo-mark{width:52px;height:52px;border-radius:16px;font-size:24px}
.post-card-body{display:flex;flex:1;flex-direction:column;padding:22px 24px 24px}
.post-card-body .card-kicker{margin:0 0 8px}
.post-card h3{font-size:19px;line-height:1.3}
.post-card h3 a:hover{color:var(--accent-text)}
.post-card p{margin-top:8px;color:var(--muted);font-size:14px}
.post-meta{margin-top:auto;padding-top:16px;color:var(--muted);font-size:12px}

/* Page numbers */
.pagination{margin-top:44px}
.pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.page-numbers{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-size:14px;font-weight:750}
a.page-numbers:hover{border-color:#c0b6b0}
.page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.page-numbers.dots{background:transparent;border-color:transparent}

/* Search */
.search-form{display:flex;gap:10px;max-width:620px}
.search-field{flex:1;min-width:0;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);font:inherit;font-size:15px}
.search-field:focus{border-color:transparent;outline:2px solid var(--brand-orange);outline-offset:1px}
.section .search-form{margin-bottom:36px}
.results-list{display:grid;gap:12px;max-width:860px}
.result-card{padding:22px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg)}
.result-card .card-kicker{margin:0 0 6px}
.result-title{font-size:21px;line-height:1.25;letter-spacing:-.4px}
.result-title a:hover{color:var(--accent-text)}
.result-card p{margin-top:8px;color:var(--muted);font-size:14px}
.result-url{display:block;margin-top:10px;color:#8a7f78;font-size:12px;overflow-wrap:anywhere}
.empty-state{max-width:620px}
.empty-state h2{font-size:clamp(26px,3vw,34px);letter-spacing:-1px}
.empty-state p{margin-top:12px;color:var(--muted)}
.empty-state .actions{margin-top:22px}

/* 404 */
.error-code{margin-bottom:10px;font-size:clamp(88px,14vw,168px);font-weight:900;line-height:.9;letter-spacing:-6px}

/* Comments */
.comments-area{max-width:760px}
.comments-title,.comment-reply-title{font-size:clamp(24px,3vw,30px);letter-spacing:-.8px}
.comment-list{margin:24px 0 40px;list-style:none}
.comment-list .children{margin-left:28px;list-style:none}
.comment-body{margin-bottom:12px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md)}
.comment-author{display:flex;align-items:center;gap:10px;font-weight:750}
.comment-author img.avatar{width:36px;height:36px;margin:0;border:0;background:none}
.comment-metadata{margin:4px 0 10px;color:var(--muted);font-size:12px}
.comment-content p{font-size:15px}
.reply{margin-top:8px;font-size:13px;font-weight:750}
.comment-form{display:grid;gap:14px;margin-top:18px}
.comment-form label{display:block;margin-bottom:6px;font-size:13px;font-weight:750}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;font:inherit;font-size:15px}
.comment-form .comment-form-cookies-consent{display:flex;align-items:flex-start;gap:8px;font-size:13px}
.comment-form .comment-form-cookies-consent label{margin:0;font-weight:500}
.comment-notes,.logged-in-as{color:var(--muted);font-size:13px}

@media(max-width:980px){
  .posts-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .hero.hero--compact{padding:52px 0 40px}
  .hero--compact h1{font-size:38px;letter-spacing:-1.8px}
  .posts-grid{grid-template-columns:1fr}
  .post-navigation .nav-links{grid-template-columns:1fr}
  .post-navigation .nav-next{grid-column:auto;text-align:left}
  .search-form{flex-direction:column}
  .prose{font-size:16px}
  .error-code{letter-spacing:-4px}
}

/* Portfolio: the large card spans both rows so the two small cards stack
   beside it. The reference omits this, which leaves the third card under the
   large one. */
.project.large{grid-row:span 2}
.project--image .project-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.project--image .project-info{padding:12px 16px;border-radius:14px;background:#fff;box-shadow:var(--shadow-float)}

@media(max-width:980px){
  .split--reverse>:first-child{order:0}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .project.large{grid-row:auto}
}
@media(max-width:650px){
  .metrics--4{grid-template-columns:repeat(2,1fr)}
  .checks--2{grid-template-columns:1fr}
  .d-number .ph-bar{width:110px}
}

/* 11e. Contact form and legal drafts
   The form card reuses the card and field styles above; the details panel is
   the reference's dark feature box.
   ========================================================================== */
.contact{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start}
.contact--single{grid-template-columns:minmax(0,760px)}
.contact-card{padding:35px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow);scroll-margin-top:110px}
.contact-card h3{margin-bottom:20px;font-size:24px;letter-spacing:-.6px}
.contact-aside{min-height:0}
.contact-aside:after{pointer-events:none}
.contact-aside>*{position:relative;z-index:1}
.contact-aside h3{font-size:27px}
.contact-details{display:grid;gap:14px;margin-top:24px;list-style:none}
.contact-details li{display:grid;gap:2px}
.contact-label{color:var(--on-dark-muted);font-size:12px;font-weight:750;letter-spacing:1px;text-transform:uppercase}
.contact-details a,.contact-details li>span:not(.contact-label){color:#fff;font-weight:700;overflow-wrap:anywhere}
.contact-details a:hover{color:var(--accent-amber)}
.contact-aside .flow{margin-top:22px}
.contact-aside .flow-item{padding:8px 14px;font-size:13px}
.contact-steps{margin-top:32px;padding-top:26px;border-top:1px solid var(--dark-line)}
.contact-aside>.contact-steps:first-child{margin-top:0;padding-top:0;border-top:0}
.contact-steps h4{margin-bottom:14px;font-size:15px}
.contact-steps ol{display:grid;gap:14px;list-style:none}
.contact-steps li{display:flex;gap:14px}
.contact-steps .step-num{flex:none;min-width:22px;line-height:1.7}
.contact-steps p{color:#b5aaa4;font-size:14px}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.form-field{display:grid;align-content:start;gap:6px;min-width:0}
.form-field--full{grid-column:1/-1}
.form-field label{font-size:13px;font-weight:750}
.form-field .optional{color:var(--muted);font-weight:500}
.form-field input,.form-field select,.form-field textarea{
  width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg);color:var(--ink);font:inherit;font-size:15px;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease
}
.form-field textarea{min-height:150px;resize:vertical}
.form-field select{
  appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6360' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center
}
.form-field input::placeholder,.form-field textarea::placeholder{color:#a79d97}
.form-field input:hover,.form-field select:hover,.form-field textarea:hover{border-color:#d8cfc9}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--brand-orange);background-color:#fff;box-shadow:0 0 0 4px rgba(240,95,5,.14)}
.form-field [aria-invalid=true]{border-color:#d92d20;background-color:#fff}
.field-error{color:#b42318;font-size:12px;font-weight:650}
.form-field .form-consent{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:13px;font-weight:500;line-height:1.55;cursor:pointer}
.form-field .form-consent input{flex:none;width:18px;min-height:0;height:18px;margin-top:1px;padding:0;accent-color:var(--brand-orange);box-shadow:none}
.form-consent a{color:var(--accent-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.form-submit{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:24px}
.form-submit .btn{min-height:48px;padding-inline:24px;border:0;cursor:pointer}
.form-note{color:var(--muted);font-size:13px}
.form-trap{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.form-notice{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--radius-md)}
.form-notice+.enquiry-form{margin-top:22px}
.form-notice b{display:block;font-size:16px}
.form-notice p{margin-top:4px;color:var(--muted);font-size:14px}
.form-notice .check-mark{margin-top:1px;background:#fff;border:1px solid #fbd3bd;color:var(--accent-text);font-weight:900}
.form-notice.is-success{background:var(--tint);border:1px solid #fbd3bd}
.form-notice.is-error{background:#fff4f2;border:1px solid #f6c9c2}
.form-notice.is-error .check-mark{border-color:#f6c9c2;color:#b42318}
.form-again{display:inline-block;margin-top:12px;color:var(--accent-text);font-size:14px;font-weight:800}

/* Legal page drafts: the note that the text still needs replacing */
.prose .draft-note{padding:16px 18px;border:1px solid #fbd3bd;border-radius:var(--radius-md);background:var(--tint);color:#7c2d12;font-size:15px}

@media(max-width:980px){
  .contact{grid-template-columns:1fr}
}
@media(max-width:650px){
  .contact-card{padding:26px 20px}
  .contact-aside{padding:28px 22px}
  .form-grid{grid-template-columns:1fr}
  .form-submit .btn{width:100%}
}

/* 11f. Automatic sections: project lists and filters, project pages, notes
   for editors. Built from the portfolio, pill and card styles above.
   ========================================================================== */
.portfolio.portfolio--grid{grid-template-columns:repeat(3,1fr)}
.portfolio--grid .project{min-height:320px}
.project-filters{margin:-12px 0 26px}
a.flow-item.is-current,a.flow-item.is-current:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:none}
.industry .icon .icon-image{width:24px;height:24px}

.project-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 24px;margin:0 0 32px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff}
.project-details dt{margin-bottom:4px;color:var(--accent-text);font-size:12px;font-weight:850;letter-spacing:1.4px;text-transform:uppercase}
.project-details dd{margin:0;font-weight:650}
.project-details a{text-decoration:underline;text-underline-offset:3px}
.project-details a:hover{color:var(--accent-text)}

.section--notice{padding:28px 0}
.editor-notice-box{max-width:760px;padding:22px 24px;border:1px dashed #f3b590;border-radius:var(--radius-lg);background:var(--tint)}
.editor-notice-box h3{margin-bottom:6px;font-size:19px}
.editor-notice-box p{color:var(--muted);font-size:14px}
.editor-notice-box .btn{margin-top:14px}

@media(max-width:980px){
  .portfolio.portfolio--grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .portfolio.portfolio--grid{grid-template-columns:1fr}
  .portfolio--grid .project{min-height:280px}
}

/* 12. WordPress content and utility classes
   ========================================================================== */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute!important;width:1px;word-wrap:normal!important
}
.screen-reader-text:focus{
  background:#fff;clip:auto!important;clip-path:none;color:var(--ink);display:block;font-size:14px;font-weight:700;
  height:auto;left:5px;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000
}

.entry-title+.entry-content{margin-top:24px}
.hentry+.hentry{margin-top:56px}
.entry-content>*+*{margin-top:1em}
.entry-content h2,.entry-content h3,.entry-content h4{margin-top:1.6em}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content li+li{margin-top:.35em}
.entry-content a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.entry-content blockquote{border-left:3px solid var(--accent-amber);padding-left:18px;color:var(--muted)}

.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption-text,.gallery-caption{font-size:13px;color:var(--muted);margin-top:8px}

/* 13. Responsive
   Breakpoints and values are the reference HTML's, except the header collapse
   below. The mobile menu's open state was set with inline styles in the
   reference; it is a class here.
   ========================================================================== */
/* The header holds 7 links plus the button (the reference had 5 links), so it
   collapses into ☰ at 1099px instead of the layouts' 980px. */
@media(max-width:1099px){
  .nav .nav-links{display:none}.menu-btn{display:block}
  .nav .nav-links.is-open{
    display:flex;position:absolute;top:68px;left:14px;right:14px;padding:18px;background:#fff;
    border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-menu);flex-direction:column;align-items:flex-start
  }
}
@media(max-width:980px){
  .hero-grid,.split,.faq{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(3,1fr)}
  .services{grid-template-columns:repeat(2,1fr)}
  .portfolio{grid-template-columns:1fr}
  .project.large{min-height:450px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .checks--grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:782px){
  .admin-bar .nav-wrap{top:46px}
}
@media(max-width:650px){
  :root{--gutter:28px;--section-y:68px}
  .topbar{display:none}.nav{height:68px}
  /* The header CTA crowds the logo here, so it moves into the menu */
  .nav>.nav-cta{display:none}
  .nav .nav-links .menu-item-cta{display:block;align-self:stretch}
  .menu-item-cta .nav-cta{width:100%}
  .hero{padding:62px 0}.hero-grid{gap:35px}
  h1{font-size:47px;letter-spacing:-2.8px}
  .hero-copy p{font-size:16px}
  .dashboard{min-height:400px;padding:12px}.d-body{min-height:320px;padding:15px}.chart{height:105px}
  .float-card{right:10px;bottom:20px}
  .section-head{display:block}.section-head p{margin-top:15px}
  .trust-row{grid-template-columns:repeat(2,1fr);font-size:15px}
  .cards,.steps,.testimonials{grid-template-columns:1fr}
  .services{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .portfolio{display:grid}.project.large{min-height:390px}
  .project .project-ui{inset:25px 25px auto 25px;height:200px}.project.large .project-ui{height:285px}
  .cta-box{padding:45px 22px}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .copy{display:block}.copy span{display:block;margin-top:8px}
  .checks--grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .admin-bar .nav-wrap{top:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}