/* =============================================================================
   The Brand Clan - V4 DESIGN SYSTEM
   The shared foundation for every page built in the new look: tokens, type,
   the page shell, the paper grain, the navbar/footer overrides, the section
   frame with its numbered hairline marker, and the buttons.

   Loaded alongside tbc-base.css and BEFORE the per-page stylesheet.
   Everything is scoped to body.v4 so a page without that class is untouched.

   Type:  DM Serif Display + Figtree, the brand's own faces.
   Ground: warm paper, deep ink plates, gold reserved for rules and numerals.
   ========================================================================== */

.v4{
  --paper:#F3F0E9;
  --paper-2:#FBFAF7;
  --ink:#0C141A;
  --ink-2:#131F27;
  --ink-3:#1B2A34;
  --gold:#C5A880;
  --gold-lt:#DCC49C;
  --gold-dp:#9C7F52;
  --rule:rgba(12,20,26,.15);
  --rule-soft:rgba(12,20,26,.08);
  --rule-inv:rgba(255,255,255,.16);
  --body:#4A5762;
  --body-inv:#93A3AE;

  /* Bodoni Moda was tried here and failed: a Didone's hairlines fall under one
     device pixel below roughly 60px, so headings broke up and small ones were
     unreadable. Back to the brand's own faces, which also keeps this page
     consistent with the other 68. */
  --display:'DM Serif Display',Georgia,'Times New Roman',serif;
  --text:'Figtree','Helvetica Neue',Arial,sans-serif;

  --gut:clamp(20px,5vw,64px);
  --shell:1320px;

  background:var(--paper);
  color:var(--body);
  font-family:var(--text);
  font-size:16.5px;
  line-height:1.62;
  letter-spacing:.005em;
}

.v4 h1,.v4 h2,.v4 h3,.v4 h4{
  font-family:var(--display);
  font-weight:400;          /* DM Serif Display ships one weight */
  color:var(--ink);
  letter-spacing:-.008em;
  line-height:1.08;
}
.v4 em{font-style:italic;}

/* the page shell: a wide measure with a hairline down each side, like a plate */
.v4 .shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gut);}

/* ---------- paper grain -------------------------------------------------- */
.v4 .grain{
  position:fixed;inset:0;z-index:120;pointer-events:none;
  mix-blend-mode:multiply;opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media(max-width:640px){ .v4 .grain{opacity:.05;} }

/* ---------- brand furniture, restyled for this page ---------------------- */
.v4 .brand-name{font-family:var(--display);font-weight:400;letter-spacing:-.01em;white-space:nowrap;}
.v4 .brand-tag{font-family:var(--text);letter-spacing:.24em;font-weight:600;white-space:nowrap;}
.v4 .navbar{background:var(--paper-2);border-bottom:1px solid var(--rule);}
.v4 .nav-links>li>a{font-family:var(--text);font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);}
.v4 .utility{background:var(--ink);}
.v4 .utility,.v4 .utility a{font-family:var(--text);letter-spacing:.14em;
  text-transform:uppercase;font-size:10.5px;font-weight:600;}
.v4 .mobile-menu>a{font-family:var(--text);letter-spacing:.1em;text-transform:uppercase;font-size:13.5px;}

/* =============================================================================
   SECTION FRAME
   Every section opens on a full-width hairline carrying its index number, the
   way a chapter opens in a printed catalogue.
   ========================================================================== */
.v4 .sec{position:relative;padding:clamp(46px,5vw,78px) 0;}
.v4 .sec.paper{background:var(--paper);}
.v4 .sec.pale{background:var(--paper-2);}

.v4 .marker{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding-bottom:clamp(20px,2.4vw,32px);
}
.v4 .marker .no{
  font-family:var(--display);font-size:14px;font-weight:400;color:var(--gold-dp);
  font-feature-settings:"tnum";letter-spacing:.04em;
}
/* on product pages the chapter number is dropped and only the label remains */
.v4 .marker.nonum{grid-template-columns:1fr auto;}
.v4 .marker .ln{height:1px;background:var(--rule);transform-origin:left;}
.v4 .marker .tag{
  font-size:10.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);
}
@media (prefers-reduced-motion:no-preference){
  html.js .v4 .reveal .marker .ln,
  html.js .v4 .marker.reveal .ln{transform:scaleX(0);transition:transform 1s cubic-bezier(.16,1,.3,1) .1s;}
  html.js .v4 .reveal.in .marker .ln,
  html.js .v4 .marker.reveal.in .ln{transform:scaleX(1);}
}

