/* Triad Import Specialists · the look chosen in Claude Design (2 Nov 2026)
   Loaded after styles.css. Each page's <div class="page t-..."> carries one class per design choice
   (t-<group>-<option>). Rules for options no page uses can be pruned. */

/* ---------- Base: Montserrat everywhere + tweak variables ---------- */
.page {
  --serif: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 0px; --r-btn: var(--r); --r-img: var(--r);
  --dens: 1; --hs: 1; --body: 17px;
  --rule-b: 3px double var(--rule);
  min-height: 100vh;
  background-color: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: var(--body); line-height: 1.6;
}
.page .brand { font-weight: 700; letter-spacing: -.01em; }
.page .kicker { font-weight: 600; font-size: 14px; letter-spacing: .16em; line-height: 1.3; }
.page .more, .page .edition__go, .page .caption { font-style: normal; font-weight: 500; }
.page .letters__lead, .page .lead-line, .page .story__quote { font-style: normal; font-weight: 500; letter-spacing: -.01em; }
.page .letters__second, .page .mission, .page .page-head__lead { font-weight: 400; }
.page .cover__phone, .page .contact__phone { font-weight: 700; letter-spacing: -.02em; }

/* Heading scale (--hs) */
.page .cover h1 { font-size: calc(clamp(38px, 5.4vw, 66px) * var(--hs)); line-height: 1.05; }
.page .page-head h1 { font-size: calc(clamp(42px, 6vw, 76px) * var(--hs)); line-height: 1.02; }
.page .h2 { font-size: calc(clamp(28px, 3.2vw, 40px) * var(--hs)); line-height: 1.1; }
.page .edition__title, .page .rows--names li { font-size: calc(clamp(20px, 2vw, 26px) * var(--hs)); }
.page .callband__text { font-size: calc(clamp(24px, 2.8vw, 36px) * var(--hs)); }
.page .lead-line { font-size: calc(clamp(24px, 3vw, 36px) * var(--hs)); }
.page .letters__lead { font-size: calc(clamp(22px, 2.6vw, 32px) * var(--hs)); }
.page .story__quote { font-size: calc(clamp(20px, 2.2vw, 28px) * var(--hs)); }
.page .member__name { font-size: calc(clamp(18px, 1.8vw, 22px) * var(--hs)); }
.page .compare__table tbody th { font-size: calc(clamp(18px, 1.9vw, 22px) * var(--hs)); }
.page.t-hs-small { --hs: .85; }
.page.t-hs-large { --hs: 1.15; }
.page.t-hs-huge { --hs: 1.32; }

/* Heading style (h1 + section headings) */
.page .cover h1, .page .page-head h1, .page .h2 { font-style: normal; font-weight: 600; letter-spacing: -.02em; }
.page.t-hw-bold :is(.cover h1, .page-head h1, .h2) { font-weight: 800; letter-spacing: -.035em; }
.page.t-hw-light :is(.cover h1, .page-head h1, .h2) { font-weight: 300; letter-spacing: -.02em; }
.page.t-hw-italic :is(.cover h1, .page-head h1, .h2) { font-style: italic; font-weight: 500; }
.page.t-hw-uppercase :is(.cover h1, .page-head h1, .h2) { text-transform: uppercase; font-weight: 700; letter-spacing: .01em; }
.page.t-hw-uppercase .cover h1 { font-size: calc(clamp(32px, 4.4vw, 54px) * var(--hs)); }
.page.t-hw-uppercase .page-head h1 { font-size: calc(clamp(36px, 5vw, 62px) * var(--hs)); }

/* Body copy size (--body) */
.page .cover__sub { font-size: calc(var(--body) * 1.2); }
.page .edition__desc, .page .rows--points li { font-size: calc(var(--body) * 1.05); }
.page .contact__lines, .page .hours, .page .facts, .page .compare__table { font-size: calc(var(--body) * 1.05); }
.page .mission, .page .letters__second { font-size: calc(var(--body) * 1.15); }
.page .page-head__lead { font-size: calc(var(--body) * 1.35); line-height: 1.45; }
.page .site-footer, .page .status, .page .nav { font-size: calc(var(--body) * .94); }
.page.t-body-15 { --body: 15px; }
.page.t-body-19 { --body: 19px; }
.page.t-body-21 { --body: 21px; }

