/* ==========================================================================
   Datum Point Advisory
   Governed by docs/datum-website-spec-v1.2.md — the spec wins on any conflict.
   Stage 1 — Foundation: tokens, reset, type scale, header and footer shell.
   No page content.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts

   Self-hosted static subsets, instantiated from the upstream variable fonts
   and subset to the characters the copy actually uses. font-display: swap
   keeps text visible while they load; the fallback stacks below still carry
   the page if a request fails.

   Licences ship alongside the faces in /fonts/ as required by the OFL.
   -------------------------------------------------------------------------- */

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

/* Real italic. Without this face the browser synthesises an oblique from the
   roman, which is not the same letterforms. */
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/eb-garamond-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/dm-sans-300.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/dm-sans-500.woff2") format("woff2");
}

/* Metric-matched fallbacks.

   The real faces do not occupy the same space as the system fallbacks, so
   swapping them in moves the page: EB Garamond is much narrower than Georgia
   (the h1 drops from three lines to two), while DM Sans is slightly wider than
   Arial. These faces scale the fallback to the same measured width, so the
   fallback and the real face take the same room and the swap does not reflow.

   size-adjust values are measured ratios of real-face to fallback advance
   width over a sample of the site's own copy. src: local() means no download.
   Where the named system face is unavailable the declaration simply fails and
   the plain stack below still applies. */

@font-face {
  font-family: "EB Garamond Fallback";
  font-style: normal;
  font-weight: 400;
  src: local("Georgia");
  size-adjust: 86.22%;
}

@font-face {
  font-family: "EB Garamond Fallback";
  font-style: italic;
  font-weight: 400;
  src: local("Georgia Italic"), local("Georgia");
  size-adjust: 81.79%;
}

@font-face {
  font-family: "DM Sans Fallback";
  font-style: normal;
  font-weight: 300;
  src: local("Arial");
  size-adjust: 104.22%;
}

@font-face {
  font-family: "DM Sans Fallback";
  font-style: normal;
  font-weight: 500;
  src: local("Arial");
  size-adjust: 107.69%;
}

/* --------------------------------------------------------------------------
   2. Tokens

   Every hex and rgba value in the stylesheet lives in this block. Rules below
   reference tokens only.
   -------------------------------------------------------------------------- */

:root {
  /* Palette — canonical, no additions */
  --color-north-sea: #2C3C4D;
  --color-bone:      #F1EBDD;
  --color-terra:     #9C6B4E;
  --color-storm:     #A0A09E;
  --color-white:     #FFFFFF;

  /* Hairlines. Alpha is supported on the web and these derived rgba values are
     correct. The flattened print equivalents in the brand standard exist for
     Word and Outlook, which ignore alpha. Do not substitute them here. */
  --rule-on-bone:      rgba(44, 60, 77, 0.18);
  --rule-on-north-sea: rgba(241, 235, 221, 0.18);

  /* Type families. The wordmark keeps its canonical serif and is deliberately
     not EB Garamond. */
  --font-serif:    "EB Garamond", "EB Garamond Fallback", Georgia, "Times New Roman", serif;
  --font-sans:     "DM Sans", "DM Sans Fallback", Arial, Helvetica, sans-serif;
  --font-wordmark: Georgia, "Times New Roman", serif;

  /* Type scale */
  --size-h1:      clamp(2.25rem, 6vw, 3.5rem);
  --size-h2:      clamp(1.625rem, 4vw, 2.25rem);
  --size-h3:      1.0625rem;
  --size-body:    1.0625rem;  /* 17px at a default root; scales with user preference */
  --size-eyebrow: 0.8125rem;
  --size-meta:    0.8125rem;

  --track-h1:      0.005em;
  --track-h2:      0.01em;
  --track-h3:      0.02em;
  --track-eyebrow: 0.18em;
  --track-meta:    0.01em;

  --leading-h1:   1.08;
  --leading-h2:   1.2;
  --leading-h3:   1.3;
  --leading-body: 1.65;

  /* Layout */
  --container:     1120px;
  --measure:       34rem;
  --rhythm:        8px;
  --section-space: clamp(3.5rem, 8vh, 6rem);
  --gutter:        1.5rem;
}

