/* =============================================================================
   The Brand Clan - HOMEPAGE sections
   Loaded only by index.html, after css/tbc-v4.css which carries the shared
   design system. Hero, logo rail, and the five numbered sections.
   ========================================================================== */

/* =============================================================================
   01  HERO
   ========================================================================== */
/* the photograph is pinned to the viewport, so the page slides over it */
.v4 .hero{position:relative;overflow:hidden;
  min-height:min(68vh,560px);display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--ink) url('../images/v4/hero-lanterns.jpg') 50% 40%/cover fixed no-repeat;}
/* weighted left: dark enough to read white type over, while the right hand
   side stays bright so the product is actually visible */
.v4 .hero-veil{position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(9,15,20,.88) 0%,rgba(9,15,20,.72) 26%,rgba(9,15,20,.34) 54%,rgba(9,15,20,.08) 82%,rgba(9,15,20,.02) 100%),
    linear-gradient(to top,rgba(9,15,20,.6),transparent 44%);}
.v4 .hero-inner{position:relative;z-index:2;width:100%;
  padding-top:clamp(40px,5vw,62px);padding-bottom:clamp(20px,2.2vw,28px);}

.v4 .hero-kick{display:flex;align-items:center;gap:16px;color:var(--gold);margin-bottom:clamp(14px,1.8vw,20px);}
.v4 .hero-kick .bar{width:clamp(36px,7vw,86px);height:1px;background:var(--gold);display:block;}
.v4 .hero-kick span.t{font-size:10.5px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;}

.v4 .hero h1{
  color:#fff;font-size:clamp(32px,4.9vw,65px);line-height:1.03;letter-spacing:-.016em;
  max-width:15ch;margin-bottom:clamp(14px,1.8vw,22px);
}
.v4 .hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;}
.v4 .hero h1 .ln>span{display:block;}
.v4 .hero h1 em{color:var(--gold-lt);}
.v4 .hero-sub{color:#CFD8DE;font-size:clamp(14.5px,1.35vw,17px);max-width:52ch;line-height:1.55;}

/* the three routes, set as an index rather than a row of buttons */
.v4 .routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(22px,2.8vw,34px);border-top:1px solid var(--rule-inv);}
/* padded on BOTH sides so the label never sits hard against a divider */
.v4 .route{
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:clamp(14px,1.5vw,18px) clamp(20px,2.4vw,32px);
  border-right:1px solid var(--rule-inv);transition:background .4s ease;
}
.v4 .route:first-child{padding-left:0;}
.v4 .route:last-child{border-right:0;padding-right:0;}
.v4 .route::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;
  background:var(--gold);transition:width .5s cubic-bezier(.16,1,.3,1);}
.v4 .route:hover::after,.v4 .route:focus-visible::after{width:100%;}
.v4 .route .rn{font-family:var(--display);font-size:12px;color:var(--gold);letter-spacing:.06em;}
.v4 .route .rt{font-family:var(--display);font-size:clamp(18px,1.9vw,25px);color:#fff;line-height:1.12;
  display:flex;align-items:baseline;gap:10px;transition:transform .4s cubic-bezier(.16,1,.3,1);}