/* Spacing density (--dens) */
.page .edition a { padding: calc(18px * var(--dens)) 0; }
.page .rows li { padding: calc(20px * var(--dens)) 0; }
.page .team { gap: calc(24px * var(--dens)) calc(20px * var(--dens)); }
.page .facts div { padding: calc(12px * var(--dens)) 0; }
.page .compare__table th, .page .compare__table td { padding: calc(16px * var(--dens)) 12px; }
.page .hours__row { padding: calc(8px * var(--dens)) 0; }
.page .cover__actions { margin-top: calc(22px * var(--dens)); }
.page .cover__phone { margin-top: calc(28px * var(--dens)); }
.page.t-dens-compact { --dens: .65; }
.page.t-dens-airy { --dens: 1.45; }

/* Section padding */
.page.t-sp-tight { --space-section: 40px; }
.page.t-sp-roomy { --space-section: 128px; }
.page.t-sp-generous { --space-section: 176px; }

/* ---------- Navbar layouts ---------- */
@media (min-width: 1240px) {
  .page.t-nav-centered .site-header__inner { grid-template-columns: 1fr auto 1fr; grid-template-areas: ". brand call" "nav nav nav"; gap: 6px 32px; padding-bottom: 6px; }
  .page.t-nav-centered .brand { justify-self: center; }
  .page.t-nav-centered .nav { justify-content: center; }
  .page.t-nav-left .nav { justify-content: flex-start; padding-left: 16px; border-left: 1px solid var(--line); }
  .page.t-nav-compact .site-header__inner { padding-top: 10px; padding-bottom: 10px; }
  .page.t-nav-compact .brand { font-size: 22px; }
  .page.t-nav-compact .nav { justify-content: flex-end; gap: 0 22px; }
  .page.t-nav-bar .site-header__inner { padding-top: 14px; padding-bottom: 14px; }
}
.page.t-nav-bar .site-header { background: var(--raised); border-bottom: 0; }
.page.t-nav-bar .nav a[aria-current="page"] { text-decoration: none; color: var(--on-accent); background: var(--accent); padding: 0 14px; border-radius: var(--r-btn); }

/* ---------- Primary button (.btn) ---------- */
.page .btn, .page .call-pill { border-radius: var(--r-btn); }
.page.t-btn-outline .btn { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.page.t-btn-outline .btn:hover { background: var(--accent); color: var(--on-accent); }
.page.t-btn-soft .btn { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.page.t-btn-soft .btn:hover { background: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--text); }
.page.t-btn-arrow .btn::after { content: "→"; margin-left: 12px; transition: transform .2s ease; }
.page.t-btn-arrow .btn:hover::after { transform: translateX(4px); }
.page.t-btn-block .btn { min-height: 64px; padding: 18px 40px; font-size: 20px; letter-spacing: .02em; text-transform: uppercase; }

/* ---------- Secondary buttons (header call pill, "more" links) ---------- */
.page.t-btn2-ghost .call-pill { border-color: transparent; color: var(--accent); }
.page.t-btn2-ghost .call-pill:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-hover); }
.page.t-btn2-soft .call-pill { border-color: transparent; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.page.t-btn2-soft .call-pill:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); }
.page.t-btn2-solid .call-pill { background: var(--accent); color: var(--on-accent); }
.page.t-btn2-solid .call-pill:hover { background: var(--accent-hover); }
.page.t-btn2-link .call-pill { border: 0; padding-left: 0; padding-right: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.page.t-btn2-link .call-pill:hover { background: none; color: var(--accent-hover); }
.page.t-btn2-solid .more, .page.t-btn2-soft .more { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-btn); text-decoration: none; }
.page.t-btn2-solid .more { background: var(--accent); color: var(--on-accent); }
.page.t-btn2-soft .more { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* ---------- Card styles (team, "In this edition", service rows) ---------- */
.page.t-card-bordered .member, .page.t-card-raised .member, .page.t-card-lifted .member { padding: 12px; border-radius: var(--r); }
.page.t-card-bordered .member { border: 1px solid var(--line-strong); }
.page.t-card-raised .member, .page.t-card-lifted .member { background: var(--raised); }
.page.t-card-lifted .member, .page.t-card-lifted .edition a, .page.t-card-lifted .rows--services li { box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .5); border-top: 2px solid var(--accent); }
.page:is(.t-card-bordered, .t-card-raised, .t-card-lifted) .edition { display: grid; gap: 12px; }
.page:is(.t-card-bordered, .t-card-raised, .t-card-lifted) .edition a { padding: calc(20px * var(--dens)) 24px; border-radius: var(--r); }
.page:is(.t-card-bordered, .t-card-raised, .t-card-lifted) .rows--services { border-top: 0; display: grid; gap: 10px; }
.page:is(.t-card-bordered, .t-card-raised, .t-card-lifted) .rows--services li { padding: calc(16px * var(--dens)) 20px; border-radius: var(--r); }
.page.t-card-bordered .edition a, .page.t-card-bordered .edition li:last-child a, .page.t-card-bordered .rows--services li { border: 1px solid var(--line-strong); }
.page:is(.t-card-raised, .t-card-lifted) .edition a, .page:is(.t-card-raised, .t-card-lifted) .edition li:last-child a, .page:is(.t-card-raised, .t-card-lifted) .rows--services li { background: var(--raised); border-bottom: 0; }
.page.t-card-raised .edition a, .page.t-card-raised .rows--services li { border-top: 0; }

