/* ==========================================================================
   GestSure — site styles
   Hand-written replacement for the Squarespace template.
   Design tokens below were measured from the original site's computed styles.
   ========================================================================== */

/* --------------------------------------------------------------- fonts -- */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;          /* variable font covers the whole axis */
  font-display: swap;
  src: url('../fonts/raleway-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/raleway-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* -------------------------------------------------------------- tokens -- */
:root {
  --accent:        #06c5db;              /* cyan used for logo, h2, links   */
  --accent-bright: #00cee6;              /* video play button               */
  --ink:           rgba(28, 28, 28, .9); /* body copy                       */
  --ink-strong:    #090b0b;              /* h3                              */
  --rule:          rgba(28, 28, 28, .15);
  --dark:          #1c1513;              /* header / page backdrop          */
  --footer-bg:     rgba(28, 21, 19, .95);
  --footer-ink:    rgba(255, 255, 255, .3);
  --tint:          #f5f5f5;              /* press section background        */
  --hero-scrim:    rgba(32, 23, 19, .3);

  --serif:  Georgia, serif;   /* matches the original's stack exactly */
  --sans:   'Raleway', 'Helvetica Neue', Arial, sans-serif;

  --wrap:      1080px;  /* max content width incl. padding */
  --gutter:    34px;
  --section-y: 68px;    /* vertical padding of index sections */
  --page-y:    100px;   /* vertical padding of standalone pages */
  --header-h:  155px;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--dark);
  color: var(--ink);
  font: 400 14px/1.6 var(--serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; border: 0; }
figure { margin: 0; }

/* Visually hidden but available to assistive tech / crawlers. */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px;
  top: 0; z-index: 2000;
  padding: 12px 20px;
  background: #fff; color: var(--dark);
  font: 500 12px/1 var(--sans);
  letter-spacing: 2px; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------- typography -- */
h1, h2, h3 { font-family: var(--sans); font-weight: 300; margin: 0; }

h1 {
  font-size: 51px; line-height: 1.2;
  letter-spacing: 2px; color: #fff;
}
h2 {
  font-size: 22px; line-height: 1.3;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent);
}
h3 {
  font-size: 17px; line-height: 1.5;
  letter-spacing: 1px; color: var(--ink-strong);
}

.rte h2 { margin-bottom: 6.6px; }
.rte h3 { margin-bottom: 5.1px; }

.rte p  { margin: 0 0 14px; }
.rte ul { margin: 0 0 14px; padding-left: 40px; }

/* The original put 24px above a heading that follows other content and 14px
   above a paragraph that does. Declared after the base margins above so these
   win at equal specificity; descendant (not child) selectors so the rule
   still applies inside grid columns. */
.rte * + h2,
.rte * + h3 { margin-top: 24px; }
.rte * + p,
.rte * + ul { margin-top: 14px; }

/* On the homepage the original wrapped each list item in a paragraph, which
   left a small gap between items. */
.list-spaced li + li { margin-top: 7px; }
.rte li { margin: 0; }
.rte a  { color: var(--accent); text-decoration: underline; }
.rte a:hover { text-decoration: none; }
.rte strong { font-weight: 700; }
/* Trailing margin is dropped on the last element of a block and of each grid
   column, matching the original's `.sqs-html-content > *:last-child` rule. */
.rte > *:last-child,
.rte > * > *:last-child { margin-bottom: 0; }

hr {
  height: 1px; border: 0;
  margin: 34px 0;
  background: var(--rule);
}

.text-center { text-align: center; }

/* -------------------------------------------------------------- layout -- */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); background: #fff; }
.section--tint { background: var(--tint); }
.section--page { padding-block: var(--page-y); }

/* Content rhythm.
   The original template gave every content block 17px of vertical padding,
   so consecutive blocks sit 34px apart and the first one is flush with the
   top of the section. Reproducing that rule keeps the vertical spacing
   identical to the Squarespace original without any magic numbers. */
.block { padding-block: 17px; }
.block:first-child { padding-top: 0; }
.block--flush { padding-block: 0; }

/* Several blocks in the original ended with an empty line, which reads as
   extra breathing room below the text. One line-height of extra padding
   reproduces it without putting a stray <br> in the markup. */
.block--trailing-line { margin-bottom: 22.4px; }    /* one line-height */

/* Deliberate gaps, equivalent to the original's spacer blocks. */
.spacer { height: 56px; }
.spacer--sm { height: 34px; }

/* The product pages followed the benefits list with an empty paragraph.
   Padding (not margin) so the next heading's own margin still applies. */
.checklist { padding-bottom: 36.4px; }

/* Two-column text grid used by "How it works". */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 34px;
}

