/*============================================================================
  Coderealm — the home page.
  ---------------------------------------------------------------------------
  Loaded LAST, after style.css and coderealm.css, and scoped almost entirely
  under `.cr` so it cannot leak into services.html / about-us.html / contact.html,
  which still run on the original theme.

  The 3D here is real CSS 3D: one `perspective` ancestor per cluster, children
  placed on their own Z planes, and a pointer handler that writes exactly two
  custom properties which the transforms read. No canvas, no library, and
  every effect degrades to a flat, readable card without JS.
============================================================================*/

/*--------------------------------------------------------------- 1. tokens */
.cr {
  --cr-ink: #0b0b0f;
  --cr-ink-2: #101017;
  --cr-surface: #16161f;
  --cr-surface-2: #1d1d28;
  --cr-line: rgba(255, 255, 255, 0.08);
  --cr-line-strong: rgba(255, 255, 255, 0.16);

  --cr-text: #ffffff;
  --cr-text-2: #a5a5b8;
  --cr-text-3: #6d6d80;

  /* The studio's accent, taken from the existing theme's primary button. */
  --cr-accent: #e63946;
  --cr-accent-soft: rgba(230, 57, 70, 0.14);

  --cr-radius: 20px;
  --cr-radius-sm: 12px;
  --cr-shell: 1200px;
  --cr-gutter: clamp(20px, 5vw, 48px);
  --cr-ease: cubic-bezier(0.22, 1, 0.36, 1);

  display: block;
  background: var(--cr-ink);
  color: var(--cr-text);
  overflow-x: clip;
}

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

.cr__shell {
  width: min(var(--cr-shell), 100% - var(--cr-gutter) * 2);
  margin-inline: auto;
}

.cr section {
  position: relative;
  padding: clamp(64px, 8vw, 116px) 0;
}

.cr h1,
.cr h2,
.cr h3,
.cr h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--cr-text);
}

.cr h1 {
  font-size: clamp(38px, 5.4vw, 66px);
  letter-spacing: -0.035em;
}

.cr h2 {
  font-size: clamp(28px, 3.8vw, 44px);
}

.cr h3 {
  font-size: clamp(19px, 1.6vw, 22px);
}

.cr p {
  margin: 0;
  color: var(--cr-text-2);
  font-size: 16.5px;
  line-height: 1.68;
}

.cr a {
  color: inherit;
  text-decoration: none;
}

.cr__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cr-text-3);
}

.cr__eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--cr-text-3);
}

.cr__lede {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.65;
  color: var(--cr-text-2);
}

.cr__head {
  max-width: 720px;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.cr__head h2 {
  margin: 16px 0 18px;
}

/*-------------------------------------------------------------- 2. buttons */
.cr__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.3s var(--cr-ease), background 0.3s var(--cr-ease),
    border-color 0.3s var(--cr-ease);
}

.cr .cr__btn--solid {
  background: var(--cr-text);
  color: var(--cr-ink);
}

.cr .cr__btn--solid:hover {
  transform: translateY(-2px);
  background: #f0f0f5;
  color: var(--cr-ink);
}

.cr .cr__btn--ghost {
  border-color: var(--cr-line-strong);
  color: var(--cr-text);
}

.cr .cr__btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--cr-text-2);
  color: var(--cr-text);
}

.cr__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/*----------------------------------------------------------- 3. atmosphere */
/* Two soft pools of light and a faint grid, both fixed, so scrolling moves
   the content across the light rather than moving the light with it. */
.cr__atmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 500px at 78% -8%, rgba(230, 57, 70, 0.13), transparent 62%),
    radial-gradient(620px 460px at 8% 22%, rgba(96, 108, 255, 0.1), transparent 60%);
}

.cr__veil {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: linear-gradient(var(--cr-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--cr-line) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
}

.cr section > .cr__shell {
  position: relative;
  z-index: 1;
}

/*=========================================================== 4. hero + scene */
.cr__hero {
  padding-top: clamp(52px, 7vw, 88px);
}

.cr__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.cr__hero h1 {
  margin: 20px 0 22px;
}

.cr__hero h1 em {
  font-style: normal;
  color: var(--cr-text-3);
}

.cr__hero .cr__lede {
  max-width: 54ch;
}

/* The signature line, kept — but as a mark under the fold rather than as the
   pitch itself. The pitch is what we build; this is who we are. */
.cr__motto {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--cr-line);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cr-text-3);
}

