/* ==========================================================================
   AJ & CO — homepage variant 2 ("the atelier")
   Loaded ONLY by index_2.html, on top of style.css.

   WHY A SEPARATE FILE: style.css is shared by 36 pages. Adding ~250 lines of
   layout that exactly one of them uses would put the cost on all of them, and
   would bury the shared component set under a one-page special case. The trade
   is one extra request on one page.

   WHAT IS DIFFERENT ABOUT THIS PAGE: index.html is the conventional luxury
   e-commerce stack — full-bleed hero, category tiles, product grids, testimonial
   cards. It sells the catalogue. This variant leads with the commission, because
   that is what the workshop actually is: most pieces are made to order, every
   timepiece is quoted, and the brand's own channel is bespoke-led. So the devices
   change too — a split hero instead of a centred one, one piece in a spotlight
   instead of a four-up grid, budgets as type instead of tiles, one large quote
   instead of six cards.

   EVERY COLOUR IS A TOKEN. The page works in all three palettes; nothing here
   hardcodes a brand colour. The only literals are white-on-dark text and the
   alphas over dark grounds, which have to be fixed to stay legible.
   ========================================================================== */

/* Delivered-work portfolio */
.h2-delivered-hero h1 { color: #fff; }
.h2-delivered-hero{min-height:calc(100vh - 118px);position:relative;display:flex;align-items:flex-end;overflow:hidden;background:#080808;color:#fff}.h2-delivered-hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.h2-delivered-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.83),rgba(0,0,0,.38) 52%,rgba(0,0,0,.08)),linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%)}.h2-delivered-hero-copy{position:relative;z-index:1;padding-bottom:clamp(5rem,9vw,8rem)}.h2-delivered-hero .ib-eyebrow{color:rgba(255,255,255,.72)}.h2-delivered-hero h1{max-width:12ch;margin:.8rem 0 1.3rem;font-size:clamp(3.2rem,7.5vw,7rem);font-weight:300;line-height:.9;letter-spacing:-.055em}.h2-delivered-hero-copy>p:not(.ib-eyebrow){max-width:52ch;color:rgba(255,255,255,.78);line-height:1.75;margin-bottom:1.75rem}.h2-ghost-btn{color:#fff;border:1px solid rgba(255,255,255,.55)}.h2-ghost-btn:hover{color:#111;background:#fff}.h2-scroll-cue{position:absolute;z-index:2;right:clamp(1.5rem,5vw,5rem);bottom:2rem;color:#fff;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase}.h2-scroll-cue span{margin-left:.7rem;color:var(--ib-accent)}
.h2-intro,.h2-principles{background:#f3f0e9}.h2-intro-grid{display:grid;grid-template-columns:1fr 2fr;gap:2rem;align-items:start}.h2-intro h2,.h2-principles h2,.h2-cta h2{font-size:clamp(2.2rem,4.8vw,4.6rem);font-weight:300;line-height:1;letter-spacing:-.045em;margin:0 0 1.5rem}.h2-intro-grid>div>p{max-width:58ch;color:var(--ib-body);line-height:1.8}
.h2-work-grid{display:grid;grid-template-columns:1fr 1fr}.h2-work-card{min-width:0;background:#0d0d0d;color:#fff}.h2-work-card:nth-child(4n+2),.h2-work-card:nth-child(4n+3){background:#171717}.h2-work-media{position:relative;height:min(72vw,760px);overflow:hidden;background:#111}.h2-work-media video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}.h2-work-card:hover video{transform:scale(1.025)}.h2-work-number,.h2-work-status{position:absolute;top:1.5rem;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase}.h2-work-number{left:1.5rem}.h2-work-status{right:1.5rem;padding:.45rem .7rem;border:1px solid rgba(255,255,255,.45)}.h2-work-copy{padding:clamp(1.5rem,4vw,3.5rem)}.h2-work-copy .ib-eyebrow{color:rgba(255,255,255,.52)}.h2-work-copy h3{font-size:clamp(1.5rem,2.8vw,2.5rem);font-weight:300;margin:.55rem 0 .8rem}.h2-work-copy>p:last-child{max-width:50ch;color:rgba(255,255,255,.62)}
.h2-principles-head{max-width:760px;margin-bottom:clamp(3rem,6vw,5rem)}.h2-principles-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ib-line)}.h2-principles-grid>div{padding:2rem 2rem 0 0}.h2-principles-grid>div+div{padding-left:2rem;border-left:1px solid var(--ib-line)}.h2-principles-grid span{display:block;color:var(--ib-accent);font-size:.72rem;margin-bottom:2.5rem}.h2-principles-grid h3{font-size:1.05rem;margin-bottom:.8rem}.h2-principles-grid p{color:var(--ib-muted);font-size:.86rem;line-height:1.7}
.h2-cta{display:grid;grid-template-columns:1.1fr .9fr;min-height:620px;background:#fff}.h2-cta-image{background-size:cover;background-position:center;min-height:460px}.h2-cta-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(3rem,7vw,7rem)}.h2-cta-copy p:not(.ib-eyebrow){max-width:45ch;color:var(--ib-muted);line-height:1.8;margin-bottom:1.7rem}
.h2-category-nav{padding:2rem 0 2.4rem;background:#fff;border-bottom:1px solid var(--ib-line)}.h2-category-label{display:block;margin-bottom:1.25rem;color:var(--ib-muted);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}.h2-category-links{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.h2-category-links a{display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem 1rem 0;border-top:1px solid var(--ib-line);color:var(--ib-ink);font-size:clamp(.9rem,1.5vw,1.1rem)}.h2-category-links a:nth-child(3n+2),.h2-category-links a:nth-child(3n+3){padding-left:1.1rem;border-left:1px solid var(--ib-line)}.h2-category-links span{color:var(--ib-accent);font-size:.6rem}.h2-category-links b{margin-left:auto;font-weight:400}.h2-category-links a:hover{color:var(--ib-accent)}
.h2-shop{background:#fff}.h2-shop-head{display:grid;grid-template-columns:1.25fr .75fr;gap:2rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4.5rem)}.h2-shop-head h2{margin:0;font-size:clamp(2.2rem,4.7vw,4.4rem);font-weight:300;line-height:1;letter-spacing:-.045em}.h2-shop-head>p{max-width:42ch;color:var(--ib-muted);line-height:1.75}.h2-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem)}.h2-product{border:1px solid var(--ib-line-soft);background:#fff;transition:transform .25s ease,box-shadow .25s ease}.h2-product:hover{transform:translateY(-5px);box-shadow:0 18px 50px rgba(20,20,20,.1)}.h2-product-media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ib-tile)}.h2-product-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}.h2-product:hover .h2-product-media img{transform:scale(1.035)}.h2-product-media>span{position:absolute;left:1rem;top:1rem;padding:.45rem .65rem;background:rgba(255,255,255,.92);color:#111;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase}.h2-product-body{padding:1.3rem}.h2-product-category{margin:0 0 .55rem;color:var(--ib-accent);font-size:.61rem;letter-spacing:.14em;text-transform:uppercase}.h2-product h3{margin:0 0 .5rem;font-size:1.1rem;font-weight:400}.h2-product h3 a{color:var(--ib-ink)}.h2-product-sub{min-height:2.5em;color:var(--ib-muted);font-size:.78rem}.h2-product dl{margin:1.1rem 0;border-top:1px solid var(--ib-line-soft)}.h2-product dl div{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--ib-line-soft);font-size:.68rem}.h2-product dt{color:var(--ib-muted);font-weight:400;text-transform:uppercase;letter-spacing:.08em}.h2-product dd{margin:0;text-align:right;color:var(--ib-ink)}.h2-product-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.25rem;font-size:.72rem}.h2-product-foot strong{font-weight:500}.h2-product-foot a{color:var(--ib-accent);white-space:nowrap}.h2-shop-all{text-align:center;margin-top:3rem}
@media(max-width:767.98px){.h2-delivered-hero{min-height:82vh}.h2-delivered-shade{background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.08) 75%)}.h2-delivered-hero h1{font-size:clamp(3rem,15vw,4.8rem)}.h2-scroll-cue{display:none}.h2-intro-grid,.h2-work-grid,.h2-principles-grid,.h2-cta{grid-template-columns:1fr}.h2-work-media{height:125vw;max-height:680px}.h2-principles-grid>div+div{padding-left:0;border-left:0;border-top:1px solid var(--ib-line)}.h2-principles-grid>div{padding:1.5rem 0}.h2-principles-grid span{margin-bottom:1rem}.h2-cta-image{min-height:68vw}}
@media(max-width:991.98px){.h2-product-grid{grid-template-columns:repeat(2,1fr)}.h2-category-links{grid-template-columns:repeat(2,1fr)}.h2-category-links a:nth-child(n){padding-left:0;border-left:0}.h2-category-links a:nth-child(even){padding-left:1rem;border-left:1px solid var(--ib-line)}}
@media(max-width:767.98px){.h2-shop-head{grid-template-columns:1fr}.h2-product-grid{grid-template-columns:1fr}.h2-category-links{grid-template-columns:1fr}.h2-category-links a:nth-child(n){padding-left:0;border-left:0}.h2-product-sub{min-height:0}}

/* ==========================================================================
   1. Split hero
   Asymmetric on purpose: type on the page ground, art bleeding off the right
   edge. The conventional hero centres text over a darkened image, which reads
   as a banner. This reads as a page.
   ========================================================================== */
.h2-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
  border-bottom: 1px solid var(--ib-line-soft);
}
.h2-hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 4.5rem);
  min-height: min(78vh, 700px);
}
.h2-hero-copy h1 {
  font-size: clamp(2.125rem, 4.6vw, 3.5rem);
  font-weight: 300; line-height: 1.06; letter-spacing: -.02em;
  margin: 0 0 1.25rem; max-width: 20ch;
}
.h2-hero-copy .ib-lede { max-width: 44ch; margin-bottom: 1.75rem; }
.h2-hero-art { position: relative; overflow: hidden; background: var(--ib-hero-bg); }
.h2-hero-art img,
.h2-hero-art video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* The three facts that answer "what is this place" before any scrolling. */
.h2-facts {
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid var(--ib-line); margin-top: 2.25rem;
}
.h2-facts > div {
  flex: 1 1 8rem; padding: .9375rem 1.25rem .9375rem 0;
}
.h2-facts > div + div { padding-left: 1.25rem; border-left: 1px solid var(--ib-line); }
.h2-fact-v {
  font-size: 1.0625rem; color: var(--ib-ink); font-weight: 400; line-height: 1.2;
}
.h2-fact-l {
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ib-muted); margin-top: .25rem;
}

