/* ============================================================
   TWA AWARD LAYER — "Off the Press" design system (2026-11-01)
   Loads after styles.css. One concept: the site is a press sheet.
   Paper ground, ink navy, TWA red as the single accent, and true
   process colors used ONLY as the press system (color bar, plates,
   chapter ticks). Motion: one grammar (rise + fade, shared ease),
   transform and opacity only.
   ============================================================ */
:root{
  --paper:#f6f6f3; --paper-2:#eceee9; --ink:#122845; --navy:#13294c; --deep:#081627;
  --red:#cf2935; --blue:#1745c5; --gold:#ffc52e;
  --pc:#009fe3; --pm:#e6007e; --py:#f2c200; --pk:#191919;
  --aw-ease:cubic-bezier(.23,1,.32,1);
  --aw-shadow:0 24px 48px -20px rgba(8,22,39,.30);
  --aw-shadow-sm:0 12px 28px -12px rgba(8,22,39,.22);
  --aw-line:#d9dee6;
}
::selection{background:var(--red);color:#fff}
html{scroll-padding-top:190px}

/* ---------- the color control bar (every page) ---------- */
#aw-bar{position:fixed;top:0;left:0;right:0;height:5px;z-index:3000;display:flex;pointer-events:none}
#aw-bar i{display:block;flex:1 1 0;transform:scaleX(0);transform-origin:left center}
#aw-bar .b-c{background:var(--pc)} #aw-bar .b-m{background:var(--pm)}
#aw-bar .b-y{background:var(--py)} #aw-bar .b-k{background:var(--pk)}

/* ---------- header: slimmer, one primary action ---------- */
.contact-bar{font-size:12px;padding-top:5px;padding-bottom:5px;background:var(--navy)}
.brand-row{padding-top:10px;padding-bottom:10px}
.brand .logo{height:62px;width:auto}
.brand>span{display:none}
.site-header{box-shadow:0 1px 0 rgba(20,40,66,.08)}
.site-header.scrolled{box-shadow:0 14px 34px -18px rgba(8,22,39,.35)}
.main-nav{gap:15px;font-size:12.5px}
.main-nav .store-nav-link{background:none!important;background-color:transparent!important;color:var(--blue)!important;box-shadow:none!important;border-radius:0;padding:10px 2px;font-weight:600}
.main-nav .store-nav-link:hover{color:var(--red)!important}
.menu-toggle{border-radius:6px}
.main-nav .button{white-space:nowrap;padding:12px 18px;gap:14px}
.sheet figcaption{order:-1;padding:2px 4px 9px}

/* ---------- buttons: press feedback, offset tinted shadow ---------- */
.button{border-radius:4px;letter-spacing:.01em}
.button:active{transform:translateY(1px) scale(.98)}
.button.red:hover{box-shadow:0 14px 26px -12px rgba(207,41,53,.55)}
.button.navy:hover{box-shadow:0 14px 26px -12px rgba(8,22,39,.55)}
.text-link{text-underline-offset:4px}
.text-link:hover{text-decoration:underline}

/* ---------- type: a system, not sizes that happened ---------- */
h2{letter-spacing:-.04em}
.section{padding:104px 0}
.section-heading h2{font-size:clamp(36px,4vw,58px)}
.eyebrow{color:var(--blue)}

/* ---------- reveals (initial state set only when JS is live) ---------- */
html.award-js [data-rv]{opacity:0;transform:translateY(20px)}
html.award-js [data-rv].rv-in{opacity:1;transform:none;transition:opacity .8s var(--aw-ease),transform .8s var(--aw-ease)}
@media (prefers-reduced-motion:reduce){
  html.award-js [data-rv]{transform:none;transition:opacity .4s linear}
  html{scroll-behavior:auto}
}

/* ---------- de-card the grids: plates and rules, not boxes ---------- */
.service-card,.audience-card{background:transparent;border:0;box-shadow:none;border-radius:0}
.proof-card{background:transparent;border:0;border-top:2px solid var(--ink);border-radius:0;box-shadow:none;padding:26px 6px 6px;text-align:left}
.proof-card .proof-number{font-size:clamp(38px,3.6vw,54px);letter-spacing:-.04em}
.portfolio-card{background:transparent;border:0;box-shadow:none}
.testimonial-card{background:#fff;border:1px solid var(--aw-line);border-radius:16px;box-shadow:var(--aw-shadow-sm);padding:34px 32px}
.testimonial-card blockquote{font-family:Sora,Arial,sans-serif;font-size:19px;line-height:1.55;letter-spacing:-.01em}
.product-picture .picture-media{border-radius:12px;overflow:hidden;box-shadow:var(--aw-shadow-sm)}
.product-picture img{transition:transform .8s var(--aw-ease)}
.product-picture:hover img{transform:scale(1.035)}

/* ---------- chapter plates (intertitles) ---------- */
.chapter-plate{padding:92px 0 6px}
.chapter-folio{display:flex;align-items:center;gap:14px;font:650 11px/1.5 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#5a6a82}
.chapter-folio .tick{width:36px;height:10px;flex:0 0 36px;border-radius:2px}
.tick.c{background:var(--pc)} .tick.m{background:var(--pm)} .tick.y{background:var(--py)} .tick.k{background:var(--pk)}
.chapter-folio .rule{flex:1;height:1px;background:var(--aw-line)}
.chapter-title{font-size:clamp(38px,4.6vw,66px);line-height:1.04;margin:20px 0 14px;max-width:16em}
.chapter-stand{font-size:19px;line-height:1.65;color:#4c5c72;max-width:620px;margin:0}
.chapter-dark{background:var(--deep);color:#edf2f9;position:relative}
.chapter-dark .chapter-folio{color:#9db1cc}
.chapter-dark .chapter-folio .rule{background:#22385c}
.chapter-dark .chapter-stand{color:#b9c8dd}
.chapter-dark::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.chapter-dark>*{position:relative}

/* compact folio row (websites page chapter markers) */
.folio-row{width:min(1440px,calc(100% - 112px));margin:0 auto;display:flex;align-items:center;gap:14px;padding-top:34px;font:650 11px/1.5 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#5a6a82}
.folio-row .tick{width:36px;height:10px;flex:0 0 36px;border-radius:2px}
.folio-row .rule{flex:1;height:1px;background:var(--aw-line)}
@media (max-width:760px){.folio-row{width:calc(100% - 40px)}}

/* ---------- crop marks ---------- */


/* ============================================================
   HOME — title page
   ============================================================ */
.tp{background:var(--paper);padding:86px 0 110px;position:relative;overflow:clip}
.tp-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:center}
.tp-kicker{display:flex;align-items:center;gap:14px;font:650 11px/1.5 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#5a6a82;margin:0 0 30px}
.tp-kicker::after{content:"";flex:0 0 64px;height:1px;background:#b9c3d2}
.tp-title{font-size:clamp(50px,6.3vw,100px);line-height:.99;letter-spacing:-.05em;margin:0 0 26px;font-weight:650}
.tp-title em{color:var(--red);font-style:normal}
.tp-title.tp-title-list{font-size:clamp(40px,4.6vw,60px);line-height:1.05;letter-spacing:-.03em}
.tp-sub{font-family:Sora,Arial,sans-serif;font-size:clamp(22px,2.3vw,30px);line-height:1.3;letter-spacing:-.02em;margin:0 0 18px;max-width:22em}
.tp-sub em{color:var(--red);font-style:normal}
.tp-intro{font-size:17.5px;line-height:1.7;color:#4c5c72;max-width:56ch;margin:0 0 34px}
.tp-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.tp-phone{font-family:Sora,Arial,sans-serif;font-size:19px;font-weight:650;color:var(--ink)}
.tp-phone:hover{color:var(--red)}
.tp-own{margin:30px 0 0;font:650 11px/1.5 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#5a6a82}
.tp-sheets{position:relative;height:580px}
.sheet{position:absolute;background:#fff;padding:10px;border-radius:8px;box-shadow:var(--aw-shadow);will-change:transform;display:flex;flex-direction:column}
.sheet img{border-radius:4px;display:block;width:100%;flex:1 1 auto;min-height:0;object-fit:cover}
.sheet video{border-radius:4px;display:block;width:100%;flex:1 1 auto;min-height:0;object-fit:cover;background:#10243d}
.sheet figcaption{font:600 11px/1.4 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#5a6a82;padding:10px 4px 2px}
.sheet.s1{width:62%;height:330px;top:0;left:0;transform:rotate(-3.5deg);z-index:1}
.sheet.s2{width:58%;height:320px;top:150px;right:0;transform:rotate(2.5deg);z-index:2}
.sheet.s3{width:52%;height:280px;bottom:0;left:12%;transform:rotate(-1.5deg);z-index:3}
@media (max-width:1080px){
  .tp-grid{grid-template-columns:1fr;gap:56px}
  .tp-sheets{height:480px;max-width:640px}
}
@media (max-width:760px){
  .tp{padding:56px 0 72px}
  .tp-title{font-size:52px}
  .tp-sheets{height:400px}
  .sheet.s1{height:230px}.sheet.s2{height:220px;top:110px}.sheet.s3{height:190px}
}

/* ============================================================
   HOME — Chapter One: Off the Press (full-bleed press reel)
   ============================================================ */
.press{height:250vh;position:relative;background:var(--deep)}
.press-stage{position:sticky;top:192px;height:calc(100vh - 192px);height:calc(100svh - 192px);overflow:hidden;background:var(--deep)}
.press-media{position:absolute;inset:0;overflow:hidden}
.press-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.14);will-change:transform;background:var(--deep)}
.press-grade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,22,39,.80) 0%,rgba(8,22,39,.52) 46%,rgba(8,22,39,.24) 78%,rgba(8,22,39,.38) 100%),linear-gradient(to top,rgba(8,22,39,.88) 0%,rgba(8,22,39,0) 42%),linear-gradient(to bottom,rgba(8,22,39,.45) 0%,rgba(8,22,39,0) 30%)}
.press-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,4vh,44px) clamp(20px,4.5vw,68px) clamp(20px,3.5vh,36px);color:#fff}
.press-folio{display:flex;align-items:center;gap:12px;font:650 11px/1.5 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#c8d4e6;margin:0 0 clamp(10px,2vh,20px)}
.press-tick{width:28px;height:3px;background:var(--red);flex:0 0 28px}
.press-title{margin:0;font-family:Sora,Arial,sans-serif;text-transform:uppercase;line-height:.9;letter-spacing:-.03em;color:#fff;will-change:transform,opacity}
.press-title .pt-top{display:block;font-size:clamp(30px,4.4vw,62px);font-weight:600;letter-spacing:.01em;text-transform:none;color:#e8eefb}
.press-title .pt-big{display:block;font-size:clamp(84px,19.5vw,290px);font-weight:800}
.press-title .pt-big i{font-style:normal;color:var(--red)}
.press-steps{display:flex;flex-direction:column;gap:2px}
.press-foot{will-change:transform}
.press-step{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,24px);margin:0;font-family:Sora,Arial,sans-serif;font-weight:700;font-size:clamp(32px,4.9vw,70px);line-height:1.12;letter-spacing:-.025em;color:#fff;text-shadow:0 2px 34px rgba(8,22,39,.5);will-change:transform,opacity}
.press-step .ps-num{font:700 clamp(11px,1vw,14px) Inter,sans-serif;letter-spacing:.14em;color:rgba(255,255,255,.55);transform:translateY(-.55em)}
.press-note{margin:clamp(12px,2.2vh,22px) 0 0;font-size:clamp(15px,1.35vw,18.5px);line-height:1.55;color:#dbe5f5;max-width:34em}
.press-progress{margin-top:clamp(14px,2.4vh,24px);height:4px;background:rgba(255,255,255,.18);overflow:hidden}
.press-progress i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left center;will-change:transform}
@media (max-width:760px){
  .press{height:260vh}
  .press-stage{top:150px;height:calc(100vh - 150px);height:calc(100svh - 150px)}
  .press-grade{background:linear-gradient(100deg,rgba(8,22,39,.82) 0%,rgba(8,22,39,.58) 55%,rgba(8,22,39,.40) 100%),linear-gradient(to top,rgba(8,22,39,.94) 0%,rgba(8,22,39,.55) 34%,rgba(8,22,39,0) 58%),linear-gradient(to bottom,rgba(8,22,39,.5) 0%,rgba(8,22,39,0) 30%)}
  .press-title .pt-big{font-size:clamp(76px,23vw,120px)}
  .press-step{font-size:clamp(29px,9.2vw,40px)}
  .press-note{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .press{height:auto}
  .press-stage{position:relative;top:0;height:min(88vh,780px);height:min(88svh,780px)}
  .press-media{background:url(/assets/hero-poster.webp) center/cover no-repeat}
  .press-video{display:none}
  .press-step{opacity:1!important;transform:none!important}
  .press-progress{display:none}
}

/* ============================================================
   HOME — the work index, proof ledger, bands
   ============================================================ */
.index-rows{border-top:1px solid var(--aw-line);margin-top:44px}
.irow{display:grid;grid-template-columns:176px 1fr auto;gap:32px;align-items:center;padding:24px 0;border-bottom:1px solid var(--aw-line)}
.irow .irow-media{border-radius:10px;overflow:hidden;box-shadow:var(--aw-shadow-sm)}
.irow .irow-media img{width:176px;height:118px;object-fit:cover;display:block;transition:transform .8s var(--aw-ease)}
.irow:hover .irow-media img{transform:scale(1.05)}
.irow h3{font-size:clamp(22px,2.2vw,28px);margin:0 0 6px;letter-spacing:-.03em}
.irow h3 a:hover{color:var(--blue)}
.irow p{margin:0;color:#4c5c72;font-size:16px}
.irow .irow-links{display:flex;flex-direction:column;gap:6px;text-align:right}
@media (max-width:760px){
  .irow{grid-template-columns:104px 1fr;gap:18px}
  .irow .irow-media img{width:104px;height:78px}
  .irow .irow-links{grid-column:2;flex-direction:row;gap:20px;text-align:left}
}
.work-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:46px}
@media (max-width:1080px){.work-strip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.work-strip{grid-template-columns:1fr}}
.ledger{border-top:2px solid var(--ink);margin-top:44px}
.ledger-row{display:flex;align-items:baseline;justify-content:space-between;gap:28px;padding:20px 0;border-bottom:1px solid var(--aw-line)}
.ledger-num{font-family:Sora,Arial,sans-serif;font-weight:650;font-size:clamp(30px,3.2vw,46px);letter-spacing:-.04em;white-space:nowrap}
.ledger-num em{color:var(--red);font-style:normal}
.ledger-label{color:#4c5c72;font-size:16.5px;text-align:right;max-width:34em}
@media (max-width:760px){.ledger-row{flex-direction:column;gap:2px}.ledger-label{text-align:left}}
.tq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
@media (max-width:1080px){.tq-grid{grid-template-columns:1fr}}
.tq{background:#fff;border:1px solid var(--aw-line);border-radius:16px;box-shadow:var(--aw-shadow-sm);padding:32px 30px}
.tq blockquote{font-family:Sora,Arial,sans-serif;font-size:18.5px;line-height:1.55;letter-spacing:-.01em;margin:0}
.tq blockquote::before{content:"\201C";display:block;font-size:44px;line-height:.6;color:var(--red);margin-bottom:14px;font-weight:700}
.tq figcaption{margin-top:18px;font:650 11.5px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#5a6a82}
.lab-rows{border-top:1px solid var(--aw-line);margin-top:40px}
.lab-row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--aw-line)}
.lab-row h3{font-size:clamp(21px,2vw,26px);margin:0 0 4px}
.lab-row p{margin:0;color:#4c5c72}
.human-plate{background:var(--paper-2)}
.store-band,.tech-band{position:relative}
.cta-band{background:var(--deep)}

.tp,.ch-sec,.press,.chapter-plate{color:var(--ink)}
.chapter-plate{background:var(--paper)}
.chapter-dark .chapter-plate{background:transparent}
.store-band .chapter-plate{background:transparent}
.chapter-dark .chapter-title{color:#f4f7fc}
.chapter-dark .chapter-stand{color:#bfcfe6}
.chapter-dark .chapter-folio{color:#93a7c4}
.store-band .chapter-title{color:#fff}
.store-band .chapter-folio{color:#c9d6ea}
.store-band .chapter-folio .tick{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.ch-sec{padding:24px 0 110px}
.ch-paper{background:var(--paper)}
.ch-paper2{background:var(--paper-2)}
.chapter-dark.ch-sec{padding-top:24px}

/* footer colophon */
.colophon-line{display:block;width:100%;margin-top:14px;font:600 10.5px/1.6 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.site-footer .footer-company img,.site-footer .logo{background:#fff;border-radius:8px;padding:6px}

/* ============================================================
   PRODUCTS — catalog grammar
   ============================================================ */
.catalog-index{position:sticky;top:150px;z-index:25;background:rgba(246,246,243,.94);backdrop-filter:blur(12px);border-block:1px solid var(--aw-line);margin-top:6px}
.catalog-index .ci-track{display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
.catalog-index .ci-track::-webkit-scrollbar{display:none}
.catalog-index a{flex:0 0 auto;font:600 12.5px Inter,sans-serif;letter-spacing:.04em;color:#41546f;padding:9px 14px;border-radius:99px;border:1px solid transparent}
.catalog-index a:hover{border-color:var(--aw-line);color:var(--ink)}
.catalog-index a.active{background:var(--ink);color:#fff}
@media (max-width:900px){.catalog-index{position:static}}
.department .product-picture{background:#fff;border:1px solid var(--aw-line);border-radius:16px;padding:10px;box-shadow:var(--aw-shadow-sm)}
.department .product-picture .picture-media{box-shadow:none;border-radius:10px}
.department figcaption{padding:12px 8px 6px;font-size:14px}
.category-hero{background:var(--paper)}

/* ============================================================
   PRINT LAB
   ============================================================ */
.lab-hero{background:var(--paper);padding:84px 0 30px}
.lab-tool{background:#fff;border:1px solid var(--aw-line);border-radius:18px;box-shadow:var(--aw-shadow-sm);padding:38px;margin-top:34px}
.lab-tool h3{font-size:clamp(24px,2.4vw,30px);margin:0 0 8px}
.lab-tool .tool-sub{color:#4c5c72;max-width:62ch;margin:0 0 24px}
.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
@media (max-width:900px){.lab-grid{grid-template-columns:1fr}}
.lab-field{display:block;font:600 12px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#5a6a82;margin:0 0 16px}
.lab-field select,.lab-field input[type="text"],.lab-field input[type="number"]{display:block;width:100%;margin-top:8px;padding:12px 14px;border:1px solid #c3ccd9;border-radius:8px;font:500 15.5px Inter,sans-serif;color:var(--ink);background:#fff;text-transform:none;letter-spacing:0}
.lab-drop{border:1.5px dashed #b4c0d0;border-radius:12px;padding:26px;text-align:center;color:#4c5c72;cursor:pointer;transition:border-color .2s,background .2s}
.lab-drop:hover,.lab-drop.over{border-color:var(--blue);background:#f2f6ff}
.lab-drop input{position:absolute;opacity:0;pointer-events:none}
.verdict{border-radius:12px;padding:22px 24px;font-size:16px;line-height:1.6;display:none}
.verdict.show{display:block}
.verdict.good{background:#e9f7ee;border:1px solid #bfe6cc}
.verdict.mid{background:#fdf6e0;border:1px solid #efdf9e}
.verdict.low{background:#fdecec;border:1px solid #f3c2c2}
.verdict strong{font-family:Sora,Arial,sans-serif}
.ts-stage{background:var(--paper-2);border:1px solid var(--aw-line);border-radius:12px;padding:28px;overflow:auto;min-height:300px;display:flex;align-items:center;justify-content:center}
.ts-plate{background:#fff;box-shadow:var(--aw-shadow);border-radius:3px;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:10px;text-align:center}
.ts-plate .ts-name{font-family:Sora,Arial,sans-serif;font-weight:650;font-size:15px}
.ts-plate .ts-size{font:600 10.5px Inter,sans-serif;letter-spacing:.12em;color:#5a6a82;text-transform:uppercase}
input[type="range"].lab-range{width:100%;accent-color:var(--red)}
.sw-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sw{border-radius:12px;min-height:110px;padding:14px;display:flex;align-items:flex-end;font:650 11px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.sw span{background:rgba(255,255,255,.88);padding:4px 8px;border-radius:5px;color:var(--ink)}
.cmyk-out{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.cmyk-out div{background:var(--paper);border:1px solid var(--aw-line);border-radius:10px;padding:12px;text-align:center}
.cmyk-out b{display:block;font-family:Sora,Arial,sans-serif;font-size:22px}
.cmyk-out span{font:650 10.5px Inter,sans-serif;letter-spacing:.12em;color:#5a6a82;text-transform:uppercase}
.tpl-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
@media (max-width:900px){.tpl-row{grid-template-columns:1fr}}
.tpl{background:#fff;border:1px solid var(--aw-line);border-radius:16px;padding:26px;box-shadow:var(--aw-shadow-sm)}
.tpl h4{font-size:19px;margin:0 0 6px}
.tpl p{color:#4c5c72;font-size:15px;margin:0 0 16px}
.free-note{display:flex;gap:12px;align-items:center;font:650 11.5px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#5a6a82}
.free-note::before{content:"";width:28px;height:2px;background:var(--red);flex:0 0 28px}

.page-folio{margin-top:32px}
.folio-row.on-dark{color:#eef3fb}
.folio-row.on-dark .rule{background:#ffffff38}