/*--  The stack  ----------------------------------------------------------*/
/* Four planes on four Z levels: the thing we say we do, drawn as the layers
   a real project actually has. Pointer parallax rotates the whole cluster. */
.cr__scene {
  position: relative;
  min-height: 580px;
  perspective: 1400px;
  perspective-origin: 55% 45%;
}

.cr__world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--py, 0) * -8deg)) rotateY(calc(var(--px, 0) * 13deg));
  transition: transform 0.9s var(--cr-ease);
}

.cr__plane {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(372px, 80%);
  padding: 18px 20px;
  border: 1px solid var(--cr-line-strong);
  border-radius: 16px;
  background: rgba(22, 22, 31, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 40px 80px -44px rgba(0, 0, 0, 0.95);
  transform-style: preserve-3d;
}

.cr__plane b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cr-text-3);
  margin-bottom: 10px;
}

.cr__plane p {
  font-size: 14px;
  line-height: 1.5;
}

/* Each plane sits further back and higher, so the cluster reads as a stack
   seen from slightly above — layers of one system, not four cards. */
.cr__plane--1 {
  transform: translate(-50%, -50%) translate3d(-34px, 168px, 90px);
}
.cr__plane--2 {
  transform: translate(-50%, -50%) translate3d(26px, 18px, 20px);
}
.cr__plane--3 {
  transform: translate(-50%, -50%) translate3d(-22px, -132px, -60px);
  opacity: 0.82;
}
.cr__plane--4 {
  transform: translate(-50%, -50%) translate3d(52px, -244px, -140px);
  opacity: 0.58;
}

/*--  The terminal plane  -------------------------------------------------*/
.cr__term {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--cr-text-2);
}

.cr__term > span {
  display: block;
  white-space: nowrap;
}

.cr__term .ok {
  color: #4ade80;
}

.cr__term .dim {
  color: var(--cr-text-3);
}

.cr__term .warn {
  color: #fbbf24;
}

/*--  Floating status chips  ----------------------------------------------*/
.cr__chip {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border-radius: 13px;
  border: 1px solid var(--cr-line-strong);
  background: rgba(16, 16, 23, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.95);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cr-text-2);
  white-space: nowrap;
}

.cr__chip b {
  color: var(--cr-text);
}

.cr__chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
}

.cr__chip--a {
  right: -8px;
  top: 40px;
}

.cr__chip--b {
  left: -26px;
  top: 210px;
}

/*========================================================== 5. tilt cards */
.cr__tilt {
  perspective: 1000px;
}

.cr__tilt-in {
  position: relative;
  height: 100%;
  padding: 28px 26px 26px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  background: var(--cr-surface);
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--ty, 0) * -6deg)) rotateY(calc(var(--tx, 0) * 8deg));
  transition: transform 0.5s var(--cr-ease), border-color 0.4s var(--cr-ease),
    box-shadow 0.5s var(--cr-ease);
  will-change: transform;
}

.cr__tilt:hover .cr__tilt-in {
  transition: transform 0.12s linear, border-color 0.4s var(--cr-ease),
    box-shadow 0.5s var(--cr-ease);
  border-color: var(--cr-line-strong);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 0.9);
}

.cr__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--cr-ease);
  background: radial-gradient(
    380px circle at calc(50% + var(--tx, 0) * 40%) calc(50% + var(--ty, 0) * 40%),
    rgba(255, 255, 255, 0.1),
    transparent 60%
  );
}

.cr__tilt:hover .cr__glare {
  opacity: 1;
}

.cr__z1 {
  transform: translateZ(20px);
}
.cr__z2 {
  transform: translateZ(38px);
}

/*--  Service grid  -------------------------------------------------------*/
.cr__grid {
  display: grid;
  /* Six cards. Fixed at three so they land as two clean rows rather than the
     four-plus-two that auto-fit produces at this shell width. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 1000px) {
  .cr__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cr__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cr__svc-ico {
  display: grid;
  place-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border: 1px solid var(--cr-line-strong);
  border-radius: 13px;
  background: var(--cr-surface-2);
  font-size: 20px;
}

.cr__tilt-in h3 {
  margin-bottom: 10px;
}

.cr__tilt-in p {
  font-size: 15px;
}

.cr__stack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.cr__stack-tags span {
  padding: 4px 10px;
  border: 1px solid var(--cr-line);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cr-text-3);
}

/*========================================================= 6. proof strip */
.cr__proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--cr-line);
  border-bottom: 1px solid var(--cr-line);
}