/* ==========================================================================
   2. Trending marquee
   Replaces the "worn by" logo strip. Motion earns its place here because the
   content is a list of terms with no hierarchy — a static row of them is a
   wall, a moving row is a glance.
   ========================================================================== */
.h2-marquee {
  background: var(--ib-deep); color: rgba(255, 255, 255, .82);
  overflow: hidden; padding: .875rem 0;
  /* Fade the ends so terms enter and leave rather than getting clipped. */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.h2-marquee-track {
  display: flex; width: max-content;
  animation: h2-drift 46s linear infinite;
}
.h2-marquee:hover .h2-marquee-track { animation-play-state: paused; }
.h2-marquee a {
  display: inline-flex; align-items: center; gap: 2.25rem;
  padding-right: 2.25rem;
  font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82); white-space: nowrap;
}
.h2-marquee a:hover { color: #fff; }
.h2-marquee a::after {
  content: ""; width: 5px; height: 5px; background: var(--ib-accent);
  transform: rotate(45deg); flex: 0 0 5px;
}
@keyframes h2-drift {
  /* -50% because the track holds the list twice; the second copy is what makes
     the loop seamless. */
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .h2-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .h2-marquee-track { animation: none; }
}

/* ==========================================================================
   3. Commission process
   Oversized numerals, hairline separated. The shared .ib-step is a top-bordered
   trio; this is a four-across sequence that reads as an order of operations.
   ========================================================================== */
.h2-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.h2-step { padding: 1.75rem 1.5rem 1.75rem 0; }
.h2-step + .h2-step { padding-left: 1.5rem; border-left: 1px solid var(--ib-line); }
.h2-step-n {
  font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1;
  font-weight: 200; color: var(--ib-accent); margin-bottom: .875rem;
  font-variant-numeric: tabular-nums;
}
.h2-step h3 { font-size: .9375rem; margin: 0 0 .5rem; }
.h2-step p { font-size: .8125rem; margin: 0; color: var(--ib-body); }

/* ==========================================================================
   4. Spotlight — one piece, at size
   The grid on index.html shows four products small. This shows one large, with
   its real specification, which is how a bespoke workshop actually presents a
   piece. Content comes from the catalogue, so it cannot drift from the PDP.
   ========================================================================== */
.h2-spot { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.h2-spot-media { position: relative; background: var(--ib-tile); aspect-ratio: 4 / 3; overflow: hidden; }
.h2-spot-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h2-spot-media .ib-card-badge { top: 1rem; left: 1rem; }
.h2-spot h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.125rem); font-weight: 300;
  letter-spacing: -.015em; margin: 0 0 .5rem;
}
.h2-spot-sub { color: var(--ib-muted); font-size: .875rem; margin: 0 0 1.25rem; }
.h2-spot-price { font-size: 1.125rem; color: var(--ib-ink); margin-bottom: 1.5rem; }
.h2-spot dl {
  margin: 0 0 1.75rem; display: grid; grid-template-columns: auto 1fr;
  gap: .5rem 1.25rem; font-size: .8125rem;
}
.h2-spot dt {
  color: var(--ib-muted); font-weight: 400; white-space: nowrap;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  padding-top: .0625rem;
}
.h2-spot dd { margin: 0; color: var(--ib-ink); }

