/* ==========================================================================
   TOP FRAME — shared stylesheet for every page except the homepage.
   The homepage (index.html) keeps its own inline scrollytelling CSS.

   TOKENS ARE NOT REDECLARED HERE. shell.css loads first and owns them.
   They used to be defined in both files with different values, which is
   exactly why the bar and the type used to shift between the homepage and
   an interior page. One definition, one source of truth.

   Design language: warm near-monochrome, hairlines instead of shadows,
   squared corners, generous air, dramatic scale contrast between the
   display serif and the quiet sans body.
   ========================================================================== */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.65;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
     font-size:16px;letter-spacing:-.003em}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
::selection{background:var(--accent);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ============================ BREADCRUMBS ============================ */
.crumbs{font-size:12.5px;color:var(--ink-mute);padding:22px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.crumbs li+li::before{content:"/";margin-right:9px;color:var(--line)}
.crumbs a{color:var(--ink-mute);text-decoration:none;transition:color .2s ease}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current]{color:var(--ink-2);font-weight:500}

/* ============================ PAGE HEAD ============================ */
/* The one place on an interior page that gets real scale. */
.phead{padding:76px 0 82px;border-bottom:1px solid var(--line-soft);background:var(--paper)}
.kicker{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
        font-weight:600;margin-bottom:22px}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.6vw,72px);
   line-height:1.02;max-width:20ch;letter-spacing:-.018em;color:var(--ink)}
.phead .lead{margin-top:26px;max-width:62ch;color:var(--ink-dim);font-size:18.5px;line-height:1.62}
.phead-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;align-items:center}

/* ---------- buttons: squared, quiet, no lift ---------- */
.cta{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;
     font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
     padding:15px 28px;border-radius:var(--radius);border:1px solid var(--ink);
     transition:background .2s ease,border-color .2s ease}
.cta:hover,.cta:focus-visible{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn-line{display:inline-block;color:var(--ink);text-decoration:none;font-weight:600;
          font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;padding:15px 26px;
          border:1px solid var(--line);border-radius:var(--radius);background:transparent;
          transition:border-color .2s ease,color .2s ease}
.btn-line:hover{border-color:var(--ink);color:var(--ink)}
.btn-ghost{display:inline-block;color:var(--ink-dim);text-decoration:none;font-weight:600;
           font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;padding:15px 4px;
           border-bottom:1px solid var(--line);transition:color .2s ease,border-color .2s ease}
.btn-ghost:hover{color:var(--ink);border-bottom-color:var(--accent)}

/* ============================ SECTIONS ============================ */
section.block{padding:96px 0;border-bottom:1px solid var(--line-soft)}
section.block:last-of-type{border-bottom:none}
section.block.alt{background:var(--paper-2);border-bottom-color:transparent}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.9vw,50px);
   line-height:1.08;max-width:22ch;letter-spacing:-.015em;color:var(--ink)}
h3{font-size:17px;font-weight:600;margin-top:0;color:var(--ink);letter-spacing:-.005em}
.block > p,.prose p,.prose ul,.prose ol{max-width:68ch;color:var(--ink-dim);
                                        font-size:17px;margin-top:22px;line-height:1.72}
.prose h2{margin-top:62px}
/* the 'Last updated' line at the head of the legal pages */
.prose .legal-meta{font-family:var(--sans);font-size:13px;letter-spacing:.04em;
            text-transform:uppercase;color:var(--accent);font-weight:700;
            margin:0 0 26px}
.legal-modal-body .legal-meta{margin-bottom:18px}
.prose h3{margin-top:42px;color:var(--ink);font-size:19px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-top:11px}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent);
         transition:background .2s ease}
.prose a:hover{background:var(--accent-wash)}
.lead{font-size:18.5px;color:var(--ink-dim);line-height:1.62}
.sub{color:var(--ink-dim)}
.center{text-align:center}
.mono{font-variant-numeric:tabular-nums}

/* ---------- card grids ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;
      margin-top:48px;background:var(--line-soft);border:1px solid var(--line-soft)}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;margin-top:48px}
/* Hairline-separated tiles rather than floating cards - reads as one object. */
.tile{background:var(--frame);border:none;border-radius:0;padding:34px 30px}
.tile .num{font-family:var(--serif);font-size:44px;color:var(--accent);line-height:1;font-weight:600}
.tile h3{margin-top:16px;font-size:16px}
.tile p{margin-top:10px;font-size:14.5px;color:var(--ink-dim);line-height:1.62}
.tile a{font-weight:600;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
        text-decoration:none;color:var(--ink);border-bottom:1px solid var(--accent);
        padding-bottom:2px;display:inline-block;margin-top:14px}
.tile a:hover{color:var(--accent)}

/* ---------- product / link cards with a photo ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin-top:48px}
.card-link{background:var(--frame);border:1px solid var(--line-soft);border-radius:var(--radius);
           overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;
           transition:border-color .22s ease}
.card-link:hover{border-color:var(--ink)}
/* Square tile, contain, on white. These are the same white-field cutouts the
   catalogue uses - 36 of the 41 are square or portrait, so the old 4:3 box with
   object-fit:cover was slicing roughly a quarter off the head and the sill of
   every window. Exactly the bug already fixed on .pc-media; it was never fixed
   here. Do not put cover back. */