.cr__proof div {
  padding: 26px 22px;
  border-right: 1px solid var(--cr-line);
}

.cr__proof div:last-child {
  border-right: 0;
}

.cr__proof b {
  display: block;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 8px;
}

.cr__proof span {
  font-size: 13.5px;
  color: var(--cr-text-3);
  line-height: 1.45;
}

/*=========================================================== 7. product */
/* The Evento block. It is deliberately the quietest section on the page —
   the thing being sold is the screen, so nothing else competes with it. */
.cr__product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(32px, 4vw, 52px);
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  background: linear-gradient(160deg, var(--cr-surface) 0%, var(--cr-ink-2) 70%);
}

.cr__product-logo {
  height: 30px;
  width: auto;
  margin-bottom: 20px;
}

.cr__product h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  margin-bottom: 16px;
}

.cr__points {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.cr__points li {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 15px;
  color: var(--cr-text-2);
  line-height: 1.5;
}

.cr__points li::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--cr-accent);
}

.cr__points b {
  color: var(--cr-text);
}

/*--  The device  ---------------------------------------------------------*/
.cr__device-wrap {
  position: relative;
  perspective: 1300px;
  display: grid;
  place-items: center;
  min-height: 480px;
}

/* The chips are siblings of the device, not children, so they hang off the
   column rather than off the phone — and they stay flat while it rotates,
   which is what makes them read as labels on the scene. */
.cr__device-wrap .ev-chip--a {
  top: 74px;
  /* Hangs just past the column so it clears the phone's right edge rather
     than covering the app bar behind it. */
  right: -24px;
}

.cr__device-wrap .ev-chip--b {
  bottom: 84px;
  left: 0;
}

@media (max-width: 700px) {
  .cr__device-wrap .ev-chip {
    display: none;
  }
}

.cr__device {
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--py, 0) * -6deg)) rotateY(calc(-14deg + var(--px, 0) * 10deg));
  transition: transform 0.9s var(--cr-ease);
}

/*=========================================================== 8. process */
.cr__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  counter-reset: crstep;
}

.cr__step {
  position: relative;
  padding: 28px 26px 26px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  background: var(--cr-ink-2);
  counter-increment: crstep;
}

.cr__step::before {
  content: '0' counter(crstep);
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cr-accent);
}

.cr__step h3 {
  margin-bottom: 10px;
}

.cr__step p {
  font-size: 15px;
}

/*============================================================ 9. reasons */
.cr__reasons {
  display: grid;
  gap: 2px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  overflow: hidden;
  background: var(--cr-line);
}

.cr__reason {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(16px, 3vw, 44px);
  padding: 26px clamp(22px, 3vw, 34px);
  background: var(--cr-ink-2);
  transition: background 0.35s var(--cr-ease);
}

.cr__reason:hover {
  background: var(--cr-surface);
}

.cr__reason h3 {
  font-size: 18px;
}

.cr__reason p {
  font-size: 15px;
}

/*============================================================== 10. cta */
.cr__cta {
  text-align: center;
  padding: clamp(48px, 6vw, 76px) clamp(24px, 4vw, 56px);
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  background: linear-gradient(165deg, var(--cr-surface) 0%, var(--cr-ink) 78%);
}

.cr__cta h2 {
  margin: 16px auto 18px;
  max-width: 18ch;
}

.cr__cta .cr__lede {
  max-width: 56ch;
  margin-inline: auto;
}

.cr__cta .cr__actions {
  justify-content: center;
}

/*========================================================= 11. reveal */
.cr [data-cr-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--cr-ease), transform 0.9s var(--cr-ease);
}