@media (min-width: 768px) {
  :root {
    --size-body: 1.125rem;  /* 18px at a default root */
    --gutter:    2.5rem;
  }
}

/* Field pairings. North Sea is the dominant field; Bone is a reading surface,
   never the page default. Setting one class swaps surface, ink, hairline and
   focus ring together. */

.field-dark,
.field-light {
  background: var(--surface);
  color: var(--ink);
}

.field-dark {
  --surface: var(--color-north-sea);
  --ink:     var(--color-bone);
  --rule:    var(--rule-on-north-sea);
  --focus:   var(--color-bone);
}

.field-light {
  --surface: var(--color-bone);
  --ink:     var(--color-north-sea);
  --rule:    var(--rule-on-bone);
  --focus:   var(--color-north-sea);
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
}

h1, h2, h3, h4, p, figure, blockquote {
  margin: 0;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

/* --------------------------------------------------------------------------
   4. Base and type scale
   -------------------------------------------------------------------------- */

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--size-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--size-h1);
  letter-spacing: var(--track-h1);
  line-height: var(--leading-h1);
}

h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--size-h2);
  letter-spacing: var(--track-h2);
  line-height: var(--leading-h2);
}

/* H3 keeps its own size and takes the eyebrow's case and tracking. Weight
   alone did not separate a sublabel from the body copy beneath it — DM Sans
   500 against DM Sans 300 at nearly the same size. Capitals at 0.18em do.
   This is the eyebrow's treatment at h3 scale, not the eyebrow's size.
   Uppercasing is presentational; the copy files keep their original case. */
h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-h3);
  letter-spacing: var(--track-eyebrow);
  line-height: var(--leading-h3);
  text-transform: uppercase;
}

/* The page eyebrow. Caps, weight and 0.18em tracking are shared with h3; the
   size is its own and stays smaller, so the two remain distinct roles. */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}

/* An eyebrow introduces the headline beneath it, so the pair is set close
   enough to read as one unit. Applies to any page with this pattern, not just
   the one that has it today. */
.eyebrow + h1 {
  margin-top: calc(var(--rhythm) * 1.5);
}

.meta {
  font-weight: 300;
  font-size: var(--size-meta);
  letter-spacing: var(--track-meta);
}

/* --------------------------------------------------------------------------
   5. Layout primitives
   -------------------------------------------------------------------------- */

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

/* Measure capped at 68 characters. */
.measure {
  max-width: var(--measure);
}

.section {
  padding-block: var(--section-space);
}

/* Sustained prose: capped at the measure, paragraphs separated by flow spacing
   rather than a heading structure. */
.prose {
  max-width: var(--measure);
}

.prose > p + p {
  margin-top: 1.5em;
}

/* The datum definition, used in the hero and again in the footer. */
.definition {
  max-width: var(--measure);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--size-h3);
  line-height: var(--leading-h3);
}

/* --------------------------------------------------------------------------
   6. Focus and skip link

   Focus rings are Bone on dark fields and North Sea on light fields, never Terra.
   -------------------------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  top: 0;
  left: var(--gutter);
  z-index: 10;
  transform: translateY(-150%);
  padding: calc(var(--rhythm) * 1.5) calc(var(--rhythm) * 2);
  background: var(--color-north-sea);
  color: var(--color-bone);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-meta);
  letter-spacing: var(--track-h3);
  text-decoration: none;
}

/* :focus, not :focus-visible — the skip link must reveal itself however focus
   arrives, including programmatic focus. */
.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   7. Wordmark

   Canonical lockup: "DATUM POINT" at 24px / 0.14em over "ADVISORY" at
   11px / 0.32em, centered beneath, hairline rule between at 0.18 opacity.
   Fills follow the field: Bone on North Sea, North Sea on light.
   -------------------------------------------------------------------------- */

.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  color: var(--ink);
  font-family: var(--font-wordmark);
  text-align: center;
  text-decoration: none;
}

.wordmark__name {
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.14em;
  /* Offsets the trailing letter-space so the lockup optically centres. */
  text-indent: 0.14em;
}

.wordmark__rule {
  height: 1px;
  margin-block: calc(var(--rhythm) * 0.75);
  background: currentColor;
  opacity: 0.18;
}

.wordmark__sub {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
}

