/* ==========================================================================
   Lumident Dental Clinic — Makati
   --------------------------------------------------------------------------
   00  Tokens
   01  Reset and base
   02  Wordmark
   03  Header and nav
   04  Buttons
   05  Hero
   06  Services
   07  About and booking
   08  Reviews and figures
   09  Footer
   10  Motion
   11  Responsive

   The one light sample in the set. Its bands are pale blue rather than white —
   #EFF7FE and #F8FBFD, both read off the comp — because a page of pure white
   with blue accents is the shape every rejected sample took, and the tint is
   what keeps this one from being that.
   ========================================================================== */

/* 00  Tokens ==============================================================
   Sampled off img/comp.webp by modal pixel within each mass rather than by eye.
   The first read of the blue came back #52ACF8, which is the booking card and
   not the brand — it is simply the largest blue area in the file. Sampling the
   headline's glyph cores and the button separately gives #0D7EF7, and both
   agree to within a unit. */

:root {
  --blue:      #0D7EF7;   /* headline accent, buttons, icons */
  --blue-deep: #053584;   /* the booking card's own submit */
  --sky:       #4CA6F8;   /* booking card ground */
  --ink:       #071646;   /* headings — a very dark navy, never black */
  --body:      #55617D;
  --muted:     #7B87A1;

  --paper:     #FFFFFF;
  --paper-2:   #F8FBFD;   /* hero ground at its left edge */
  --band:      #EFF7FE;   /* about panel and footer */

  --line:      #E3EDF8;
  --line-soft: #EFF4FA;

  /* Tinted to the palette's own navy. A grey shadow on a blue-white page reads
     as dust; a navy one reads as depth. */
  --sh-card: 0 1px 2px rgba(7, 22, 70, .04), 0 12px 30px -12px rgba(7, 22, 70, .12);
  --sh-lift: 0 2px 4px rgba(7, 22, 70, .06), 0 22px 48px -18px rgba(7, 22, 70, .22);

  --r-card: 16px;
  --r-panel: 22px;
  --r-pill: 999px;

  --nav-h: 84px;
  --shell: min(1180px, 100% - 80px);
  --gut:   max(40px, calc((100vw - 1180px) / 2));

  --f: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}


/* 01  Reset and base ====================================================== */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--f);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden here would stop the sticky header sticking. */
  overflow-x: clip;
}

svg { display: block; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

.shell { width: var(--shell); margin-inline: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Headings break on spans, not <br>. A hidden <br> at a breakpoint deletes the
   break with nothing in its place and welds the words together. */
.h2, .hero__title {
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--ink);
}
.h2 { font-size: clamp(26px, 2.7vw, 36px); }
.h2--sm { font-size: clamp(23px, 2.2vw, 29px); }
.h2 span, .hero__title span { display: block; }

.blue { color: var(--blue); }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue);
}

/* 860, not 720. "Complete dental care for you & your family" measures about
   780px at the 36px ceiling, so a 720 measure broke it to two lines where the
   comp holds it on one. */
.head { max-width: 860px; margin-inline: auto; text-align: center; }
.head .h2 { margin-top: 12px; }
/* The comp underscores its section headings with a short blue rule rather than
   a full-width one. */
.head__rule {
  display: block;
  width: 54px; height: 3px;
  margin: 18px auto 0;
  border-radius: 3px;
  background: var(--blue);
}
.head__rule--left { margin-inline: 0; margin-block: 14px 18px; }

.u-sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: absolute; left: 16px; top: 14px; z-index: 200;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--blue); color: #fff; font-weight: 700;
}

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


/* 02  Wordmark ============================================================ */

.mark { display: inline-flex; align-items: center; gap: 10px; }
.mark__icon { width: 34px; height: 36px; color: var(--blue); flex: none; }
.mark__text { display: grid; gap: 1px; }
.mark__name {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.mark__sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--muted);
}


/* 03  Header and nav ======================================================
   Transparent at the top of the page, solid once scrolled. Light samples do
   not use glass: over a light page the translucency lets the page's own
   imagery through the nav links, and the blur is then only rescuing
   legibility the opacity removed. The dark samples keep theirs.
   */

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.site-header.is-stuck,
.site-header.is-open {
  /* Solid, not glass — this site is light. A translucent bar over a light page
     was letting the page's own imagery through the nav links, and the blur was
     only there to rescue legibility the opacity had taken away. The dark
     samples keep their glass: over a dark ground the effect reads as depth
     rather than as interference. No backdrop-filter behind an opaque
     background — it blurs what nobody can see and still costs a layer. */
  background: var(--paper);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 22px -16px rgba(7, 22, 70, .5);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 28px);
  min-height: var(--nav-h);
}

