: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}

  /* ---- colour visualiser ---- */
  .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(320px,44vw,540px);
    cursor:grab;
    /* pan-y, not none: a vertical swipe has to stay a page scroll, or the
       reader gets stuck inside the model with no way past it. Horizontal is
       ours, which is the axis that matters for turning the house. */
    touch-action:pan-y;
    /* the canvas is dragged, so a long press must not start a text selection */
    -webkit-user-select:none;user-select:none;
  }
  #scene:active{cursor:grabbing}
  #scene:focus-visible{outline:3px solid var(--stripe);outline-offset:-3px}

  /* only shown when WebGL is unavailable, in which case the canvas is hidden */
  .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-chip{
    width:44px;height:44px;border-radius:50%;flex:none;
    background:var(--gc);border:2px solid rgba(255,255,255,.22);
    transition:background-color .35s ease;
  }
  .readout-name{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.6vw,30px);text-transform:uppercase;line-height:1}
  .readout-hex{
    font-family:var(--data);font-size:14px;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--steel);margin-top:4px;
  }
  .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;
  }
  /* keyed off the input device, not the viewport: a small window on a laptop
     still has a mouse, and a big tablet still does not */
  .hint-tap{display:none}
  @media (hover:none),(pointer:coarse){
    .hint-hover{display:none}
    .hint-tap{display:inline}
  }

  /* ---- the expanding colour strip ----
     Vanilla take on the shadcn ColorPaletteCard: flex children that grow on
     hover and reveal their label. `flex` is the animated property, exactly as
     in the original; the rest is plain CSS because this site has no React. */
  .strip{
    display:flex;height:clamp(96px,13vw,132px);
    border:1px solid var(--navy-edge);border-radius:14px;overflow:hidden;
  }
  .sw{
    position:relative;flex:1 1 0;min-width:0;padding:0;border:0;cursor:pointer;
    display:flex;align-items:flex-end;justify-content:center;
    transition:flex .28s cubic-bezier(.2,.7,.3,1);
    /* the swatch paints itself from its own inline --c */
    background:var(--c);
  }
  .sw:hover,.sw:focus-visible{flex:2.6 1 0}
  .sw[aria-pressed="true"]{flex:2.6 1 0}
  .sw-label{
    width:100%;padding:7px 4px 8px;
    font-family:var(--data);font-size:11px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    opacity:0;transition:opacity .2s ease;
    /* the label sits on a scrim, not on the swatch: Eggshell and Black cannot
       share one text colour, and a scrim beats maintaining per-colour rules */
    background:rgba(8,12,26,.72);color:#fff;
  }
  .sw:hover .sw-label,.sw:focus-visible .sw-label,.sw[aria-pressed="true"] .sw-label{opacity:1}
  .sw[aria-pressed="true"]::after{
    content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--shield);
  }


  .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}
  }

  @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))}
  }