:root{
    --ink:#101418;
    --navy:#152739;
    --navy-2:#1E3550;
    --slate:#35536F;
    --slate-lt:#7C9AB5;
    --slate-lt2:#9FB8CE;  /* small text on dark grounds; #5A6B78 there was only 3.5:1 */
    --sunrise:#C9762F;
    --sunrise-dp:#AB6428;   /* button surface: white text clears 4.5:1 here, not on --sunrise */
    --sunrise-lt:#E8A05C;
    --snow:#F4F6F7;
    --snow-2:#E6EBEE;
    --cream:#EFE9DC;
    --line:#CBD5DB;
    --line-dk:#2C4055;
    --measure:720px;   /* one shared text column width, so every left edge lines up */
    --f-d:"Archivo","Helvetica Neue",Arial,sans-serif;
    --f-b:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
    color-scheme: light;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
  body{
    margin:0;background:var(--snow);color:var(--ink);
    font-family:var(--f-b);font-size:17px;line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }
  /* height:auto is required: the width/height attributes on the responsive
     images act as a definite pixel height, which overrides aspect-ratio
     and stretches every photo vertically without it. */
  img{display:block;max-width:100%;height:auto}
  picture{display:block}
  a{color:var(--slate)}
  a:focus-visible,button:focus-visible{outline:2px solid var(--sunrise);outline-offset:3px}

  

  /* ---------- site nav ---------- */
  .nav{
    background:var(--navy);color:var(--cream);
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    padding:14px 26px;
  }
  .nav a,.nav button{
    background:none;border:0;color:var(--cream);font-family:var(--f-d);
    font-size:.78rem;font-weight:600;letter-spacing:.02em;padding:6px 9px;cursor:pointer;
    text-decoration:none;border-bottom:2px solid transparent;
  }
  .nav a:hover,.nav button:hover{color:#fff}
  .nav a[aria-current="page"],.nav button[aria-current="page"]{border-bottom-color:var(--sunrise);color:#fff}
  .nav button[disabled]{color:#5B7A92;opacity:.42;cursor:not-allowed}
  .nav .quote{background:var(--sunrise-dp);color:#fff;padding:8px 15px;border-bottom:0}
  .nav .quote:hover{background:var(--sunrise-lt);color:#fff}
  .nav .brand{margin-right:auto;display:flex;align-items:center;gap:11px;padding:0;border-bottom:0}
  .nav .brand img{display:block;height:34px;width:auto}
  .nav .brand em{font-style:normal;font-weight:600;font-size:.62rem;letter-spacing:.28em;
            color:var(--slate-lt);text-transform:uppercase}

  /* ---------- layout ---------- */
  
  .wrap{max-width:1120px;margin:0 auto;padding:0 26px}

  /* Running text sits in one centred column so it does not hug the left edge
     on a wide screen. Figures, grids and the slider keep the full width, which
     is what gives the pages their narrow-text, wide-image rhythm. */
  .wrap > .eyebrow, .wrap > h1, .wrap > h2, .wrap > h3,
  .wrap > p, .wrap > .col, .wrap > ul, .wrap > .qa,
  .hero .inner > .eyebrow, .hero .inner > h1, .hero .inner > p{
    max-width:var(--measure);margin-left:auto;margin-right:auto
  }
  .wrap > .cta, .hero .inner > .cta{
    display:block;width:max-content;margin-right:auto;
    /* line the button up with the left edge of the centred text column */
    margin-left:max(0px, calc(50% - var(--measure) / 2))
  }
  .col{max-width:var(--measure)}
  section.band{padding:62px 0}
  .band.dark{background:var(--navy);color:var(--cream)}
  .band.dark h2,.band.dark h3{color:#fff}
  .band.deep{background:var(--ink);color:var(--cream)}
  .band.tint{background:var(--snow-2)}

  /* ---------- type ---------- */
  h1{font-family:var(--f-d);font-weight:800;letter-spacing:-.03em;line-height:1.02;
     font-size:clamp(2.3rem,5.6vw,4rem);margin:0 0 18px;text-wrap:balance}
  h2{font-family:var(--f-d);font-weight:700;letter-spacing:-.022em;line-height:1.1;
     font-size:clamp(1.6rem,3.4vw,2.3rem);margin:0 0 16px;text-wrap:balance}
  h3{font-family:var(--f-d);font-weight:700;letter-spacing:-.014em;
     font-size:1.16rem;margin:0 0 8px}
  p{margin:0 0 17px}
  .eyebrow{font-family:var(--f-d);font-weight:600;font-size:.7rem;letter-spacing:.2em;
           text-transform:uppercase;color:var(--slate);margin:0 0 14px}
  .band.dark .eyebrow,.band.deep .eyebrow{color:var(--sunrise-lt)}
  .eyebrow::before{content:"";display:inline-block;width:23px;height:14px;margin-right:10px;
                   vertical-align:-1px;background:url(/img/logo/logo-mark-96.png) center/contain no-repeat}

  /* the mark again, large and quiet, as texture on the dark bands */
  .band.dark > .wrap{position:relative}
  .band.dark > .wrap::after{content:"";position:absolute;right:-6px;top:-26px;
                            width:230px;height:143px;opacity:.11;pointer-events:none;
                            background:url(/img/logo/logo-mark-640.png) center/contain no-repeat}
  @media(max-width:1180px){ .band.dark > .wrap::after{display:none} }

  footer.site{background-image:url(/img/logo/logo-mark-640.png);
              background-repeat:no-repeat;background-position:right 26px bottom 22px;
              background-size:150px auto}
  @media(max-width:760px){ footer.site{background-image:none} }
  .lead{font-size:1.22rem;line-height:1.5}
  .fine{font-size:.93rem;color:#5A6B78}
  .band.dark .fine,.band.deep .fine{color:var(--slate-lt2)}

  /* ---------- hero ---------- */
  .hero{background:var(--ink);color:var(--cream);padding:0}
  .hero .inner{max-width:1120px;margin:0 auto;padding:56px 26px 0}
  .hero h1{color:#fff;max-width:var(--measure)}
  .hero .lead{color:var(--slate-lt);max-width:var(--measure);margin-bottom:26px}

  /* before/after slider */
  .ba{position:relative;overflow:hidden;background:#000;user-select:none;
      touch-action:pan-y;margin-top:34px;aspect-ratio:5/2}
  .ba img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 50%}
  .ba .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--sp,50%))}
  .ba .handle{position:absolute;top:0;bottom:0;left:var(--sp,50%);width:2px;
              background:var(--sunrise);pointer-events:none}
  .ba .knob{position:absolute;top:50%;left:var(--sp,50%);transform:translate(-50%,-50%);
            width:46px;height:46px;border-radius:50%;background:var(--sunrise);
            display:grid;place-items:center;pointer-events:none;
            box-shadow:0 3px 14px rgba(0,0,0,.45);color:#fff;
            font-family:var(--f-d);font-weight:700;font-size:15px;letter-spacing:-.05em}
  .ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;
                        cursor:ew-resize;margin:0}
  .ba .tag{position:absolute;bottom:12px;font-family:var(--f-d);font-size:.64rem;
           font-weight:700;letter-spacing:.18em;text-transform:uppercase;
           background:rgba(16,20,24,.78);color:var(--cream);padding:5px 10px}
  .ba .tag.l{left:12px} .ba .tag.r{right:12px}
  .cap{font-family:var(--f-d);font-size:.72rem;font-weight:600;letter-spacing:.08em;
       text-transform:uppercase;color:var(--slate-lt2);padding:12px 0 0}

  /* ---------- credential strip ---------- */
  .creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:1px;
         background:var(--line-dk);border-top:1px solid var(--line-dk);
         border-bottom:1px solid var(--line-dk)}
  .creds div{background:var(--ink);padding:20px 22px}
  .creds b{display:block;font-family:var(--f-d);font-weight:700;font-size:1rem;color:#fff;
           margin-bottom:3px}
  .creds span{font-size:.87rem;color:var(--slate-lt);line-height:1.45;display:block}

  /* ---------- services ---------- */
  .svc{display:grid;grid-template-columns:1fr;gap:28px;margin-top:34px}
  @media(min-width:620px){ .svc{grid-template-columns:repeat(2,1fr)} }
  @media(min-width:1040px){ .svc{grid-template-columns:repeat(4,1fr)} }

  /* three cards should never sit in a four-column grid with a hole in it */
  .svc.three{grid-template-columns:1fr}
  @media(min-width:900px){ .svc.three{grid-template-columns:repeat(3,1fr)} }

  .svc article{display:flex;flex-direction:column;gap:0}
  .svc img{width:100%;aspect-ratio:4/3;object-fit:cover}
  .svc h3{margin:16px 0 6px}
  .svc p{font-size:.97rem;margin:0}
  .svc a{font-family:var(--f-d);font-weight:700;font-size:.85rem;color:var(--sunrise);
         text-decoration:none;margin-top:10px;display:inline-block}
  .svc a:hover{text-decoration:underline}


  /* ---------- YouTube, loaded only on click ---------- */
  /* A plain link wrapping a poster. Script upgrades it to an inline player on
     click, so no YouTube code and no third-party cookies land on page load,
     and with scripting off it still opens the video on YouTube. */
  .ytbox{position:relative;display:block;aspect-ratio:16/9;background:#000;overflow:hidden}
  .ytbox picture{display:block;width:100%;height:100%}
  .ytbox img{width:100%;height:100%;object-fit:cover;display:block}
  .ytbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .ytbox .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
               width:82px;height:58px;border-radius:14px;background:rgba(16,20,24,.74);
               display:grid;place-items:center;transition:background .15s ease}
  .ytbox .play::after{content:"";border-style:solid;border-width:11px 0 11px 19px;
                      border-color:transparent transparent transparent #fff;margin-left:4px}
  .ytbox:hover .play,.ytbox:focus-visible .play{background:var(--sunrise-dp)}
  .ytbox .lbl{position:absolute;left:12px;bottom:12px;font-family:var(--f-d);font-size:.62rem;
              font-weight:700;letter-spacing:.16em;text-transform:uppercase;
              background:rgba(16,20,24,.78);color:var(--cream);padding:5px 10px}
  @media (prefers-reduced-motion: reduce){ .ytbox .play{transition:none} }


  /* ---------- carousel ---------- */
  /* Plain scroll-snap. It swipes on a phone, scrolls with the wheel, takes
     keyboard focus, and needs no library. */
  .carousel-wrap{margin:30px 0;position:relative}
  .carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
            scroll-behavior:smooth;padding-bottom:14px;overscroll-behavior-x:contain}
  .carousel:focus-visible{outline:2px solid var(--sunrise);outline-offset:4px}
  .carousel > figure{flex:0 0 clamp(230px,40vw,360px);margin:0;scroll-snap-align:start}
  .carousel img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--snow-2)}
  .carousel figcaption{font-size:.78rem;padding-top:7px;margin-top:7px;line-height:1.45}
  .carousel-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
  .carousel-nav{display:flex;gap:7px}
  .carousel-nav button{width:36px;height:36px;border:1px solid var(--line);background:#fff;
                       color:var(--slate);font-size:1.1rem;line-height:1;cursor:pointer;
                       font-family:var(--f-d)}
  .carousel-nav button:hover:not(:disabled){background:var(--sunrise-dp);color:#fff;
                                            border-color:var(--sunrise-dp)}
  .carousel-nav button:disabled{opacity:.34;cursor:default}
  .band.dark .carousel-nav button{background:transparent;border-color:var(--line-dk);color:var(--cream)}
  .band.dark .carousel figcaption{color:var(--slate-lt2)}
  /* portrait cards, for the safety panels */
  .carousel.tall > figure{flex:0 0 clamp(190px,30vw,260px)}
  .carousel.tall img{aspect-ratio:3/4}
  @media (prefers-reduced-motion: reduce){ .carousel{scroll-behavior:auto} }


  /* before / after shown side by side, for pairs shot from different spots */
  .pair{display:grid;gap:12px;grid-template-columns:1fr;margin:26px 0}
  @media(min-width:760px){ .pair{grid-template-columns:1fr 1fr} }
  .pair figure{margin:0;position:relative}
  .pair img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--snow-2)}
  .pair .tag{position:absolute;left:10px;top:10px;font-family:var(--f-d);font-size:.6rem;
             font-weight:700;letter-spacing:.18em;text-transform:uppercase;
             background:rgba(16,20,24,.8);color:var(--cream);padding:5px 9px}


  /* ---------- diagrams ---------- */
  /* Built from real text in the DOM, so they are readable by a screen reader
     and by search engines without a separate description. */
  .viz{max-width:880px;margin:30px auto 8px}
  .viz-note{max-width:880px;margin:0 auto;font-size:.86rem;color:#5A6B78}
  .band.dark .viz-note,.band.deep .viz-note{color:var(--slate-lt2)}

  /* rate bar: base plus the adjustments that can sit on top of it */
  .ratebar{display:flex;gap:2px;height:38px}          /* 2px surface gaps between fills */
  .ratebar span{display:block;height:100%}
  .ratebar .base{background:var(--slate);flex:100 0 0}
  .ratebar .adj{background:var(--sunrise-dp);flex:15 0 0}
  .ratebar .adj.big{flex:30 0 0}
  .ratekeys{display:flex;gap:2px;margin-top:9px}
  .ratekeys div{flex:15 0 0;font-size:.74rem;line-height:1.3;color:#5A6B78;
                font-family:var(--f-b);padding-right:8px}
  .ratekeys div.base{flex:100 0 0}
  .ratekeys div.big{flex:30 0 0}
  .ratekeys b{display:block;font-family:var(--f-d);font-size:.78rem;color:var(--ink);
              letter-spacing:.01em}
  .ratescale{display:flex;justify-content:space-between;font-family:var(--f-d);
             font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
             color:#5A6B78;margin-bottom:8px}
  @media(max-width:620px){
    .ratebar{height:auto;flex-direction:column;gap:2px}
    .ratebar span{height:16px;flex:none !important}
    .ratebar .adj{width:32%} .ratebar .adj.big{width:58%} .ratebar .base{width:100%}
    .ratekeys{flex-direction:column;gap:10px}
    .ratekeys div{flex:none !important;padding-right:0}
  }

  /* six-step process */
  .steps{display:grid;gap:18px;grid-template-columns:1fr;counter-reset:step}
  @media(min-width:760px){ .steps{grid-template-columns:repeat(3,1fr);gap:22px} }
  @media(min-width:1040px){ .steps{grid-template-columns:repeat(6,1fr);gap:12px} }
  .steps > div{position:relative;padding-top:18px;border-top:2px solid var(--line)}
  .steps > div.you{border-top-color:var(--sunrise)}
  .steps .n{font-family:var(--f-d);font-weight:800;font-size:.68rem;letter-spacing:.18em;
            text-transform:uppercase;color:#5A6B78;display:block;margin-bottom:5px}
  .steps b{display:block;font-family:var(--f-d);font-weight:700;font-size:.98rem;
           letter-spacing:-.01em;margin:0 0 5px;color:var(--ink)}
  .steps p{font-size:.84rem;margin:0;color:#41525E;line-height:1.5}
  .steps .who{display:inline-block;margin-top:8px;font-family:var(--f-d);font-size:.62rem;
              font-weight:700;letter-spacing:.14em;text-transform:uppercase;
              color:var(--sunrise-dp)}

  /* ---------- figure ---------- */
  figure{margin:32px 0}
  figure img{width:100%}
  figcaption{font-size:.88rem;color:#5A6B78;padding-top:9px;border-top:1px solid var(--line);
             margin-top:9px}
  .band.dark figcaption,.band.deep figcaption{color:var(--slate-lt2);border-color:var(--line-dk)}

  /* ---------- project blocks ---------- */
  .proj{display:grid;grid-template-columns:1fr;gap:26px;padding:44px 0;
        border-top:1px solid var(--line-dk)}
  @media(min-width:900px){ .proj{grid-template-columns:1.15fr .85fr;gap:44px;align-items:start} }
  .proj img{width:100%}
  .spec{display:grid;gap:1px;background:var(--line-dk);margin-top:18px}
  .spec div{background:var(--navy);padding:10px 14px;display:flex;justify-content:space-between;
            gap:16px;font-size:.9rem}
  .spec dt{color:var(--slate-lt2);font-family:var(--f-d);font-weight:600;font-size:.72rem;
           letter-spacing:.12em;text-transform:uppercase;margin:0}
  .spec dd{margin:0;color:#fff;text-align:right;font-variant-numeric:tabular-nums}

  /* ---------- pricing factors ---------- */
  .fact{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:26px 0}
  .fact > div{background:#fff;padding:18px 22px;display:grid;
              grid-template-columns:88px 1fr;gap:20px;align-items:baseline}
  .fact .amt{font-family:var(--f-d);font-weight:800;font-size:1.28rem;color:var(--sunrise);
             letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .fact h3{margin:0 0 4px;font-size:1.02rem}
  .fact p{margin:0;font-size:.95rem;color:#42525E}
  @media(max-width:560px){ .fact > div{grid-template-columns:1fr;gap:4px} }

  .levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
          background:var(--line-dk);margin:28px 0;border:1px solid var(--line-dk)}
  .levels div{background:var(--navy);padding:22px}
  .levels .n{font-family:var(--f-d);font-weight:800;font-size:.7rem;letter-spacing:.2em;
             color:var(--sunrise-lt);text-transform:uppercase;margin-bottom:10px}
  .levels h3{font-size:1.06rem;margin-bottom:7px;color:#fff}   /* navy panels sit inside a light band, so the heading must be set explicitly */
  .levels p{font-size:.93rem;color:var(--slate-lt2);margin:0}

  ul.tick{list-style:none;padding:0;margin:18px 0}
  ul.tick li{padding-left:26px;position:relative;margin-bottom:11px}
  ul.tick li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:2px;
                     background:var(--sunrise)}

  .qa{border-top:1px solid var(--line);padding:20px 0}
  .qa h3{margin-bottom:5px;font-size:1.02rem}
  .qa p{margin:0;color:#42525E}

  /* ---------- cta ---------- */
  .cta{display:inline-block;background:var(--sunrise-dp);color:#fff;text-decoration:none;
       font-family:var(--f-d);font-weight:700;font-size:.95rem;padding:14px 26px;margin-top:8px}
  .cta:hover{background:var(--sunrise-lt)}
  .cta.ghost{background:none;color:var(--sunrise);border:2px solid var(--sunrise);padding:12px 24px}
  .cta.ghost:hover{background:var(--sunrise);color:#fff}

  /* ---------- footer ---------- */
  footer.site{background:var(--ink);color:var(--slate-lt);padding:44px 0 34px;font-size:.9rem}
  footer.site .wrap{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
  footer.site b{color:#fff;font-family:var(--f-d);display:block;margin-bottom:8px;font-size:.78rem;
                letter-spacing:.14em;text-transform:uppercase}
  footer.site a{color:var(--slate-lt);text-decoration:none;display:block;padding:2px 0}
  footer.site a:hover{color:#fff}
  footer.site p{margin:0;line-height:1.55}

  figure.fig-tall img{max-width:600px}

  .todo{padding:80px 26px;text-align:center;color:#5A6B78}
  .todo h2{color:var(--ink)}