:root{
    --navy:#10161F;
    --navy-2:#16212D;
    --cream:#FBF9F5;
    --paper:#FFFFFF;
    --ink:#16212D;
    --ink-soft:#5B6472;
    --accent:#F47721;
    --accent-2:#FFB27A;
    --accent-soft:#FFF1E4;
    --line:#ECE8DF;
    --radius:20px;
    --maxw:1180px;
    font-size:16px;
  }
  *{box-sizing:border-box;}
  a{cursor:pointer;}
  html,body{margin:0;padding:0;overflow-x:hidden;background:var(--navy);}
  html{overscroll-behavior-y:none;}
  body{padding-bottom:0 !important;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    background:var(--cream);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    position:relative;
  }

  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
  h1,h2,h3,h4{margin:0 0 .5em 0;font-weight:700;letter-spacing:-0.01em;}
  h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;text-wrap:balance;}
  h2{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.15;text-wrap:balance;}
  h3{font-size:1.25rem;}
  p{margin:0 0 1em 0;color:var(--ink-soft);}
  .eyebrow{
    display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:#A5551F;margin-bottom:14px;
  }
  /* On navy/dark backgrounds the bright accent has plenty of contrast (~6.5:1);
     on cream/white the same bright orange fails WCAG AA (~2.8:1), hence the darker
     default above with this override restoring the brighter color on dark sections. */
  .hero .eyebrow{color:var(--accent);}
  .btn{
    display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;
    font-weight:600;font-size:.95rem;cursor:pointer;border:1px solid transparent;transition:.15s ease;
  }
  .btn-primary{background:var(--navy);color:#fff;}
  .btn-primary:hover{background:var(--accent);}
  .btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy);}
  .btn-ghost:hover{background:var(--navy);color:#fff;}
  /* Navy text (not white) on the accent-orange background: white-on-accent only
     reaches ~2.8:1 contrast, well under the 4.5:1 AA minimum for this button's
     15px/600-weight label. Navy-on-accent hits ~6.5:1 with no change to the
     brand orange itself. */
  .btn-on-dark{background:var(--accent);color:var(--navy);}
  .btn-on-dark:hover{background:#fff;color:var(--navy);}

  /* HEADER — fixed, always visible; solid background bar delayed until scroll distance catches up to the header's own height */
  header{
    position:fixed;top:0;left:0;right:0;z-index:50;
    background:transparent;border-bottom:1px solid transparent;
    transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  header.scrolled{
    background:rgba(251,249,245,.88);backdrop-filter:blur(10px);
    border-bottom-color:var(--line);box-shadow:0 4px 24px rgba(16,22,31,.06);
  }
  header{overflow:hidden;}
  .navbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:35px 28px;max-width:var(--maxw);margin:0 auto;}
  .logo{position:relative;z-index:1;display:flex;align-items:center;font-weight:800;font-size:1.5rem;letter-spacing:-0.01em;text-transform:uppercase;color:#fff;flex:0 0 auto;transition:color .25s ease;}
  header.scrolled .logo{color:var(--navy);}
  .logo .brandmark{display:block;height:1.05em;width:auto;color:inherit;}
  .logo .brandmark use, .logo .brandmark path, .logo .brandmark polygon{fill:currentColor;}

  .menu-toggle{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;background:none;border:none;padding:4px;cursor:pointer;}
  .menu-toggle .bar{display:block;height:2px;background:#fff;border-radius:2px;transition:.2s ease;}
  .menu-toggle .bar:nth-child(1){width:26px;}
  .menu-toggle .bar:nth-child(2){width:14px;}
  .menu-toggle .bar:nth-child(3){width:20px;}
  header.scrolled .menu-toggle .bar{background:var(--navy);}
  .menu-toggle:hover .bar, .menu-toggle.is-open .bar{background:var(--accent);}

  .nav-overlay{position:fixed;inset:0;background:rgba(16,22,31,.45);backdrop-filter:blur(2px);z-index:59;opacity:0;pointer-events:none;transition:opacity .25s ease;}
  .nav-overlay.show{opacity:1;pointer-events:auto;}

  .services-drop{position:relative;}
  .drop-panel a{display:block;padding:10px 12px;border-radius:10px;font-size:.88rem;}
  .drop-panel a:hover{background:var(--accent-soft);}
  .drop-panel .desc{display:block;font-size:.76rem;color:var(--ink-soft);font-weight:400;margin-top:2px;}
  .services-caret{display:inline-block;transition:transform .2s ease;vertical-align:middle;margin-bottom:2px;color:currentColor;}

  /* Nav drawer — used at every viewport size, opened via the menu toggle */
  nav.primary-nav{
    position:fixed;top:0;right:0;height:100vh;width:min(88vw,380px);
    background:var(--cream);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:104px 26px 30px;gap:2px;
    transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
    overflow:auto;z-index:60;box-shadow:-24px 0 60px rgba(16,22,31,.18);
  }
  nav.primary-nav.open{transform:translateX(0);}
  nav.primary-nav a{padding:14px 16px;border-radius:12px;font-size:1.05rem;font-weight:600;color:var(--ink);}
  nav.primary-nav a:hover, nav.primary-nav a.active{background:var(--accent-soft);color:var(--navy);}
  nav.primary-nav a.btn-primary, nav.primary-nav a.btn-primary:hover{color:#fff;background:var(--navy);}
  nav.primary-nav a.btn-primary:hover{background:var(--accent);}
  .nav-drawer-label{position:absolute;top:26px;left:26px;display:flex;align-items:center;color:var(--ink-soft);font-size:.95rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:8px 12px 8px 16px;}
  .nav-close{position:absolute;top:26px;right:26px;display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--ink-soft);font-size:.85rem;font-weight:600;padding:8px 12px;border-radius:10px;cursor:pointer;}
  .nav-close:hover{background:var(--accent-soft);color:var(--navy);}

  /* Booking modal — full-screen iframe, minimal chrome */
  /* visibility (not just opacity/pointer-events) is what actually removes a closed
     modal from the accessibility tree and tab order -- without it, screen reader
     and keyboard users can still reach content that's invisible to sighted users,
     and its text fails contrast checks against whatever is visually behind it. */
  .booking-modal{position:fixed;inset:0;background:var(--navy);z-index:200;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s;overflow:hidden;}
  .booking-modal.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease,visibility 0s linear;}
  /* Same ambient drift as the page heroes -- shows briefly while the booking
     iframe loads (or if it can't load) instead of a flat navy hold screen. */
  .booking-modal::before, .booking-modal::after{content:'';position:absolute;inset:-15%;z-index:0;pointer-events:none;}
  .booking-modal::before{
    background:
      radial-gradient(38% 45% at 20% 22%, rgba(244,119,33,.32), transparent 70%),
      radial-gradient(34% 42% at 82% 20%, rgba(255,178,122,.2), transparent 70%),
      radial-gradient(46% 55% at 78% 82%, rgba(120,150,190,.22), transparent 70%);
    filter:blur(34px);
    animation:heroDrift 15s ease-in-out infinite alternate;
    will-change:transform;
  }
  .booking-modal::after{
    background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
    background-size:28px 28px;
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, rgba(0,0,0,.9), transparent 75%);
    mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, rgba(0,0,0,.9), transparent 75%);
    opacity:.55;
  }
  .booking-modal iframe{position:relative;z-index:1;width:100%;height:100%;border:none;display:block;}
  .booking-modal-close{
    position:fixed;top:18px;right:18px;z-index:201;
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:50%;
    background:rgba(16,22,31,.55);color:#fff;border:none;cursor:pointer;
    backdrop-filter:blur(4px);transition:.15s ease;
  }
  .booking-modal-close:hover{background:var(--accent);}
  /* Site preview modal -- same full-screen/close pattern as the booking modal,
     plus a browser-style URL bar. Client sites are third-party and some will
     refuse to be framed (X-Frame-Options/CSP), so there's always a one-click,
     same-place way back out via "Open in new tab". */
  .site-modal{position:fixed;inset:0;background:var(--navy);z-index:210;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s;display:flex;flex-direction:column;}
  .site-modal.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease,visibility 0s linear;}
  .site-modal-bar{display:flex;align-items:center;gap:10px;padding:14px 20px;background:#10161F;border-bottom:1px solid rgba(255,255,255,.08);flex:0 0 auto;}
  .site-modal-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18);flex:0 0 auto;}
  .site-modal-url{flex:1;min-width:0;margin-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#C7CDD6;font-size:.85rem;font-weight:600;background:rgba(255,255,255,.06);border-radius:8px;padding:8px 14px;}
  .site-modal-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
  .site-modal-open{display:flex;align-items:center;gap:6px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:8px 14px;border-radius:999px;font-size:.82rem;font-weight:600;text-decoration:none;transition:.15s ease;white-space:nowrap;}
  .site-modal-open:hover{background:var(--accent);border-color:var(--accent);}
  .site-modal-close{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;border:none;cursor:pointer;transition:.15s ease;flex:0 0 auto;}
  .site-modal-close:hover{background:var(--accent);}
  .site-modal-body{position:relative;flex:1 1 auto;background:#fff;}
  .site-modal-body iframe{position:absolute;inset:0;width:100%;height:100%;border:none;display:block;}
  .site-modal-hint{position:absolute;left:50%;bottom:26px;transform:translate(-50%,8px);opacity:0;pointer-events:none;transition:.25s ease;background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;font-size:.85rem;display:flex;align-items:center;gap:14px;box-shadow:0 12px 30px rgba(16,22,31,.3);max-width:min(92vw,440px);}
  .site-modal-hint.show{opacity:1;pointer-events:auto;transform:translate(-50%,0);}
  .site-modal-hint a{color:#FFD9B8;font-weight:700;text-decoration:none;white-space:nowrap;}
  .site-modal-hint a:hover{text-decoration:underline;}
  @media(max-width:640px){
    .site-modal-bar{padding:12px 14px;}
    .site-modal-url{font-size:.78rem;padding:7px 10px;}
    .site-modal-open .label{display:none;}
    .site-modal-hint{font-size:.8rem;padding:10px 14px;flex-direction:column;align-items:flex-start;gap:8px;}
  }
  /* Clickable "browser chrome" bar on work-detail hero shots that have a live client URL */
  .chrome-url{margin-left:6px;color:rgba(255,255,255,.55);font-size:.75rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .15s ease;}
  .chrome-go{margin-left:auto;color:var(--accent);font-size:.72rem;font-weight:700;opacity:0;transition:opacity .15s ease;white-space:nowrap;padding-left:10px;}
  .inline-link{background:none;border:none;padding:0;font:inherit;font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
  /* Whole preview (title bar + screenshot) is one click target on pages with a
     live client URL -- hovering anywhere over it (not just the thin title bar)
     lights up the title bar and reveals the "Preview" cue, so the affordance
     reads before the cursor ever reaches the bar itself. */
  button.hero-shot{appearance:none;-webkit-appearance:none;margin:0;padding:0;font:inherit;color:inherit;text-align:left;display:block;width:100%;cursor:pointer;}
  .hero-shot.hero-shot-live{transition:box-shadow .2s ease,transform .2s ease;}
  .hero-shot.hero-shot-live:hover, .hero-shot.hero-shot-live:focus-visible{box-shadow:0 34px 66px rgba(0,0,0,.55);transform:translateY(-2px);}
  .hero-shot.hero-shot-live:hover .chrome, .hero-shot.hero-shot-live:focus-visible .chrome{background:rgba(255,255,255,.1);}
  .hero-shot.hero-shot-live:hover .chrome-url, .hero-shot.hero-shot-live:focus-visible .chrome-url{color:#fff;}
  .hero-shot.hero-shot-live:hover .chrome-go, .hero-shot.hero-shot-live:focus-visible .chrome-go{opacity:1;}
  .hero-shot.hero-shot-live:hover img, .hero-shot.hero-shot-live:focus-visible img{filter:brightness(.94);}
  .hero-shot.hero-shot-live:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
  .inline-link:hover{color:var(--accent);}
  .services-drop .drop-panel{
    position:static;box-shadow:none;padding:2px 0 6px 10px;min-width:0;
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .services-drop.open .drop-panel{max-height:560px;}
  .services-drop.open .services-caret{transform:rotate(180deg);}

  @media(max-width:520px){
    nav.primary-nav{width:100vw;}
  }

  /* HERO */
  .hero{padding:130px 0 70px;background:var(--navy);color:#fff;position:relative;overflow:hidden;}
  /* Ambient animated background: two soft, blurred glows (brand orange + a
     lighter navy) drifting slowly behind a faint dot grid -- confident and
     technical without competing with the hero copy. Pure CSS, GPU-friendly
     (transform + opacity only), and disabled for prefers-reduced-motion. */
  .hero::before, .hero::after{content:'';position:absolute;inset:-15%;z-index:0;pointer-events:none;}
  .hero::before{
    background:
      radial-gradient(38% 45% at 20% 22%, rgba(244,119,33,.32), transparent 70%),
      radial-gradient(34% 42% at 82% 20%, rgba(255,178,122,.2), transparent 70%),
      radial-gradient(46% 55% at 78% 82%, rgba(120,150,190,.22), transparent 70%);
    filter:blur(34px);
    animation:heroDrift 15s ease-in-out infinite alternate;
    will-change:transform;
  }
  .hero::after{
    background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
    background-size:28px 28px;
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, rgba(0,0,0,.9), transparent 75%);
    mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, rgba(0,0,0,.9), transparent 75%);
    opacity:.55;
  }
  @keyframes heroDrift{
    0%{transform:translate3d(0,0,0) scale(1);}
    50%{transform:translate3d(-7%,6%,0) scale(1.16);}
    100%{transform:translate3d(6%,-7%,0) scale(1);}
  }
  @media(prefers-reduced-motion:reduce){.hero::before, .booking-modal::before{animation:none;}}
  .hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center;}
  .hero p.lead{color:#C7CDD6;font-size:1.15rem;max-width:520px;text-wrap:pretty;}
  .hero h1{margin-top:calc(.5em - 14px);}
  .hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
  .hero-badges span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:8px 14px;border-radius:999px;font-size:.78rem;font-weight:600;color:#EDEFF2;}
  .hero-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;}
  .hero-panel{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:26px;}
  .hero-panel .stat-row{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);}
  .hero-panel .stat-row:last-child{border-bottom:none;}
  .hero-panel .stat-row b{font-size:1.4rem;display:block;}
  .hero-panel .stat-row span{font-size:.76rem;color:#AEB6C2;text-transform:uppercase;letter-spacing:.06em;}
  @media(max-width:900px){.hero .wrap{grid-template-columns:1fr;}}
  .hero-shot{background:#0d1420;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);}
  .hero-shot .chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;background:rgba(255,255,255,.05);}
  .hero-shot .chrome span:not(.chrome-url):not(.chrome-go){width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18);}
  .hero-shot .chrome span.chrome-url{width:auto;height:auto;border-radius:0;background:none;flex:1 1 auto;min-width:0;}
  .hero-shot .chrome span.chrome-go{width:auto;height:auto;border-radius:0;background:none;flex:0 0 auto;}
  .hero-shot img{display:block;width:100%;height:auto;transition:filter .2s ease;}
  .hero-icon-panel{border-radius:14px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,#1E2B3B,#F47721);display:flex;align-items:center;justify-content:center;padding:50px;aspect-ratio:840/459;}
  .hero-icon-panel img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.35));}
  @media(max-width:900px){.hero-shot,.hero-icon-panel{max-width:520px;margin:0 auto;}}

  section{padding:78px 0;}
  section.tight{padding:50px 0;}
  .section-head{max-width:640px;margin-bottom:44px;}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

  /* SERVICES GRID */
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  @media(max-width:900px){.svc-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:600px){.svc-grid{grid-template-columns:1fr;}}
  .svc-card{background:var(--paper);border:1px solid transparent;border-radius:var(--radius);padding:30px 28px;transition:.22s ease;cursor:pointer;box-shadow:0 2px 14px rgba(16,22,31,.05);}
  .svc-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(16,22,31,.1);}
  .svc-card .tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#995523;background:var(--accent-soft);padding:4px 10px;border-radius:999px;margin-bottom:14px;}
  .svc-card.new .tag{color:var(--navy);background:var(--accent);}
  .svc-card h3{margin-bottom:8px;}
  .svc-card p{font-size:.92rem;margin-bottom:14px;}
  .svc-card .link{font-size:.85rem;font-weight:700;color:var(--navy);}

  .band{background:var(--navy);color:#fff;}
  .band p{color:#C7CDD6;}
  .band .eyebrow{color:var(--accent);}

  .stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
  @media(max-width:700px){.stats-strip{grid-template-columns:1fr 1fr;}}
  .stats-strip .num{font-size:2.1rem;font-weight:800;color:#A5551F;}
  .stats-strip .lbl{font-size:.78rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;}

  .process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  @media(max-width:900px){.process-steps{grid-template-columns:1fr 1fr;}}
  @media(max-width:600px){.process-steps{grid-template-columns:1fr;}}
  /* 3-item variant (the "3 steps" section) -- desktop-only column count set via
     class + media query, not an inline style, so the base class's mobile
     breakpoints above (2-col at <=900px, full-width single column at <=600px)
     aren't overridden on small screens. */
  @media(min-width:901px){.process-steps-3{grid-template-columns:repeat(3,1fr);}}
  .step{border-top:3px solid var(--accent);padding-top:16px;}
  .step .n{font-size:.78rem;font-weight:800;color:#A5551F;}

  .card-row{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
  @media(max-width:800px){.card-row{grid-template-columns:1fr;}}
  .info-card{background:#fff;border:1px solid transparent;border-radius:var(--radius);padding:30px;box-shadow:0 2px 14px rgba(16,22,31,.05);}
  /* These card headings were promoted from h3/h4 to h2 for correct heading order
     (no skipped levels after the page h1); this keeps their original, smaller
     visual size instead of inheriting the much larger default h2 size. Headings
     that already carry their own inline font-size are unaffected (inline wins). */
  .info-card h2{font-size:1.25rem;}

  /* Rotating testimonial carousel: slides are absolutely stacked and crossfade via
     opacity so height changes between quotes don't jump the layout below. */
  .testimonial-carousel{position:relative;max-width:760px;margin:0 auto;min-height:230px;}
  .testimonial-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease;}
  .testimonial-slide.is-active{position:relative;opacity:1;visibility:visible;pointer-events:auto;}
  @media(max-width:640px){.testimonial-carousel{min-height:280px;}}
  .testimonial-dots{position:absolute;left:0;right:0;bottom:-34px;display:flex;justify-content:center;gap:2px;}
  /* Button hit area is 24x24 (WCAG 2.2 target size) even though the visible dot
     stays a small 9px circle, drawn via ::before and centered in the button. */
  .testimonial-dot{width:24px;height:24px;padding:0;border-radius:50%;border:none;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
  .testimonial-dot::before{content:"";display:block;width:9px;height:9px;border-radius:50%;background:var(--line);transition:background .2s ease,transform .2s ease;}
  .testimonial-dot:hover::before{background:var(--accent-2);}
  .testimonial-dot.is-active::before{background:var(--accent);transform:scale(1.25);}
  .testimonial-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  @media(prefers-reduced-motion:reduce){.testimonial-slide{transition:none;}}

  .checklist{list-style:none;margin:0;padding:0;}
  .checklist li{padding:8px 0 8px 26px;position:relative;font-size:.94rem;color:var(--ink-soft);border-bottom:1px dashed var(--line);}
  .checklist li:last-child{border-bottom:none;}
  .checklist li:before{content:"✓";position:absolute;left:0;color:#A5551F;font-weight:800;}

  .cta-band{background:linear-gradient(135deg,var(--navy),#1E2B3B);color:#fff;border-radius:22px;padding:56px;text-align:center;max-width:720px;margin:0 auto;}
  .cta-band h2{color:#fff;}
  .cta-band p{color:#C7CDD6;max-width:520px;margin:0 auto 24px;}

  footer{background:var(--navy);color:#AEB6C2;padding:56px 0 30px;}
  footer .wrap{display:grid;grid-template-columns:max-content max-content max-content;justify-content:space-between;padding-left:56px;padding-right:68px;box-sizing:border-box;}
  .footer-svc-grid{display:grid;grid-template-columns:max-content max-content;grid-auto-flow:column;grid-template-rows:repeat(4,auto);column-gap:36px;}
  @media(max-width:800px){footer .wrap{grid-template-columns:1fr 1fr;justify-content:normal;gap:40px;}}
  @media(max-width:560px){.footer-svc-grid{grid-template-columns:1fr;grid-auto-flow:row;}}
  @media(max-width:640px){footer .wrap{grid-template-columns:1fr;gap:36px;}}
  footer h3{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;}
  footer a{display:block;color:#AEB6C2;font-size:.88rem;padding:5px 0;}
  footer a:hover{color:#fff;}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.78rem;}
  .foot-bottom .copy{white-space:nowrap;}
  .foot-bottom .seg{white-space:nowrap;}
  @media(max-width:640px){.foot-bottom .copy{white-space:normal;}}

  /* PAGE SYSTEM */
  .page{display:none;}
  .page.active{display:block;}

  .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  @media(max-width:900px){.work-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:600px){.work-grid{grid-template-columns:1fr;}}
  .work-card{background:#fff;border:none;border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 14px rgba(16,22,31,.05);transition:.22s ease;display:flex;flex-direction:column;}
  .work-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(16,22,31,.1);}
  .work-card .thumb{height:140px;background:linear-gradient(135deg,#1E2B3B,#F47721);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.85rem;text-align:center;padding:14px;flex-shrink:0;}
  .work-card .thumb{position:relative;}
  .work-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .work-card .thumb.thumb-photo{padding:0;}
  /* Navy text, not white -- same fix as .btn-on-dark: white on this orange is
     only ~2.8:1 contrast, under the 4.5:1 AA minimum. */
  .work-card .badge-soon{position:absolute;top:12px;right:12px;background:#F47721;color:var(--navy);font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:999px;box-shadow:0 6px 14px rgba(10,14,20,.3);}
  .work-card .body{padding:18px;display:flex;flex-direction:column;flex:1;}
  .work-card .cat{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:#A5551F;font-weight:700;}
  .work-card .link{display:inline-block;margin-top:auto;padding-top:10px;font-size:.85rem;font-weight:700;color:var(--navy);}

  .filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px;}
  .filter-row button{border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:600;cursor:pointer;transition:.15s ease;}
  .filter-row button:hover:not(.active){background:var(--accent-soft);border-color:var(--accent-soft);color:var(--navy);}
  .filter-row button.active{background:var(--navy);color:#fff;border-color:var(--navy);}

  table.seo-table{width:100%;border-collapse:collapse;font-size:.85rem;margin:18px 0 30px;}
  table.seo-table th,table.seo-table td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;}
  table.seo-table th{background:var(--navy);color:#fff;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;}
  table.seo-table tr:nth-child(even) td{background:#fff;}

  .code-block{background:#0F1720;color:#D6E1EA;border-radius:10px;padding:18px;font-family:"SF Mono",Consolas,monospace;font-size:.78rem;overflow-x:auto;white-space:pre;margin:16px 0;}

  .roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  @media(max-width:900px){.roadmap{grid-template-columns:1fr;}}
  .phase{background:#fff;border:1px solid transparent;border-radius:var(--radius);padding:26px;box-shadow:0 2px 14px rgba(16,22,31,.05);}
  .phase .phase-tag{font-size:.7rem;font-weight:800;color:#fff;background:var(--navy);display:inline-block;padding:4px 10px;border-radius:6px;margin-bottom:12px;}

  .strategy-note{background:#FFF7EF;border:1px solid #F0D9C0;border-radius:10px;padding:16px 18px;font-size:.85rem;color:#7A4A20;margin-bottom:30px;}

  .form-mock{display:grid;gap:14px;max-width:520px;}
  .form-mock label{font-size:.8rem;font-weight:700;color:var(--ink-soft);margin-bottom:4px;display:block;}
  .form-mock input,.form-mock select,.form-mock textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;font-size:.92rem;font-family:inherit;background:#fff;}