.v4 .route .rt i{font-size:.48em;color:var(--gold);transition:transform .4s ease;}
.v4 .route:hover .rt{transform:translateX(7px);}
.v4 .route:hover .rt i{transform:translateX(4px);}
.v4 .route .rd{font-size:12.5px;color:#98A6B0;line-height:1.42;}
.v4 .route.lead .rt{color:var(--gold-lt);}
.v4 .route.lead .rn::after{content:" / start here";color:#7C8B96;letter-spacing:.14em;
  font-family:var(--text);font-size:9px;text-transform:uppercase;font-weight:700;}

@media(max-width:760px){
  .v4 .hero{min-height:auto;}
  .v4 .hero-kick span.t{font-size:9.5px;letter-spacing:.2em;}
  .v4 .routes{grid-template-columns:1fr;}
  .v4 .route{border-right:0;border-bottom:1px solid var(--rule-inv);padding:16px 0;}
  .v4 .route:last-child{border-bottom:0;}
  .v4 .route .rd{display:none;}
  .v4 .route .rt{font-size:21px;}
}

/* one orchestrated page load */
@media(max-width:1020px){
  /* iOS ignores fixed attachment, so let it scroll normally there */
  .v4 .hero{background-attachment:scroll;}
}

@media (prefers-reduced-motion:no-preference){
  html.js .v4 .hero h1 .ln>span{transform:translateY(112%);animation:v4rise 1.05s cubic-bezier(.16,1,.3,1) forwards;}
  html.js .v4 .hero h1 .ln:nth-child(1)>span{animation-delay:.12s;}
  html.js .v4 .hero h1 .ln:nth-child(2)>span{animation-delay:.22s;}
  html.js .v4 .hero h1 .ln:nth-child(3)>span{animation-delay:.32s;}
  html.js .v4 .hero-kick,
  html.js .v4 .hero-sub,
  html.js .v4 .routes{opacity:0;animation:v4fade .9s ease forwards;}
  html.js .v4 .hero-kick{animation-delay:.05s;}
  html.js .v4 .hero-sub{animation-delay:.46s;}
  html.js .v4 .routes{animation-delay:.6s;}
}
@keyframes v4rise{to{transform:none;}}
@keyframes v4fade{to{opacity:1;}}
@keyframes v4settle{to{transform:none;}}

/* =============================================================================
   LOGO RAIL  - brands whose events these products have been printed for.
   Light ground: logos read far better on paper than on ink.
   ========================================================================== */
.v4 .ticker{background:var(--paper-2);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);overflow:hidden;padding:22px 0;}
.v4 .ticker-track{display:flex;width:max-content;animation:v4marq 52s linear infinite;}
.v4 .ticker:hover .ticker-track{animation-play-state:paused;}
.v4 .ticker .lg{display:flex;align-items:center;justify-content:center;
  padding:0 clamp(26px,3.4vw,52px);flex-shrink:0;}
.v4 .ticker .lg img{width:auto;max-width:none;object-fit:contain;
  filter:grayscale(1);opacity:.5;transition:filter .3s ease,opacity .3s ease;}
/* optically matched: a square mark needs more height than a wordmark */
.v4 .ticker .lg-cc  img{height:30px;}
.v4 .ticker .lg-ms  img{height:25px;}
.v4 .ticker .lg-aq  img{height:31px;}
.v4 .ticker .lg-ola img{height:48px;}
.v4 .ticker .lg-hb  img{height:38px;}
.v4 .ticker:hover .lg img{filter:none;opacity:.9;}
@keyframes v4marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){ .v4 .ticker-track{animation:none;} }
@media(max-width:640px){
  .v4 .ticker{padding:16px 0;}
  .v4 .ticker .lg{padding:0 22px;}
  .v4 .ticker .lg-cc img{height:24px;}
  .v4 .ticker .lg-ms img{height:20px;}
  .v4 .ticker .lg-aq img{height:25px;}
  .v4 .ticker .lg-ola img{height:32px;}
  .v4 .ticker .lg-hb img{height:27px;}
}

/* =============================================================================
   01  WHY  - who we are and Build My Setup, merged. Everything reads down the
   left: statement, copy, the three steps, then the button. The photograph
   holds the right half and bleeds off the edge of the page.
   ========================================================================== */
.v4 .why{position:relative;overflow:hidden;}
.v4 .why-media{position:absolute;top:0;bottom:0;right:0;width:min(38vw,560px);}
.v4 .why-media img{width:100%;height:100%;object-fit:cover;object-position:52% 42%;}
/* a short fade so the photograph meets the paper instead of butting into it */
.v4 .why-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--paper) 0%,rgba(243,240,233,.55) 12%,rgba(243,240,233,0) 34%);}
.v4 .why .shell{position:relative;z-index:1;}
.v4 .why-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);}
.v4 .why-copy{grid-column:1;}

.v4 .why-copy h2{font-size:clamp(26px,3.1vw,40px);line-height:1.12;margin-bottom:16px;max-width:24ch;}
.v4 .why-copy h2 em{color:var(--gold-dp);}
.v4 .why-copy p{font-size:16px;max-width:64ch;margin-bottom:12px;}

.v4 .why-steps{list-style:none;display:flex;flex-direction:column;margin-top:26px;}
.v4 .why-steps li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:13px 0;border-top:1px solid var(--rule);}
.v4 .why-steps li:last-child{border-bottom:1px solid var(--rule);}
.v4 .why-steps .s{font-family:var(--display);font-size:13px;color:var(--gold-dp);}
.v4 .why-steps .b{color:var(--ink);font-size:15.5px;font-weight:600;}
.v4 .why-steps .b small{display:block;color:var(--body);font-weight:400;font-size:14px;
  margin-top:2px;line-height:1.5;}

