/*
  grydgroup.com styles.

  1-3 are the GRYD design system (Claude Design export,
  _ds/gryd-design-system-084fd2da/tokens/*.css): five colours, Schibsted Grotesk 500
  display + Inter body, an 8px unit, a 160px section gap, square corners. Fonts load from
  Google Fonts in index.html. 4 is the page, ported from "GRYD Group Website v2.dc.html".
*/

/* 1. Tokens */
:root {
  /* Five colours. No more. Source: GRYD Digital Brand Guide, May 2026 */
  --gryd-black: #121212;      /* Refresh Black: primary background */
  --gryd-charcoal: #212121;   /* Black Charcoal: one surface step lighter */
  --gryd-white: #FCFCFC;      /* Primary text */
  --gryd-grey: #DFDFDF;       /* Grey: muted / secondary text */
  --gryd-tangerine: #DE4124;  /* Tangerine Tango: the only accent */

  --bg: var(--gryd-black);
  --surface: var(--gryd-charcoal);
  --text: var(--gryd-white);
  --text-muted: var(--gryd-grey);
  --accent: var(--gryd-tangerine);
  --on-accent: var(--gryd-white);

  --font-display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --weight-display: 500;

  /* Three sizes. H1, H2, body. */
  --size-h1: 64px;  --leading-h1: 1.02; --tracking-h1: -0.03em;
  --size-h2: 32px;  --leading-h2: 1.15; --tracking-h2: -0.02em;
  --size-body: 16px; --leading-body: 1.65;

  /* One base unit. One section gap. Compose everything else as multiples of --unit. */
  --unit: 8px;
  --section-gap: 160px;
}

/* 2. Base */
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--size-body); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
h1, .h1 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); margin: 0; text-wrap: balance; }
h2, .h2 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--size-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 3. Components: Button, Field, TextInput, Select, Textarea */
.gryd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--unit); height: calc(var(--unit)*6); padding: 0 calc(var(--unit)*3); font-family: var(--font-body); font-size: var(--size-body); font-weight: 600; line-height: 1; border: 1px solid transparent; border-radius: 0; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; }
.gryd-btn:active { transform: translateY(1px); }
.gryd-btn--primary { background: var(--accent); color: var(--on-accent); }
.gryd-btn--primary:hover { background: var(--text); color: var(--bg); }
.gryd-btn--ghost { background: transparent; color: var(--text); border-color: var(--text-muted); }
.gryd-btn--ghost:hover { border-color: var(--accent); color: var(--text); }
.gryd-btn[disabled], .gryd-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.gryd-field { display: flex; flex-direction: column; gap: var(--unit); font-family: var(--font-body); font-size: var(--size-body); }
.gryd-field__label { color: var(--text-muted); font-weight: 500; }
.gryd-field__error { color: var(--accent); }
.gryd-control { box-sizing: border-box; width: 100%; min-height: calc(var(--unit)*6); padding: calc(var(--unit)*1.5) calc(var(--unit)*2); background: var(--surface); color: var(--text); font: inherit; line-height: var(--leading-body); border: 1px solid var(--surface); border-bottom-color: var(--text-muted); border-radius: 0; outline: none; transition: border-color .15s ease; }
.gryd-control::placeholder { color: var(--text-muted); opacity: .6; }
.gryd-control:hover { border-bottom-color: var(--text); }
.gryd-control:focus { border-color: var(--accent); }
.gryd-control[aria-invalid="true"] { border-bottom-color: var(--accent); }
.gryd-control:disabled { opacity: .4; }
.gryd-control--textarea { resize: vertical; min-height: calc(var(--unit)*16); }
.gryd-select { position: relative; }
.gryd-select .gryd-control { appearance: none; -webkit-appearance: none; padding-right: calc(var(--unit)*6); cursor: pointer; }
.gryd-select__chev { position: absolute; right: calc(var(--unit)*2); top: 50%; width: var(--unit); height: var(--unit); border-right: 1.5px solid var(--text); border-bottom: 1.5px solid var(--text); transform: translateY(-75%) rotate(45deg); pointer-events: none; }

/* 4. Page */
:root {
  --size-h1: clamp(40px, 5vw + 16px, 64px);
  --size-h2: clamp(24px, 1.5vw + 18px, 32px);
  --header-height: calc(var(--unit)*10);
  /* The QueerHere slot's placeholder ground, from the design. */
  --qh-tile: #F4EDE2;
}

/* Anchor jumps (and focus moves) stop below the sticky header. */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
a { text-underline-offset: 4px; transition: color .15s ease; }
body { min-height: 100vh; }
[hidden] { display: none !important; }