/* --------------------------------------------------------------------------
   8. Header

   Below 768px: wordmark on its own row, links beneath, wrapping.
   At 768px and above: wordmark left, four links right, single row.
   No hamburger, no drawer, no JavaScript.
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--rhythm) * 2);
  padding-block: calc(var(--rhythm) * 3);
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--rhythm) * 3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Touch targets reach 44px through padding, not button chrome. */
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: calc(var(--rhythm) * 1.5);
  border-bottom: 1px solid transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--size-meta);
  letter-spacing: var(--track-h3);
  text-decoration: none;
}

.nav__link:hover {
  border-bottom-color: var(--rule);
}

/* Current page carries three cues: aria-current for assistive technology, the
   presence of a 1px rule as the structural cue, and Terra as the accent. Terra
   is never the sole indicator and is never applied to the link text, which
   would fail contrast at this size. */
.nav__link[aria-current="page"] {
  border-bottom-color: var(--color-terra);
}

@media (min-width: 768px) {
  .site-header__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--rhythm) * 4);
  }
}

/* --------------------------------------------------------------------------
   9. Footer

   Wordmark, datum definition, contact email, entity line.
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: calc(var(--rhythm) * 8);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--rhythm) * 3);
}

/* Underlined link. .site-footer__email is the footer instance of this role. */
.site-footer__email,
.link-underlined {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------------------
   10. Home — hero and the datum definition reveal

   The signature element, and the only motion on the site. CSS only; Stage 2
   ships no JavaScript.

   The animation lives inside the prefers-reduced-motion query and carries its
   own start state in the keyframes. The default state — outside that block —
   is the finished page. Reduced motion, disabled scripts, and animations that
   never run all render the final state. Content never depends on motion to
   appear.
   -------------------------------------------------------------------------- */

.hero__inner {
  max-width: var(--measure);
}

.hero__title {
  margin-top: calc(var(--rhythm) * 3);
}

.hero__capability {
  margin-top: calc(var(--rhythm) * 3);
}

@keyframes datum-resolve {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* The hidden start state comes from the keyframes via `both` (backwards fill
     covers the delay), never from a static opacity: 0. If the animation does
     not run for any reason, the element keeps its default opacity and the text
     is simply there. */
  .hero__definition,
  .hero__title,
  .hero__capability {
    animation: datum-resolve 600ms cubic-bezier(0.2, 0, 0, 1) both;
  }

  .hero__definition { animation-delay: 120ms; }
  .hero__title      { animation-delay: 760ms; }
  .hero__capability { animation-delay: 1200ms; }
}

/* --------------------------------------------------------------------------
   11. Home — the fork

   Two paths, equal visual weight. No cards, no icons, no imagery.
   -------------------------------------------------------------------------- */

.fork__paths {
  display: grid;
  gap: calc(var(--rhythm) * 6);
}

.fork__label {
  margin-bottom: calc(var(--rhythm) * 2);
}

.fork__link {
  padding-bottom: calc(var(--rhythm) * 0.5);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}

.fork__link:hover {
  border-bottom-color: currentColor;
}

.fork__note {
  max-width: var(--measure);
}

@media (min-width: 768px) {
  .fork__paths {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--rhythm) * 8);
  }
}

/* --------------------------------------------------------------------------
   12. Home — principal teaser
   -------------------------------------------------------------------------- */

.principal__teaser {
  max-width: var(--measure);
}

/* Quiet link: no underline at rest, a hairline underline on hover. The focus
   state is the global Bone focus ring from section 6, which needs no override
   here. .principal__link is the homepage instance of this role. */
.principal__link,
.link-quiet {
  text-decoration: none;
}

.principal__link:hover,
.link-quiet:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------------------
   13. Bone band seams

   The colour edge stays hard — no gradient, no fade. The transition is handled
   with space alone: one and a half times the base spacing on both sides of each
   seam, so no text sits near the boundary and the edge reads as deliberate
   rather than abrupt. No hairline at either boundary.

   The multiplier was 2 while the base was clamp(5rem, 12vh, 9rem). Against the
   tightened base it made the seam the loudest interval on the page, and on
   Design & Construction it left the Bone block carrying more empty field than
   text. 1.5 keeps the seam clearly more generous than a standard section gap
   without dominating it.

   The rule resolves through --rule, which is --rule-on-bone inside a light
   field, so both hairlines are the Bone-side value.
   -------------------------------------------------------------------------- */