.nav__links { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); }
.nav__links > a {
  position: relative;
  padding: 6px 0;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  transition: color .16s ease;
}
.nav__links > a:hover { color: var(--blue); }
.nav__links > a.is-here { color: var(--blue); font-weight: 600; }
.nav__links > a.is-here::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2.5px; border-radius: 3px;
  background: var(--blue);
}

/* Weight AND order: .btn sets display:inline-flex and lives in section 04,
   after this one, so a bare .nav__cta at the same specificity would lose to it
   and the button would show at desktop as well as in the menu. */
.nav__links > a.nav__cta { display: none; }

.burger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0; border: 0;
  background: transparent; cursor: pointer;
}
.burger span {
  width: 21px; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .22s ease, opacity .16s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* 04  Buttons ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1.5px solid var(--blue);
  border-radius: var(--r-pill);
  background: var(--blue);
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  box-shadow: 0 10px 22px -12px rgba(13, 126, 247, .8);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:hover { transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  color: var(--blue);
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(13, 126, 247, .07); }

.btn--deep {
  width: 100%;
  border-color: var(--blue-deep);
  background: var(--blue-deep);
  box-shadow: none;
  padding-block: 16px;
}

.more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--blue);
}
.more svg { width: 17px; height: 17px; transition: transform .18s ease; }
.more:hover svg { transform: translateX(3px); }


/* 05  Hero ================================================================
   One full-width plate carrying the surgery and its own pale ground, generated
   from the comp. The left 45% of it is deliberately empty — that is where this
   copy sits — so there is no figure to mask and no join to hide. */

.hero {
  position: relative;
  background:
    /* A wash across the top, because the bar above it is transparent and the
       plate is busy up there. Measured: the ground behind "Contact" runs 195 to
       254 in luminance with a standard deviation of 17.8, against 0.0 behind
       "Home" — the overhead light sits exactly under that word. Contrast was
       never the problem (10.1:1, comfortably past AA); the detail was. This
       calms the top 150px and leaves the rest of the plate alone. */
    linear-gradient(to bottom, var(--paper-2) 0, rgba(248, 251, 253, .88) 62px, rgba(248, 251, 253, 0) 150px),
    linear-gradient(to right, var(--paper-2) 0 10%, rgba(248, 251, 253, .72) 34%, rgba(248, 251, 253, 0) 62%),
    url("img/hero.webp") center right / cover no-repeat,
    var(--paper-2);
  /* Up behind the bar so the plate reaches the top of the page, with the
     height given back as padding. */
  margin-top: calc(var(--nav-h) * -1);
  padding-block: calc(var(--nav-h) + clamp(48px, 6vw, 92px)) 0;
}

.hero__copy { max-width: min(560px, 52%); }

.hero__title { font-size: clamp(38px, 4.6vw, 60px); }

.hero__sub {
  margin-top: clamp(16px, 1.8vw, 24px);
  font-size: clamp(16.5px, 1.25vw, 18.5px);
  color: var(--body);
}
.hero__sub span { display: block; }

.hero__acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(22px, 2.6vw, 34px); }

.hero__plate, .about__photo { display: none; }

/* The strip sits on the hero's lower edge and hangs below it, so the services
   section has to start clear of the overhang — see .services' padding-top. */
.marks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(40px, 5.6vw, 78px);
  padding: 20px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper);
  box-shadow: var(--sh-card);
  transform: translateY(50%);
}
.marks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline: clamp(12px, 1.6vw, 22px);
}
.marks li + li { border-left: 1px solid var(--line); }
.marks svg { width: 26px; height: 26px; flex: none; color: var(--blue); }
.marks span { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }


/* 06  Services ============================================================ */

/* The top padding carries the feature strip's overhang plus the section's own
   air. Change the strip's translate and this has to move with it. */
.services { background: var(--paper); padding-block: clamp(96px, 11vw, 150px) clamp(48px, 6vw, 82px); }

.cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(30px, 3.6vw, 46px);
}
.card {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 1.8vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper);
  text-align: center;
  align-items: center;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover { border-color: rgba(13, 126, 247, .4); box-shadow: var(--sh-card); transform: translateY(-3px); }