/* ==========================================================================
   5. Editorial rows
   Alternating 55/45 splits rather than equal tiles, so the eye moves down the
   page instead of scanning across it.
   ========================================================================== */
.h2-ed {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.h2-ed + .h2-ed { margin-top: clamp(3rem, 7vw, 5.5rem); }
.h2-ed--flip .h2-ed-media { order: 2; }
.h2-ed-media { position: relative; overflow: hidden; background: var(--ib-hero-bg); aspect-ratio: 5 / 4; }
.h2-ed-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h2-ed-body h2 {
  font-size: clamp(1.375rem, 2.6vw, 2rem); font-weight: 300;
  letter-spacing: -.015em; margin: 0 0 1rem; max-width: 24ch;
}
.h2-ed-body p { max-width: 50ch; }

/* ==========================================================================
   6. Budgets as type
   No imagery at all. A price band is a number, and a photograph of a chain
   tells you nothing about which band it is in — so the rows carry the figure,
   a live count, and nothing else.
   ========================================================================== */
.h2-bands { border-top: 1px solid var(--ib-line); }
.h2-band {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 1.125rem .25rem; border-bottom: 1px solid var(--ib-line);
  color: var(--ib-ink); transition: padding-left .18s ease, background-color .18s ease;
}
/* Four items on one line is a promise the row cannot keep on a narrow screen.
   Wrapping is the safety net; the grid at the bottom of this file is the
   intended small-screen layout. Without either, the arrow pushed 16px past the
   viewport and gave the whole document a horizontal scrollbar. */
.h2-band-note { min-width: 0; }
.h2-band:hover { background: var(--ib-tint); padding-left: 1rem; color: var(--ib-ink); }
.h2-band-fig {
  font-size: clamp(1.125rem, 2.4vw, 1.625rem); font-weight: 300;
  letter-spacing: -.01em; flex: 0 0 auto;
}
.h2-band-note { font-size: .8125rem; color: var(--ib-muted); }
.h2-band-n {
  margin-left: auto; font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ib-muted); white-space: nowrap;
}
.h2-band-arrow { color: var(--ib-accent); flex: 0 0 auto; }