.section.field-light {
  padding-block: calc(var(--section-space) * 1.5);
}

/* The dark section immediately above a Bone band. Where :has() is unsupported
   the seam falls back to standard section padding and the hairline still
   lands — the layout degrades, it does not break. */
.section:has(+ .section.field-light) {
  padding-bottom: calc(var(--section-space) * 1.5);
}

/* The dark section immediately below one. */
.section.field-light + .section {
  padding-top: calc(var(--section-space) * 1.5);
}

/* --------------------------------------------------------------------------
   14. Design & Construction

   Section headings, the phase sequence, and deliverable lists. The phase
   sequence is shared by "Where Datum enters" and "Working with Datum" — the
   same label-and-description pattern at different lengths.
   -------------------------------------------------------------------------- */

.page-hero__title {
  margin-top: calc(var(--rhythm) * 3);
}

.section__title {
  margin-bottom: calc(var(--rhythm) * 4);
}

.section__intro,
.section__body {
  max-width: var(--measure);
}

.section__intro {
  margin-bottom: calc(var(--rhythm) * 7);
}

/* A sequence, not cards: no border, no background, no marker. Separation is
   vertical rhythm only. */
/* Tracked capitals need more air above than below, so each label sits closer
   to the paragraph it introduces than to the block above it. The grid gap
   carries the separation between phases; the label's own bottom margin is
   tightened so the label binds to its own description. */
.phases {
  display: grid;
  gap: calc(var(--rhythm) * 7);
}

.phase__label {
  margin-bottom: calc(var(--rhythm) * 1);
}

.phase__desc {
  max-width: var(--measure);
}

/* Semantic list, no bullet glyph. */
.deliverables {
  margin: calc(var(--rhythm) * 4) 0 0;
  padding: 0;
  max-width: var(--measure);
  list-style: none;
}

.deliverables > li + li {
  margin-top: calc(var(--rhythm) * 1.5);
}

.link-line {
  margin-top: calc(var(--rhythm) * 4);
}

/* --------------------------------------------------------------------------
   15. LiDAR Radial

   Canonical geometry: viewBox 0 0 140 140, centre (70,70). Fans are drawn
   first and extend beyond the outer ring; ring, crosshairs and centre point
   draw on top. No diagonal ticks.

   Colours resolve through tokens rather than literals. The standard calls for
   Bone fans and ring on North Sea and North Sea on Bone, which is exactly what
   --ink already does, so the mark takes its field automatically.

   --mark-stroke is set per context: the lockup renders small and wants a
   heavier viewBox stroke to land near 1px; the hero mark renders large and
   wants a much lighter one.
   -------------------------------------------------------------------------- */

.mark {
  --mark-stroke: 3;
  display: block;
  flex: none;
}

.mark__fan--r1,
.mark__fan--r2,
.mark__fan--r3 {
  fill: var(--ink);
}

.mark__fan--l1,
.mark__fan--l2,
.mark__fan--l3 {
  fill: var(--color-terra);
}

/* Dark field (North Sea) opacities. */
.mark__fan--r1 { opacity: 0.07; }
.mark__fan--r2 { opacity: 0.11; }
.mark__fan--r3 { opacity: 0.17; }
.mark__fan--l1 { opacity: 0.22; }
.mark__fan--l2 { opacity: 0.34; }
.mark__fan--l3 { opacity: 0.48; }

/* Light field (Bone) opacities. The standard specifies a different set; without
   these a lockup on a Bone section would render at the dark-field values. */
.field-light .mark__fan--r1 { opacity: 0.07; }
.field-light .mark__fan--r2 { opacity: 0.11; }
.field-light .mark__fan--r3 { opacity: 0.16; }
.field-light .mark__fan--l1 { opacity: 0.11; }
.field-light .mark__fan--l2 { opacity: 0.18; }
.field-light .mark__fan--l3 { opacity: 0.27; }

.mark__ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--mark-stroke);
}

.mark__center {
  fill: var(--color-terra);
}