/* section heading: statement left, note right */
.v4 .lede{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);align-items:end;margin-bottom:clamp(24px,2.8vw,38px);}
.v4 .lede h2{font-size:clamp(27px,3.4vw,44px);}
.v4 .lede h2 em{color:var(--gold-dp);}
/* keep the italic phrase together so the heading breaks on the comma, not mid-thought */
@media(min-width:861px){ .v4 .lede h2 em{white-space:nowrap;} }
.v4 .lede p{font-size:16px;max-width:44ch;color:var(--body);}
/* stacked variant: the note sits under the heading instead of beside it */
.v4 .lede.stack{grid-template-columns:1fr;align-items:start;gap:12px;}
.v4 .lede.stack p{max-width:62ch;}
.v4 .lede.centred{text-align:center;justify-items:center;max-width:760px;margin-left:auto;margin-right:auto;}
.v4 .lede.centred p{max-width:52ch;}
@media(max-width:860px){ .v4 .lede{grid-template-columns:1fr;align-items:start;gap:18px;} }
.v4 .lede.solo{grid-template-columns:1fr;}

/* small caps utility */
.v4 .caps{font-size:10.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;}

/* buttons, redrawn: square, hairline, no shadow-blob */
.v4 .act{
  display:inline-flex;align-items:center;gap:12px;font-family:var(--text);
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:17px 30px;border:1px solid var(--ink);color:var(--ink);background:transparent;
  border-radius:0;cursor:pointer;position:relative;overflow:hidden;transition:color .35s ease;
}
.v4 .act::before{content:"";position:absolute;inset:0;background:var(--ink);
  transform:scaleY(0);transform-origin:bottom;transition:transform .38s cubic-bezier(.16,1,.3,1);z-index:0;}
.v4 .act>*{position:relative;z-index:1;}
.v4 .act:hover{color:var(--paper-2);}
.v4 .act:hover::before{transform:scaleY(1);}
.v4 .act i{font-size:10px;transition:transform .35s ease;}
.v4 .act:hover i{transform:translateX(5px);}

.v4 .act.gold{border-color:var(--gold-dp);background:var(--gold);color:var(--ink);}
.v4 .act.gold::before{background:var(--ink);}
.v4 .act.gold:hover{color:var(--gold-lt);}

/* The cart drawer is injected by js/tbc-cart.js and carries both the legacy
   .btn classes and .act, so the same markup works on a page that has not been
   moved across yet. On a v4 page the .act treatment must win outright. */
.v4 .act.btn{border-radius:0;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;box-shadow:none;transform:none;}
.v4 .act.btn:hover{transform:none;box-shadow:none;}
.v4 .act.btn-gold{background:var(--gold);border-color:var(--gold-dp);color:var(--ink);}
.v4 .act.btn-gold:hover{color:var(--gold-lt);}
.v4 .act.btn-outline-navy{background:transparent;border-color:var(--ink);color:var(--ink);}
.v4 .act.btn-outline-navy:hover{color:var(--paper-2);}
.v4 .tcart-checkout,.v4 .tcart-quote{width:100%;justify-content:center;}

