/* ============================================================
   SILICA WORKS - base
   ============================================================ */

@font-face {
  font-family: "Rader";
  src: url("../font/rader/PPRader-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "sohne-normal";
  src: url("../font/sohne--normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "sohne-medium";
  src: url("../font/sohne--medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "sohne-bold";
  src: url("../font/sohne--extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Site-wide tokens. The accent is the green the cursor, the draggable
   tag and the CTA underline all share - it lives here so those three
   cannot drift apart. */
:root {
  --sw-ink: #14140f;
  --sw-paper: #f4f4f2;

  /* The accent is a light, high-luminance lime: it works as a GROUND
     with ink on top (footer, tags, menu hover) and as a decorative
     fill, but it is not a text colour. On white it sits at 1.15:1,
     which is invisible. */
  --sw-accent: #d9ff3d;

  /* The accent's on-light counterpart, for when the green itself has
     to carry a glyph or an icon against paper or white - the light
     testimonial cards, for one. Same yellow-green family, dropped in
     lightness until it clears 4.7:1 on white and 4.3:1 on paper.
     Pairs with --sw-accent; the two are the same colour doing the two
     opposite jobs, so neither gets asked to do the other's. */
  --sw-accent-ink: #5c7e12;

  /* SPACING - the home page's vertical rhythm, shared.
     ------------------------------------------------------------
     The home page is the reference, and these are its numbers. The
     FAQ's thread and the contact page's brief are the same kind of
     section as the home page's sheets - a big three-word title, then
     a block of content, then the nav parking at the foot - so they
     take the same three distances from here rather than keeping
     their own near-copies, which had drifted to 126/144/144px of
     top, 90/99/108px under the title and 164/200px at the foot.

     --sw-sheet-top   a sheet's top edge to its title
                      ("Who we are", home.html)
     --sw-title-gap   a sheet's title to the content under it
                      (.sw-sc-head, css/showcase.css)
     --sw-park-off    the nav bar's floating offset once parked
                      (bottom, css/menu.css)
     --sw-park-air    air between the last content and the parked
                      bar - the foot of every page's last sheet */
  --sw-sheet-top: clamp(6rem, 16vh, 10rem);
  --sw-title-gap: clamp(6rem, 12vh, 10rem);
  --sw-park-off: 2rem;
  --sw-park-air: 4.5rem;
}

/* Phones and tablets: css/home-mobile.css's numbers. svh only where
   it is understood - a custom property holding a unit the browser
   cannot read would blank the padding it is used in, rather than
   fall back the way a plain declaration does. */
@media (max-width: 1000px) {
  :root {
    --sw-sheet-top: clamp(4rem, 10vh, 6rem);
    --sw-title-gap: clamp(2.5rem, 6vh, 4rem);
    --sw-park-off: 1.5rem;
    --sw-park-air: 3rem;
  }

  @supports (height: 1svh) {
    :root {
      --sw-sheet-top: clamp(4rem, 10svh, 6rem);
      --sw-title-gap: clamp(2.5rem, 6svh, 4rem);
    }
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background: var(--sw-paper);
  color: #14140f;
  font-family: "Inter Tight", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------
   Hide scrollbar - visually only, scrolling still works
   ------------------------------------------------------------ */
html {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge / IE */
  /* No tap flash on touch. Mobile browsers paint a translucent
     grey-blue box over anything tapped - every button, link and
     card - which reads as a smudge on top of the site's own press
     states. The property inherits, so this one line covers every
     element on every page. Keyboard focus is untouched: the
     :focus-visible rings are a separate mechanism and still show. */
  -webkit-tap-highlight-color: transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                  /* Chrome, Safari, Edge */
}

.page {
  width: 100%;
}

/* Available to screen readers, invisible on screen. Used where a
   glyph is replaced by an image and the text it stood for still
   has to reach the accessible name. Not display: none or
   visibility: hidden - both take it out of the a11y tree too. */
.sw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   Page sections
   ------------------------------------------------------------ */
.sw-section {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: 6rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  /* Space at the bottom so content never sits under the fixed nav */
  padding-bottom: 10rem;
  /* No dividing rule between sections - the generous padding already
     separates them, and the line was reading as a seam. The
     :last-child override that used to suppress it went with it. */
}

.sw-section-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #76766f;
}

.sw-section-title {
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 500;
  color: #14140f;
}

@media (max-width: 1000px) {
  .sw-section {
    padding: 4rem 1.5rem 8rem;
  }
}

/* ------------------------------------------------------------
   Closing section content
   ------------------------------------------------------------ */
.sw-section-body {
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #55554e;
}


/* ------------------------------------------------------------
   Scrubbed per-character copy reveal (js/animated-copy.js)
   The script replaces the text with .word > .char spans, so both
   need a layout box to take a color transition of their own.
   ------------------------------------------------------------ */
.word {
  display: inline-block;
  /* Keeps a split word from breaking between its own characters. */
  white-space: nowrap;
}

.char {
  display: inline-block;
  /* No CSS transition here: GSAP tweens the color itself, and a
     transition on top of it would double-smooth every step and fight
     the scrub when the reveal is scrubbed backwards. */
  will-change: color;
}


/* The span handed to the splitter generates no box, so the paragraph
   lays out its characters itself and keeps its original font-size,
   line-height, max-width and wrapping. */
[data-copy-line] {
  display: contents;
}

/* The wrapper IS the ScrollTrigger target, so it has to generate a
   box - a display:contents wrapper has no geometry and ScrollTrigger
   reads it as a zero-height strip at the top of the document, which
   resolves the whole scrub in negative scroll space. It carries no
   styling of its own beyond that, so the paragraphs inside keep the
   spacing they had when they were direct children of .sw-split-copy. */
[data-copy-wrapper] {
  display: flex;
  flex-direction: column;
  /* A full blank line between the two paragraphs, rather than the
     1.1rem .sw-split-copy gap - the second para is a closing aside
     and wants the breathing room. The copy sets 20px/31px, and the
     paragraph box already carries part of that leading, so 3.9rem
     is what actually measures as one empty line between them. */
  gap: 3.9rem;
}