.v4 .why-acts{margin-top:24px;display:flex;flex-wrap:wrap;gap:15px;align-items:center;}
.v4 .why-note{font-size:13px;color:var(--body);}

@media(max-width:1020px){
  .v4 .why-media{width:min(34vw,340px);}
  .v4 .why-grid{grid-template-columns:minmax(0,1fr) minmax(0,.24fr);}
}
@media(max-width:760px){
  /* the photograph becomes a band under the copy rather than a column */
  .v4 .why{display:flex;flex-direction:column;padding-bottom:0;}
  .v4 .why .shell{order:0;}
  /* flush to the bottom edge, so it reads as the join into the next section */
  .v4 .why-media{order:1;position:relative;width:auto;height:200px;margin-top:34px;}
  .v4 .why-media::after{background:linear-gradient(180deg,var(--paper) 0%,rgba(243,240,233,0) 22%);}
  .v4 .why-grid{grid-template-columns:1fr;}
}

/* =============================================================================
   02  EVENT KITS  - the index. Hovering a line changes the plate.
   ========================================================================== */
.v4 .kx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.58fr);
  gap:clamp(24px,3.4vw,50px);align-items:start;}

.v4 .kx-list{border-top:1px solid var(--rule);}
.v4 .krow{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:clamp(14px,2.4vw,28px);align-items:center;
  padding:clamp(13px,1.5vw,19px) 0;border-bottom:1px solid var(--rule);
  color:var(--ink);transition:padding-left .45s cubic-bezier(.16,1,.3,1);
}
.v4 .krow::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;
  background:var(--gold-dp);transition:width .5s cubic-bezier(.16,1,.3,1);}
.v4 .krow:hover,.v4 .krow:focus-visible{padding-left:clamp(8px,1.5vw,20px);outline:none;}
.v4 .krow:hover::before,.v4 .krow:focus-visible::before{width:100%;}
.v4 .krow .kn{font-family:var(--display);font-size:12.5px;color:var(--gold-dp);
  font-feature-settings:"tnum";width:2.2em;flex-shrink:0;}
.v4 .krow .kt{font-family:var(--display);font-size:clamp(20px,2.3vw,29px);line-height:1.1;
  color:var(--ink);letter-spacing:-.015em;}
.v4 .krow .kw{display:block;font-family:var(--text);font-size:13px;color:var(--body);
  letter-spacing:0;margin-top:3px;}
.v4 .krow .kc{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--body);white-space:nowrap;}
.v4 .krow .kgo{width:34px;height:34px;border:1px solid var(--rule);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink);
  transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease;flex-shrink:0;}
.v4 .krow:hover .kgo,.v4 .krow:focus-visible .kgo{background:var(--ink);border-color:var(--ink);
  color:#fff;transform:translateX(4px);}
.v4 .krow .kthumb{display:none;}

/* the plate that swaps */
.v4 .kx-stage{position:relative;}
.v4 .kx-intro{font-size:15.5px;color:var(--body);margin-bottom:18px;}
.v4 .kx-frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink);}
.v4 .kx-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);transition:opacity .6s ease,transform 1.1s cubic-bezier(.16,1,.3,1);}
.v4 .kx-frame img.on{opacity:1;transform:none;}
.v4 .kx-cap{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-top:14px;border-top:1px solid var(--rule);margin-top:14px;}
.v4 .kx-cap .a{font-family:var(--display);font-size:17px;color:var(--ink);}
.v4 .kx-cap .b{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dp);}

.v4 .kx-foot{margin-top:clamp(20px,2.2vw,28px);display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between;}
.v4 .kx-foot p{font-size:14.5px;max-width:48ch;}

@media(max-width:900px){
  .v4 .kx{grid-template-columns:1fr;}
  .v4 .kx-stage{display:none;}
  .v4 .krow{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:
    "n t g" "m m m";row-gap:16px;}
  .v4 .krow .kn{grid-area:n;}
  .v4 .krow .kt{grid-area:t;}
  .v4 .krow .kgo{grid-area:g;}
  .v4 .krow .kc{display:none;}
  .v4 .krow .kthumb{grid-area:m;display:block;overflow:hidden;}
  .v4 .krow .kthumb img{width:100%;aspect-ratio:16/9;object-fit:cover;}
}

