:root{
    --bg:#f1f4ff;
    --ink:#20213a;
    --body:#454a6b;
    --muted:#73789c;
    --gold:#a98545;
    --gold-line:rgba(169,133,69,.34);
    --hair:rgba(32,33,58,.10);
    --card:#eef2fe;
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
    --sans:"Inter","Helvetica Neue",Arial,"Segoe UI",system-ui,-apple-system,sans-serif;
  }

  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;background:var(--bg)}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }
  img{display:block;max-width:100%}
  h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.005em;margin:0}
  p{margin:0}

  .wrap{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding-inline:clamp(16px,4.4vw,44px);
  }

  /* ---------- head ---------- */
  .top{padding-top:clamp(34px,6vw,74px)}
  .eyebrow{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    font-size:10px;letter-spacing:.26em;text-transform:uppercase;
    color:var(--gold);margin:0 0 14px;
  }
  .eyebrow::before{content:"";width:34px;height:1px;background:var(--gold-line);flex:none}
  h1{
    font-size:clamp(27px,4.4vw,46px);
    line-height:1.08;
    max-width:19em;
    margin:0 0 .42em;
  }
  .lede{
    color:var(--body);
    font-size:clamp(14.5px,1.35vw,17px);
    line-height:1.66;
    max-width:58ch;
  }
  .facts{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px 20px;
    margin:clamp(22px,3.4vw,34px) 0 0;
    padding-top:18px;
    border-top:1px solid var(--hair);
  }
  .facts div{min-width:0}
  .facts dt{
    font-size:9px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--muted);margin:0 0 4px;
  }
  .facts dd{margin:0;font-size:13px;line-height:1.42;color:var(--ink)}

  /* ---------- section heads ---------- */
  .sec{margin-top:clamp(40px,6vw,80px)}
  .sec-head{
    display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
    gap:10px 28px;
    padding-bottom:clamp(12px,1.8vw,18px);
    border-bottom:1px solid var(--hair);
    margin-bottom:clamp(14px,2.2vw,24px);
  }
  h2{font-size:clamp(20px,2.6vw,30px);line-height:1.18}
  .sec-head p{
    color:var(--muted);font-size:12.5px;letter-spacing:.02em;
    max-width:46ch;
  }

  /* ---------- the 4-up grid ---------- */
  .grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(9px,1.35vw,18px);
    list-style:none;margin:0;padding:0;
  }
  .tile{margin:0}
  .tile .frame{
    position:relative;
    background:var(--card);
    border:1px solid rgba(32,33,58,.07);
    border-radius:12px;
    overflow:hidden;
  }
  .tile img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    transition:transform .55s cubic-bezier(.22,.6,.28,1);
  }
  .tile figcaption{
    display:flex;align-items:flex-start;gap:7px;
    margin-top:8px;
    font-size:10px;letter-spacing:.13em;text-transform:uppercase;
    color:var(--muted);
    line-height:1.3;
  }
  .tile .no{color:var(--gold);letter-spacing:.08em;flex:none;padding-top:.1em}
  .tile .label{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;line-height:1.32;white-space:normal;
  }
  @media (hover:hover){
    .tile:hover img{transform:scale(1.028)}
  }

  /* ---------- text bands between rows ---------- */
  .band{
    display:grid;
    grid-template-columns:168px minmax(0,1fr);
    gap:8px clamp(18px,3vw,46px);
    align-items:start;
    padding:clamp(15px,2.1vw,24px) 0 clamp(13px,1.9vw,19px);
    margin:clamp(13px,1.9vw,24px) 0;
    border-top:1px solid var(--gold-line);
    border-bottom:1px solid var(--hair);
  }
  .band .tag{display:flex;flex-direction:column;gap:4px;min-width:0}
  .band .rn{
    font-family:var(--serif);font-size:19px;line-height:1;
    color:var(--gold);
  }
  .band .rl{
    font-size:9px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--muted);line-height:1.35;
  }
  .band-text{
    font-family:var(--serif);
    font-size:clamp(14.5px,1.32vw,16.5px);
    line-height:1.62;color:var(--body);
    max-width:68ch;
  }

  /* ---------- closing notes ---------- */
  .notes{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(18px,2.6vw,36px);
  }
  .notes h3{
    font-size:clamp(15px,1.45vw,17px);
    line-height:1.3;margin:0 0 6px;
  }
  .notes p{color:var(--body);font-size:13.8px;line-height:1.62}

  /* ---------- spec table ---------- */
  .specs{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 clamp(24px,4vw,64px);
    border-top:1px solid var(--hair);
  }
  .specs div{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    padding:11px 0;
    border-bottom:1px solid var(--hair);
  }
  .specs dt{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
  .specs dd{margin:0;font-size:13.5px;text-align:right;color:var(--ink)}

  /* ---------- faq ---------- */
  .faq{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(18px,2.6vw,34px) clamp(26px,4vw,64px);
  }
  .qa h3{
    font-size:clamp(15.5px,1.5vw,17.5px);
    line-height:1.34;
    margin:0 0 6px;
  }
  .qa h3::before{
    content:"";
    display:inline-block;width:0;height:0;
  }
  .qa p{color:var(--body);font-size:13.8px;line-height:1.62}

  /* ---------- tail spacing (footer strip removed) ---------- */
  main{padding-bottom:clamp(40px,6.4vw,76px)}

  /* ---------- responsive ---------- */
  @media (max-width:1023px){
    .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:760px){
    .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .faq{grid-template-columns:1fr;gap:16px}
    .specs{grid-template-columns:1fr}
    .sec-head{flex-direction:column;align-items:flex-start;gap:6px}
    .tile figcaption{font-size:9.5px;letter-spacing:.1em;gap:5px}
    .band{grid-template-columns:1fr;gap:8px;padding:16px 0 14px}
    .band .tag{flex-direction:row;align-items:baseline;gap:8px}
    .band .rn{font-size:16px}
    .notes{grid-template-columns:1fr;gap:18px}
  }
  @media (max-width:420px){
    .grid{gap:8px}
    .tile .frame{border-radius:9px}
    .tile figcaption{
      flex-direction:column;gap:1px;letter-spacing:.08em;
    }
  }