:root{
    --navy:#0C1530;
    --navy-lift:#14203F;
    --navy-edge:#1F2C4F;
    --sign:#F3F6FB;
    --shield:#CE0E3C;
    --steel:#8E9AB2;
    --stripe:#2E6FD9;

    --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
    --body:"Barlow","Helvetica Neue",Arial,sans-serif;
    --data:"Barlow Condensed","Arial Narrow",Arial,sans-serif;

    --shell:1120px;
    /* The gutters below are the safe-area insets. On a notched iPhone in
       landscape the notch eats into one side of the viewport, and with
       viewport-fit=cover the page paints underneath it - so the horizontal
       padding has to grow by whatever the system reports. max() keeps the
       normal value on every device that reports zero, which is most of them. */
    --pad:max(clamp(20px,5vw,48px), env(safe-area-inset-left), env(safe-area-inset-right));

    /* The live gutter colour, driven by the swatch picker, and read only by the
       chip in the readout - the model itself is lit in 3D and takes its colour
       from the material, not from CSS. Seeded with Musket Brown so the chip is
       never blank before the picker runs. */
    --gc:#4C4240;
  }

  *{box-sizing:border-box}

  body{
    margin:0;
    background:var(--navy);
    color:var(--sign);
    font-family:var(--body);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    /* iOS inflates text in some reflow situations unless this is pinned, which
       silently breaks a layout tuned at real sizes. */
    -webkit-text-size-adjust:100%;
    /* the default is an opaque grey flash on every tap; this keeps the feedback
       but stops it reading as a rendering glitch on dark panels */
    -webkit-tap-highlight-color:rgba(255,255,255,.08);
  }

  img{max-width:100%}

  .shell{max-width:var(--shell);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

  .eyebrow{
    font-family:var(--data);font-weight:700;font-size:13px;
    letter-spacing:.18em;text-transform:uppercase;color:var(--steel);margin:0;
  }
  .eyebrow .mark{color:var(--shield)}

  h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;text-wrap:balance;margin:0;line-height:.92;letter-spacing:-.01em}
  h1{font-size:clamp(40px,7.4vw,76px)}
  h2{font-size:clamp(30px,4.8vw,50px)}
  h3{font-size:clamp(21px,2.3vw,26px)}

  p{margin:0}
  .lede{font-size:clamp(17px,1.9vw,20px);color:#C4CCDA;max-width:58ch}

  a{color:inherit}

  .seam{
    height:6px;border:0;margin:0;
    background:repeating-linear-gradient(90deg,var(--navy-edge) 0 44px,transparent 44px 76px);
  }

  .btn{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--data);font-weight:700;font-size:17px;
    letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
    padding:15px 26px;border-radius:2px;
    transition:transform .15s ease,background-color .15s ease;
  }
  .btn-primary{background:var(--shield);color:#fff;box-shadow:0 10px 26px -14px rgba(206,14,60,.9)}
  .btn-primary:hover{background:#E51648;transform:translateY(-2px)}
  .btn-ghost{background:transparent;color:var(--sign);border:1px solid var(--navy-edge)}
  .btn-ghost:hover{border-color:var(--steel);transform:translateY(-2px)}
  a:focus-visible,button:focus-visible{outline:3px solid var(--stripe);outline-offset:3px}

  /* ---- masthead (same three-track grid as the home page) ---- */
  .nav{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    gap:clamp(12px,2.2vw,32px);
    padding:14px var(--pad);border-bottom:1px solid var(--navy-edge);
  }
  .nav-brand{display:flex;align-items:center;gap:13px;text-decoration:none;justify-self:start}
  .nav-brand img{width:clamp(46px,3.8vw,56px);height:auto;display:block}
  .nav-brand b{font-family:var(--display);font-weight:800;font-size:clamp(16px,1.35vw,21px);line-height:1;text-transform:uppercase;white-space:nowrap}
  .nav-right{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);justify-self:end}
  .nav-links{display:flex;gap:clamp(14px,1.8vw,30px);justify-self:center}
  .nav-links a{
    font-family:var(--data);font-size:13px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--steel);text-decoration:none;transition:color .2s ease;
  }
  .nav-links a:hover{color:var(--sign)}
  .nav-links a[aria-current="page"]{color:var(--sign);border-bottom:1px solid var(--shield);padding-bottom:3px}
  .nav-pill{
    font-family:var(--data);font-size:11px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--steel);
    border:1px solid var(--navy-edge);border-radius:999px;padding:7px 14px;flex:none;
  }
  .nav-cta{
    font-family:var(--data);font-size:13px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;background:var(--shield);color:#fff;text-decoration:none;
    border-radius:999px;padding:10px 18px;flex:none;transition:background-color .2s ease;
  }
  .nav-cta:hover{background:#E51648}

  .promo{background:var(--shield);color:#fff}
  .promo-in{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:6px 14px;padding:9px 0;text-align:center;
    font-family:var(--data);font-weight:600;font-size:12.5px;
    letter-spacing:.12em;text-transform:uppercase;
  }
  .promo-in a{color:#fff;text-decoration:underline;text-underline-offset:3px}

  /* ---- page hero ----
     Deliberately not the home page's full-viewport split: this is an interior
     page and the colour picker is the reason anyone opened it, so the hero is
     a band that gets out of the way. */
  .ph{
    position:relative;overflow:hidden;
    border-bottom:1px solid var(--navy-edge);
    min-height:clamp(300px,42vh,430px);
    display:flex;align-items:flex-end;
  }
  .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
  /* the scrim is what keeps the headline legible over whatever photo lands
     here - it must survive a light cover photo as well as a dark one */
  .ph::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(12,21,48,.30) 0%,rgba(12,21,48,.72) 55%,rgba(12,21,48,.96) 100%);
  }
  .ph-in{position:relative;z-index:1;width:100%;padding-top:60px;padding-bottom:clamp(28px,4vw,44px)}
  .ph h1{margin-top:10px}
  .ph .lede{margin-top:16px}
  .crumb{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--data);font-size:13px;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--steel);text-decoration:none;
    margin-bottom:18px;transition:color .2s ease;
  }
  .crumb:hover{color:var(--sign)}
  .crumb svg{width:15px;height:15px}

  section{padding-top:clamp(52px,7vw,88px);padding-bottom:clamp(52px,7vw,88px)}
  .sec-head{margin-bottom:clamp(26px,3.5vw,40px)}
  .sec-head h2{margin-top:10px}
  .sec-head .lede{margin-top:14px}

  /* ---- spec cards ---- */
  .specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,26px)}
  .spec{
    background:var(--navy-lift);border:1px solid var(--navy-edge);
    border-top:4px solid var(--shield);border-radius:4px;
    padding:clamp(24px,3.2vw,36px);display:flex;flex-direction:column;
  }
  .spec-tag{
    align-self:flex-start;background:var(--stripe);color:#fff;
    font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.16em;
    text-transform:uppercase;padding:6px 12px;border-radius:2px;
  }
  .spec h3{margin-top:16px}
  .spec-size{
    font-family:var(--display);font-weight:800;line-height:.88;
    font-size:clamp(58px,9vw,96px);margin-top:10px;
  }
  .spec-size .u{color:var(--shield);font-size:.45em;margin-left:.06em;vertical-align:super}
  .spec dl{margin:22px 0 0;display:flex;flex-direction:column;gap:2px}
  .spec .srow{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    padding:13px 0;border-bottom:1px solid var(--navy-edge);
  }
  .spec .srow:first-child{border-top:1px solid var(--navy-edge)}
  .spec dt{font-family:var(--data);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin:0}
  .spec dd{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(19px,2vw,24px);text-transform:uppercase;line-height:1;text-align:right}
  .spec p{margin-top:20px;font-size:15.5px;color:#A6B0C6}

  /* ---- the configurator ---- */
  .viz{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,30px)}

  .stage{
    background:var(--navy-lift);border:1px solid var(--navy-edge);
    border-radius:16px;overflow:hidden;
  }
  #scene{
    display:block;width:100%;
    height:clamp(340px,48vw,580px);
    cursor:grab;
    /* pan-y, not none: a vertical swipe has to stay a page scroll, or the
       reader is stuck inside the model with no way past it */
    touch-action:pan-y;
    -webkit-user-select:none;user-select:none;
  }
  #scene:active{cursor:grabbing}
  #scene:focus-visible{outline:3px solid var(--stripe);outline-offset:-3px}

  .no3d-msg{display:none;padding:28px clamp(16px,2.2vw,24px);color:#A6B0C6;font-size:15px}
  .stage.no-3d #scene{display:none}
  .stage.no-3d .no3d-msg{display:block}

  .readout{
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    padding:16px clamp(16px,2.2vw,24px);
    border-top:1px solid var(--navy-edge);background:rgba(12,21,48,.5);
  }
  .readout-name{
    font-family:var(--data);font-weight:700;font-size:14px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--sign);
  }
  .readout-hint{
    margin-left:auto;font-family:var(--data);font-size:12.5px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--steel);text-align:right;
  }
  .hint-tap{display:none}
  @media (hover:none),(pointer:coarse){
    .hint-hover{display:none}
    .hint-tap{display:inline}
  }

  /* One row per part. Rows rather than one long strip because the question is
     not "which colour" but "which colour for which piece", and a single strip
     cannot say that. */
  .parts{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,22px)}
  .prow{
    display:grid;grid-template-columns:minmax(120px,150px) minmax(0,1fr);
    gap:clamp(12px,2vw,22px);align-items:center;
    padding-bottom:clamp(14px,2vw,18px);border-bottom:1px solid var(--navy-edge);
  }
  .prow:last-child{border-bottom:0;padding-bottom:0}
  .prow-label{
    margin:0;font-family:var(--data);font-weight:700;font-size:13px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
  }
  .prow-opts{display:flex;flex-wrap:wrap;gap:10px}

  .opt{
    display:flex;align-items:center;gap:9px;
    padding:7px 14px 7px 7px;border-radius:999px;cursor:pointer;
    background:var(--navy-lift);border:1px solid var(--navy-edge);
    color:var(--steel);
    font-family:var(--data);font-size:12.5px;font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;
    transition:border-color .2s ease,color .2s ease,background-color .2s ease;
  }
  .opt-sw{
    width:22px;height:22px;border-radius:50%;flex:none;
    background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  }
  .opt:hover{border-color:#33426E;color:var(--sign)}
  .opt[aria-pressed="true"]{
    border-color:var(--shield);color:var(--sign);background:#1B2A50;
  }

  .note{
    margin-top:clamp(22px,3vw,30px);padding:18px 20px;
    border:1px solid var(--navy-edge);border-left:3px solid var(--stripe);
    border-radius:4px;background:var(--navy-lift);
    font-size:15px;color:#A6B0C6;
  }

  /* ---- closing call band ---- */
  .band{
    background:var(--navy-lift);border:1px solid var(--navy-edge);
    border-top:4px solid var(--shield);
    padding:clamp(28px,4vw,48px);
    display:flex;gap:clamp(20px,3vw,40px);align-items:center;flex-wrap:wrap;
  }
  .band div{flex:1 1 320px;min-width:0}
  .band h2{margin-bottom:12px}
  /* the copy column flexes, the button column hugs its content */
  .band-cta{flex:0 1 auto}

  footer{border-top:1px solid var(--navy-edge);padding:34px 0 44px}
  .foot{display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between;align-items:center}
  .foot p{font-family:var(--data);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
  .foot a{color:var(--steel);text-decoration:none}
  .foot a:hover{color:var(--sign)}

  /* ---- touch targets ----
     Measured on a 375px viewport: the nav row came out 21px tall, the
     breadcrumb 21px and the footer links 17px, against a 44px minimum. These
     are all inline text, so the fix is vertical padding and a min-height
     rather than a bigger type size, which would wreck the layout. */
  @media (pointer:coarse){
    .nav-links a{padding:12px 2px;min-height:44px;display:inline-flex;align-items:center}
    .nav-brand{min-height:48px}
    .nav-cta{padding:13px 20px}
    .foot a{padding:13px 0;display:inline-block}
    .promo-in a{padding:13px 4px;display:inline-block}
    .crumb{padding:12px 4px 12px 0;margin-bottom:8px;min-height:44px}
    .sw{min-height:56px}
    /* the option pills came out 38px against the 44 minimum */
    .opt{min-height:46px;padding-top:9px;padding-bottom:9px}
  }

  @media (max-width:900px){
    .nav-links,.nav-pill{display:none}
    .specs{grid-template-columns:minmax(0,1fr)}
  }

  @media (max-width:640px){
    .nav{
      grid-template-columns:minmax(0,1fr) auto;
      grid-template-areas:"brand cta" "links links";
      row-gap:11px;padding:12px var(--pad);
    }
    .nav-brand{grid-area:brand;min-width:0;gap:11px}
    .nav-brand img{width:42px}
    .nav-brand b{font-size:clamp(14px,3.9vw,18px)}
    .nav-right{grid-area:cta}
    /* Wraps, because the row outgrew the phone. The home masthead carries six
       links now (Floors was added with the floors page) and at 375px they came
       to 439px against a 375px viewport - the page scrolled sideways by 32px,
       which reads as a broken layout rather than as a long menu. Wrapping to a
       second line costs a few pixels of masthead height and keeps every link
       reachable; dropping one would have hidden a section instead. */
    .nav-links{grid-area:links;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
    .nav-pill{display:none}
    .nav-cta{padding:12px 17px;font-size:13px}
    .promo-in{font-size:11.5px;letter-spacing:.08em;padding:8px 0;gap:4px 12px}

    /* Fifteen swatches in one strip works with a mouse, where hovering widens
       the one you want. On a phone there is no hover and each swatch is ~24px
       wide - under any sane touch target - so the strip becomes a grid. */
    .strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:auto;gap:1px;background:var(--navy-edge)}
    .sw{aspect-ratio:1/1;align-items:flex-end}
    .sw:hover,.sw:focus-visible,.sw[aria-pressed="true"]{flex:1 1 0}
    .sw-label{opacity:1;font-size:9.5px;letter-spacing:.04em;padding:5px 2px 6px}
    .readout-hint{margin-left:0;text-align:left;width:100%}
    .spec dd{font-size:18px}
  }

  @media (max-width:520px){
    .btn{width:100%;justify-content:center}
    .strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  }

  /* ---- hero framing ----
     The stair photo is portrait and the hero box is not: it runs from about
     1.3:1 on a phone to nearly 4:1 on a wide desktop. No single crop serves
     both, so the file stays uncropped and `object-position` picks the band.

     35% rather than the 45% the gutters photo uses. This flight is symmetrical
     and shot head on, so the interesting band is high - where the two rails
     converge and the balusters are densest. At 45% a desktop lands on plain
     treads and the photo stops reading as a staircase at all. */
  .ph-stair .ph-img{object-position:center 35%}

  /* Under the scrim the photo is mostly white risers, which is brighter than
     the gutters cover it was written for. Weighted a little darker so the
     headline keeps its contrast. */
  .ph-stair::after{
    background:linear-gradient(180deg,rgba(12,21,48,.42) 0%,rgba(12,21,48,.80) 55%,rgba(12,21,48,.97) 100%);
  }

  /* The two small labels sit high in the hero, where the scrim is thinnest and
     this particular photo is at its brightest - white risers, not the dark roof
     the gutters page puts there. Measured against a white riser they came out
     at 1.8:1 and 2.3:1; white takes them past 4.5:1. The headline and lede are
     large or light enough that they already cleared it. */
  .ph-stair .crumb,
  .ph-stair .eyebrow{color:#fff}
  .ph-stair .crumb:hover{color:var(--sign)}

  @media (max-width:640px){
    /* label above its swatches: side by side, a 120px label column leaves the
       options about 190px wide and they wrap one per line */
    .prow{grid-template-columns:minmax(0,1fr);gap:10px;align-items:start}
    #scene{height:clamp(300px,64vw,420px)}
    .readout-hint{margin-left:0;text-align:left;width:100%}
  }