:root{
      --ink:#1A1815;
	  --black:#00000;
      --ink-soft:#2B2823;
      --ivory:#FAF6EF;
      --paper:#FFFFFF;
      --brass:#AD8A4F;
      --brass-deep:#8A6B37;
      --slate:#4B463D;
      --slate-light:#7A7468;
      --line:#E8E0D0;
      --radius:2px;
      --container:1200px;
    }
    *{box-sizing:border-box;}
    html{scroll-behavior:smooth;}
    body{
      margin:0;
      font-family:'Work Sans',Arial,sans-serif;
      color:var(--slate);
      background:var(--paper);
      -webkit-font-smoothing:antialiased;
      line-height:1.6;
    }
    img{max-width:100%;display:block;}
    a{color:inherit;text-decoration:none;}
    h1,h2,h3,h4{
      font-family:'Work Sans',Georgia,serif;
      color:var(--ink);
      margin:0 0 .5em;
      font-weight:480;
      line-height:1.15;
      letter-spacing:-.01em;
    }
    .container{max-width:var(--container);margin:0 auto;padding:0 24px;}
    .eyebrow{
      display:inline-block;
      font-family:'Work Sans',sans-serif;
      font-size:1rem;
      font-weight:700;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:var(--brass-deep);
      margin-bottom:14px;
    }
    section{padding:88px 0;}
    .section-head{max-width:640px;margin-bottom:48px;}
    .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
    .section-head p{color:var(--slate-light);font-size:1.05rem;margin:0;}
    .btn{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-family:'Work Sans',sans-serif;
      font-weight:600;
      font-size:.92rem;
      letter-spacing:.02em;
      padding:14px 26px;
      border-radius:2px;
      border:1px solid transparent;
      cursor:pointer;
      transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
    }
    .btn:hover{transform:translateY(-1px);}
    .btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}
    .btn-primary{background:var(--brass);color:#fff;}
    .btn-primary:hover{background:var(--brass-deep);}
    .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
    .btn-ghost:hover{border-color:var(--brass);}
    .btn-on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.35);}
    .btn-on-dark:hover{border-color:#fff;}
    .skip-link{
      position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:999;border-radius:2px;
    }
    .skip-link:focus{left:0;}

    /* ---------- Header ---------- */
    .site-header{
      position:sticky;top:0;z-index:60;
      background:rgba(250,246,239,.82);
      backdrop-filter:blur(10px);
      border-bottom:1px solid var(--line);
      transition:padding .2s ease;
    }
    .header-row{display:flex;align-items:center;justify-content:space-between;padding:20px 0;}
    .site-header.is-scrolled .header-row{padding:12px 0;}
    .logo{font-family:'Work Sans',serif;font-size:2rem;color:var(--ink);letter-spacing:-.01em;}
    .logo span{color:var(--brass);}
    .main-nav{display:flex;align-items:center;gap:34px;}
    .main-nav > ul{display:flex;list-style:none;margin:0;padding:0;gap:30px;}
    .main-nav > ul > li{position:relative;}
    .main-nav > ul > li > a{
      font-size:.9rem;font-weight:600;letter-spacing:.01em;color:var(--ink-soft);
      padding:8px 0;display:inline-block;
    }
    .main-nav > ul > li > a:hover{color:var(--brass-deep);}
    .main-nav .sub{
      list-style:none;margin:0;padding:10px;position:absolute;left:-14px;top:100%;
      background:#fff;border:1px solid var(--line);border-radius:2px;min-width:200px;
      box-shadow:0 18px 40px rgba(26,24,21,.1);
      opacity:0;visibility:hidden;transform:translateY(6px);
      transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
    }
    .main-nav > ul > li:hover .sub{opacity:1;visibility:visible;transform:translateY(0);}
    .main-nav .sub li a{display:block;padding:9px 12px;border-radius:2px;font-size:.86rem;font-weight:500;color:var(--slate);}
    .main-nav .sub li a:hover{background:var(--ivory);color:var(--brass-deep);}
    .header-cta{display:flex;align-items:center;gap:18px;}
    .header-phone{font-weight:700;font-size:.92rem;color:var(--ink);white-space:nowrap;}
    .header-phone span{display:block;font-weight:500;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-light);}
    .nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:2px;width:44px;height:40px;cursor:pointer;}
    .nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);margin:4px auto;transition:transform .2s ease, opacity .2s ease;}

    @media (max-width:900px){
      /* .main-nav is fixed-positioned but, because of the backdrop-filter
         on .site-header below, is actually contained by THIS box rather
         than the viewport - so while the mobile menu is closed and slid
         off-canvas (translateX(100%)), it still sits just past the
         header's own right edge, which would otherwise create a
         horizontal scrollbar. Clip it here (rather than on body/html) so
         the fix doesn't break this header's own position:sticky -
         overflow:hidden on an ANCESTOR of a sticky element breaks it,
         but an element clipping its own overflow is unaffected.
         Scoped to this breakpoint only: .main-nav is in normal flow on
         desktop, so this rule isn't needed there - and living on the
         base .site-header rule previously (unscoped) had the side effect
         of forcing overflow-y to auto too (a lone overflow-x:hidden
         implies the other axis becomes auto per spec), which clipped the
         desktop hover dropdown submenus against the header's short box. */
      .site-header{overflow-x:hidden;}
      /* backdrop-filter on .site-header creates a containing block for
         position:fixed descendants, which traps .main-nav inside the
         (short) header box instead of the viewport. Drop it while the
         menu is open so .main-nav can size itself to the full screen. */
      body.nav-open .site-header{backdrop-filter:none;}
      .main-nav{position:fixed;inset:0;top:0;background:var(--ink);flex-direction:column;align-items:stretch;
        padding:100px 28px 40px;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;}
      body.nav-open .main-nav{transform:translateX(0);}
      .main-nav > ul{flex-direction:column;gap:4px;}
      .main-nav > ul > li > a{color:#fff;font-size:1.1rem;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);}
      .main-nav .sub{position:static;opacity:1;visibility:visible;transform:none;background:transparent;border:0;box-shadow:none;padding:0 0 0 12px;display:none;}
      .main-nav > ul > li.open .sub{display:block;}
      .main-nav .sub li a{color:rgba(255,255,255,.75);}
      .header-cta{display:none;}
      /* .main-nav is position:fixed with z-index:auto, so once it's open
         it paints above any non-positioned sibling regardless of DOM
         order - including this toggle button. Give the toggle its own
         stacking position above the menu so the close (X) icon stays
         visible and tappable. */
      .nav-toggle{display:block;position:relative;z-index:70;}
      body.nav-open .nav-toggle{border-color:rgba(255,255,255,.4);}
      body.nav-open .nav-toggle span{background:#fff;}
      body.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
      body.nav-open .nav-toggle span:nth-child(2){opacity:0;}
      body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
      /* Prevent the page behind the full-screen menu from scrolling. */
      body.nav-open{overflow:hidden;}
    }

    /* ---------- Hero ---------- */
    .hero{background:#dbdbdb;color:#fff;padding:90px 0 110px;overflow:hidden;}
    .hero .container{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;}
    /* Enlarge the desktop hero frame without changing the mobile layout. */
    @media (min-width:901px){
      .hero .container{
        max-width:1280px;
        grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
        gap:32px;
      }
    }
    .hero h1{color:#000;font-size:clamp(2.3rem,4vw,3.4rem);margin-bottom:22px;}
    .hero-sub{color:#000;font-size:1.1rem;max-width:480px;margin-bottom:34px;}
    .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:36px;}
    .hero-trust{display:flex;gap:26px;flex-wrap:wrap;font-size:.82rem;color:#000;}
    .hero-trust strong{color:#000;display:block;font-family:'Work Sans',serif;font-size:1.4rem;font-weight:480;}
    /* Boxed variant: 2x2 grid of bordered trust cards. Scoped to .hero-trust-boxes so the
       plain inline .hero-trust row on other pages is unaffected. */
    .hero-trust-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:500px;font-size:.78rem;line-height:1.45;}
    .hero-trust-boxes > div{border:1px solid var(--brass);border-radius:2px;padding:11px 14px 12px;}
    .hero-trust-boxes strong{font-size:1.2rem;line-height:1.3;margin-bottom:5px;}
    @media (max-width:420px){
      .hero-trust-boxes{gap:10px;}
      .hero-trust-boxes > div{padding:12px;}
      .hero-trust-boxes strong{font-size:1.05rem;}
    }
    /* Compact hero variant: slightly smaller H1. Scoped to .hero-compact so other .hero pages keep the default size. */
    .hero-compact h1{font-size:clamp(2.1rem,3.5vw,3rem);}
    /* Compact hero on phones: keep "Get a Free Quote" and the call button side by side
       (call on the right) instead of wrapping onto two rows. Scoped to .hero-compact. */
    @media (max-width:600px){
      .hero-compact .hero-ctas{flex-wrap:nowrap;gap:10px;}
      .hero-compact .hero-ctas .btn{
        flex:1 1 0;min-width:0;justify-content:center;text-align:center;
        padding:14px 10px;font-size:clamp(.74rem,3.4vw,.9rem);letter-spacing:0;white-space:nowrap;
      }
    }
    .hero-media{position:relative;}
    .hero-media .frame{position:relative;overflow:hidden;border-radius:2px;box-shadow:0 40px 80px rgba(0,0,0,.2);padding-bottom:80%;height:0;}
    .hero-media .frame img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;}
	.hero-media2 .frame{position:relative;overflow:hidden;border-radius:2px;box-shadow:0 0px 0px rgba(0,0,0,.0);padding-bottom:80%;height:0;}
    .hero-media2 .frame img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;}
    .price-badge{
      position:absolute;left:-28px;bottom:-28px;background:#fff;color:var(--ink);
      border-radius:2px;padding:18px 22px;box-shadow:0 20px 45px rgba(0,0,0,.25);
      display:flex;align-items:center;gap:14px;max-width:230px;
    }
    .price-badge .amount{font-family:'Work Sans',serif;font-size:1.9rem;color:var(--brass-deep);line-height:1;}
    .price-badge .label{font-size:.72rem;color:var(--slate-light);line-height:1.3;}
    @media (max-width:900px){
      .hero .container{grid-template-columns:1fr;text-align:left;}
      .price-badge{left:16px;bottom:-24px;}
    }

    /* ---------- Hero stacked variant: copy above a full-width, native 16:9 video ----------
       Scoped to .hero-stacked only, so the shared two-column .hero layout used on other
       pages (image/video beside the copy, cropped to a 5:4 frame) is left untouched. */
    .hero-stacked .container{display:block;}
    @media (min-width:901px){
      .hero-stacked .container{max-width:var(--container);}
    }
    .hero-stacked .hero-copy{max-width:none;margin-bottom:48px;}
    .hero-stacked .hero-sub{max-width:none;}
    .hero-stacked .hero-media .frame{padding-bottom:56.25%;} /* native 16:9 instead of the default 5:4 crop */

    /* ---------- Specialism / comparison ---------- */
    .specialism{background:#fff;}
    .specialism .section-head{max-width:740px;}
    .specialism-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start;}
    .specialism-copy p{font-size:1.06rem;color:var(--slate);margin:0 0 20px;}
    .specialism-copy p:last-child{margin-bottom:0;}
    .specialism-copy .lede{font-family:'Work Sans',serif;font-size:1.3rem;color:var(--ink);font-weight:480;line-height:1.4;}
    .compare-card{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:2px;overflow:hidden;}
    .compare-col{padding:30px 26px;}
    .compare-typical{background:var(--ivory);}
    .compare-mo{background:#0a6d7b;color:#fff;}
    .compare-col h4{font-family:'Work Sans',sans-serif;font-size:.99rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin:0 0 18px;color:#000;}
    .compare-mo h4{color:#fff);}
    .compare-col ul{list-style:none;margin:0;padding:0;}
    .compare-col li{font-size:.92rem;padding:11px 0;border-top:1px solid var(--line);line-height:1.4;}
    .compare-col li:first-child{border-top:0;padding-top:0;}
    .compare-typical li{color:var(--black);}
    .compare-mo li{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,);position:relative;padding-left:22px;}
    .compare-mo li:before{content:"✓";position:absolute;left:0;top:11px;color:var(--brass);font-weight:700;}
    .compare-mo li:first-child:before{top:0;}
    .specialism-side{display:flex;flex-direction:column;gap:28px;}
    .specialism-aside{font-size:1.02rem;color:var(--slate);line-height:1.65;margin:0;}
    @media (max-width:900px){
      .specialism-grid{grid-template-columns:1fr;}
      .compare-card{grid-template-columns:1fr;}
    }

    /* ---------- Intro + Gallery ---------- */
    .intro{background:#f9f9f9;}
    .intro-text{max-width:680px;margin:0 auto 50px;text-align:center;}
    .intro-text p{font-size:1.08rem;color:var(--slate);}
    .gallery-grid{column-count:4;column-gap:16px;}
    .gallery-grid img{width:100%;display:block;}
    @media (max-width:900px){.gallery-grid{column-count:3;}}
    @media (max-width:600px){.gallery-grid{column-count:2;}}
    .gallery-cta{text-align:center;margin-top:40px;}

    /* Gallery items become buttons that open the full-screen lightbox */
    .gallery-item{
      position:relative;display:block;width:100%;margin:0 0 16px;padding:0;
      border:0;background:none;border-radius:2px;overflow:hidden;
      break-inside:avoid;cursor:zoom-in;-webkit-tap-highlight-color:transparent;
    }
    .gallery-item img{margin:0;transition:transform .4s ease;}
    .gallery-item:hover img,
    .gallery-item:focus-visible img{transform:scale(1.05);}
    .gallery-item:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}
    .gallery-expand{
      position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
      background:rgba(26,24,21,0);opacity:0;
      transition:opacity .2s ease, background .2s ease;
    }
    .gallery-item:hover .gallery-expand,
    .gallery-item:focus-visible .gallery-expand{opacity:1;background:rgba(26,24,21,.15);}
    .gallery-expand span{
      width:75px;height:75px;border-radius:2px;
      display:flex;align-items:center;justify-content:center;
      transform:scale(.8);transition:transform .2s ease;
    }
    .gallery-item:hover .gallery-expand span,
    .gallery-item:focus-visible .gallery-expand span{transform:scale(1);}
    .gallery-expand svg{width:75px;height:75px;color:#000}

    /* Full-screen lightbox */
    .lightbox{
      position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
      padding:60px 70px;background:rgba(26,24,21,.92);
      opacity:0;visibility:hidden;transition:opacity .25s ease, visibility .25s ease;
    }
    .lightbox.is-open{opacity:1;visibility:visible;}
    .lightbox-img-wrap{max-width:min(1100px,100%);text-align:center;}
    .lightbox-img-wrap img{
      max-width:100%;max-height:78vh;width:auto;margin:0 auto;border-radius:2px;
      box-shadow:0 30px 80px rgba(0,0,0,.4);
      transform:scale(.96);transition:transform .25s ease;
    }
    .lightbox.is-open .lightbox-img-wrap img{transform:scale(1);}
    .lightbox-caption{color:rgba(250,246,239,.8);font-size:.85rem;margin:14px 0 0;}
    .lightbox-close,.lightbox-prev,.lightbox-next{
      position:fixed;width:46px;height:46px;border-radius:2px;
      background:rgba(20,18,15,.6);border:1px solid rgba(255,255,255,.5);color:#fff;
      display:flex;align-items:center;justify-content:center;cursor:pointer;
      transition:background .2s ease;
      box-shadow:0 6px 18px rgba(0,0,0,.35);
    }
    .lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:rgba(20,18,15,.85);}
    .lightbox-close{top:20px;right:20px;}
    .lightbox-prev{left:16px;top:50%;transform:translateY(-50%);}
    .lightbox-next{right:16px;top:50%;transform:translateY(-50%);}
    .lightbox-close svg,.lightbox-prev svg,.lightbox-next svg{width:20px;height:20px;}
    body.lightbox-open{overflow:hidden;}
    @media (max-width:600px){
      .lightbox{padding:64px 54px 32px;}
      .lightbox-prev,.lightbox-next{width:38px;height:38px;}
      .lightbox-prev{left:8px;}
      .lightbox-next{right:8px;}
      .lightbox-close{top:12px;right:12px;width:38px;height:38px;}
    }
    @media (prefers-reduced-motion:reduce){
      .gallery-item img,.gallery-expand,.gallery-expand span,.lightbox,.lightbox-img-wrap img{transition:none;}
    }

    /* ---------- Benefits ---------- */
    .benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
    .benefit-card{border:1px solid var(--line);border-radius:2px;padding:36px 32px;}
    .benefit-card .icon{width:44px;height:44px;color:var(--brass);margin-bottom:18px;}
    .benefit-card h3{font-size:1.25rem;margin-bottom:10px;}
    .benefit-card p{margin:0;color:var(--slate-light);font-size:.97rem;}
    @media (max-width:800px){.benefit-grid{grid-template-columns:1fr;}}

    /* ---------- Services ---------- */
    .services{background:var(--ivory);}
    .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
    .service-card{background:#fff;border:1px solid var(--line);border-radius:2px;padding:30px 26px;transition:transform .18s ease, box-shadow .18s ease;}
    .service-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(26,24,21,.08);}
    .service-card img{width:30px;height:30px;margin-bottom:16px;}
    .service-card h3{font-size:1.15rem;margin-bottom:8px;}
    .service-card p{margin:0;font-size:.93rem;color:var(--slate-light);}
    @media (max-width:900px){.service-grid{grid-template-columns:repeat(2,1fr);}}
    @media (max-width:600px){.service-grid{grid-template-columns:1fr;}}

    /* ---------- Process / How It Works ---------- */
    .process-top{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:stretch;margin-bottom:32px;}
    .process-intro{display:flex;flex-direction:column;gap:28px;}
    .process-intro .section-head{margin-bottom:0;}

    .process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
    @media (min-width:901px){
      .process-grid.cols-4{grid-template-columns:repeat(4,1fr);}
    }
    .process-step{
      position:relative;background:#fff;border:1px solid var(--line);border-radius:2px;
      padding:30px 28px;transition:transform .18s ease, box-shadow .18s ease;
    }
    .process-step:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(26,24,21,.08);}
    .process-step .num{
      font-family:'Work Sans',serif;font-size:2rem;font-weight:480;color:var(--brass);line-height:1;margin-bottom:14px;
    }
    .process-step h3{font-size:1.08rem;margin-bottom:8px;}
    .process-step p{margin:0;font-size:.92rem;color:var(--slate-light);}

    /* Arrow in step 01 pointing across to the quote panel. Scoped to .has-arrow.
       Desktop only - below 900px the form stacks under the steps, so it's hidden.
       Change --step-arrow-color to recolour (e.g. #d62828 for red). */
    .process-step.has-arrow{--step-arrow-color:#d62828;}
    .step-arrow{display:none;}
    @media (min-width:901px){
      .step-arrow{
        display:block;position:absolute;left:150px;right:24px;top:75px;height:22px;
        color:var(--step-arrow-color);pointer-events:none;
        animation:step-arrow-nudge 1.6s ease-in-out infinite;
      }
      .step-arrow svg{display:block;}
    }
    @keyframes step-arrow-nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(6px);}}
    @media (prefers-reduced-motion:reduce){.step-arrow{animation:none;}}

    /* Video panel */
    .video-frame{
      position:relative;aspect-ratio:16/9;border-radius:2px;overflow:hidden;
      background:var(--ink);box-shadow:0 30px 70px rgba(26,24,21,.28);
    }
    @media (min-width:901px){
      /* Lets the video match the exact height of a sibling grid column (e.g. the stacked 01+02
         process steps) instead of being locked to its own 16:9 ratio. Only applied on desktop,
         where process-top is a real 2-column grid; on mobile the columns stack, so the normal
         16:9 ratio above still applies. */
      .video-frame.stretch{aspect-ratio:auto;height:100%;}
    }
    .video-thumb{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;background:none;cursor:pointer;display:block;}
    .video-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
    .video-thumb::after{
      content:"";position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(to top, rgba(26,24,21,.68), rgba(26,24,21,0) 46%);
    }
    .video-play{
      position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
      width:76px;height:76px;border-radius:2px;background:var(--brass);
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 14px 34px rgba(0,0,0,.4);transition:transform .2s ease, background .2s ease;
      /* Sits visually on top of the .video-thumb button (a sibling, not a child), so without
         this it intercepts clicks on exactly the icon users are most likely to click,
         preventing the button underneath from ever registering the click. */
      pointer-events:none;
    }
    .video-play svg{width:26px;height:26px;color:#fff;margin-left:3px;}
    .video-thumb:hover .video-play{transform:translate(-50%,-50%) scale(1.08);background:var(--brass-deep);}
    .video-thumb:focus-visible{outline:2px solid var(--brass);outline-offset:-4px;}
    .video-thumb:focus-visible .video-play{transform:translate(-50%,-50%) scale(1.08);}

    .video-badge{
      position:absolute;top:18px;left:18px;z-index:2;pointer-events:none;
      display:inline-flex;align-items:center;gap:8px;
      background:rgba(26,24,21,.78);backdrop-filter:blur(6px);color:#fff;
      font-size:.76rem;font-weight:600;letter-spacing:.01em;
      padding:9px 14px 9px 11px;border-radius:2px;
    }
    .video-badge svg{width:13px;height:13px;flex-shrink:0;color:var(--brass);}

    .video-watch-link{
      position:absolute;bottom:16px;left:18px;z-index:2;
      display:inline-flex;align-items:center;gap:8px;color:#fff;
      font-size:.82rem;font-weight:600;border-radius:2px;
    }
    .video-watch-link svg{width:22px;height:16px;flex-shrink:0;}
    .video-watch-link:hover{text-decoration:underline;}
    .video-watch-link:focus-visible{outline:2px solid #fff;outline-offset:3px;}

    .video-embed{position:absolute;inset:0;width:100%;height:100%;border:0;}

    /* Compact quote panel: sits in the .process-top right column in place of the video.
       Scoped to .quote-panel so the main .contact-form styles are unaffected. */
    .quote-panel{
      background:#fff;border:1px solid var(--line);border-top:3px solid var(--brass);border-radius:2px;
      padding:22px 24px 20px;box-shadow:0 30px 70px rgba(26,24,21,.12);
      min-width:0; /* grid item: prevent horizontal overflow on mobile */
    }
    .quote-panel form{display:flex;flex-direction:column;gap:11px;margin:0;}
    .qp-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
    .qp-field{display:flex;flex-direction:column;gap:4px;min-width:0;}
    .qp-field label,.qp-label{font-size:.76rem;font-weight:600;color:var(--ink);letter-spacing:.01em;line-height:1.3;}
    .qp-opt{font-weight:400;color:var(--slate-light);}
    .quote-panel input[type="text"],.quote-panel input[type="email"],.quote-panel input[type="tel"],
    .quote-panel input[type="number"],.quote-panel textarea{
      width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:2px;
      font-family:'Work Sans',sans-serif;font-size:.92rem;background:var(--ivory);color:var(--ink);margin:0;
    }
    .quote-panel textarea{min-height:64px;resize:vertical;}
    .quote-panel input:focus,.quote-panel textarea:focus{outline:2px solid var(--brass);outline-offset:1px;background:#fff;}
    .quote-panel .cf-turnstile{min-height:65px;}
    .qp-submit{width:100%;justify-content:center;letter-spacing:.08em;padding:13px 20px;}
    .qp-submit:disabled{opacity:.6;cursor:wait;transform:none;}
    .qp-status{margin:0;font-size:.86rem;min-height:0;}
    .qp-status:empty{display:none;}
    .qp-status.is-success{color:#1d6b3a;font-weight:600;}
    .qp-status.is-error{color:#a3322a;font-weight:600;}
    @media (max-width:520px){
      .qp-row{grid-template-columns:1fr;}
      .quote-panel{padding:20px 18px 18px;}
    }

    @media (max-width:900px){
      .process-top{grid-template-columns:1fr;gap:28px;}
      .process-grid{grid-template-columns:1fr;gap:20px;}
    }

    /* ---------- Pricing ---------- */
    .pricing{background:var(--ivory);color:#000;}
    .pricing .section-head p{color:rgba(255,255,255,);}
    .pricing .section-head h2{color:#000;}
    .pricing-note{font-size:1rem;color:rgba(255,255,255,);margin-bottom:44px;}
    .pricing-note strong{color:var(--brass);font-family:'Work Sans',serif;font-weight:500;}
    .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
    .pricing-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:2px;padding:32px 26px;}
    .pricing-card h3{color:#fff;font-size:1.15rem;margin-bottom:10px;}
    .pricing-card p{color:rgba(255,255,255,.62);font-size:.92rem;margin:0 0 20px;}
    @media (max-width:900px){.pricing-grid{grid-template-columns:1fr;}}

    /* ---------- Clients strip ---------- */
    .clients-strip .section-head{margin-bottom:38px;}
    .logo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:64px;}
    .logo-row img{max-height:125px;width:auto;filter:grayscale(0);opacity:.7;transition:opacity .2s ease, filter .2s ease;}
    .logo-row img:hover{filter:grayscale(0);opacity:1;}
    .badge-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:52px;margin-top:44px;padding-top:44px;border-top:1px solid var(--line);}
    .badge-row img{max-height:128px;width:auto;opacity:.9;}

    /* ---------- Pull quote ---------- */
    .pullquote{background:var(--paper);text-align:center;}
    .pullquote blockquote{
      font-family:'Work Sans',serif;font-style:italic;font-weight:420;
      font-size:clamp(1.5rem,3vw,2.3rem);color:var(--ink);max-width:760px;margin:0 auto 20px;line-height:1.35;
    }
    .pullquote cite{font-style:normal;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-deep);font-weight:700;}

    /* ---------- Articles ---------- */
    .articles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
    .article-card{border:1px solid var(--line);border-radius:2px;overflow:hidden;display:flex;flex-direction:column;height:100%;transition:transform .18s ease, box-shadow .18s ease;}
    .article-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(26,24,21,.08);}
    .article-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;}
    .article-card-body{padding:28px 26px 24px;display:flex;flex-direction:column;flex-grow:1;}
    .article-card .tag{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-deep);margin-bottom:14px;}
    .article-card h3{font-size:1.14rem;line-height:1.35;margin-bottom:12px;flex-grow:1;}
    .article-card p{font-size:.92rem;color:var(--slate-light);margin:0 0 18px;}
    .article-card .read-more{font-size:.84rem;font-weight:600;color:var(--ink);border-top:1px solid var(--line);padding-top:16px;}
    .article-card .read-more:hover{color:var(--brass-deep);}
    .articles-more{text-align:center;margin-top:40px;}
    @media (max-width:900px){.articles-grid{grid-template-columns:repeat(2,1fr);}}
    @media (max-width:560px){.articles-grid{grid-template-columns:1fr;}}

    /* ---------- CTA band ---------- */
    .cta-band{background:var(--brass);color:#fff;text-align:center;padding:70px 0;}
    .cta-band h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:10px;}
    .cta-band p{margin:0 0 30px;color:rgba(255,255,255,);}
    .cta-band .btn-primary{background:var(--ink);}
    .cta-band .btn-primary:hover{background:#000;}
    .cta-band .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;}
    .cta-band .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);}
    .cta-band .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

    /* ---------- Contact ---------- */
    .contact{background:var(--ivory);}
    .contact .container{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;}
    .find-info{list-style:none;margin:0;padding:0;}
    .find-info li{margin-bottom:26px;}
    .find-info h2.heading-small{font-size:1.5rem;}
    .find-info h5{font-size:.95rem;margin:0 0 4px;color:var(--ink);}
    .find-info p, .find-info span{color:var(--slate-light);font-size:.95rem;}
    .find-info a{color:var(--brass-deep);font-weight:600;}
    .contact-form{background:#fff;border:1px solid var(--line);border-radius:2px;padding:34px;}
    .contact-form .row{display:flex;gap:16px;margin-bottom:14px;flex-wrap:wrap;}
    .contact-form .row > div{flex:1;min-width:180px;}
    .contact-form input, .contact-form textarea{
      width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:2px;font-family:'Work Sans',sans-serif;
      font-size:.94rem;margin-bottom:14px;background:var(--ivory);color:var(--ink);
    }
    .contact-form input:focus, .contact-form textarea:focus{outline:2px solid var(--brass);outline-offset:1px;background:#fff;}
    .contact-form textarea{min-height:120px;resize:vertical;}
    .contact-form button{
      background:var(--ink);color:#fff;border:0;padding:14px 30px;border-radius:2px;font-weight:600;
      cursor:pointer;font-family:'Work Sans',sans-serif;font-size:.92rem;
    }
    .contact-form button:hover{background:var(--brass-deep);}
    .form-messege{margin-top:14px;font-size:.9rem;}
    @media (max-width:900px){.contact .container{grid-template-columns:1fr;}}

    /* ---------- Footer ---------- */
    .site-footer{background:#015864;color:#fff;padding-top:70px;}
    .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid #fff;}
    .footer-grid h4{color:#fff;font-family:'Work Sans',sans-serif;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:18px;}
    .footer-brand .logo{color:#fff;margin-bottom:14px;display:inline-block;}
    .footer-brand p{font-size:.9rem;max-width:280px;color:#fff;}
    .footer-grid ul{list-style:none;margin:0;padding:0;}
    .footer-grid ul li{margin-bottom:10px;}
    .footer-grid ul li a{font-size:.9rem;color:#fff;}
    .footer-grid ul li a:hover{color:#fff;}
    .footer-social{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px;padding:0;list-style:none;}
    .footer-social a{font-size:.8rem;color:#fff;border:1px solid #fff;border-radius:2px;padding:8px 16px;}
    .footer-social a:hover{color:#fff;border-color:#fff;}
    .footer-bottom{padding:26px 0;text-align:center;font-size:.82rem;color:#fff;}
    @media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
    @media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

    /* ---------- Scroll to top ---------- */
    .scrollToTop{
      position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:2px;
      background:var(--ink);display:flex;align-items:center;justify-content:center;
      opacity:0;visibility:hidden;transform:translateY(10px);transition:all .2s ease;z-index:50;
    }
    .scrollToTop.visible{opacity:1;visibility:visible;transform:translateY(0);}
    .scrollToTop img{width:16px;filter:invert(1);}

    /* ---------- FAQ ---------- */
    .faq{background:#fff;}
    .faq .section-head p{max-width:520px;margin-left:auto;margin-right:auto;}
    .faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
    .faq-item{
      border:1px solid var(--line);border-radius:2px;background:#fff;
      overflow:hidden;transition:border-color .2s ease, box-shadow .2s ease;
    }
    .faq-item[open]{border-color:var(--brass);box-shadow:0 16px 36px rgba(26,24,21,.07);}
    .faq-question{
      display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding:20px 24px;cursor:pointer;list-style:none;
      font-family:'Work Sans',sans-serif;font-weight:600;font-size:1rem;color:var(--ink);
      -webkit-tap-highlight-color:transparent;
    }
    .faq-question::-webkit-details-marker{display:none;}
    .faq-question::marker{content:"";}
    .faq-item:hover .faq-question{color:var(--brass-deep);}
    .faq-question:focus-visible{outline:2px solid var(--brass);outline-offset:-2px;border-radius:2px;}
    .faq-icon{
      flex-shrink:0;position:relative;width:28px;height:28px;border-radius:2px;
      border:1px solid var(--line);transition:border-color .2s ease, background .2s ease;
    }
    .faq-icon::before,.faq-icon::after{
      content:"";position:absolute;top:50%;left:50%;background:var(--brass-deep);
      transform:translate(-50%,-50%);transition:transform .25s ease, background .2s ease;
    }
    .faq-icon::before{width:12px;height:1.6px;}
    .faq-icon::after{width:1.6px;height:12px;}
    .faq-item[open] .faq-icon{border-color:var(--brass);background:var(--brass);}
    .faq-item[open] .faq-icon::before,
    .faq-item[open] .faq-icon::after{background:#fff;}
    .faq-item[open] .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0);}
    .faq-answer{padding:0 24px 22px;}
    .faq-answer p{margin:0;color:var(--slate-light);font-size:.95rem;}
    .faq-answer a{color:var(--brass-deep);font-weight:600;}
    .faq-answer a:hover{text-decoration:underline;}
    @media (max-width:600px){
      .faq-question{padding:17px 18px;font-size:.94rem;gap:14px;}
      .faq-answer{padding:0 18px 18px;}
    }
    @media (prefers-reduced-motion:reduce){
      .faq-icon::before,.faq-icon::after,.faq-item{transition:none;}
    }

    /* ---------- Breadcrumb ---------- */
    .breadcrumb{padding:16px 0 0;}
    .breadcrumb .container{font-size:.82rem;color:var(--slate-light);}
    .breadcrumb a{color:var(--brass-deep);font-weight:600;}
    .breadcrumb a:hover{text-decoration:underline;}
    .breadcrumb span[aria-hidden]{margin:0 8px;color:var(--line);}
    .breadcrumb span[aria-current]{color:var(--slate-light);}

    /* ---------- Quick answer / GEO callout ---------- */
    .quick-answer{
      background:var(--ivory);border:1px solid var(--line);border-left:4px solid var(--brass);
      border-radius:2px;padding:26px 30px;
    }
    .quick-answer p{margin:0;font-size:1.02rem;color:var(--ink-soft);line-height:1.65;}
    .quick-answer strong{color:var(--ink);}
    .quick-answer a{color:var(--brass-deep);font-weight:600;}
    .quick-answer a:hover{text-decoration:underline;}

    /* ---------- Related-articles callout (reuses .quick-answer styling, narrowed to the article column) ---------- */
    .article-related{max-width:740px;margin:40px auto 0;}

    /* ---------- Price tiers ---------- */
    .price-tiers{background:#fff;}
    .tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
    .tier-card{
      display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:2px;
      padding:34px 28px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .tier-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px rgba(26,24,21,.1);border-color:var(--brass);}
    .tier-card .tier-name{
      display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
      color:var(--brass-deep);margin-bottom:14px;
    }
    .tier-card .tier-price{font-family:'Work Sans',serif;font-size:2.3rem;font-weight:480;color:var(--ink);line-height:1;margin-bottom:6px;}
    .tier-card .tier-price span{font-family:'Work Sans',sans-serif;font-size:.92rem;font-weight:500;color:var(--slate-light);}
    .tier-card .tier-desc{color:var(--slate-light);font-size:.94rem;margin:0 0 22px;}
    .tier-card ul{list-style:none;margin:0 0 26px;padding:0;flex-grow:1;}
    .tier-card li{position:relative;padding:9px 0 9px 24px;font-size:.9rem;color:var(--slate);border-top:1px solid var(--line);line-height:1.4;}
    .tier-card li:first-child{border-top:0;padding-top:0;}
    .tier-card li:before{content:"✓";position:absolute;left:0;top:9px;color:var(--brass);font-weight:700;}
    .tier-card li:first-child:before{top:0;}
    .tier-card .btn{align-self:flex-start;}
    @media (max-width:900px){.tier-grid{grid-template-columns:1fr;}}

    /* ---------- Add-ons ---------- */
    .addon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
    .addon-card{background:#fff;border:1px solid var(--line);border-radius:2px;padding:26px 24px;transition:transform .18s ease, box-shadow .18s ease;}
    .addon-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(26,24,21,.08);}
    .addon-card h3{font-size:1rem;margin-bottom:8px;}
    .addon-card p{margin:0 0 16px;font-size:.87rem;color:var(--slate-light);}
    .addon-card .addon-tag{
      display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
      color:var(--brass-deep);background:var(--ivory);padding:6px 12px;border-radius:2px;
    }
    @media (max-width:900px){.addon-grid{grid-template-columns:repeat(2,1fr);}}
    @media (max-width:600px){.addon-grid{grid-template-columns:1fr;}}

    /* ---------- Full-bleed hero banner (original homepage style) ---------- */
	
    /* Image itself now comes from the --hero-img custom property set inline on the section
       (see index.html), instead of being hardcoded here or set as an inline background-image.
       That lets a lighter, mobile-cropped photo be swapped in below via --hero-img-mobile
       without touching this rule again - just add
       --hero-img-mobile:url('...-mobile.webp') alongside --hero-img on the section, once a
       resized version of that page's hero photo exists. Until then it safely falls back to
       the same image used on desktop, so nothing changes until you add the mobile file. */
    .hero-banner{
      position:relative;
      min-height:860px;
      display:flex;
      align-items:center;
      background-image:var(--hero-img);
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
      overflow:hidden;
    }
    .hero-banner::before{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(105deg, rgba(15,15,14,.20) 0%, rgba(15,15,14,.25) 42%, rgba(15,15,14,.08) 72%);
      z-index:1;
    }
    .hero-banner .container{position:relative;z-index:2;}
    .hero-banner-copy{max-width:640px;margin:0 auto;text-align:left;transform:translateX(100px);}
    .hero-banner .mark{
      display:inline-block;font-family:'Work Sans',sans-serif;font-size:1.2rem;font-weight:500;
      letter-spacing:.3em;text-transform:uppercase;color:#fff;margin-bottom:20px;
      border-right:2px solid rgba(255,255,255,.85);padding-right:8px;
      animation:blink-caret .9s step-end infinite;
    }
    @keyframes blink-caret{50%{border-color:transparent;}}
    .hero-banner h1{
      font-family:'Work Sans',sans-serif;font-weight:400;color:#fff;
      font-size:clamp(1.76rem, 4.16vw, 3.52rem);line-height:1.01;letter-spacing:.03em;
      text-transform:uppercase;margin:0 0 40px;
    }
    .btn-outline-white{
      display:inline-flex;align-items:center;background:transparent;color:#fff;
      border:1px solid rgba(255,255,255,.85);border-radius:2px;
      padding:17px 30px;font-family:'Work Sans',sans-serif;font-size:.8rem;font-weight:600;
      letter-spacing:.14em;text-transform:uppercase;transition:background .2s ease, color .2s ease;
    }
    .btn-outline-white:hover{background:#fff;color:var(--ink);}
    @media (max-width:900px){
  .hero-banner{min-height:640px;padding:70px 0;}
  .hero-banner-copy{transform:none;}
}
    @media (max-width:600px){
      .hero-banner{
        min-height:560px;
        /* Swap in a smaller mobile crop once one exists (see the note above the base
           .hero-banner rule); falls back to the desktop image until then. */
        background-image:var(--hero-img-mobile, var(--hero-img));
      }
      .hero-banner .mark{font-size:.85rem;letter-spacing:.22em;}
    }

    /* ---------- Trio image strip (homepage About section) ---------- */
    .trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;}
    .trio-grid img{border-radius:2px;width:100%;height:280px;object-fit:cover;box-shadow:0 20px 44px rgba(26,24,21,.12);}
    @media (max-width:700px){.trio-grid{grid-template-columns:1fr;height:auto;}}

    /* ---------- Solo media: single showcase image (style sections with one photo) ---------- */
    .solo-media{max-width:640px;margin:40px auto 0;}
    .solo-media .frame{position:relative;overflow:hidden;border-radius:2px;height:0;padding-bottom:80%;box-shadow:0 20px 44px rgba(26,24,21,.12);}
    .solo-media .frame img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;}

    /* ---------- Articles grid: 3-up modifier (homepage has 3 posts) ---------- */
    @media (min-width:901px){
      .articles-grid.cols-3{grid-template-columns:repeat(3,1fr);}
    }

    /* ---------- Reveal on scroll ---------- */
    .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .5s ease;}
    .reveal.is-visible{opacity:1;transform:none;}
    @media (prefers-reduced-motion:reduce){
      .reveal{opacity:1;transform:none;transition:none;}
      html{scroll-behavior:auto;}
    }

    /* ---------- Hero rotating headline (portfolio page) ---------- */
    .hero-rotator{display:inline-block;transition:opacity .4s ease;}
    .hero-rotator.is-fading{opacity:0;}

    /* ---------- Standalone (non-grid) video frame, e.g. a showreel outside the process layout ---------- */
    .video-frame.centered{max-width:820px;margin:0 auto;}

    /* ---------- Studios (contact page: two-studio cards with map/photo panel) ---------- */
    .studios{background:#fff;}
    .studios-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;}
    .studio-card{
      border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#fff;
      transition:box-shadow .18s ease, transform .18s ease;
    }
    .studio-card:hover{box-shadow:0 20px 44px rgba(26,24,21,.1);transform:translateY(-2px);}
    .studio-map{height:260px;background:var(--ivory);}
    .studio-map iframe{width:100%;height:100%;border:0;display:block;}
    .studio-body{padding:32px 30px;}
    .studio-body .eyebrow{margin-bottom:10px;}
    .studio-body h3{font-size:1.5rem;margin-bottom:10px;}
    .studio-body address{font-style:normal;color:var(--slate);font-size:.96rem;line-height:1.5;margin-bottom:18px;}
    .studio-meta{list-style:none;margin:0 0 24px;padding:0;}
    .studio-meta li{
      display:flex;align-items:center;gap:10px;font-size:.94rem;color:var(--slate);
      padding:9px 0;border-top:1px solid var(--line);
    }
    .studio-meta li:first-child{border-top:0;padding-top:0;}
    .studio-meta a{color:var(--brass-deep);font-weight:600;}
    .studio-meta a:hover{text-decoration:underline;}
    .studio-icon{width:18px;height:18px;color:var(--brass);flex-shrink:0;}
    @media (max-width:900px){.studios-grid{grid-template-columns:1fr;}}

    /* ---------- Breadcrumb banner: wide, short image banner for inner/blog pages ----------
       Distinct from the small text-only .breadcrumb rule above - this is a full-bleed
       image banner (shorter than .hero-banner) used to open article/blog pages. Scoped
       to .breadcrumb-banner only, so the homepage hero and existing .breadcrumb text
       strip are left untouched. */
    .breadcrumb-banner{
      position:relative;
      height:0;
      padding-bottom:26%;
      min-height:220px;
      display:flex;
      align-items:center;
      background-image:url('assets/img/breadcrumb/breadcrumb-bg2.webp');
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
      overflow:hidden;
    }
    .breadcrumb-banner::before{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(105deg, rgba(15,15,14,.66) 0%, rgba(15,15,14,.54) 55%, rgba(15,15,14,.42) 100%);
      z-index:1;
    }
    .breadcrumb-banner .container{
      position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
      width:100%;z-index:2;text-align:center;
    }
    .breadcrumb-banner h1{
      color:#fff;font-weight:480;letter-spacing:-.01em;margin:0 0 14px;
      font-size:clamp(1.4rem,3vw,2.2rem);max-width:820px;margin-left:auto;margin-right:auto;
    }
    .breadcrumb-trail{font-size:.84rem;color:rgba(255,255,255,.8);}
    .breadcrumb-trail a{color:#fff;font-weight:600;}
    .breadcrumb-trail a:hover{text-decoration:underline;}
    .breadcrumb-trail span[aria-hidden]{margin:0 8px;color:rgba(255,255,255,.5);}
    .breadcrumb-trail span[aria-current]{color:var(--brass);font-weight:600;}
    @media (max-width:600px){
      .breadcrumb-banner{padding-bottom:60%;min-height:200px;}
    }

    /* ---------- Article (blog post) media and body ---------- */
    .article-media{max-width:920px;margin:56px auto 0;padding:0 24px;}
    .article-media .frame{
      position:relative;overflow:hidden;border-radius:2px;height:0;padding-bottom:54%;
      box-shadow:0 20px 44px rgba(26,24,21,.14);
    }
    .article-media .frame img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;}
    .article-body{max-width:740px;margin:0 auto;padding:48px 24px 0;}
    .article-body h2{font-size:1.4rem;margin:0 0 16px;}
    .article-body section + section{margin-top:40px;}
    .article-body p{font-size:1.06rem;color:var(--slate);margin:0 0 22px;line-height:1.75;}
    .article-body p:last-child{margin-bottom:0;}
    .article-body a{color:var(--brass-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px;}
    .article-body a:hover{color:var(--ink);}

    /* ---------- Article byline box: author + date, shown under the article body
       (mirrors the shaded author/date bar used above the comments on the live site) ---------- */
    .article-meta-box{
      display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
      max-width:740px;margin:40px auto 0;padding:20px 26px;
      background:var(--ivory);border:1px solid var(--line);border-radius:2px;
    }
    .article-meta-box .meta-item{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:600;color:var(--ink-soft);}
    .article-meta-box svg{width:18px;height:18px;color:var(--brass);flex-shrink:0;}
    @media (max-width:600px){
      .article-media{margin-top:40px;}
      .article-body{padding:36px 20px 0;}
      .article-meta-box{padding:18px 20px;}
    }

    /* ---------- Landing page header (Google Ads pages): logo + phone + single CTA,
       no nav menu so paid traffic isn't tempted off the conversion path. On desktop
       the shared .header-row flex + space-between already places the two remaining
       children (logo, header-cta) at opposite ends with no changes needed - these
       rules only restore the phone/CTA on mobile, where the base stylesheet hides
       .header-cta in favour of the (here, absent) hamburger menu. ---------- */
    .landing-header .logo{cursor:default;}
    @media (max-width:900px){
      .landing-header .header-cta{display:flex;align-items:center;gap:10px;}
      .landing-header .header-phone span{display:none;}
      .landing-header .header-phone a{font-size:.86rem;}
      .landing-header .btn-primary{padding:11px 16px;font-size:.82rem;}
    }
    @media (max-width:420px){
      .landing-header .header-phone{display:none;}
    }

    /* ---------- Landing page footer (Google Ads pages): compact NAP + copyright only,
       no links to other site pages. ---------- */
    .landing-footer{background:#015864;color:#fff;padding:40px 0 0;}
    .landing-footer .footer-row{
      display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;
      padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.25);
    }
    .landing-footer .logo{color:#fff;font-family:'Work Sans',serif;font-size:1.7rem;}
    .landing-footer .footer-contact{display:flex;align-items:center;gap:26px;flex-wrap:wrap;font-size:.9rem;color:rgba(255,255,255,.85);}
    .landing-footer .footer-contact a{color:#fff;font-weight:700;}
    .landing-footer .footer-contact a:hover{text-decoration:underline;}
    .landing-footer .footer-bottom{padding:18px 0;text-align:center;font-size:.82rem;color:rgba(255,255,255,.75);}
    @media (max-width:600px){
      .landing-footer .footer-row{flex-direction:column;align-items:flex-start;}
    }

    /* ---------- Mobile sticky call/quote bar (Google Ads pages only) ----------
       Scoped under body.landing-page so it never affects the standard site pages
       that share this stylesheet. */
    .sticky-cta-bar{display:none;}
    @media (max-width:900px){
      body.landing-page .sticky-cta-bar{
        display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:80;
        background:#fff;border-top:1px solid var(--line);
        box-shadow:0 -8px 24px rgba(26,24,21,.14);
        padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));
      }
      body.landing-page .sticky-cta-bar .btn{flex:1;justify-content:center;margin:0;}
      /* Reserve space so the fixed bar never covers the FAQ/footer content. */
      body.landing-page{padding-bottom:76px;}
      /* The WebsitePolicies cookie-consent widget (cxqt5kp6.js) injects its own floating
         icon as #wpcc-floating-icon with an inline "bottom:20px", which sits inside the
         76px zone reserved above for the fixed sticky call/quote bar and gets covered by
         it. !important is required to win over that inline style. Scoped to landing pages
         only, matching the sticky bar itself. */
      body.landing-page #wpcc-floating-icon{
        bottom:calc(76px + env(safe-area-inset-bottom) + 14px) !important;
      }
    }

    /* ---------- Free test shoot terms (licensing conditions shown up front) ----------
       Scoped to .test-shoot so nothing else changes. Intro copy on the left, numbered
       steps joined by a thin vertical line on the right; stacks below 900px. */
    .test-shoot{background:#fff;}
    .ts-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;}
    .ts-intro h2{font-size:clamp(1.7rem,3vw,2.3rem);}
    .ts-intro p{font-size:1.06rem;color:var(--slate);margin:0 0 28px;max-width:460px;}
    .ts-card{
      background:#fff;border:1px solid var(--line);border-top:3px solid var(--brass);border-radius:2px;
      padding:34px 32px 26px;box-shadow:0 30px 70px rgba(26,24,21,.10);min-width:0;
    }
    .ts-steps{list-style:none;margin:0;padding:0;}
    .ts-step{position:relative;display:grid;grid-template-columns:42px 1fr;gap:18px;padding-bottom:24px;}
    .ts-step:not(:last-child)::before{
      content:"";position:absolute;left:20.5px;top:42px;bottom:0;width:1px;background:var(--line);
    }
    .ts-num{
      position:relative;z-index:1;width:42px;height:42px;border-radius:2px;
      display:flex;align-items:center;justify-content:center;
      border:1px solid var(--brass);background:#fff;color:var(--brass-deep);
      font-weight:600;font-size:1.05rem;
    }
    .ts-step:last-child .ts-num{background:var(--brass);color:#fff;}
    .ts-step h3{font-size:1.08rem;margin:9px 0 6px;}
    .ts-step p{margin:0;font-size:.94rem;color:var(--slate-light);line-height:1.55;}
    .ts-note{
      margin:4px 0 0;padding-top:18px;border-top:1px solid var(--line);
      font-size:.8rem;line-height:1.55;color:var(--slate-light);
    }
    .ts-note strong{color:var(--ink-soft);font-weight:600;}
    @media (max-width:900px){
      .ts-grid{grid-template-columns:1fr;gap:32px;}
      .ts-intro p{max-width:none;}
    }
    @media (max-width:520px){
      .ts-card{padding:26px 20px 22px;}
      .ts-step{grid-template-columns:36px 1fr;gap:14px;}
      .ts-num{width:36px;height:36px;font-size:.95rem;}
      .ts-step:not(:last-child)::before{left:17.5px;top:36px;}
      .ts-step h3{margin-top:6px;}
    }

    /* ---------- Google reviews strip ----------
       Scoped to .reviews-strip so nothing else changes. Bottom padding is 0 because the
       section that follows it on the landing pages adds its own top spacing. */
    .reviews-strip{background:#fff;padding:80px 0 0;}
    .reviews-strip .section-head{margin-bottom:22px;}
    .g-summary{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;margin:0 0 38px;}
    .g-score{font-size:2.2rem;font-weight:500;color:var(--ink);line-height:1;}
    .g-count{font-size:.9rem;color:var(--slate-light);}
    .g-stars{display:inline-flex;gap:2px;color:#F4B400;}
    .g-stars svg{width:18px;height:18px;fill:currentColor;display:block;}
    .g-summary .g-stars svg{width:22px;height:22px;}
    .g-review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
    .g-review{
      margin:0;display:flex;flex-direction:column;gap:14px;background:#fff;
      border:1px solid var(--line);border-top:3px solid var(--brass);border-radius:2px;padding:26px 26px 28px;
      transition:transform .18s ease, box-shadow .18s ease;
    }
    .g-review:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(26,24,21,.08);}
    .g-review-head{display:flex;align-items:center;gap:12px;}
    .g-avatar{
      width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
      font-weight:600;font-size:1.05rem;color:#fff;background:var(--brass-deep);
    }
    .g-avatar-2{background:#0a6d7b;}
    .g-avatar-3{background:var(--ink-soft);}
    .g-avatar-4{background:var(--brass);}
    .g-review figcaption{display:flex;flex-direction:column;line-height:1.3;min-width:0;}
    .g-review figcaption strong{color:var(--ink);font-size:.98rem;font-weight:600;overflow-wrap:anywhere;}
    .g-review figcaption span{font-size:.78rem;color:var(--slate-light);}
    .g-review blockquote{margin:0;font-size:.97rem;color:var(--slate);line-height:1.6;}
    .g-cta{text-align:center;margin-top:34px;}
    .g-cta .btn-ghost{border-color:var(--brass);}
    .g-cta .btn-ghost:hover{background:var(--brass);color:#fff;}
    /* 4-up modifier: 4 across on wide screens, 2x2 on mid widths */
    .g-review-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
    .g-review-grid.cols-4 .g-review{padding:24px 22px 26px;}
    @media (max-width:1100px){
      .g-review-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));}
    }
    @media (max-width:900px){
      .reviews-strip{padding-top:64px;}
      .g-review-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto;gap:16px;}
      .g-review-grid.cols-4{max-width:none;}
    }
    @media (max-width:600px){
      .g-review-grid.cols-4{grid-template-columns:1fr;max-width:560px;}
    }