/* ==========================================================================
   7. One quote, rotating
   Six review cards is a wall nobody reads. One quote at size gets read, and
   the dots make it clear there are more.
   ========================================================================== */
.h2-quote { background: var(--ib-deep); color: rgba(255, 255, 255, .8); }
.h2-quote-in { max-width: 60ch; margin: 0 auto; text-align: center; }
.h2-quote blockquote {
  margin: 0 0 1.5rem; font-size: clamp(1.125rem, 2.4vw, 1.625rem);
  font-weight: 300; line-height: 1.45; color: #fff; letter-spacing: -.01em;
}
.h2-quote-stars { color: var(--ib-accent); letter-spacing: .18em; font-size: .8125rem; margin-bottom: 1.5rem; }
.h2-quote-who { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.h2-quote-dots { display: flex; gap: .5rem; justify-content: center; margin-top: 2rem; }
.h2-quote-dots button {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .28); cursor: pointer; transition: background-color .15s ease;
}
.h2-quote-dots button.is-on { background: var(--ib-accent); }

/* ==========================================================================
   8. Bench strip — full bleed, no container
   ========================================================================== */
.h2-bench { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.h2-bench figure { position: relative; margin: 0; overflow: hidden; background: var(--ib-hero-bg); }
.h2-bench img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.h2-bench figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.25rem 1.125rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72));
  color: #fff; font-size: .8125rem;
}
.h2-bench figcaption strong {
  display: block; font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .7);
  font-weight: 500; margin-bottom: .25rem;
}