/* ---------- Hero refinements (home cover; inner page heads follow "stacked") ---------- */
@media (min-width: 960px) {
  .page.t-hero-image-right .cover__media { order: 2; }
  .page.t-hero-full-bleed .cover { grid-template-columns: 1fr; position: relative; max-width: none; min-height: 720px; overflow: hidden; }
  .page.t-hero-full-bleed .cover__media { position: absolute; inset: 0; }
  .page.t-hero-full-bleed .cover__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; padding: 0; border: 0; }
  .page.t-hero-full-bleed .cover__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 42%, color-mix(in srgb, var(--bg) 35%, transparent) 100%); }
  .page.t-hero-full-bleed .cover__body { position: relative; z-index: 1; max-width: 820px; padding: 96px 56px 96px max(56px, calc((100vw - 1280px) / 2 + 56px)); }
  .page.t-hero-stacked .cover { grid-template-columns: 1fr; min-height: 0; }
  .page.t-hero-stacked .cover__body { order: -1; align-items: center; text-align: center; padding: 88px 56px 48px; }
  .page.t-hero-stacked .cover__actions { justify-content: center; }
  .page.t-hero-stacked .cover__media { padding: 0 var(--gutter); }
  .page.t-hero-stacked .cover__media img { height: auto; aspect-ratio: 21 / 9; }
  .page.t-hero-inset .cover { gap: 0; padding: 40px var(--gutter) 0; }
  .page.t-hero-inset .cover__media img { border-radius: var(--r-img); }
}
.page.t-hero-stacked .page-head { text-align: center; }
.page.t-hero-stacked .page-head__lead { margin-left: auto; margin-right: auto; }
.page.t-hero-full-bleed .page-head, .page.t-hero-inset .page-head { padding-top: 80px; }