.cr [data-cr-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* The slab hinges up from its own bottom edge — small angle on purpose. */
.cr [data-cr-reveal='slab'] {
  transform: perspective(1400px) rotateX(9deg) translateY(38px) scale(0.975);
  transform-origin: 50% 100%;
}

.cr [data-cr-reveal='slab'].is-in {
  transform: perspective(1400px) rotateX(0) translateY(0) scale(1);
}

/*====================================================== 12. responsive */
@media (max-width: 1100px) {
  .cr__hero-grid,
  .cr__product {
    grid-template-columns: minmax(0, 1fr);
  }

  .cr__scene {
    min-height: 460px;
    margin-top: 20px;
  }

  .cr__plane {
    width: min(360px, 86%);
  }
}

@media (max-width: 860px) {
  .cr__reason {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .cr__scene {
    min-height: 400px;
  }

  /* Three overlapping planes on a 375px screen is mud — keep the two that
     carry the message and drop the rest. */
  .cr__plane--3,
  .cr__plane--4,
  .cr__chip {
    display: none;
  }

  .cr__plane--1 {
    transform: translate(-50%, -50%) translate3d(0, 112px, 50px);
  }

  .cr__plane--2 {
    transform: translate(-50%, -50%) translate3d(0, -68px, 0);
  }

  .cr__proof div {
    border-right: 0;
    border-bottom: 1px solid var(--cr-line);
  }

  .cr__proof div:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cr__world,
  .cr__device,
  .cr__tilt-in,
  .cr__plane {
    transition: none !important;
    transform: none !important;
  }

  .cr__plane {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin-bottom: 14px;
  }

  .cr__world {
    position: static;
  }

  .cr__scene {
    min-height: 0;
  }

  .cr__chip,
  .cr__glare {
    display: none;
  }

  .cr [data-cr-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/*=================================================================
  13. Sub-page chrome
  services.html / about-us.html / contact.html run the same `.cr`
  system as the home page. They open with a compact hero and a
  breadcrumb rather than the 3D stack — a sub-page starts with the
  argument, not with the object.
=================================================================*/
.cr__pagehero {
  padding-top: clamp(44px, 6vw, 76px);
  padding-bottom: clamp(28px, 4vw, 44px);
}

.cr__pagehero h1 {
  font-size: clamp(34px, 4.6vw, 58px);
  max-width: 19ch;
  margin: 18px 0 20px;
}

.cr__pagehero .cr__lede {
  max-width: 60ch;
}

.cr__crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cr-text-3);
}

.cr__crumb a:hover {
  color: var(--cr-text);
}

.cr__crumb span[aria-current] {
  color: var(--cr-text-2);
}

/*--  Service detail rows  ------------------------------------------------*/
/* One discipline per row, alternating side, with a deliverables panel that
   tilts. The panel lists what actually lands in your hands, because that is
   the part a service page usually leaves out. */
.cr__rows {
  display: grid;
  gap: clamp(56px, 7vw, 96px);
}

.cr__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.cr__row:nth-child(even) .cr__row-art {
  order: -1;
}

.cr__row h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  margin: 14px 0 16px;
}

.cr__row-art {
  perspective: 1200px;
}

/*--  Deliverables panel  -------------------------------------------------*/
.cr__panel {
  position: relative;
  padding: 26px 26px 24px;
  border: 1px solid var(--cr-line-strong);
  border-radius: var(--cr-radius);
  background: linear-gradient(158deg, var(--cr-surface) 0%, var(--cr-ink-2) 76%);
  box-shadow: 0 40px 80px -46px rgba(0, 0, 0, 0.95);
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--ty, 0) * -5deg)) rotateY(calc(var(--tx, 0) * 7deg));
  transition: transform 0.5s var(--cr-ease);
  will-change: transform;
}

.cr__row-art:hover .cr__panel {
  transition: transform 0.12s linear;
}

.cr__panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--cr-line);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cr-text-3);
}

.cr__panel-head i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  flex: none;
}

.cr__panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

/* Padding and an absolute marker rather than a two-column grid: these items
   mix an element with loose text, and in a grid every text run either side of
   an element becomes its own grid item — which drops the tail of the sentence
   into the 16px marker column. */
.cr__panel li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--cr-text-2);
}

.cr__panel li::before {
  content: '✓';
  position: absolute;
  left: 2px;
  top: 0;
  font-size: 12px;
  line-height: 1.75;
  color: var(--cr-text-3);
}

.cr__panel li b {
  color: var(--cr-text);
  font-weight: 600;
}

/*--  Engagement cards  ---------------------------------------------------*/
.cr__engage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.cr__engage-price {
  margin: 14px 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cr-text);
}

.cr__engage-note {
  font-size: 13px;
  color: var(--cr-text-3);
}

