:root{
    --navy:#0C1530;
    --navy-lift:#14203F;
    --navy-edge:#1F2C4F;
    --sign:#F3F6FB;
    --shield:#CE0E3C;
    --steel:#8E9AB2;
    --stripe:#2E6FD9;
    /* The metal itself, used only where the page is about the metal. It is not
       a brand colour - navy and the red shield stay in charge. */
    --copper:#B87333;

    --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));

  }

  *{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 photographs are 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}

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

  @media (max-width:900px){
    .nav-links,.nav-pill{display:none}
  }

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

  }

  @media (max-width:520px){
    .btn{width:100%;justify-content:center}
  }

  /* ---- the copper hero, with no cover photo ----
     Every other interior page opens on a photograph. This one cannot yet: the
     only honest picture of this work is a job the client has not sent us, and
     a stock copper roofline would be a photograph of somebody else's house on
     a page whose whole claim is "this is our work".

     So the band carries light instead of a picture - a warm wash where a cover
     photo would sit, on the same navy as the rest of the site. .ph::after, the
     scrim that exists to keep the headline legible over a photo, still runs on
     top and still works over this.

     When the cover photo arrives: add the <img class="ph-img"> back into the
     header and drop ph-copper from the class list. Nothing else changes. */
  .ph-copper{
    background:
      radial-gradient(74% 96% at 16% 8%, rgba(184,115,51,.30) 0%, rgba(184,115,51,0) 62%),
      radial-gradient(60% 80% at 92% 100%, rgba(46,111,217,.16) 0%, rgba(46,111,217,0) 66%),
      linear-gradient(180deg, var(--navy-lift) 0%, var(--navy) 100%);
  }
  /* The eyebrow diamond is the one place the metal itself gets to speak. */
  .ph-copper .eyebrow .mark{color:var(--copper)}