.card__icon { width: 38px; height: 40px; color: var(--blue); }
.card h3 {
  margin: 16px 0 8px;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.card p { font-size: 14px; line-height: 1.5; color: var(--body); }


/* 07  About and booking =================================================== */

.split { background: var(--paper); padding-bottom: clamp(48px, 6vw, 82px); }

.split__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: stretch;
  gap: clamp(18px, 2.2vw, 30px);
}

/* One plate, not a grid with a picture in it. The first pass butted the copy
   column against an <img> and the join was a hard vertical edge; the reference
   dissolves its photograph into the panel through a wide pale gradient, and a
   gradient like that belongs in the image rather than in an overlay that has to
   guess where the subject starts. So the whole card is generated as a single
   background — pale ground, photograph and the fade between them — and the copy
   is laid over its left 55%, which the plate leaves deliberately empty.

   Sized `cover` against a 1:1 plate in a 0.932 box: the frame is proportionally
   taller, so it trims about 3.4% off each side, which the plate was written to
   survive. */
.about {
  overflow: hidden;
  border-radius: var(--r-panel);
  background: url("img/about.webp") center / cover no-repeat, var(--band);
}
/* 53%, measured against the plate rather than guessed: its subject begins at
   52.6% of the frame, and cover trims 3.4% off each side, so the dentist lands
   at about 52.8% of what is visible. 53% with 36px of right padding stops the
   text at roughly 47% and leaves him clear. */
.about__copy { max-width: 53%; padding: clamp(24px, 2.6vw, 36px); }
.about__copy > p { margin-top: 4px; font-size: 15.5px; color: var(--body); }
.about__copy .btn { margin-top: 24px; }

.ticks { display: grid; gap: 11px; margin-top: 20px; }
/* 14.5 and a tighter gap. The copy column is 53% of the card so the ticks have
   about 209px after the icon, and the comp sets each of these on one line. */
.ticks li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--ink); }
.ticks svg { width: 19px; height: 19px; flex: none; color: var(--blue); }

.book {
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--r-panel);
  background: linear-gradient(160deg, var(--sky), var(--blue) 92%);
  color: #fff;
  box-shadow: var(--sh-lift);
}
.book__disc {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
.book__disc svg { width: 25px; height: 25px; }
.book h2 { margin-top: 16px; font-size: clamp(21px, 2vw, 27px); font-weight: 800; letter-spacing: -.02em; }
.book__lede { margin-top: 4px; font-size: 15px; color: rgba(255, 255, 255, .88); }

.book__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.book__row, .book__select, .book textarea { margin-top: 12px; }

.book input, .book select, .book textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  color: var(--ink);
  font-size: 15px;
}
.book textarea { resize: vertical; min-height: 92px; }
.book ::placeholder { color: var(--muted); }

/* The chevron is drawn rather than left to the platform, because a native
   select arrow is a different shape on every OS and this one is on the comp. */
.book__select { position: relative; }
.book__select select { appearance: none; padding-right: 42px; }
.book__select svg {
  position: absolute; right: 14px; top: 50%;
  width: 20px; height: 20px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.book .btn--deep { margin-top: 16px; }

.book__fine {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, .9);
}
.book__fine svg { width: 15px; height: 15px; }


/* 08  Reviews and figures ================================================= */

.reviews { background: var(--paper); padding-block: clamp(34px, 4.4vw, 62px) clamp(48px, 6vw, 84px); }

.reviews__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  align-items: center;
  gap: clamp(26px, 4vw, 60px);
}

.says { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.says__mark { width: 34px; height: 34px; flex: none; color: rgba(13, 126, 247, .35); }
.says blockquote p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--body); }
.says figcaption { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--ink); }

.dots { display: flex; gap: 7px; margin-top: 14px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dots i.is-on { background: var(--blue); width: 20px; border-radius: 4px; }

.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figures li { display: grid; justify-items: center; text-align: center; padding-inline: 12px; }
.figures li + li { border-left: 1px solid var(--line); }
.figures svg { width: 28px; height: 28px; color: var(--blue); }
.figures strong { margin-top: 10px; font-size: clamp(21px, 2vw, 26px); font-weight: 800; color: var(--ink); }
.figures span { font-size: 14px; color: var(--muted); }


/* 09  Footer ============================================================== */

.site-footer { background: var(--band); padding-top: clamp(38px, 4.6vw, 62px); }

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, .95fr) minmax(0, 1.1fr);
  gap: clamp(22px, 3vw, 44px);
  align-items: start;
}
.foot__brand p { margin-top: 16px; max-width: 32ch; font-size: 14.5px; color: var(--body); }

