/* Kit-level responsive grid rules. Inline styles hold everything else; these
   need media queries, so they live here and are keyed off data-grid. */
[data-grid]{display:grid}
/* Grid items default to min-width:auto, so one nowrap button or long word sets a
   floor wider than the phone and every child inherits it. Nothing here needs
   min-content sizing, so opt all tracks out. */
[data-grid]>*{min-width:0}
[data-grid="hero"]{grid-template-columns:1.02fr 1fr;align-items:center;column-gap:var(--space-6)}
[data-grid="split"]{grid-template-columns:1.15fr 1fr;gap:var(--space-8);align-items:center}
[data-grid="split-wide"]{grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:center}
[data-grid="split-art"]{grid-template-columns:1.25fr 1fr;gap:var(--space-9);align-items:start}
[data-grid="applications"]{grid-template-columns:0.75fr 1.45fr;gap:var(--space-9);align-items:center}
[data-grid="craft"]{grid-template-columns:1fr 1.05fr;gap:var(--space-9);align-items:center}
[data-grid="three"]{grid-template-columns:1.25fr 1fr 1fr;gap:var(--space-6)}
[data-grid="three-even"]{grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
[data-grid="four"]{grid-template-columns:repeat(4,1fr);gap:var(--gutter-wide)}
[data-grid="five"]{grid-template-columns:repeat(5,1fr);gap:var(--space-6)}
[data-grid="six"]{grid-template-columns:repeat(6,1fr);gap:var(--space-6)}
[data-grid="catalogue"]{grid-template-columns:repeat(2,1fr);gap:var(--space-9) var(--gutter-wide)}
[data-grid="pair"]{grid-template-columns:1fr 1fr;gap:var(--space-5)}
[data-grid="pair-wide"]{grid-template-columns:1fr 1fr;gap:var(--space-9) var(--gutter-wide)}
[data-grid="legal"]{grid-template-columns:0.5fr 1.5fr;gap:var(--space-9);align-items:start}
[data-grid="form"]{grid-template-columns:1fr 1fr;gap:var(--space-7) var(--space-6)}
[data-grid="contact"]{grid-template-columns:1.15fr 0.7fr;gap:var(--space-9);align-items:start}
[data-grid="footer"]{grid-template-columns:1.6fr repeat(4,1fr);gap:var(--gutter-wide);align-items:start}

@media (max-width:1180px){
  [data-grid="hero"],[data-grid="split"],[data-grid="split-wide"],[data-grid="split-art"],[data-grid="applications"],[data-grid="craft"],[data-grid="contact"],[data-grid="legal"]{grid-template-columns:1fr;gap:var(--space-8)}
  [data-grid="three"],[data-grid="three-even"]{grid-template-columns:1fr 1fr}
  [data-grid="four"]{grid-template-columns:1fr 1fr;gap:var(--space-7)}
  [data-grid="five"]{grid-template-columns:repeat(3,1fr)}
  [data-grid="six"]>*{grid-column:span 6 !important;padding-top:0 !important}
  [data-grid="catalogue"]>*{margin-top:0 !important}
  [data-grid="catalogue"]{grid-template-columns:1fr}
  [data-grid="footer"]{grid-template-columns:1fr 1fr;gap:var(--space-7)}
}
@media (max-width:720px){
  [data-grid="three"],[data-grid="three-even"],[data-grid="four"],[data-grid="five"],[data-grid="form"],[data-grid="pair"],[data-grid="pair-wide"],[data-grid="footer"]{grid-template-columns:1fr}
}

/* Hero: when the two columns collapse to one, the text column's bottom padding
   (--space-9) sits directly above the artwork column's top padding
   (--space-9), which is a full column-height gap between them. Collapse both
   sides so the artwork sits tight under the "Reflection…" line.
   Also drop the secondary artwork frame — its absolute overhang crashes into
   the crimson caption once the two columns share full width. */
@media (max-width:1180px){
  [data-grid="hero"]>*:first-child{padding-bottom:var(--space-4) !important}
  [data-grid="hero"]>*:last-child{padding-top:0 !important;padding-bottom:var(--space-7) !important}
  [data-hero-secondary]{display:none !important}
  /* The overhang caption is a desktop-only accent; at tablet width it covers
     almost the entire crimson frame, so drop it and let the artwork show. */
  [data-hero-caption]{display:none !important}
}

/* Overhanging glass captions: pull them back inside the plate once the
   surrounding split grid collapses, otherwise the negative offset overflows. */
@media (max-width:1180px){
  [data-overhang]{position:absolute !important;left:var(--space-5) !important;right:var(--space-5) !important;bottom:var(--space-5) !important;width:auto !important;max-width:none !important;animation:none !important}
  [data-caption-under]{right:var(--space-5) !important;bottom:var(--space-5) !important}
}

/* Pages added after the first build: spec rows, sub-nav and legal prose. */
@media (max-width:900px){
  [data-spec-row]{grid-template-columns:1fr !important;gap:var(--space-2) !important}
  [data-subnav]{gap:var(--space-5) !important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  [data-subnav]::-webkit-scrollbar{display:none}
  [data-subnav]>a{flex:none}
}
@media (max-width:720px){
  [data-verify]{grid-template-columns:1fr !important}
  [data-legal-toc]{position:static !important}
}

/* Phone header: the bar cannot hold the mark, the theme toggle, Menu and Enquire
   at full size, so the mark steps down. Dropping Enquire is the header
   component's job (it moves into the menu sheet) — never CSS's, or a lagging
   bundle would remove the CTA with nothing to replace it. */
@media (max-width:720px){
  header>a img{max-height:56px}
  footer a[aria-label] img,footer img{max-height:52px}
}
@media (max-width:400px){
  header{padding:0 var(--gutter) !important;gap:var(--space-3) !important}
  header>a img{max-height:48px}
}

/* Section headings carry a ch-based measure (20–24ch) tuned for desktop. On a
   phone that measure is narrower than the column, so titles broke one word per
   line; and the oneLine variants are nowrap, which would overflow. Both give way
   to the column here. */
/* Editorial indents are a desktop device; on a phone they eat a third of the
   column and force one word per line. */
@media (max-width:1180px){
  [data-indent]{padding-left:0 !important;padding-right:0 !important}
}
/* Glass panels carry desktop padding (48-96px). At phone widths that leaves too
   little content width, which broke headings and button labels one word per line.
   Panels expose their padding as --panel-pad, so it is retuned here rather than
   overridden; the [style*=] selectors are the fallback for panels rendered by an
   older bundle, and exclude the header (its padding never uses these steps). */
@media (max-width:720px){
  [data-glass]{--panel-pad:var(--space-6) !important}
  [style*="backdrop-filter"][style*="var(--space-7)"]:not(header),
  [style*="backdrop-filter"][style*="var(--space-8)"]:not(header),
  [style*="backdrop-filter"][style*="var(--space-9)"]:not(header){padding:var(--space-6) !important}
}
@media (max-width:720px){
  section header,[data-grid] header{width:100% !important}
  header>h2,header>p{max-width:none !important}
  [data-oneline]{white-space:normal !important}
}

/* Section heading rows that pair a title with an action: stack on phones. */
@media (max-width:720px){
  [data-head-row]{flex-wrap:wrap;align-items:flex-start !important;gap:var(--space-5) !important}
}

/* Phone tap targets: footer nav links, the Menu trigger and ghost buttons all
   sit near 25px tall. Padding lifts them to 44px without changing the type. */
@media (max-width:1023px){
  footer nav a,footer ul a,footer a:not([aria-label]){display:inline-flex;align-items:center;min-height:44px}
  header>div:nth-child(2)>button{min-height:44px;padding-block:0}
  button{min-height:44px}
}

/* Brand page colour ramp: five flush swatches give each about 65px on a phone,
   so the name and hex broke mid-word. Two, then one, full-width rows instead. */
@media (max-width:900px){
  [data-ramp]{grid-template-columns:repeat(2,1fr) !important}
  [data-ramp]>*{aspect-ratio:1 / .34 !important}
}
@media (max-width:420px){
  [data-ramp]{grid-template-columns:1fr !important}
  [data-ramp]>*{aspect-ratio:auto !important;flex-direction:row !important;justify-content:space-between !important;align-items:center !important}
}

/* Footer accordions (tablet + phone): stacked grid gap would space the
   hairline-ruled sections apart, so they are pulled flush against each other.
   The brand block above them keeps the gap. */
@media (max-width:1023px){
  [data-grid="footer"]{grid-template-columns:1fr !important;gap:var(--space-6) !important}
  [data-grid="footer"]>nav+nav{margin-top:calc(-1 * var(--space-6))}
  [data-grid="footer"]>nav>button{min-height:52px}
}

/* Meta strip: three labels across one row give each about 100px on a phone, so
   they broke mid-word. Stacked into a hairline-ruled list, each label on its own
   full-width line. */
@media (max-width:720px){
  [data-meta-strip]{flex-direction:column;gap:0 !important}
  [data-meta-strip]>*{padding-block:var(--space-3)}
  [data-meta-strip]>*+*{border-top:1px solid var(--line-hairline)}
}

/* Footer legal row: three nowrap items are wider than a phone. */
@media (max-width:720px){
  [data-legal-row]{flex-wrap:wrap !important;row-gap:var(--space-3) !important}
}

/* Phone: long CTA labels are wider than the screen, so let them wrap and fill.
   Applies to the site's buttons and to any nowrap meta row that would overflow. */
@media (max-width:560px){
  button,a[role="button"]{white-space:normal !important;text-align:center}
  /* Stacked full-width CTAs: the large button's 38px side padding leaves too
     little room for its label, so it wrapped to two lines. */
  [data-cta]{flex-direction:column;align-items:stretch}
  [data-cta]>*{width:100%}
  [data-cta]>button{padding-inline:var(--space-4) !important}
}

/* Contact form: at tablet the outer 1.15fr / 0.7fr grid gives the form ~65%
   of the viewport, then the inner two-column form leaves each field ~30%.
   That was cropping labels (FULL NA…) and dropdown values (Option / Private
   residence overlapping). Collapse both the contact split and the form to a
   single column below 1023px so every field owns its row. */
@media (max-width:1023px){
  [data-grid="contact"]{grid-template-columns:1fr !important;gap:var(--space-7) !important}
  [data-grid="form"]{grid-template-columns:1fr !important;gap:var(--space-6) !important}
  [data-grid="form"]>[style*="span 2"]{grid-column:1 !important}
  [data-verify]{grid-template-columns:1fr !important;gap:var(--space-4) !important}
  /* Two large form-submit buttons side by side clip at tablet; stack them. */
  [data-grid="form"] [data-cta]{flex-direction:column;align-items:stretch}
  [data-grid="form"] [data-cta]>*{width:100%}
}