.container { max-width: 1200px; margin: 0 auto; padding-inline: calc(var(--unit)*4); box-sizing: border-box; }
.section { padding-bottom: var(--section-gap); }
.stack-2 { display: flex; flex-direction: column; gap: calc(var(--unit)*2); }
.stack-3 { display: flex; flex-direction: column; gap: calc(var(--unit)*3); }
.stack-6 { display: flex; flex-direction: column; gap: calc(var(--unit)*6); }
.muted { color: var(--text-muted); }
.card { background: var(--surface); padding: calc(var(--unit)*4); }
/* A stand-alone link sized as a 44px tap target. */
.tap { min-height: 44px; display: flex; align-items: center; }
/* An in-sentence link: the padding grows the tap area to 44px without moving the text. */
.tap-inline { padding-block: 13px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--surface); }
.site-header__inner { height: var(--header-height); display: flex; align-items: center; gap: calc(var(--unit)*4); }
.brand, .brand:hover { display: flex; min-height: 44px; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex: none; }
.brand__mark { width: 17px; height: 17px; background: var(--accent); display: block; flex: none; }
.brand__word { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.site-nav { display: flex; gap: calc(var(--unit)*4); margin-left: auto; }
.site-nav a { min-height: 44px; display: flex; align-items: center; text-decoration: none; font-weight: 500; white-space: nowrap; }
.site-header__cta { margin-left: auto; flex: none; }
@media (max-width: 899.98px) {
  .site-nav { display: none; }
}
/* Phones: logo + button is the widest row on the page (about 300px). Tighten the header
   first, keep the 32px side margins down to 372px, then step down so nothing ever
   scrolls sideways. */
@media (max-width: 399.98px) {
  .site-header__inner { gap: var(--unit); }
}
@media (max-width: 371.98px) {
  .container { padding-inline: calc(var(--unit)*2); }
}
@media (max-width: 349.98px) {
  .site-header__cta .gryd-btn { padding-inline: calc(var(--unit)*2); }
}

/* Hero */
.hero { padding-block: var(--section-gap); display: flex; flex-direction: column; gap: calc(var(--unit)*4); align-items: flex-start; }
.hero h1 { max-width: 900px; }
.hero__sub { max-width: 620px; }
.actions { display: flex; flex-wrap: wrap; gap: calc(var(--unit)*2); }

/* Platform */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: calc(var(--unit)*2); }

/* Powered by GRYD (QueerHere) */
.qh { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: calc(var(--unit)*4); align-items: center; }
.qh-tile { aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: var(--qh-tile); }
/* The square logo fills the 4:3 tile with the crop set in the design (the export's
   .image-slots.state.json: 1.3624x its contained height, centre nudged 0.615% left and
   0.16% up), so it scales with the tile at every width. */
.qh-tile img { position: absolute; left: 49.385%; top: 49.84%; width: 102.18%; height: auto; transform: translate(-50%, -50%); }
.qh-copy { align-items: flex-start; }
.qh-copy p { max-width: 440px; }
.qh-copy a { font-weight: 500; }
.qh-shots { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: calc(var(--unit)*2); }
.qh-shots img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: left top; }

/* White-label */
.white-label { align-items: flex-start; }
.white-label__intro p { max-width: 560px; }
.steps { margin: 0; padding: 0; list-style: none; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: calc(var(--unit)*2); }
.steps__num { color: var(--text-muted); font-weight: 500; }

/* Contact */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: calc(var(--unit)*6) calc(var(--unit)*8); }
.contact__intro p { max-width: 420px; }
.sent { align-self: start; }
.enquiry { position: relative; }
.enquiry__foot { display: flex; flex-direction: column; gap: calc(var(--unit)*2); align-items: flex-start; padding-top: var(--unit); }
.enquiry__failed { color: var(--accent); }
/* Honeypot: off-screen for people, still filled in by form-stuffing bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* Footer */
.site-footer { border-top: 1px solid var(--surface); }
.site-footer__inner { padding-block: calc(var(--unit)*6); display: flex; flex-wrap: wrap; gap: calc(var(--unit)*4); align-items: flex-end; justify-content: space-between; }
.mark { display: flex; align-items: center; gap: 13px; }
.mark__square { width: 44px; height: 44px; background: var(--accent); display: block; flex: none; }
.mark__word { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 22px; letter-spacing: -0.02em; display: flex; flex-direction: column; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 calc(var(--unit)*4); }
.footer-nav a { min-width: 44px; }