@media (max-width: 900px) {
  .cr__engage {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*--  FAQ  ----------------------------------------------------------------*/
.cr__faq {
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius);
  overflow: hidden;
}

.cr__faq details {
  border-bottom: 1px solid var(--cr-line);
  background: var(--cr-ink-2);
}

.cr__faq details:last-child {
  border-bottom: 0;
}

.cr__faq summary {
  padding: 20px clamp(20px, 3vw, 30px);
  cursor: pointer;
  list-style: none;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--cr-text);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  transition: background 0.3s var(--cr-ease);
}

.cr__faq summary::-webkit-details-marker {
  display: none;
}

.cr__faq summary::after {
  content: '+';
  flex: none;
  font-size: 20px;
  line-height: 1;
  color: var(--cr-text-3);
  transition: transform 0.3s var(--cr-ease);
}

.cr__faq details[open] summary::after {
  transform: rotate(45deg);
}

.cr__faq summary:hover {
  background: var(--cr-surface);
}

.cr__faq p {
  margin: 0;
  padding: 0 clamp(20px, 3vw, 30px) 22px;
  font-size: 15.5px;
  max-width: 76ch;
}

/*--  Timeline  -----------------------------------------------------------*/
.cr__timeline {
  display: grid;
  gap: 0;
  border-left: 1px solid var(--cr-line);
  padding-left: clamp(22px, 3vw, 34px);
  margin-left: 6px;
}

.cr__tl {
  position: relative;
  padding-bottom: 34px;
}

.cr__tl:last-child {
  padding-bottom: 0;
}

.cr__tl::before {
  content: '';
  position: absolute;
  left: calc(clamp(22px, 3vw, 34px) * -1 - 5px);
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cr-accent);
}

.cr__tl b {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cr-text-3);
}

.cr__tl h3 {
  margin-bottom: 8px;
}

.cr__tl p {
  font-size: 15.5px;
  max-width: 62ch;
}

@media (max-width: 1100px) {
  .cr__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .cr__row:nth-child(even) .cr__row-art {
    order: 0;
  }
}

/*=================================================================
  14. Contact
  The form keeps its ids and field names — assets/js/contact.js
  POSTs them to mail.php — and only its skin changes.
=================================================================*/
.cr__contact {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.cr__ways {
  display: grid;
  gap: 14px;
}

.cr__way {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 22px;
  border: 1px solid var(--cr-line);
  border-radius: var(--cr-radius-sm);
  background: var(--cr-ink-2);
  transition: border-color 0.35s var(--cr-ease), background 0.35s var(--cr-ease);
}

a.cr__way:hover {
  border-color: var(--cr-line-strong);
  background: var(--cr-surface);
}

.cr__way-ico {
  display: grid;
  place-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--cr-line-strong);
  border-radius: 12px;
  background: var(--cr-surface-2);
  font-size: 17px;
}

.cr__way b {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cr-text-3);
}

.cr__way span {
  font-size: 16px;
  font-weight: 600;
  color: var(--cr-text);
  overflow-wrap: anywhere;
}

.cr__way small {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cr-text-2);
  line-height: 1.5;
}

/*--  The form  -----------------------------------------------------------*/
.cr__formcard {
  padding: clamp(26px, 3.5vw, 40px);
  border: 1px solid var(--cr-line-strong);
  border-radius: var(--cr-radius);
  background: linear-gradient(158deg, var(--cr-surface) 0%, var(--cr-ink-2) 78%);
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.95);
}

.cr__formcard h2 {
  font-size: clamp(21px, 2.2vw, 27px);
  margin-bottom: 8px;
}

.cr__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.cr__field {
  display: grid;
  gap: 7px;
}

.cr__field--wide {
  grid-column: 1 / -1;
}

.cr__field label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cr-text-3);
}

/* Typed high enough in specificity to beat bootstrap's .form-control, which
   is still loaded on this page for the header and footer. */
.cr .cr__field input,
.cr .cr__field textarea,
.cr .cr__field select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--cr-line-strong);
  border-radius: var(--cr-radius-sm);
  background: rgba(11, 11, 15, 0.6);
  color: var(--cr-text);
  font: inherit;
  font-size: 15.5px;
  line-height: 1.5;
  transition: border-color 0.25s var(--cr-ease), background 0.25s var(--cr-ease);
}

.cr .cr__field textarea {
  min-height: 132px;
  resize: vertical;
}

.cr .cr__field input::placeholder,
.cr .cr__field textarea::placeholder {
  color: var(--cr-text-3);
}

