/* Garage Conversions Sheffield: base styles ("forge" skin: near-black, warm white, hot-steel accent) */
@font-face { font-family: "General Sans"; src: url(../assets/fonts/general-sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(../assets/fonts/general-sans-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(../assets/fonts/general-sans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(../assets/fonts/general-sans-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Sono"; src: url(../assets/fonts/sono-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --bg: #111111;
  --panel: #1f1f1f;
  --panel-2: #2a2a2a;
  --ink: #f5f4f1;
  --muted: rgba(245, 244, 241, .52);
  --line: rgba(245, 244, 241, .09);
  --accent: #d42a1e;          /* red: buttons (white text passes contrast) */
  --accent-hot: #ef3b2d;      /* brighter version for dots and highlights */
  --accent-rgb: 239, 59, 45;  /* --accent-hot as numbers, for glows */
  --font: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Sono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: clamp(16px, 1.6vw, 24px);
  --ease: cubic-bezier(.76, 0, .24, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
b, strong { font-weight: 600; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 3px; }

.label { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.label::before { content: ""; width: 22px; height: 6px; background: var(--accent-hot); }

/* buttons: a dot before the label, like a status light */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 12px 18px; font: 600 12px/1.2 var(--mono); letter-spacing: .05em;
       text-transform: uppercase; text-decoration: none; color: #fff; border: 0; border-radius: 2px; cursor: pointer;
       transition: background-color .25s, transform .25s var(--ease-out); }
.btn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; transition: transform .35s var(--ease-out); }
.btn:hover::before { transform: scale(1.8); }
.btn--accent { background: var(--accent); }
.btn--accent:hover { background: #b01f15; }
.btn--dark { background: var(--panel-2); }
.btn--dark:hover { background: #363636; }
.btn--dark::before { background: var(--accent-hot); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- reveals (js/reveal.js adds .is-in; shared by every page) ---------- */
.js [data-words] .wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js [data-words] .wd > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--i) * 55ms); }
.js [data-words].is-in .wd > span { transform: none; }
.js [data-rise] { opacity: 0; transform: translateY(28px); transition: opacity .9s, transform 1s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-rise].is-in { opacity: 1; transform: none; }
.js [data-wipe] { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease); }
.js [data-wipe] img { transform: scale(1.18); transition: transform 1.8s var(--ease); }
.js [data-wipe].is-in { clip-path: inset(0 0 0 0); }
.js [data-wipe].is-in img { transform: scale(1.06); }      /* a little headroom left for the parallax drift */
@media (prefers-reduced-motion: reduce) { .js [data-words] .wd > span, .js [data-rise], .js [data-wipe], .js [data-wipe] img { transform: none; opacity: 1; clip-path: none; transition: none; } }

/* ---------- windows taller than any real screen (how search engines render pages): no scroll animations, screen-height
   sections at a normal height, everything in its finished, visible state (as with reduced motion). The head script
   adds .is-still. ---------- */
html.is-still [data-rise], html.is-still [data-wipe], html.is-still [data-wipe] img, html.is-still [data-words] .wd > span,
html.is-still [data-fade] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
html.is-still .hero { height: auto !important; min-height: 760px !important; }
html.is-still .loader { display: none !important; }
html.is-still .hero__word .ch, html.is-still .hero__place > span, html.is-still .hero__tagline .ln > span { transform: none !important; }
html.is-still .rooms__sticky { position: relative; height: 640px; }
html.is-still .rooms__cards { margin-top: 0 !important; padding: 40px 0; }
html.is-still .rcard { margin: 0 auto 28px; }
html.is-still .quote.is-pin { height: auto !important; }
html.is-still .quote.is-pin .quote__pin { position: relative; height: auto; }
html.is-still .flow.is-pinned { height: auto !important; }
html.is-still .flow.is-pinned .flow__pin { position: relative; height: auto; }
html.is-still .thanks { min-height: 600px; }
html.is-still .jr[data-ready] .jr__card { opacity: 1 !important; transform: none !important; }
html.is-still .jr[data-ready] .jr__t { color: var(--ink) !important; }
html.is-still .jr[data-ready] .jr__d { color: rgba(245, 244, 241, .82) !important; }
html.is-still .gtype__desc { max-height: 200px !important; opacity: 1 !important; margin-top: 10px; }
html.is-still .gtype__go { max-height: 30px !important; opacity: 1 !important; margin-top: 14px; }