/* A centred narrow measure, e.g. the contact intro. */
.measure { max-width: 663px; margin-inline: auto; }

/* -------------------------------------------------------------- header -- */
.header {
  position: absolute; inset: 0 0 auto;
  z-index: 1002;
  height: var(--header-h);
  padding-inline: 32px;
  background: var(--dark);
}
/* Homepage lets the hero show through behind the header. */
.header--transparent { background: transparent; }

.header__inner {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%;
}

.header__logo { margin: 0 0 20px; line-height: 0; }
.header__logo img { width: 188px; height: auto; display: block; }

.nav ul {
  display: flex; gap: 0;
  margin: 0; padding: 0; list-style: none;
}
.nav a {
  display: block;
  padding: 9px 12px;
  font: 500 12px/1 var(--sans);
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
  transition: color .15s linear;
}
.nav a:hover,
.nav a[aria-current='page'] { color: var(--accent); }

/* Hamburger — hidden until the mobile breakpoint. */
.nav-toggle {
  display: none;
  position: absolute; left: 20px; top: 34px;
  width: 30px; height: 24px;
  padding: 0; border: 0; background: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; margin-bottom: 6px;
  background: #fff;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span:last-child { margin-bottom: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  min-height: 715px;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--dark);
}
.hero__media {
  position: absolute; inset: 0;
  margin: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.hero__scrim { position: absolute; inset: 0; background: var(--hero-scrim); }

/* Content is centred in the hero box, matching the original — the h1 lands
   clear of the transparent header without needing to reserve space for it. */
.hero__content {
  position: relative;
  width: 100%;
  padding: 34px var(--gutter);
  text-align: center;
}
.hero h1 { margin-bottom: 15.3px; }
.hero h2 { margin-top: 24px; color: var(--accent); }

/* Collection pages (the Press gallery) use a taller, much darker banner with
   a large thin title and a description in the template's amber accent. */
.hero--page {
  min-height: 0;
  padding-block: 180px;
  background: #000;
}
.hero--page .hero__scrim { background: rgba(0, 0, 0, .7); }
.hero--page .hero__content { padding: 34.5px var(--gutter) 6px; }
.hero--page h1 {
  font-size: 72px; font-weight: 100;
  line-height: 1.2; letter-spacing: normal;
  margin-bottom: 18px;
}
.hero__subtitle {
  max-width: 648px;
  margin: 0 auto;
  font: 400 18px/1.35 var(--sans);
  letter-spacing: 1px;
  color: #fa7900;
}


/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border: 2px solid var(--accent);
  border-radius: 3px;
  background: transparent;
  color: var(--accent);
  font: 500 12px/14px var(--sans);
  letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none;
  transition: background-color .15s linear, color .15s linear;
}
.btn:hover, .btn:focus { background: var(--accent); color: #fff; }

/* --------------------------------------------------------------- video -- */
/* Click-to-load facade: the poster is a button; the Vimeo iframe is only
   fetched once the visitor asks for it. Mirrors the original behaviour and
   avoids third-party requests on page load. */
.video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  border: 0; padding: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
  display: block;
}
.video img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.video__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(0, 206, 230, .8);
  transition: background-color .15s linear;
}
.video__play::after {
  content: '';
  position: absolute; top: 16px; left: 23px;
  width: 0; height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 14px solid #fff;
}
.video:hover .video__play,
.video:focus-visible .video__play { background: var(--accent-bright); }

.video iframe,
.video video { width: 100%; height: 100%; border: 0; display: block; background: #000; }

.video-block { margin-top: 34px; }

/* Shown only when scripting is unavailable, so the videos stay reachable. */
.video-fallback { margin: 14px 0 0; text-align: center; }
.video-fallback a { color: var(--accent); }

/* --------------------------------------------------------------- press -- */
.press-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 34px;
  justify-items: center; align-items: center;
  margin: 0;
  padding-inline: 0;      /* keeps the .block vertical rhythm intact */
  list-style: none;
}
.press-grid a {
  display: grid; place-items: center;
  width: 100px; height: 100px;
}
.press-grid img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  transition: opacity .15s linear;
}
.press-grid a:hover img { opacity: .65; }

/* ------------------------------------------------------------- contact -- */
.contact { text-align: center; }
.contact__btn { margin: 0; }

/* The original opened each inquiry column with a blank line; reproduced as
   padding rather than an empty <br> so the markup stays meaningful. */
.contact__details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
  max-width: 506px;
  margin-inline: auto;
  padding-top: 39.4px;      /* block's 17px + one 22.4px blank line */
}
.contact__details p { margin: 0; }
.contact__details a { color: var(--accent); text-decoration: underline; }
.contact__details a:hover { text-decoration: none; }