.cr .cr__field input:focus,
.cr .cr__field textarea:focus,
.cr .cr__field select:focus {
  outline: none;
  border-color: var(--cr-text-2);
  background: rgba(11, 11, 15, 0.85);
}

.cr__formcard button[type='submit'] {
  width: 100%;
  margin-top: 22px;
  border: 0;
}

.cr__formnote {
  margin-top: 16px;
  font-size: 13px;
  color: var(--cr-text-3);
  text-align: center;
}

/* contact.js adds .disabled to the form while the request is in flight. */
.cr__formcard form.disabled {
  opacity: 0.55;
  pointer-events: none;
}

@media (max-width: 900px) {
  .cr__contact {
    grid-template-columns: minmax(0, 1fr);
  }

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

  /* iOS Safari zooms the whole page when a focused field is under 16px, which
     on a contact form means every tap jolts the layout. 16px exactly. */
  .cr .cr__field input,
  .cr .cr__field textarea,
  .cr .cr__field select {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cr__panel {
    transition: none !important;
    transform: none !important;
  }
}

/*=================================================================
  15. Legal pages
  Long-form text, so the constraint here is the measure: body copy
  is capped near 72 characters regardless of viewport, because a
  policy nobody can read is the same as no policy.
=================================================================*/
.cr__legal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.cr__legalmain {
  max-width: 72ch;
}

.cr__legalmain h2 {
  font-size: clamp(19px, 1.9vw, 23px);
  margin: 44px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--cr-line);
}

.cr__legalmain h2:first-of-type {
  margin-top: 34px;
}

.cr__legalmain p {
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.75;
}

.cr__legalmain a {
  color: var(--cr-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--cr-text-3);
}

.cr__legalmain a:hover {
  text-decoration-color: var(--cr-text);
}

.cr__legalmain strong,
.cr__legalmain b {
  color: var(--cr-text);
}

.cr__legallist {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.cr__legallist li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--cr-text-2);
}

.cr__legallist li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cr-text-3);
}

.cr__meta {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cr-text-3);
}

/*--  The summary box at the top of each policy  --------------------------*/
.cr__callout {
  padding: 24px 26px;
  margin-bottom: 8px;
  border: 1px solid var(--cr-line-strong);
  border-left: 3px solid var(--cr-accent);
  border-radius: var(--cr-radius-sm);
  background: var(--cr-surface);
}

.cr__callout b {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cr-text-3);
}

.cr__callout p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--cr-text);
}

/*--  Owner to-do  --------------------------------------------------------*/
/* Marks the handful of facts this document cannot know — entity name,
   registered address, GSTIN, named providers. Deliberately loud: publishing a
   policy with these unfilled is worse than not publishing one. */
.cr__todo {
  padding: 16px 18px;
  border: 1px dashed var(--warning, #fbbf24);
  border-radius: var(--cr-radius-sm);
  background: rgba(251, 191, 36, 0.07);
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: #f4d58a !important;
}

.cr__todo b {
  color: #fbbf24 !important;
}

/*--  Side rail  ----------------------------------------------------------*/
.cr__legalside {
  position: sticky;
  top: 96px;
}

.cr__legaltoc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.cr__legaltoc a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--cr-text-2);
  transition: color 0.2s;
}

.cr__legaltoc a:hover {
  color: var(--cr-text);
}

/*--  Footer legal row  ---------------------------------------------------*/
.cr__legalnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 26px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cr-text-3);
}

.cr__legalnav a:hover {
  color: var(--cr-text);
}

@media (max-width: 900px) {
  .cr__legal {
    grid-template-columns: minmax(0, 1fr);
  }

  .cr__legalside {
    position: static;
  }
}

/*=================================================================
  16. Case study head
=================================================================*/
.cr__casehead {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--cr-line-strong);
  border-radius: var(--cr-radius);
  background: linear-gradient(158deg, var(--cr-surface) 0%, var(--cr-ink-2) 76%);
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.95);
}

.cr__casehead h2 {
  font-size: clamp(23px, 2.5vw, 32px);
  max-width: 24ch;
  margin-bottom: 16px;
}

.cr__casehead p {
  max-width: 68ch;
}