/* =============================================================================
   05  CONTACT  - "not sure what you need" and the form are one section now
   ========================================================================== */
/* the photograph is fixed to the viewport, so it slides under the section as
   you scroll and the flat dark plate is gone */
.v4 .talk{position:relative;overflow:hidden;
  background:var(--ink-2) url('../images/v4/hero-lanterns.jpg') 50% 55%/cover fixed no-repeat;}
.v4 .talk::after{content:"";position:absolute;inset:0;
  background:linear-gradient(104deg,rgba(9,15,20,.9) 0%,rgba(9,15,20,.74) 42%,rgba(9,15,20,.52) 100%);}
@media(max-width:1020px){
  /* iOS ignores fixed attachment and renders it badly, so scroll it there */
  .v4 .talk{background-attachment:scroll;}
}
.v4 .talk::before{content:"";position:absolute;top:-220px;left:-180px;width:640px;height:640px;
  border-radius:50%;background:radial-gradient(circle,rgba(197,168,128,.11),transparent 66%);}
.v4 .talk .shell{position:relative;z-index:1;}
.v4 .talk .marker .ln{background:var(--rule-inv);}
.v4 .talk .marker .tag{color:#fff;}
.v4 .talk .marker .no{color:var(--gold);}

.v4 .talk-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(34px,5vw,76px);align-items:start;}
.v4 .talk h2{color:#fff;font-size:clamp(27px,3.4vw,44px);max-width:14ch;}
.v4 .talk h2 em{color:var(--gold-lt);}
.v4 .talk-sub{color:#A9B7C1;font-size:16px;margin-top:14px;max-width:46ch;}
.v4 .talk-list{list-style:none;margin-top:22px;border-top:1px solid var(--rule-inv);}
.v4 .talk-list li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--rule-inv);color:#B9C6CF;font-size:14.5px;align-items:baseline;}
.v4 .talk-list i{color:var(--gold);font-size:11px;}
.v4 .talk-alt{margin-top:20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.v4 .talk-alt .or{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#6F7E8A;font-weight:700;}

.v4 .talk-form{background:rgba(9,15,20,.72);border:1px solid rgba(197,168,128,.3);
  padding:clamp(22px,3vw,36px);}
.v4 .talk-form h3{color:#fff;font-size:22px;margin-bottom:4px;}
.v4 .talk-form .fh{color:#8A99A4;font-size:14px;margin-bottom:22px;}
.v4 .talk-form label{font-family:var(--text);}
.v4 .talk-form input,.v4 .talk-form textarea{border-radius:0;font-family:var(--text);}
.v4 .talk-form .act{width:100%;justify-content:center;}
@media(max-width:860px){ .v4 .talk-grid{grid-template-columns:1fr;} }

/* the homepage lays the shared flow beside a photograph that bleeds off the
   left edge, the mirror of section 01 */
.v4 .order{position:relative;overflow:hidden;}
.v4 .order-media{position:absolute;top:0;bottom:0;left:0;width:min(38vw,560px);}
.v4 .order-media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;}
.v4 .order-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(270deg,var(--paper-2) 0%,rgba(251,250,247,.55) 12%,rgba(251,250,247,0) 34%);}
.v4 .order .shell{position:relative;z-index:1;}
.v4 .order-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.62fr);}
.v4 .order-body{grid-column:2;}
.v4 .order-body h2{font-size:clamp(27px,3.4vw,44px);margin-bottom:12px;}
.v4 .order-body h2 em{color:var(--gold-dp);}
/* the promise sits in the same column as the steps, so it lines up with them */
.v4 .order-lead{font-size:16px;max-width:52ch;margin-bottom:clamp(20px,2.4vw,30px);}

@media(max-width:1020px){
  .v4 .order-media{width:min(30vw,300px);}
  .v4 .order-grid{grid-template-columns:minmax(0,.22fr) minmax(0,1fr);}
}
@media(max-width:860px){
  .v4 .order{display:flex;flex-direction:column;padding-bottom:0;}
  .v4 .order .shell{order:0;}
  .v4 .order-media{order:1;position:relative;width:auto;height:200px;margin-top:34px;}
  .v4 .order-media::after{background:linear-gradient(180deg,var(--paper-2) 0%,rgba(251,250,247,0) 22%);}
  .v4 .order-grid{grid-template-columns:1fr;}
  .v4 .order-body{grid-column:1;}
}