/* ZIRC — one stylesheet, no framework.
   Visual direction set from the reference the client gave: white-dominant,
   near-black bands, a warm amber accent, and SQUARE corners — the reference
   page carries only two border-radius rules in total, and that squareness is
   most of what makes it read as businesslike rather than consumer. */

@font-face{font-family:'Work Sans';src:url('../fonts/ws-QGYsz_wNahGAdqQ43Rh_fKDptfpA4Q.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

:root{
  --ink:#191919; --ink-2:#232323; --line-d:#333;
  --paper:#FFFFFF; --soft:#F6F6F4; --line:#E4E4E0;
  --tx:#191919; --tx-2:#5A5A5A; --tx-3:#8C8C8C;
  --acc:#F2A007; --acc-d:#CE8500; --acc-tx:#1A1206;
  --ok:#3E8E41; --warn:#B4790C;
  --max:1200px; --pad:24px;
  --ff:'Work Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--ff);font-size:16.5px;line-height:1.6;color:var(--tx);background:var(--paper);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* header */
.hdr{position:sticky;top:0;z-index:60;background:var(--ink);color:#fff}
.hdr-in{display:flex;align-items:center;gap:26px;height:70px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;flex:0 0 auto}
.brand img{height:34px;width:auto}
.brand-tx{display:flex;flex-direction:column;line-height:1}
.brand-tx b{font-size:17px;font-weight:700;letter-spacing:.13em}
.brand-tx i{font-style:normal;font-size:8.5px;letter-spacing:.23em;color:#9A9A9A;margin-top:4px}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{color:#D6D6D6;text-decoration:none;font-size:15px;font-weight:500;padding:8px 0;border-bottom:2px solid transparent}
.nav a:hover{color:#fff;border-bottom-color:var(--acc)}
.hdr .cta{background:var(--acc);color:var(--acc-tx);text-decoration:none;padding:11px 20px;font-size:14px;
  font-weight:700;white-space:nowrap}
.hdr .cta:hover{background:#FFB524}
.burger{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:23px;cursor:pointer;padding:6px 8px}

/* hero — light, like the reference */
.hero{background:var(--paper);padding:76px 0 0;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.hero .eyebrow{color:var(--acc-d);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.hero h1{font-size:clamp(32px,5.2vw,54px);line-height:1.04;margin:16px 0 0;max-width:16ch;letter-spacing:-.02em;font-weight:700}
.hero p{color:var(--tx-2);font-size:18.5px;max-width:54ch;margin:20px 0 0}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;padding:14px 28px;font-weight:700;font-size:15.5px}
.btn-p{background:var(--acc);color:var(--acc-tx)}.btn-p:hover{background:#FFB524}
.btn-s{border:2px solid var(--ink);color:var(--ink)}.btn-s:hover{background:var(--ink);color:#fff}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-top:64px;
  border-top:1px solid var(--line)}
.stat{padding:22px 24px 22px 0;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-size:36px;font-weight:700;line-height:1;letter-spacing:-.03em}
.stat span{display:block;color:var(--tx-3);font-size:13px;margin-top:8px}

/* sections */
.sec{padding:72px 0}
.sec.alt{background:var(--soft)}
.sec.dark{background:var(--ink);color:#fff}
.sec.dark .sec-h h2{color:#fff}.sec.dark .sec-h p{color:#B0B0B0}
.sec-h{max-width:60ch;margin-bottom:40px}
.sec-h .k{color:var(--acc-d);font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.sec-h h2{font-size:clamp(25px,3.4vw,36px);line-height:1.12;margin:12px 0 0;letter-spacing:-.02em;font-weight:700}
.sec-h p{color:var(--tx-2);margin:14px 0 0;font-size:17px}

.cards{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.card{background:transparent;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 28px;
  transition:background .16s}
.card:hover{background:var(--soft)}
.sec.alt .card:hover{background:#fff}
.card h3{font-size:19.5px;margin:0 0 9px;font-weight:700;letter-spacing:-.01em}
.card p{color:var(--tx-2);margin:0;font-size:15px}
.card .num{color:var(--acc-d);font-size:12.5px;font-weight:700;letter-spacing:.14em;margin-bottom:12px}
.pill{display:inline-block;margin-top:15px;font-size:11.5px;font-weight:700;padding:3px 10px;
  border:1px solid currentColor;text-transform:uppercase;letter-spacing:.06em}
.pill.live{color:var(--ok)}.pill.soon{color:var(--warn)}
.ico{color:var(--acc);margin-bottom:16px;display:block}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.step{padding:26px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.step b{display:block;color:var(--acc-d);font-size:13px;font-weight:700;letter-spacing:.14em;margin-bottom:11px}
.step h4{margin:0 0 7px;font-size:17.5px;font-weight:700}
.step p{margin:0;color:var(--tx-2);font-size:14.5px}

.work{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.w{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px}
.w .on{display:inline-flex;align-items:center;gap:7px;color:var(--ok);font-size:11.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase}
.w .on i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.w h3{margin:12px 0 8px;font-size:20px;font-weight:700}
.w p{margin:0;color:var(--tx-2);font-size:15px}
.logos{display:flex;flex-wrap:wrap;gap:12px 34px;align-items:center;padding-top:26px}
.logos span{color:var(--tx-3);font-size:16px;font-weight:600}

/* screen mock */
.scr{background:#1D1D1D;border:1px solid #2E2E2E;overflow:hidden;box-shadow:0 26px 64px rgba(0,0,0,.22)}
.scr-bar{display:flex;align-items:center;gap:6px;padding:11px 13px;background:#141414;border-bottom:1px solid #2E2E2E}
.scr-bar i{width:9px;height:9px;border-radius:50%;background:#3A3A3A;display:block}
.scr-bar span{margin-left:8px;height:8px;flex:1;background:#242424}
.scr-b{padding:18px;display:grid;gap:13px}
.scr-hero{height:82px;background:linear-gradient(120deg,rgba(242,160,7,.85),rgba(242,160,7,.18))}
.scr-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
.scr-row b{display:block;height:48px;background:#242424}
.scr-line{height:9px;background:#242424}.scr-line.s{width:58%}

/* cta band */
.band{background:var(--acc);color:var(--acc-tx);padding:60px 0}
.band-in{display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:space-between}
.band h2{margin:0;font-size:clamp(24px,3.2vw,34px);max-width:21ch;letter-spacing:-.02em;font-weight:700}
.band p{margin:10px 0 0;color:#5A4308;max-width:50ch}
.band .btn{background:var(--ink);color:#fff}
.band .btn:hover{background:#000}

/* forms */
.form{display:grid;gap:12px;max-width:520px}
.form input,.form textarea{width:100%;border:1px solid #CFCFCB;padding:14px 15px;font:inherit;font-size:15.5px;
  background:#fff;color:var(--tx)}
.form textarea{min-height:136px;resize:vertical}
.form input:focus,.form textarea:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:transparent}
.form button{justify-self:start;background:var(--acc);color:var(--acc-tx);border:0;padding:14px 30px;font:inherit;
  font-weight:700;font-size:15.5px;cursor:pointer}
.form button:hover{background:#FFB524}
.hp{position:absolute!important;left:-9999px!important}
.msg{padding:14px 16px;font-size:15px;border:1px solid}
.msg.ok{border-color:var(--ok);color:var(--ok);background:#F1F8F1}
.msg.err{border-color:#B33;color:#B33;background:#FDF2F2}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.split dl{margin:0}
.split dt{font-size:12.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-3);margin-top:22px}
.split dd{margin:5px 0 0;font-size:16.5px}

/* page head */
.page-hd{background:var(--soft);border-bottom:1px solid var(--line);padding:58px 0}
.page-hd h1{margin:0;font-size:clamp(29px,4.2vw,43px);letter-spacing:-.025em;font-weight:700}
.page-hd p{color:var(--tx-2);margin:14px 0 0;max-width:60ch;font-size:17.5px}
.prose{max-width:70ch;padding:56px 0;font-size:17.5px}
.prose h2{font-size:27px;margin:1.6em 0 .4em;font-weight:700}
.prose p{margin:0 0 1.1em}

/* footer */
.ftr{background:var(--ink);color:#A8A8A8;padding:58px 0 28px;font-size:15px}
.ftr-g{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:30px}
.ftr h4{color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin:0 0 14px}
.ftr a{display:block;color:#A8A8A8;text-decoration:none;margin-bottom:9px}
.ftr a:hover{color:var(--acc)}
.ftr .about{max-width:34ch;line-height:1.65}
.ftr-b{border-top:1px solid var(--line-d);margin-top:36px;padding-top:22px;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:13.5px;color:#7A7A7A}

@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:32px}
  .ftr-g{grid-template-columns:1fr 1fr}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .scr{display:none}
}
@media(max-width:760px){
  .nav{position:fixed;inset:70px 0 auto 0;background:var(--ink-2);flex-direction:column;gap:0;padding:10px 0;
    display:none;border-bottom:1px solid var(--line-d)}
  .nav.open{display:flex}
  .nav a{padding:14px var(--pad);border-bottom:0}
  .burger{display:block}
  .hdr .cta{display:none}
  .hero{padding:52px 0 0}
  .sec{padding:52px 0}
  .band-in{flex-direction:column;align-items:flex-start}
  .stat{border-right:0;border-bottom:1px solid var(--line)}
}

/* ============================================================================
   IMAGERY, GRID AND CATEGORY COLOUR
   Appended 7 Sep. Three earlier attempts at this were lost: they were piped
   through `ssh -n`, and -n redirects stdin from /dev/null, so `cat >>` received
   nothing and appended nothing — silently, with a success exit code. The rules
   below are the ones the page has been missing.
   ========================================================================== */

/* ---- real imagery ---- */
.shot{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;
  background:#111;border-bottom:1px solid var(--line)}
.hero-shot{box-shadow:0 30px 70px rgba(0,0,0,.22);border:1px solid var(--line);width:100%;display:block}
.w{padding:0;display:flex;flex-direction:column;position:relative}
.w-b{padding:22px 24px 26px}
.w .on{margin-bottom:0}
.w h3{margin:10px 0 8px}

/* ---- six cards want three columns, not four with a hole ---- */
.cards-3{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
@media(min-width:1000px){.cards-3{grid-template-columns:repeat(3,1fr)}}
.hero-grid{grid-template-columns:1fr 1fr;gap:56px}
.hero{padding:70px 0 0}

/* ---- colour by category ----
   One accent across every card made the page read as a single flat surface.
   Each service now carries its own colour on the icon and a rule along the top
   of its cell: the grid becomes scannable, and the colour is doing a job rather
   than decorating. Six hues at similar weight so none shouts over the others. */
.card{position:relative}
.card::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:var(--c,transparent)}
.card .ico{color:var(--c,var(--acc))}
.card .num{color:var(--c,var(--acc-d))}
.w::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:var(--c,transparent);z-index:2}
.c-amber{--c:#F2A007}
.c-blue{--c:#2478E8}
.c-purple{--c:#6B4DE6}
.c-red{--c:#E0342B}
.c-green{--c:#2E9E5B}
.c-teal{--c:#0E8C8C}
.step:nth-child(1) b{color:#F2A007}.step:nth-child(2) b{color:#2478E8}
.step:nth-child(3) b{color:#6B4DE6}.step:nth-child(4) b{color:#E0342B}
.step:nth-child(5) b{color:#2E9E5B}.step:nth-child(6) b{color:#0E8C8C}

/* ============================================================================
   DEPTH — gradients, a differentiators band and an FAQ.
   The page was flat because every surface was a solid fill. Gradients are used
   here as ground, not decoration: a tinted hero, a dark band that is not a slab,
   and a coloured wash behind each value card keyed to the same six category
   hues already in use.
   ========================================================================== */

/* hero gets a soft wash so the top of the page is not plain white */
.hero{background:
  radial-gradient(1100px 520px at 78% -8%, rgba(242,160,7,.13), transparent 62%),
  radial-gradient(760px 420px at 8% 6%, rgba(36,120,232,.08), transparent 60%),
  var(--paper)!important}

/* why-us cards: tinted wash from the card's own category colour */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.why-c{position:relative;padding:26px 26px 28px;border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(150deg,var(--wash,rgba(242,160,7,.10)),transparent 62%),#fff}
.why-c h3{margin:0 0 8px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.why-c p{margin:0;color:var(--tx-2);font-size:15px}
.why-c .n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  font-weight:700;font-size:14px;color:#fff;background:var(--dot,#F2A007);margin-bottom:14px}
.w1{--wash:rgba(242,160,7,.14);--dot:#F2A007}
.w2{--wash:rgba(36,120,232,.12);--dot:#2478E8}
.w3{--wash:rgba(107,77,230,.12);--dot:#6B4DE6}
.w4{--wash:rgba(224,52,43,.10);--dot:#E0342B}
.w5{--wash:rgba(46,158,91,.12);--dot:#2E9E5B}
.w6{--wash:rgba(14,140,140,.12);--dot:#0E8C8C}

/* dark band with depth rather than a flat slab */
.sec.deep{background:
  radial-gradient(900px 460px at 82% 0%, rgba(242,160,7,.16), transparent 60%),
  radial-gradient(700px 400px at 6% 100%, rgba(36,120,232,.14), transparent 60%),
  #141414;color:#fff}
.sec.deep .sec-h h2{color:#fff}
.sec.deep .sec-h p{color:#B4B4B4}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-size:18px;font-weight:700;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:16px;font-size:26px;font-weight:400;
  color:var(--acc-d);line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{color:var(--acc-d)}
.faq p{margin:0 0 22px;color:var(--tx-2);font-size:16px;max-width:74ch}

/* The why-us cards are light panels sitting inside a DARK section, so anything
   that does not set its own colour inherits the section's white and vanishes.
   The headings did exactly that. Set every text colour on the card explicitly
   rather than relying on inheritance across a light-on-dark boundary. */
.sec.deep .why-c h3{color:var(--tx)!important}
.sec.deep .why-c p{color:var(--tx-2)!important}
.sec.deep .why-c{color:var(--tx)}