.v4 .act.inv{border-color:rgba(255,255,255,.5);color:#fff;}
.v4 .act.inv::before{background:#fff;}
.v4 .act.inv:hover{color:var(--ink);}

/* footer, matched to the page */
.v4 .footer{background:#080E13;}
.v4 .foot-col h2{font-family:var(--text);font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:#fff;font-weight:700;margin-bottom:16px;}
.v4 .foot-col a{font-size:14px;}
.v4 .foot-brand .brand-name{font-family:var(--display);}

/* =============================================================================
   PAGE HEADER  - the opener every inner page uses. Same language as the
   homepage hero: a photograph pinned to the viewport, a left-weighted veil so
   the type reads while the right hand side stays bright, and a hairline row of
   reassurances across the foot. Set the photograph with an inline
   background-image on the element.
   ========================================================================== */
/* Deliberately NOT background-attachment:fixed. A fixed background is sized to
   the viewport, so on a header band only ~400px tall it upscales the photograph
   and crops it to its middle third: you end up looking at sky. Sized to the
   element instead, the whole crop lands in the band and stays sharp. */
.v4 .phead{position:relative;overflow:hidden;background-color:var(--ink);
  background-position:50% 45%;background-size:cover;background-repeat:no-repeat;
  display:flex;flex-direction:column;justify-content:flex-end;}
.v4 .phead-veil{position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(9,15,20,.9) 0%,rgba(9,15,20,.74) 28%,rgba(9,15,20,.4) 58%,rgba(9,15,20,.12) 86%,rgba(9,15,20,.04) 100%),
    linear-gradient(to top,rgba(9,15,20,.62),transparent 46%);}
.v4 .phead-inner{position:relative;z-index:2;width:100%;
  padding-top:clamp(34px,4.6vw,60px);padding-bottom:clamp(20px,2.2vw,28px);}

.v4 .crumb{display:flex;align-items:center;gap:10px;margin-bottom:clamp(14px,1.8vw,22px);
  font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#8E9DA8;}
.v4 .crumb a{color:var(--gold);display:inline-flex;align-items:center;min-height:24px;padding-block:4px;margin-block:-4px;}
.v4 .crumb a:hover{color:#fff;}
.v4 .crumb i{font-size:8px;color:#5C6C77;}

.v4 .phead-eyebrow{display:block;font-size:10.5px;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
.v4 .phead h1{color:#fff;font-size:clamp(30px,4.4vw,58px);line-height:1.04;
  letter-spacing:-.016em;max-width:18ch;margin-bottom:clamp(12px,1.4vw,18px);}
.v4 .phead h1 em{color:var(--gold-lt);}
.v4 .phead-sub{color:#CFD8DE;font-size:clamp(14.5px,1.35vw,17px);max-width:56ch;line-height:1.55;}

.v4 .phead-marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--rule-inv);}
.v4 .phead-marks span{
  display:flex;align-items:center;gap:11px;color:#C6D0D8;font-size:13.5px;
  padding:clamp(13px,1.4vw,17px) clamp(18px,2.2vw,30px);
  border-right:1px solid var(--rule-inv);
}
.v4 .phead-marks span:first-child{padding-left:0;}
.v4 .phead-marks span:last-child{border-right:0;padding-right:0;}
.v4 .phead-marks i{color:var(--gold);font-size:11px;flex-shrink:0;}

@media(max-width:760px){
  .v4 .phead-marks{grid-template-columns:1fr;}
  .v4 .phead-marks span{border-right:0;border-bottom:1px solid var(--rule-inv);padding:11px 0;}
  .v4 .phead-marks span:last-child{border-bottom:0;}
}

/* =============================================================================
   EDITORIAL CARDS  - photo on top, name, one line, a View link. Used for the
   homepage sector index and anywhere else a set of pages needs listing.
   ========================================================================== */
.v4 .wcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,32px);}
.v4 .wcard{
  display:flex;flex-direction:column;background:var(--paper-2);
  border:1px solid var(--rule-soft);border-radius:0;overflow:hidden;
  transition:border-color .3s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.v4 .wcard:hover,.v4 .wcard:focus-visible{border-color:var(--gold);transform:translateY(-4px);outline:none;}
.v4 .wc-im{display:block;overflow:hidden;background:var(--ink);}
.v4 .wc-im img{width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform .7s cubic-bezier(.16,1,.3,1);}
.v4 .wcard:hover .wc-im img,.v4 .wcard:focus-visible .wc-im img{transform:scale(1.05);}
.v4 .wc-bd{display:flex;flex-direction:column;flex:1;padding:clamp(18px,1.9vw,24px);}
.v4 .wcard h3{font-size:clamp(19px,1.6vw,23px);line-height:1.15;margin-bottom:9px;}
.v4 .wc-d{display:block;font-size:14.5px;line-height:1.55;color:var(--body);flex:1;}
.v4 .wc-meta{display:block;font-size:12.5px;color:var(--body);margin-top:10px;
  padding-top:10px;border-top:1px solid var(--rule-soft);}
.v4 .wc-meta .sep{color:var(--rule);margin:0 7px;}
.v4 .wc-go{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dp);
}
.v4 .wc-go i{font-size:9px;transition:transform .35s ease;}
.v4 .wcard:hover .wc-go i,.v4 .wcard:focus-visible .wc-go i{transform:translateX(5px);}

@media(max-width:1020px){ .v4 .wcards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:620px){ .v4 .wcards{grid-template-columns:1fr;} }

/* =============================================================================
   PROCESS FLOW  - one line running top to bottom with a marked start and a
   marked finish, so it is obvious where a process begins and where it ends.
   Same shape on every screen; only the row layout widens on desktop.
   ========================================================================== */
.v4 .flow{position:relative;padding-left:0;}
.v4 .flow-cap{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:18px;
  font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dp);}
.v4 .flow-cap .dot{justify-self:center;width:9px;height:9px;border-radius:50%;
  background:var(--gold-dp);}
.v4 .flow-cap.end .dot{width:13px;height:13px;background:var(--ink);}

.v4 .flow-list{list-style:none;position:relative;margin:0;padding:6px 0;}
/* the line itself, drawn through the centre of the numerals */
.v4 .flow-list::before{content:"";position:absolute;left:17px;top:0;bottom:0;width:1px;
  background:var(--rule);}
.v4 .flow-list li{position:relative;display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:start;gap:18px;padding:13px 0;}
.v4 .flow-list .n{
  grid-row:1;justify-self:center;align-self:start;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--rule);
  background:var(--paper-2);color:var(--ink);font-family:var(--display);font-size:16px;
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
  transform:translateY(-4px);
}
.v4 .flow-list .t{padding-top:3px;}
.v4 .flow-list h3{font-size:19px;margin:0 0 3px;}
.v4 .flow-list p{font-size:14.5px;line-height:1.5;margin:0;max-width:56ch;}

/* ---- horizontal variant -------------------------------------------------
   On a wide page the vertical flow leaves half the section empty, so product
   pages run it left to right instead. The kit pages keep the vertical form,
   where it sits in a narrow column beside the gallery. */
@media(min-width:901px){
  .v4 .flow.across .flow-list{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(20px,2.6vw,40px);padding:0;
  }
  /* the connecting line runs through the centre of the numerals */
  .v4 .flow.across .flow-list::before{
    left:17px;right:17px;top:17px;bottom:auto;width:auto;height:1px;
  }
  .v4 .flow.across .flow-list li{display:block;padding:0;}
  .v4 .flow.across .flow-list .n{margin-bottom:18px;transform:none;justify-self:start;}
  .v4 .flow.across .flow-list .t{padding-top:0;}
  .v4 .flow.across .flow-list p{max-width:34ch;}
  .v4 .flow.across .flow-cap.start{margin-bottom:24px;}
  .v4 .flow.across .flow-cap.end{
    margin-top:26px;grid-template-columns:auto auto;justify-content:flex-end;gap:12px;
  }
}

@media(max-width:860px){
  .v4 .flow-list li{padding:12px 0;}
  .v4 .flow-list h3{font-size:18px;}
  .v4 .flow-cap{gap:14px;}
}

/* =============================================================================
   FLOATING BACK LINK  - mobile only
   Every inner page is long enough that once you have scrolled past the
   breadcrumb there is no way back to the parent short of the browser button.
   Sits bottom left, clear of the floating cart button on the right.
   ========================================================================== */
.v4 .p-back{
  display:none;position:fixed;left:16px;bottom:20px;z-index:120;
  align-items:center;gap:9px;background:var(--ink);color:#fff;
  border:1px solid var(--ink);padding:13px 18px;
  font-family:var(--text);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;box-shadow:0 10px 28px rgba(12,20,26,.3);
  min-height:44px;min-width:44px;justify-content:center;
}
.v4 .p-back i{font-size:11px;color:var(--gold);}
.v4 .p-back:hover,.v4 .p-back:focus{color:var(--gold-lt);}
@media(max-width:1020px){ .v4 .p-back{display:inline-flex;} }
@media(max-width:400px){ .v4 .p-back{padding:13px 15px;letter-spacing:.1em;} }

/* =============================================================================
   CONTACT PAGE
   ========================================================================== */
.v4 .ct-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,4.5vw,72px);align-items:start;}
@media(max-width:900px){ .v4 .ct-grid{grid-template-columns:1fr;} }