/* ---------- Feature layouts ("In this edition", services, About points) ---------- */
@media (min-width: 720px) {
  .page:is(.t-feat-grid-2, .t-feat-grid-4) .edition { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
  .page:is(.t-feat-grid-2, .t-feat-grid-4) .rows--services, .page:is(.t-feat-grid-2, .t-feat-grid-4) .rows--points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (min-width: 960px) {
  .page.t-feat-grid-4 .split { grid-template-columns: 1fr; gap: 24px; }
  .page.t-feat-grid-4 .edition, .page.t-feat-grid-4 .rows--services { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page.t-feat-grid-4 .rows--services li { flex-direction: column; align-items: flex-start; }
}
.page:is(.t-feat-grid-2, .t-feat-grid-4) .edition a { height: 100%; border-top: var(--rule-b); }
.page:is(.t-feat-grid-2, .t-feat-grid-4) .edition li:last-child a { border-bottom: 0; }
.page:is(.t-feat-grid-2, .t-feat-grid-4) .edition__row { flex-direction: column; align-items: flex-start; gap: 10px; }
.page:is(.t-feat-grid-2, .t-feat-grid-4) .edition__leader { display: none; }
.page.t-feat-list-numbered .edition { counter-reset: ed; }
.page.t-feat-list-numbered .edition li, .page.t-feat-list-numbered .rows--services li { counter-increment: ed; }
.page.t-feat-list-numbered .rows--services { counter-reset: ed; }
.page.t-feat-list-numbered .edition__title::before, .page.t-feat-list-numbered .rows--services li::before { content: counter(ed, decimal-leading-zero); font-size: 14px; font-weight: 600; letter-spacing: .1em; color: var(--accent); margin-right: 16px; }

/* ---------- CTA treatments (closing call band, home contact) ---------- */
.page .callband, .page .contact, .page .map, .page .compare { border-radius: var(--r); }
.page .map { overflow: hidden; }
.page.t-cta-outlined :is(.callband, .contact) { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.page.t-cta-accent :is(.callband, .contact) { background: var(--accent); }
.page.t-cta-accent :is(.callband, .contact) :is(*, a, a:hover) { color: var(--on-accent); }
.page.t-cta-accent :is(.callband, .contact) .hours__row dt::after { border-color: color-mix(in srgb, var(--on-accent) 45%, transparent); }
.page.t-cta-accent :is(.callband, .contact) .status__dot { background: var(--on-accent); }
.page.t-cta-accent .contact .map { border-color: color-mix(in srgb, var(--on-accent) 40%, transparent); }
@media (min-width: 960px) {
  .page.t-cta-centered .callband { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
.page.t-cta-centered .contact { text-align: left; }
.page.t-cta-ruled :is(.callband, .contact) { background: transparent; border-top: var(--rule-b); border-bottom: var(--rule-b); border-radius: 0; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Icon styles (services) ---------- */
.page.t-icon-thin .svc__icon { stroke-width: 1.25; }
.page.t-icon-circle .svc__icon { width: 64px; height: 64px; padding: 12px; border: 1.5px solid var(--accent); border-radius: 50%; }
.page.t-icon-tile .svc__icon { width: 64px; height: 64px; padding: 12px; background: var(--accent); color: var(--on-accent); border-radius: var(--r); }
.page.t-icon-muted .svc__icon { color: var(--muted); }
.page.t-icon-muted .rows--services li:hover .svc__icon { color: var(--accent); }

/* ---------- Border treatments (the heavy rules) ---------- */
.page .site-header { border-bottom: var(--rule-b); }
.page .section-head { border-top: var(--rule-b); }
.page .member figcaption { border-top: var(--rule-b); }
.page .rows { border-top: var(--rule-b); }
.page .site-footer { border-top: var(--rule-b); }
.page .compare__table thead th { border-bottom: var(--rule-b); }
.page.t-bord-single { --rule-b: 1px solid var(--rule); }
.page.t-bord-thick { --rule-b: 4px solid var(--accent); }
.page.t-bord-dotted { --rule-b: 2px dotted var(--rule); }
.page.t-bord-none { --rule-b: 0 solid transparent; }

/* ---------- Corner radius ---------- */
.page.t-r-4 { --r: 4px; }
.page.t-r-10 { --r: 10px; }
.page.t-r-20 { --r: 20px; }
.page.t-r-pill { --r: 20px; --r-btn: 999px; }

/* ---------- Image presentation ---------- */
.page :is(.cover__media img, .member img, .wide-photo img, .archive img) { border-radius: var(--r-img); }
.page.t-img-framed :is(.cover__media img, .member img, .wide-photo img, .archive img) { padding: 10px; background: var(--raised); border: 1px solid var(--line-strong); }
.page.t-img-sepia :is(.cover__media img, .member img, .wide-photo img, .archive img) { filter: grayscale(1) sepia(.55) contrast(1.05) brightness(.95); }
.page.t-img-grayscale :is(.cover__media img, .member img, .wide-photo img, .archive img) { filter: grayscale(1) contrast(1.05); }
.page.t-img-arched :is(.cover__media img, .member img, .archive img) { border-radius: 999px 999px var(--r) var(--r); }
.page.t-img-square { --r-img: 0px; }

/* ---------- Background treatments ---------- */
.page.t-bg-night { --bg: #0F110F; --raised: #191C18; --line: #2C312B; --line-strong: #3E453D; }
.page.t-bg-warm { --bg: #1C1916; --raised: #27231F; --line: #3A352F; --line-strong: #4D463E; --rule: #7A6F62; --text: #EEE8DD; --text-2: #D6CFC2; --muted: #B3AA9A; }
.page.t-bg-grain { background-image: radial-gradient(rgba(236, 234, 224, .045) 1px, transparent 1px); background-size: 4px 4px; }
.page.t-bg-grain .site-header { background: var(--bg); }

/* ---------- Accent color ---------- */
.page { --accent-ink: #7A4F6C; }
.page.t-acc-sage { --accent: #A9C4A0; --accent-ink: #4C6B44; }
.page.t-acc-amber { --accent: #DDB97A; --accent-ink: #85602A; }
.page.t-acc-sky { --accent: #A9C3DA; --accent-ink: #3F6587; }
.page.t-acc-clay { --accent: #E0A58A; --accent-ink: #9A4E2E; }
.page:is(.t-acc-sage, .t-acc-amber, .t-acc-sky, .t-acc-clay) { --accent-hover: color-mix(in srgb, var(--accent) 70%, white); --accent-press: color-mix(in srgb, var(--accent) 85%, black); }

/* Paper (light) ground: after the accents so it can switch them to their darker ink */
.page.t-bg-paper {
  --bg: #F4F1E8; --raised: #E8E4D7; --line: #D3CEBF; --line-strong: #B5AF9E; --rule: #8E8A7A;
  --text: #1C1F1B; --text-2: #3A3E37; --muted: #575C51;
  --accent: var(--accent-ink); --accent-hover: color-mix(in srgb, var(--accent-ink) 78%, black); --accent-press: color-mix(in srgb, var(--accent-ink) 65%, black);
  --on-accent: #FFFFFF;
  color-scheme: light;
}

/* ---------- Subtle accents ---------- */
.page.t-deco-kicker-line .kicker::before { content: ""; display: inline-block; width: 32px; height: 2px; margin-right: 12px; vertical-align: middle; background: var(--accent); }
.page.t-deco-heading-underline .h2::after { content: ""; display: block; width: 48px; height: 3px; margin-top: 14px; background: var(--accent); }
.page.t-deco-glow .cover__phone { text-shadow: 0 0 36px color-mix(in srgb, var(--accent) 50%, transparent); }
.page.t-deco-glow .btn { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); }
.page.t-deco-stamp .cover__body { position: relative; }
.page.t-deco-stamp .cover__body::before { content: "Est. 2006"; position: absolute; top: 28px; right: 40px; padding: 10px 14px; border: 1.5px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; transform: rotate(-6deg); }
.page.t-deco-corner :is(.callband, .contact, .member img) { position: relative; }
.page.t-deco-corner :is(.callband, .contact)::before { content: ""; position: absolute; top: 14px; left: 14px; width: 22px; height: 22px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }

/* ---------- Page-specific fixes carried over from the canvas ---------- */
/* Home: five links in one row on desktop */
@media (min-width: 960px) { .page.t-feat-grid-4 .edition { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Home: frame the new shop photo a little higher */
.cover__media img { object-position: 50% 29%; }
/* Compare: the comparison table cells hold sentences, so let them wrap */
.compare__table td { white-space: normal; }
/* The cover photo eases in with a slight zoom; keep that inside its frame so phones never scroll sideways */
.cover__media { overflow: hidden; }

/* Home: the five links sit close under the cover photo instead of a full section gap */
.page .section.explore { padding-top: clamp(20px, 3vw, 32px); }