/* Veritometrics Technology Private Limited
   ------------------------------------------------------------------
   Design language, taken from the logo's own construction:

     · a SIX-COLUMN grid. The mark is 193 units wide = six ~32.2-unit columns,
       the first shape spanning two. Column 1 is a standing margin; ALL prose
       on this page begins at column 2, so the page has one left edge.
     · ONE angle, 60°. The mark's four diagonals measure 59.7–59.9°.
       It appears once, in the hero mark.
     · TWO flat tones, #19588C and #A7BCD5. No gradients, no shadows.
     · NO curves. The mark has none, so nothing here has a border radius.
     · THIN, WIDE-TRACKED CAPS for labels, echoing the wordmark.

   Colour rule: #A7BCD5 measures 1.78:1 on paper, so it can only ever be an
   AREA FILL — never text, never a rule. Drooid's accent is darkened to
   #0C6E70 (5.51:1 on paper, 5.08:1 on the tinted band) so it can carry text.
   ------------------------------------------------------------------ */

:root {
  --paper:       #F2F5F8;
  --paper-deep:  #E7ECF2;  /* the product band */
  --ink:         #10283C;
  --muted:       #54697A;  /* 5.22:1 on paper, 4.81:1 on the band */
  --grid:        rgba(25, 88, 140, .05);
  --brand:       #19588C;  /* logo dark blue */
  --brand-light: #A7BCD5;  /* logo light blue — area fill only */
  --drooid:      #0C6E70;  /* product accent, product section only */

  --display: "Jost", ui-sans-serif, system-ui, sans-serif;
  --body:    "Inter Tight", ui-sans-serif, system-ui, sans-serif;

  --shell: 1140px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --gap: clamp(1rem, 2.5vw, 2rem);

  /* one rhythm value drives every gap around a rule, so they balance 1:1 */
  --bay: clamp(3.5rem, 8vw, 6.5rem);

  /* Motion. One easing family, no overshoot: luxury reads as slow and certain,
     never springy. --ease decelerates hard and settles; --ease-io is for colour. */
  --ease:    cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-hover: 420ms;
  --t-rise:  900ms;
  --t-word:  1050ms;
  --stagger: 90ms;
}

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

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

body {
  margin: 0;
  position: relative;   /* containing block for the ground plane */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .95rem + .25vw, 1.0625rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

a { color: inherit; }

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

/* ---------- skip link ---------- */

.skip {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip:focus {
  position: fixed;
  top: .75rem;
  left: var(--gut);
  z-index: 30;
  width: auto;
  height: auto;
  margin: 0;
  padding: .55rem .9rem;
  clip-path: none;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}

/* ---------- ground plane ---------- */

/* Anchored to the content box so a grid line always lands on the text edge, and
   absolutely positioned rather than fixed so it TRAVELS WITH THE DOCUMENT — pinned
   to the viewport it held still while content slid over it, which read as a fault.
   Cell = 48px = the maximum gutter, so the gutter is exactly one cell. */
.grid {
  position: absolute;
  top: 0;
  bottom: 0;
  min-height: 100vh;    /* still covers a viewport taller than the document */
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 2 * var(--gut)), calc(var(--shell) - 2 * var(--gut)));
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
}

.masthead, main, .foot { position: relative; z-index: 1; }

/* ---------- label voice ---------- */

.label {
  font-family: var(--display);
  font-weight: 400;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0;
}

/* ---------- masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--ink);
  /* translucent so the ground plane reads through rather than dying in a band */
  background: rgba(242, 245, 248, .85);  /* fallback, mirrors --paper */
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: blur(8px);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
  flex-wrap: wrap;
}

/* mark height : wordmark cap height = 2.4, matching logo-horizontal.svg */
.logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
}
.logo img { display: block; height: 28px; width: auto; }
.logo__word {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--brand);
  white-space: nowrap;
  transition: color var(--t-hover) var(--ease-io);
}
.logo:hover .logo__word { color: var(--ink); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  font-family: var(--display);
  font-weight: 400;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.nav a {
  text-decoration: none;
  color: var(--muted);
  padding-block: .3rem;
  transition: color var(--t-hover) var(--ease-io);
}
.nav a:hover { color: var(--ink); }

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gap);
  padding-block: clamp(3.5rem, 9vw, 7rem) var(--bay);
}

.hero__mark {
  grid-column: 1 / 2;
  grid-row: 1 / span 2;
  align-self: start;
  width: min(100%, 82px);
  height: auto;
  margin-top: .5rem;
  fill: var(--brand-light);
}

.hero__title {
  grid-column: 2 / -1;
  grid-row: 1;
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.875rem, 5.2vw, 3.75rem);
  line-height: 1.08;
  /* the brand's caps voice is tracked .18–.22em; thin caps at 60px need air */
  letter-spacing: .03em;
  text-transform: uppercase;
  text-wrap: balance;
}

.lede {
  grid-column: 2 / -1;
  grid-row: 2;
  max-width: 56ch;
  font-size: clamp(1.125rem, 1rem + .5vw, 1.25rem);
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* ---------- bands and strips ---------- */

.band {
  border-top: 1px solid var(--ink);
  scroll-margin-top: 76px;  /* clears the sticky masthead on anchor jumps */
}
.band--tint { background: var(--paper-deep); }

.strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 1.25rem;
  padding-block: var(--bay);
}