.social { margin: 0; }
.social a {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #000;
  transition: background-color .15s linear;
}
.social a:hover { background: var(--accent); }
.social svg { width: 17px; height: 17px; fill: #fff; }

/* -------------------------------------------------- standalone (inner) -- */
/* Inner pages sit below a solid header rather than behind a hero. The header
   is out of flow, so its height is reserved with padding — a margin here
   would collapse through <body> and shorten the document. */
.page-body {
  background: #fff;
  padding-block: calc(var(--header-h) + var(--page-y)) var(--page-y);
}

/* Quick-facts list beside the usability diagram (the original's 7/5 split). */
.grid-7-5 {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 0 34px;
  align-items: start;
}

/* Two diagrams side by side. */
.grid-figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 34px;
  align-items: start;
}

/* Page eyebrow ("PRODUCT INFORMATION FOR …"). The original followed it with
   two empty lines before the lede; reproduced as padding. */
.page-eyebrow { padding-bottom: 51px; }   /* 2 × 25.5px line-height */

.figure-caption {
  margin: 17px 0 0;
  font-size: 12.88px;
}

/* Smaller type, but the original kept the 22.4px body leading. */
.footnotes { font-size: 11px; line-height: 22.4px; }
.footnotes p { margin: 0 0 6px; }

/* Standalone images render at their natural size rather than stretching. */
.block > img { width: auto; max-width: 100%; }

/* -------------------------------------------------------------- footer -- */
.footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  text-align: center;
}
.footer__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--section-y) var(--gutter);
}
.footer__mark {
  width: 100px; height: auto;
  margin-inline: auto;
  display: block;
}
.footer__tagline { margin: 17px 0; font-size: 12.88px; }

/* Address block: present for search engines and screen readers, hidden
   visually — matching the original template, which suppressed it. */
.footer__address { display: none; }

.back-to-top { display: none; }          /* mobile only, see media query */
.back-to-top a {
  display: inline-block;
  padding: 9px 12px;
  font: 500 12px/1.25 var(--sans);
  letter-spacing: 2px; text-transform: uppercase;
  color: #fff; text-decoration: none;
}
.back-to-top a:hover { color: var(--accent); }

/* ------------------------------------------------------------ gallery --- */
/* auto-fill (not auto-fit) keeps the empty tracks, so a single image stays
   at one column width instead of stretching across the row. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  margin: 0; padding: 0;
  list-style: none;
}
.gallery-grid img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   Responsive — the original collapsed to a single column at 767px and
   swapped the inline nav for a slide-down panel.
   ========================================================================== */
@media (max-width: 900px) {
  .press-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  /* The original kept its desktop type sizes on small screens and only
     changed the frame: shorter header, tighter gutters, stacked columns. */
  :root { --header-h: 82px; --gutter: 20px; --page-y: 40px; --section-y: 57px; }

  .header { padding-inline: 20px; }
  .header__inner { flex-direction: row; justify-content: center; }
  .header__logo { margin: 0; }

  .nav-toggle { display: block; top: 29px; }

  /* Slide-down panel. Height animates so it works without JS measuring. */
  .nav {
    position: absolute; left: 0; right: 0; top: var(--header-h);
    background: var(--dark);
    max-height: 0; overflow: hidden;
    transition: max-height .25s ease;
  }
  .nav[data-open='true'] { max-height: 60vh; }
  .nav ul { flex-direction: column; padding: 8px 0; }
  .nav a { padding: 12px 20px; text-align: center; }

  .hero { min-height: 572px; }
  .hero__content { padding-inline: 34px; }   /* hero keeps a wider gutter */
  .hero h1 { font-size: 36px; }

  .grid-2,
  .grid-7-5,
  .grid-figures,
  .contact__details { grid-template-columns: 1fr; gap: 0; }
  .grid-figures > * + * { margin-top: 34px; }
  .contact__details p + p { margin-top: 24px; }

  .press-grid { grid-template-columns: 1fr; gap: 34px; }

  .rte ul { padding-left: 24px; }

  /* Rules lose their extra margins on small screens; the block padding
     alone provides the separation. */
  hr { margin-block: 0; }

  .back-to-top { display: inline-block; margin-bottom: 17px; }
  .footer__inner { padding: 20px; }

  /* Collection banner shrinks on small screens; it sizes to its content
     rather than taking the homepage hero's minimum height. */
  .hero--page { min-height: 0; padding-block: 100px; }
  .hero--page .hero__content { padding: 31px 34px 0; }
  .hero--page h1 { font-size: 34px; margin-bottom: 8.5px; }
}

/* ---------------------------------------------------------------- print -- */
@media print {
  .header, .nav, .back-to-top, .video__play { display: none; }
  body { background: #fff; color: #000; }
  .page-body { margin-top: 0; }
}