.foot__social { display: flex; gap: 9px; margin-top: 18px; }
.foot__social a {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  transition: color .16s ease, background-color .16s ease;
}
.foot__social a:hover { background: var(--blue); color: #fff; }
.foot__social svg { width: 16px; height: 16px; }

.foot__col h3 {
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
.foot__col > a {
  display: block;
  padding: 4px 0;
  font-size: 14.5px;
  color: var(--body);
  transition: color .16s ease;
}
.foot__col > a:hover, .foot__col--contact a:hover { color: var(--blue); }

.foot__col--contact p {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 14.5px;
  color: var(--body);
}
.foot__col--contact svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--blue); }

.foot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(26px, 3.2vw, 44px);
  padding-block: 18px 22px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}


/* 10  Motion ============================================================== */

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


/* 11  Responsive ==========================================================
   1120 is where seven nav links stop fitting beside the button; 980 is where
   six service cards stop holding a sentence; 760 is where the two-column
   sections stop being two. */

@media (max-width: 1120px) {
  :root { --shell: min(1180px, 100% - 56px); --gut: max(28px, calc((100vw - 1180px) / 2)); }

  .burger { display: flex; order: 2; }
  .nav { flex-wrap: wrap; }
  .nav__btn { order: 1; }
  .nav__links {
    order: 4;
    flex-basis: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 4px 0 16px;
    border-top: 1px solid var(--line);
  }
  .nav__links.is-open { display: flex; }
  .nav__links > a { padding: 9px 2px; font-size: 16.5px; }
  .nav__links > a.is-here::after { right: auto; width: 26px; }

  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .marks { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .marks li:nth-child(odd) { border-left: 0; }
  .split__grid { grid-template-columns: minmax(0, 1fr); }
  .reviews__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  :root { --shell: min(1180px, 100% - 40px); --nav-h: 68px; }

  .nav { min-height: 0; padding-block: 15px; }
  /* The bar keeps the wordmark and the burger and nothing else — the pill is
     too wide to sit beside them at 375, so it moves into the menu. */
  .nav__btn { display: none; }
  .nav__links > a.nav__cta { display: inline-flex; margin-top: 14px; padding: 13px 26px; font-size: 15px; }

  /* Stacked, not scrimmed. Washing the plate under the headline left the
     chair half-cropped and the copy sitting on a fog of it. The copy now sits
     on the plain pale ground; its own 2:3 plate follows as a full-bleed band
     with the chair as big as it is on a desktop; and the feature strip rides
     over the band's lower edge, the way it rides over the hero's edge at
     1440, instead of hanging into the services section. */
  .hero { background: var(--paper-2); padding-bottom: 28px; }
  .hero__copy { max-width: none; }
  .hero__title { font-size: clamp(32px, 8.8vw, 42px); }
  .hero__plate {
    display: block;
    height: clamp(380px, 116vw, 500px);
    margin: 10px calc(50% - 50vw) 0;
    background:
      linear-gradient(to bottom, var(--paper-2) 0, rgba(248, 251, 253, 0) 16%, rgba(248, 251, 253, 0) 88%, var(--paper-2) 100%),
      url("img/hero-mobile.webp?v=1") center 60% / cover no-repeat,
      var(--paper-2);
  }
  .marks { position: relative; z-index: 1; margin-top: -84px; transform: none; }
  .services { padding-top: clamp(48px, 6vw, 82px); }

  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* At this width there is no room for copy beside the photograph, and the
     plate's fade had nowhere to go — the heading ended up sitting on the
     dentist's arm. So the card drops the plate: copy on the panel's own
     colour, then a photograph composed for a full-width block under it. */
  .about { background: var(--band); }
  .about__copy { max-width: none; }
  /* The card's own padding stays under the button, plus a little more, so the
     button and the photograph sit apart the way the paragraph and the ticks do. */
  .about__photo {
    display: block;
    aspect-ratio: 4 / 3;
    margin: 6px clamp(16px, 4vw, 24px) clamp(16px, 4vw, 24px);
    border-radius: calc(var(--r-panel) - 8px);
    background: url("img/about-mobile.webp?v=1") center / cover no-repeat, var(--paper);
  }
  .figures { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .figures li + li { border-left: 0; border-top: 1px solid var(--line); padding-top: 22px; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .marks { grid-template-columns: minmax(0, 1fr); }
  .marks li { border-left: 0 !important; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .book__row { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
}