.strip__label { grid-column: 1 / 2; padding-top: .45rem; }
.strip__body  { grid-column: 2 / -1; max-width: 62ch; }

.strip__body > p { margin: 0 0 1.15rem; }
.strip__body > p:last-child { margin-bottom: 0; }

/* the closing block leaves the column spine and centres, as a deliberate ending */
.strip--center { display: block; text-align: center; }
.strip--center .strip__label { padding-top: 0; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ---------- product ---------- */

.product__name { margin: 0 0 1.5rem; line-height: 0; }
.product__name img { display: block; width: 168px; height: auto; }

.product__tag {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.375rem, 2.2vw, 1.625rem);
  line-height: 1.28;
  letter-spacing: .005em;
  color: var(--drooid);
  margin: 0 0 1.25rem;
  max-width: 26ch;
  text-wrap: balance;
}

/* the primary action, and it outranks the store badges below it */
.product__cta {
  font-family: var(--display);
  font-weight: 400;
  /* deliberately the same step as .lede, not a seventh size */
  font-size: clamp(1.125rem, 1rem + .5vw, 1.25rem);
  letter-spacing: .06em;
  margin: 1.75rem 0 0;
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.5rem 0 0;
}
.stores img { display: block; height: 36px; width: auto; transition: transform var(--t-hover) var(--ease); }
.stores a:hover img { transform: translateY(-3px); }

/* ---------- links ---------- */

.link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--brand);
  transition: color var(--t-hover) var(--ease-io), border-color var(--t-hover) var(--ease-io);
}
.link:hover { color: var(--brand); }

.product__cta .link { color: var(--drooid); border-bottom-color: var(--drooid); }
.product__cta .link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- contact ---------- */

.card__name {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  line-height: 1.2;
  letter-spacing: .005em;
  margin: 0 0 1.125rem;
  text-wrap: balance;
}

.card { font-style: normal; }
.card p { margin: 0; }

.card__addr {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin-bottom: 1.375rem;
}

.card__contact { font-size: 1.0625rem; }

/* everything actionable in this block is brand blue; underlines would be noise */
.card__addr, .card__contact { color: var(--brand); }
.card .link { border-bottom: none; color: inherit; }
.card .link:hover { color: var(--ink); }

/* a real measure for the centred block, rather than relying on a manual <br> */
.strip--center .card__name { max-width: 44rem; margin-inline: auto; }
.strip--center .card { max-width: 30rem; margin-inline: auto; }

/* ---------- foot ---------- */

/* the rule belongs to the footer, so it survives the section order changing */
.foot { border-top: 1px solid var(--ink); }
.foot__inner {
  padding-block: var(--bay) 3rem;
  font-size: .8125rem;
  color: var(--muted);
}
.foot p { margin: 0; }

/* ---------- motion ---------- */

/* Every reveal is opt-in behind .js, so a browser without scripting simply
   renders the finished page. Nothing is ever hidden that cannot be shown. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--t-rise) var(--ease),
    transform var(--t-rise) var(--ease);
  transition-delay: calc(var(--d, 0) * var(--stagger));
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* The headline rises out of its own line box, word by word. Uppercase has no
   descenders here, but the padding/margin pair keeps the mask off the glyphs. */
.hero__title .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .06em;
  margin-bottom: -.06em;
}
.js .hero__title .w > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform var(--t-word) var(--ease);
  transition-delay: calc(var(--w) * 70ms + 120ms);
}
.js .hero__title.is-in .w > span { transform: none; }

/* The mark's columns grow from the baseline, in the order the eye reads them */
.js .hero__mark path {
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform var(--t-word) var(--ease);
  transition-delay: calc(var(--i) * 130ms + 260ms);
}
.js .hero__mark.is-in path { transform: none; }

/* Underlines draw rather than blink on. One mechanism, two contexts: over the
   CTA's existing rule, and in place of one for the contact details. */
.nav a, .link { position: relative; }
.nav a::after, .link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-hover) var(--ease);
}
.nav a:hover::after,
.nav a:focus-visible::after,
.link:hover::after,
.link:focus-visible::after { transform: scaleX(1); }

/* ---------- responsive ---------- */

/* 980px, not 860px: at 880px column 1 is 116.6px and the label needs ~118px,
   and 940px leaves only ~7px of clearance, which is inside my estimate's error bar */
@media (max-width: 980px) {
  .hero__mark {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 62px;
    margin: 0 0 1.5rem;
  }
  .hero__title { grid-column: 1 / -1; grid-row: 2; }
  .lede { grid-column: 1 / -1; grid-row: 3; }

  .strip__label { grid-column: 1 / -1; padding-top: 0; }
  .strip__body  { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .masthead { position: static; }
  .masthead__inner { min-height: 0; padding-block: .9rem; }
  .logo { gap: .625rem; }
  .logo img { height: 24px; }
  .logo__word { font-size: .875rem; letter-spacing: .15em; }

  .nav { width: 100%; justify-content: flex-start; gap: 1.5rem; }

  .grid { background-size: 36px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .hero__title .w > span,
  .js .hero__mark path { transform: none; }
  .stores a:hover img { transform: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}