.v4 .ct-side h2{font-size:clamp(26px,3.1vw,40px);line-height:1.12;margin-bottom:16px;max-width:18ch;}
.v4 .ct-side h2 em{color:var(--gold-dp);}
.v4 .ct-lead{font-size:16px;max-width:52ch;margin-bottom:clamp(24px,3vw,34px);}

.v4 .ct-lines{list-style:none;border-top:1px solid var(--rule);}
.v4 .ct-lines li{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);
  gap:18px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule);}
.v4 .ct-lines .k{font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--body);}
.v4 .ct-lines .v{font-size:15.5px;color:var(--ink);}
/* the email and phone are the whole point of this block, so they get a real
   tap target rather than a 22px line of text */
.v4 .ct-lines .v a{display:inline-flex;align-items:center;min-height:24px;padding-block:3px;margin-block:-3px;}
.v4 .ct-lines .v a{border-bottom:1px solid var(--gold);padding-bottom:2px;}
.v4 .ct-lines .v a:hover{color:var(--gold-dp);}
@media(max-width:520px){ .v4 .ct-lines li{grid-template-columns:1fr;gap:3px;} }

.v4 .ct-alt{margin-top:clamp(26px,3vw,38px);background:var(--paper-2);
  border:1px solid var(--rule);padding:clamp(20px,2.4vw,28px);}
.v4 .ct-alt h3{font-size:21px;margin-bottom:7px;}
.v4 .ct-alt p{font-size:14.5px;margin-bottom:18px;max-width:46ch;}

.v4 .ct-form{background:var(--ink);padding:clamp(24px,3vw,38px);}
.v4 .ct-form h2{color:#fff;font-size:clamp(23px,2.4vw,30px);margin-bottom:5px;}
.v4 .ct-fh{color:#8A99A4;font-size:14.5px;margin-bottom:24px;}
.v4 .ct-form label{font-family:var(--text);}
.v4 .ct-form input,.v4 .ct-form textarea{border-radius:0;font-family:var(--text);}
.v4 .ct-form .act{width:100%;justify-content:center;}
.v4 .ct-form .form-msg{margin-bottom:20px;}