/* --------------------------------------------------------------------------
   16. Horizontal lockup

   Mark left, vertical divider at 0.18, wordmark right. The canonical
   Horizontal configuration from the brand standard.

   The mark is 48px at and above 768px, matching the wordmark block's measured
   height. Below that it drops to 36px: at 320 the header has 272px of usable
   width against a 211px wordmark, and the 48px lockup does not fit.
   -------------------------------------------------------------------------- */

.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--rhythm);
  color: var(--ink);
  text-decoration: none;
}

.lockup__mark {
  width: 36px;
  height: 36px;
}

.lockup__divider {
  width: 1px;
  align-self: stretch;
  background: currentColor;
  opacity: 0.18;
}

@media (min-width: 768px) {
  .lockup {
    gap: calc(var(--rhythm) * 1.5);
  }

  .lockup__mark {
    width: 48px;
    height: 48px;
  }
}

/* --------------------------------------------------------------------------
   17. Structural hero mark — homepage only

   A graphic field element, not a logo. Bleeds off the right edge behind the
   hero, clear of the text column at every width.

   It never sits behind text. Bone on North Sea is exactly 9.50:1 and every
   part of the mark is lighter than North Sea, so any overlap would lower that
   ratio. The text column is capped at --measure and left-aligned, so the mark
   lives in the free band to its right; below 768px that band is 24px wide and
   the mark is not rendered at all.

   overflow: hidden on the section clips the bleed, so no horizontal scroll can
   arise from it regardless of viewport.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
}

.hero__mark {
  --mark-stroke: 0.6;
  position: absolute;
  top: 50%;
  right: 0;
  translate: 62% -50%;
  width: clamp(26rem, 38vw, 44rem);
  height: auto;
  opacity: 0.3;
  pointer-events: none;
}

.hero .container {
  position: relative;
}

@media (max-width: 767.98px) {
  .hero__mark {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   18. Background marks — homepage right-edge column

   One further instance below the hero mark, so the two read as a column down
   the right edge. It is top-aligned with its host section and clipped by that
   section rather than by positioning arithmetic, so the right edge is the only
   place it clips.

   A third instance in the principal section was removed. That section is one
   sentence tall — 203px at 1440 against a 749px mark — so only 27% of the mark
   survived the clip and it read as a stray arc. Containing it would have meant
   sizing it below the hero, inverting the progression that makes the set read
   as a system rather than as repetition.

   The fork section carries none either. Its two-column grid pushes painted ink
   to 1205px at 1440 and 717px at 768, leaving no clear band.

   Design & Construction carries three instances, in Where Datum enters,
   Existing Conditions Modeling, and Working with Datum. Its eyebrow-and-H1
   section is
   excluded: that H1 is not capped to the measure, so its ink reaches 1237px at
   1440 and leaves only 61px of band at 1024. Its Contact section is excluded
   on height, at 265px. The first two hosts are tall enough to contain the mark
   outright, so those instances clip at the right edge only.

   Strokes use vector-effect: non-scaling-stroke so ring and crosshair weights
   hold near 1px at any rendered size. This is a departure from the canonical
   geometry, permitted for background instances only — the shell lockup keeps
   canonical stroke scaling.
   -------------------------------------------------------------------------- */

.questions,
.mark-host {
  position: relative;
  overflow: hidden;
}

.bg-mark {
  --mark-stroke: 1;
  position: absolute;
  right: 0;
  height: auto;
  opacity: 0.3;
  pointer-events: none;
}

/* Top-aligned with the host section, so the mark never crosses the section's
   top boundary. Centring it on the padding band cut the mark's upper half off
   at that boundary, which read as a rendering fault rather than a bleed. The
   questions section is tall enough to hold the mark with only the right edge
   clipping. */
.bg-mark--a,
.bg-mark--dc {
  top: 0;
  translate: 66% 0;
  width: clamp(30rem, 46vw, 52rem);
}

/* Bleed equalisation.

   Below 1024 the bleed fractions differ because clearance at 768 forces it:
   at 62% the principal instance would overlap its own text by 23px. From 1024
   up there is room, so all three take the hero's 62% and show the same 53.2
   viewBox units — without this the largest instance showed the least
   geometry, because an equal pixel sliver covers less of a bigger mark. */
@media (min-width: 1024px) {
  .bg-mark--a,
  .bg-mark--dc {
    translate: 62% 0;
  }
}

@media (max-width: 767.98px) {
  .bg-mark {
    display: none;
  }
}