/* ==========================================================================
   9. Visit — details beside a short form
   ========================================================================== */
.h2-visit { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.h2-visit-hours { font-size: .8125rem; }
.h2-visit-hours div { display: flex; justify-content: space-between; gap: 1rem; padding: .4375rem 0; border-bottom: 1px solid var(--ib-line-soft); }
.h2-visit-hours span { color: var(--ib-muted); }
.h2-visit-form { background: var(--ib-tint); padding: clamp(1.25rem, 3vw, 2rem); }

/* ==========================================================================
   10. Instagram, edge to edge
   ========================================================================== */
.h2-ig .ib-ig-grid { grid-template-columns: repeat(6, 1fr); gap: 2px; }

/* ==========================================================================
   Responsive
   Every two-column device collapses to one, and the ones that scrolled
   horizontally keep scrolling rather than stacking — a four-step sequence
   stacked vertically stops reading as a sequence.
   ========================================================================== */
@media (max-width: 991.98px) {
  .h2-steps { grid-template-columns: repeat(4, minmax(210px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; }
  .h2-step { scroll-snap-align: start; }
  .h2-spot, .h2-ed, .h2-visit { grid-template-columns: minmax(0, 1fr); }
  .h2-ed--flip .h2-ed-media { order: 0; }
  .h2-ig .ib-ig-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767.98px) {
  .h2-hero { grid-template-columns: minmax(0, 1fr); }
  /* Budget rows become two columns: figure and arrow on the first line, then
     the note and the count each on their own. Grid rather than flex because the
     placement is explicit and cannot be pushed out by a long label. */
  .h2-band { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; align-items: center; }
  .h2-band-fig { grid-column: 1; grid-row: 1; }
  .h2-band-arrow { grid-column: 2; grid-row: 1; }
  .h2-band-note { grid-column: 1 / -1; }
  .h2-band-n { grid-column: 1 / -1; margin-left: 0; }
  /* Art first on a phone: the image is the hook, and a screen of type above the
     fold with no picture reads as an error. */
  .h2-hero-art { order: -1; aspect-ratio: 4 / 3; position: relative; }
  .h2-hero-copy { min-height: 0; padding: 2.25rem 1.25rem 2.5rem; }
  .h2-facts > div { flex: 1 1 100%; padding: .75rem 0; border-top: 1px solid var(--ib-line-soft); }
  .h2-facts > div + div { padding-left: 0; border-left: 0; }
  .h2-bench { grid-template-columns: 1fr; }
  .h2-bench img { aspect-ratio: 16 / 10; }
  .h2-ig .ib-ig-grid { grid-template-columns: repeat(3, 1fr); }
}