/*=================================================================
  17. Header, with six nav items
  ---------------------------------------------------------------
  The theme's nav was laid out for five items and a 252px logo with
  a 90px right margin. Adding "Our work" pushed it over.

  Measured at a 1280px viewport, the most common desktop width:

      logo 252 + margin 90        = 342
      menu (six items)            = 825
      phone button                = 251
                                  -----
                                    1418  in 1250px of nav area

  The first symptom was three labels wrapping to a second line and
  the header growing 72px -> 114px. Forcing nowrap then converted
  that into 103px of horizontal page scroll, which is worse. So the
  width has to come from somewhere real.

  Not scoped under `.cr` — the header sits outside <main> — so every
  rule here is written to touch only the header.
=================================================================*/
.header-area .main-menu > li > a {
  white-space: nowrap;
}

@media (min-width: 992px) {
  /* Reclaim the logo gutter rather than the labels: the gap was decorative,
     the labels are not. 50px back. */
  .header-area .brand-logo {
    margin-right: 40px;
  }

  .header-area .main-menu > li > a {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Below ~1500 the phone button is the item that will not fit, so it goes. It
   is repeated in the footer, on the contact page, and in every call to action
   on the site, so nothing is lost — and under 992 the hamburger takes over
   with the phone number inside the drawer. */
@media (min-width: 992px) and (max-width: 1499px) {
  .header-area .contact-number {
    display: none;
  }
}

@media (min-width: 992px) and (max-width: 1120px) {
  .header-area .brand-logo {
    width: 200px;
    margin-right: 20px;
  }

  .header-area .main-menu > li > a {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 15px;
  }
}

/*=================================================================
  18. Footer decoration overflow
  ---------------------------------------------------------------
  `.ft-shape-03` (assets/img/mask/circle-01.svg) is absolutely
  positioned off the right edge of the footer. Below 1200px it ends
  up 20px past the viewport and gives every page on the site a
  horizontal scrollbar — measured on all eight pages at 1100, 1000
  and 768.

  This predates the revamp; it was simply never measured. Clip at
  the footer rather than moving the shape, so the decoration keeps
  its intended position and just stops escaping.

  `overflow-x: clip` rather than `hidden`: clip does not create a
  scroll container, so `position: sticky` anywhere inside the footer
  would keep working.
=================================================================*/
.footer-area {
  overflow-x: clip;
}

/*=================================================================
  19. Footer
  ---------------------------------------------------------------
  The theme footer was the last piece of the old design left on the
  site: a pink-tinted rounded slab carrying four stock decorative
  shapes — an olive hexagon, a teal-and-pink triangle, a magenta
  ring, a cyan dot — in colours that appear nowhere else in the
  brand. It also ran 590px tall to hold about 250px of content.

  This replaces it. Scoped to `.site-footer` so nothing here can
  reach the old `.footer-area` rules still in style.css.
=================================================================*/
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--cr-ink, #0b0b0f);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #a5a5b8;
  font-size: 15px;
  line-height: 1.65;
}

.site-footer__inner {
  width: min(1200px, 100% - clamp(20px, 5vw, 48px) * 2);
  margin-inline: auto;
  padding: clamp(48px, 6vw, 72px) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}

.site-footer__brand img {
  width: 190px;
  height: auto;
  display: block;
  margin-bottom: 18px;
}

.site-footer__brand p {
  margin: 0 0 20px;
  max-width: 34ch;
  color: #a5a5b8;
  font-size: 15px;
  line-height: 1.7;
}

.site-footer__direct {
  display: grid;
  gap: 8px;
}

.site-footer__direct a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: opacity 0.25s ease;
  width: fit-content;
}

.site-footer__direct a:hover {
  opacity: 0.7;
  color: #ffffff;
}

.site-footer__direct span {
  color: #6d6d80;
  font-weight: 400;
}

.site-footer h4 {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #6d6d80;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.site-footer ul a {
  color: #a5a5b8;
  font-size: 15px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer ul a:hover {
  color: #ffffff;
}

/*--  Bottom bar  ---------------------------------------------------------*/
.site-footer__bottom {
  width: min(1200px, 100% - clamp(20px, 5vw, 48px) * 2);
  margin: clamp(40px, 5vw, 60px) auto 0;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 13.5px;
  color: #6d6d80;
}

.site-footer__motto {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6d6d80;
}

.site-footer__motto img {
  width: 15px;
  height: 15px;
  opacity: 0.75;
}

.site-footer__top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #a5a5b8;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer__top:hover {
  color: #ffffff;
}

@media (max-width: 900px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 28px;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}