.card-link .ph{aspect-ratio:1/1;background:var(--frame);overflow:hidden;
               display:grid;place-items:center;border-bottom:1px solid var(--line-soft)}
.card-link .ph img{width:100%;height:100%;object-fit:contain;padding:8%;
                   transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card-link:hover .ph img{transform:scale(1.03)}
.card-link .body{padding:24px 26px 28px}
.card-link h3{font-size:17px}
.card-link p{margin-top:10px;font-size:14.5px;color:var(--ink-dim);line-height:1.62}
.card-link .more{margin-top:18px;font-size:11px;font-weight:600;letter-spacing:.11em;
                 text-transform:uppercase;color:var(--accent)}

/* ---------- spec table ---------- */
.spec-table{width:100%;border-collapse:collapse;margin-top:36px;font-size:15px;
            background:var(--frame);border:1px solid var(--line-soft);border-radius:0;overflow:hidden}
.spec-table caption{text-align:left;font-size:12.5px;color:var(--ink-mute);padding-bottom:12px;caption-side:top}
.spec-table th,.spec-table td{padding:15px 18px;text-align:left;
                              border-bottom:1px solid var(--line-soft);vertical-align:top}
.spec-table th{background:var(--paper-2);font-weight:600;width:34%;color:var(--ink)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:none}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- FAQ ---------- */
.faq{margin-top:44px;max-width:76ch}
.faq details{background:transparent;border:none;border-top:1px solid var(--line-soft);
             border-radius:0;padding:0;margin-top:0}
.faq details:last-child{border-bottom:1px solid var(--line-soft)}
.faq summary{font-weight:600;cursor:pointer;font-size:17px;list-style:none;color:var(--ink);
             padding:24px 44px 24px 0;position:relative;transition:color .2s ease}
.faq summary:hover{color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:22px;color:var(--accent);
                    font-size:20px;line-height:1;font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq details p,.faq details ul{margin-top:0;padding-bottom:26px;color:var(--ink-dim);
                               font-size:16px;line-height:1.7;max-width:66ch}

/* ---------- callout / CTA band ---------- */
.cta-band{background:var(--ink-ground);color:var(--paper);border-radius:var(--radius);
          padding:62px 56px;margin-top:64px;display:flex;flex-wrap:wrap;gap:34px;
          align-items:center;justify-content:space-between}
.cta-band h2{color:var(--paper);font-size:clamp(28px,3.4vw,42px);max-width:18ch}
.cta-band p{color:rgba(250,248,244,.66);margin-top:16px;max-width:50ch;font-size:16px;line-height:1.7}
.cta-band .acts{display:flex;flex-wrap:wrap;gap:12px}
.cta-band a.cta{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta-band a.cta:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.cta-band .btn-line{color:var(--paper);border-color:var(--line-inv)}
.cta-band .btn-line:hover{border-color:var(--paper);color:var(--paper)}

.note{background:var(--frame);border-left:2px solid var(--accent);border-radius:0;
      padding:22px 26px;margin-top:34px;max-width:70ch;font-size:15.5px;
      color:var(--ink-dim);line-height:1.68}

/* ============================ FORM ============================ */
.quotewrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.quote-card{background:var(--frame);border:1px solid var(--line-soft);border-radius:var(--radius);
            padding:40px}
.quote-card h2{font-size:26px;margin-bottom:8px;text-align:left;font-family:var(--sans);
               font-weight:600;letter-spacing:-.01em}
.quote-intro{font-size:14.5px;color:var(--ink-dim);margin-bottom:24px}
.quote-card input,.quote-card select,.quote-card textarea{width:100%;padding:14px 15px;
    margin-bottom:12px;border:1px solid var(--line);border-radius:var(--radius);
    font-family:inherit;font-size:15px;color:var(--ink);background:var(--paper);
    transition:border-color .2s ease,background .2s ease}
.quote-card textarea{min-height:120px;resize:vertical}
.quote-card input:focus,.quote-card select:focus,.quote-card textarea:focus{
    outline:none;border-color:var(--ink);background:var(--frame)}
.quote-card input::placeholder,.quote-card textarea::placeholder{color:var(--ink-mute)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quote-card button{width:100%;padding:17px;background:var(--ink);color:var(--paper);border:none;
    border-radius:var(--radius);font-family:inherit;font-weight:600;font-size:11.5px;
    letter-spacing:.11em;text-transform:uppercase;cursor:pointer;margin-top:10px;
    transition:background .2s ease}
.quote-card button:hover{background:var(--accent-deep)}
.quote-card button:disabled{opacity:.55;cursor:default}
.form-status{margin-top:16px;font-size:14.5px;text-align:center;line-height:1.55}
.form-status.success{color:#3F6B45;font-weight:600}
.form-status.error{color:#9A3B2E}

/* ============================ RESPONSIVE ============================ */
@media(max-width:940px){
  .quotewrap{grid-template-columns:1fr;gap:42px}
}
@media(max-width:700px){
  .phead{padding:52px 0 56px}
  section.block{padding:64px 0}
  .cta-band{padding:38px 26px;flex-direction:column;align-items:flex-start;gap:24px}
  .field-row{grid-template-columns:1fr}
  .quote-card{padding:28px 22px}
  .grid{grid-template-columns:1fr}
}

/* ========================= PRODUCT CATALOG ========================= */
.sec-count{margin-top:10px;font-size:10.5px;font-weight:600;letter-spacing:.16em;
           text-transform:uppercase;color:var(--accent)}
.read-me{margin-top:40px;gap:30px}
.read-me h3{font-size:15px;margin-bottom:8px}
.read-me p{font-size:14px;color:var(--ink-dim);line-height:1.68}
.note-line{margin-top:22px;font-size:13px;color:var(--ink-mute)}

.jump-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.jump-nav a{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;
            border:1px solid var(--line);border-radius:var(--radius);font-size:12px;
            font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
            text-decoration:none;background:var(--frame);
            transition:border-color .2s ease,background .2s ease}
.jump-nav a:hover,.jump-nav a:focus-visible{border-color:var(--ink);background:var(--paper-2)}
.jump-nav b{font-size:11px;color:var(--ink-mute);font-variant-numeric:tabular-nums;font-weight:500}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
       gap:24px;margin-top:40px}

.pcard{position:relative;background:var(--frame);border:1px solid var(--line-soft);
       border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
       transition:border-color .22s ease}
.pcard:hover{border-color:var(--ink)}
/* Square tile, contain, on white: these are white-field cutouts whose real
   proportions run from 0.56 to 1.44, so cropping them to a fixed landscape box
   sliced the head and the sill off half the windows. */
.pc-media{position:relative;aspect-ratio:1/1;margin:16px 16px 0;background:var(--frame);
          border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
          display:grid;place-items:center}
/* The photo is simply shown now. It used to be display:none until a radio was
   checked, which is why removing the toggle has to touch this rule too. */
.pc-media .pc-photo{display:block;width:100%;height:100%;object-fit:contain;padding:7%}

.pc-body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.pc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pc-head h3{font-size:15.5px;line-height:1.32}
.pc-badge{flex:none;display:inline-flex;align-items:baseline;gap:1px;background:var(--ink);
          color:var(--paper);border-radius:var(--radius);padding:6px 10px;font-size:14px;
          font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.pc-badge small{font-size:9px;font-weight:600;opacity:.7;letter-spacing:.04em}
.pc-op{margin-top:9px;font-size:12.5px;color:var(--ink-mute)}
.pc-note{margin-top:10px;font-size:13px;color:var(--ink-dim);line-height:1.58}
/* margin-top:auto here, not on .pc-sys: it pins the spec table and the link
   together at the foot of the card, so the tables line up across a row whether
   or not a product carries a note. */
.pc-specs{list-style:none;margin-top:auto;padding:15px 0 0;border-top:1px solid var(--line-soft)}
.pc-specs li{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;
             padding:7px 0;border-bottom:1px solid var(--line-soft)}
.pc-specs li span{color:var(--ink-mute);flex:none}
.pc-specs li b{font-weight:600;text-align:right;color:var(--ink-2)}
.pc-sys{padding-top:15px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.pc-sys a{text-decoration:none;color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:1px}
.pc-sys a:hover{color:var(--accent)}

/* ==================== FRAME SYSTEMS TABLE ==================== */
/* Replaces the generated cross-section drawings. Those were Top Frame's own
   representation, not factory sections, so they were pulled - see the header
   comment in _build/catalog.py. The published NUMBERS are real and live here. */
.sys-table th[scope="col"]{background:var(--ink);color:var(--paper);font-weight:600;
      font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;width:auto;
      white-space:nowrap}
.sys-table th[scope="row"]{width:30%;font-weight:600;background:var(--paper-2)}
.sys-table td{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-2)}
.sys-notes{margin-top:30px;display:grid;gap:14px;max-width:78ch}
.sys-notes p{font-size:14.5px;color:var(--ink-dim);line-height:1.68;margin:0}
.sys-notes b{color:var(--ink);font-weight:600}

.cad-band{margin-top:40px;background:var(--ink-ground);color:var(--paper);
          border-radius:var(--radius);padding:44px 44px 42px}
.cad-band h2{color:var(--paper);font-size:clamp(24px,2.9vw,36px)}
.cad-band p{margin-top:16px;color:rgba(250,248,244,.7);max-width:66ch;line-height:1.7;font-size:15.5px}
.cad-band-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cad-band .btn-line{color:var(--paper);border-color:var(--line-inv)}
.cad-band .btn-line:hover{border-color:var(--paper);color:var(--paper)}

@media(max-width:700px){
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
  .cad-band{padding:32px 22px}
}
@media print{
  .jump-nav{display:none}
  .pcard{break-inside:avoid;box-shadow:none}
}