/* ThinkTell: Direction A, The Statement. See DIRECTION.md.
   Brand values live here once, so they can be swapped when the guidelines are final. */

/* DM Sans, self-hosted: one variable file per subset covers 300 to 600 (SIL OFL, fonts/OFL.txt) */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* brand palette */
  --slate: #1a3834;      /* Dark Slate Grey: text, dark sections */
  --teal: #486c66;       /* Deep Teal: lead fill, large shapes */
  --steel: #889e9b;      /* Cool Steel: quiet fills, never text */
  --linen: #e4ebe5;      /* Soft Linen: alternate light ground */
  --white: #ffffff;
  --frost: #8dd3d1;      /* Frosted Blue: fill only, slate text */
  --lilac: #c1a5ad;      /* Lilac Ash: fill only, slate text */
  --green: #72b276;      /* Green (provisional): fill only, slate text */
  --brandy: #8a2a14;     /* the one warm colour: closing button only */

  /* roles */
  --bg: var(--white);
  --ink: var(--slate);
  --accent: var(--brandy);
  --accent-hover: #a03319;                                   /* Brandy, one step lighter */
  --tone-dark: color-mix(in srgb, var(--slate) 12%, transparent);  /* tonal diagonals on light fills */
  --tone-light: color-mix(in srgb, var(--white) 12%, transparent); /* tonal diagonals on dark fills */

  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --w-light: 300;       /* large display text only */
  --w-regular: 400;     /* all running text */
  --w-semi: 600;

  /* type scale: four sizes do the work */
  --step-body: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);   /* 17px phone, 18px+ from tablet, 20px desktop */
  --step-item: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  --step-head: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
  --step-display: clamp(2.5rem, 12.6vw, 12rem);

  --margin: clamp(1rem, 3.3vw, 3rem);
  --gutter: clamp(1rem, 2.2vw, 2rem);
  --section: clamp(6rem, 3rem + 9vw, 12.5rem);
  --seam: clamp(3.5rem, 2rem + 4vw, 6.5rem);       /* between two sections on the same ground */
  --seam-out: clamp(4.5rem, 2.5rem + 5vw, 8rem);   /* tighter hand-offs into the founder */

  /* motion: medium. Fast ease-out everywhere, nothing bounces or loops. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --t-hover: 180ms;
  --t-press: 140ms;
  --t-row: 260ms;        /* hover responses stay under 300ms */
  --t-reveal: 850ms;     /* scroll entrances */
  --t-tile: 975ms;
  --t-shape: 1150ms;
  --t-lag: 290ms;        /* a tile's top line starts once the fill has passed it */
  --t-lag-end: 560ms;    /* its bottom line starts once the fill has reached the base */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: var(--w-regular);
  font-size: var(--step-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, figure, ul { margin: 0; }
ul[role="list"] { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--teal); color: var(--white); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

h1, h2, h3 { font-weight: var(--w-semi); text-wrap: balance; }
p { max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 1em; }

.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.grid > * { grid-column: 1 / -1; }

.section { position: relative; padding-block: var(--section); overflow: hidden; }
.section > *:not(.shape) { position: relative; }

.head { font-size: var(--step-head); line-height: 1.08; letter-spacing: -0.025em; }

/* ---------- links and the button ---------- */
.link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--t-hover) ease;
}
.link:hover, .link:focus-visible { text-decoration-color: currentColor; }

.button {
  display: inline-flex;
  align-items: center;
  min-height: 3.75rem;
  padding: 0 2rem;
  background: var(--accent);
  color: var(--white);
  font-weight: var(--w-semi);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  text-decoration: none;
  border-radius: 0;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .header-mail:hover { color: var(--teal); }
  .button { transition: transform var(--t-row) var(--ease-out), background-color var(--t-hover) ease; }
  .button:hover { background: var(--accent-hover); transform: translateY(-2px); }
  .button:active { transform: translateY(0) scale(0.97); transition-duration: var(--t-press); }
}
.button:focus-visible { outline-color: var(--white); }

/* lets a tile's corner notch grow smoothly on hover */
@property --cut { syntax: "<length>"; inherits: true; initial-value: 0px; }

/* ---------- brand diagonal: one per section ---------- */
.shape { position: absolute; pointer-events: none; }

/* ---------- header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.site-logo { display: block; }
.site-logo, .header-mail { padding-block: var(--tap-pad, 0); margin-block: calc(var(--tap-pad, 0) * -1); }
.site-logo img { height: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); width: auto; }
.header-mail {
  display: inline-block;
  font-weight: var(--w-semi);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.header-mail:active { transform: scale(0.97); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - 5.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  padding-top: clamp(4rem, 2rem + 8vh, 9rem);
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  overflow: hidden;
}
.hero-title {
  position: relative;
  z-index: 1;
  font-size: var(--step-display);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.hero-title .line { display: block; white-space: nowrap; }
.hero-sub {
  position: relative;
  z-index: 1;
  max-width: 24ch;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  font-weight: var(--w-light);
  line-height: 1.35;
}
.shape--hero {
  right: 0;
  bottom: 0;
  width: 44vw;
  height: 48%;
  background: var(--teal);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* ---------- 01 introduction ---------- */
.intro { background: var(--linen); }
.intro-title { grid-column: 1 / span 9; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 5rem); }
.intro-body { grid-column: 7 / -1; }
.shape--intro {
  left: 0;
  bottom: 0;
  width: 36vw;
  height: 46%;
  background: var(--teal);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.section-title { margin-bottom: clamp(2.5rem, 1.75rem + 2.5vw, 5rem); }

/* ---------- ethos: four statement tiles ---------- */
.principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}
.principle {
  --notch: clamp(3rem, 2rem + 3vw, 5.5rem);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: clamp(20rem, 12rem + 18vw, 32rem);
  padding: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
  padding-right: calc(var(--notch) + 1rem);
  isolation: isolate;
  --cut: var(--notch);
}
/* the fill sits on its own layer so it can wipe in; the logo's notch is cut from its top right corner */
.principle::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fill);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.principle--teal { --fill: var(--teal); color: var(--white); }
.principle--slate { --fill: var(--slate); color: var(--white); }
.principle--linen { --fill: var(--linen); }
.principle-title {
  font-size: clamp(2.125rem, 1.2rem + 2.8vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  max-width: 11ch;
}
.principle p { max-width: 34ch; }

/* ---------- what we do: designed rows ---------- */
.services { background: var(--linen); }
.services .section-title { max-width: 70%; }
.service-list { border-bottom: 1px solid var(--steel); }
.service {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 0.75rem;
  align-items: baseline;
  padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 3rem);
  border-top: 1px solid var(--steel);
}
.service > * { position: relative; z-index: 1; }
.service-name {
  grid-column: 1 / span 6;
  font-size: clamp(1.75rem, 1rem + 2.1vw, 2.875rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.service p { grid-column: 7 / -1; }
.shape--services {
  right: 0;
  top: 0;
  width: 30vw;
  height: clamp(14rem, 10rem + 14vw, 24rem);
  background: var(--steel);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* hover brings one service forward: a white panel wipes in and a teal notch arrives */
@media (hover: hover) and (pointer: fine) and (min-width: 60.0625rem) {
  /* rules stay on the column; the hover panel reaches past them by --row-pad */
  .service-list { --row-pad: clamp(1rem, 2vw, 2rem); }
  .service::before,
  .service::after { content: ""; position: absolute; pointer-events: none; }
  .service::before {
    inset: -1px calc(var(--row-pad) * -1) 0;
    background: var(--white);
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--t-row) var(--ease-out);
  }
  .service::after {
    top: -1px;
    right: calc(var(--row-pad) * -1);
    width: 2.5rem;
    height: 2.5rem;
    background: var(--teal);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    opacity: 0;
    transform: translate(0.5rem, -0.5rem);
    transition: opacity var(--t-row) ease, transform var(--t-row) var(--ease-out);
  }
  .service-name { transition: transform var(--t-row) var(--ease-out); }
  .service:hover::before { clip-path: inset(0 0 0 0); }
  .service:hover::after { opacity: 1; transform: none; }
  .service:hover .service-name { transform: translateX(0.75rem); }
}

/* ---------- expertise: five sector tiles ---------- */
.expertise { background: var(--linen); }
/* What We Do and Areas of Expertise read as one linen band */
.services { padding-bottom: var(--seam); }
.expertise { padding-top: var(--seam); padding-bottom: var(--seam-out); }
.sectors {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gutter);
}
.sector {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: clamp(11rem, 7rem + 10vw, 19rem);
  padding: clamp(1.25rem, 0.75rem + 1.5vw, 2.25rem);
  font-weight: var(--w-semi);
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  isolation: isolate;
}
.sector:nth-child(n + 4) { grid-column: span 3; }
.sector::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--fill);
}
.sector-name { max-width: 12ch; }
.sector-icon { display: block; }
.sector-icon svg { display: block; width: clamp(2.25rem, 1.75rem + 1vw, 2.75rem); height: auto; }
/* tonal diagonal in the top right corner, clear of the label */
.sector::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tone-dark);
  clip-path: polygon(45% 0, 100% 0, 100% 72%);
}
.sector--frost { --fill: var(--frost); }
.sector--lilac { --fill: var(--lilac); }
.sector--green { --fill: var(--green); }
.sector--steel { --fill: var(--steel); }
.sector--teal { --fill: var(--teal); color: var(--white); } /* slate would sit at 2.2:1 on teal, so its icon follows its white label */
.sector--teal::before { background: var(--tone-light); }

/* ---------- founder ---------- */
.founder { padding-top: var(--seam-out); }
.founder-name { font-size: clamp(2.25rem, 0.8rem + 5.6vw, 6rem); line-height: 0.98; letter-spacing: -0.04em; }
.founder-bio b { font-weight: var(--w-semi); }
.founder-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-right: var(--margin);
  align-items: center;
}
.founder-photo {
  grid-column: 1 / span 6;
  position: relative;
  background: var(--linen);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.founder-photo::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 28%;
  height: 28%;
  background: var(--teal);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 1;
}
.founder-photo picture { display: contents; }
.founder-photo img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  mix-blend-mode: multiply;
}
.founder-text { grid-column: 8 / -1; }
.founder-role { font-weight: var(--w-semi); color: var(--teal); font-size: var(--step-item); margin: 0.5rem 0 clamp(2rem, 1.5rem + 1.5vw, 3rem); }

/* ---------- closing and footer ---------- */
.closing {
  position: relative;
  overflow: hidden;
  background: var(--slate);
  color: var(--white);
  padding-top: var(--section);
  padding-bottom: 0;
}
.closing > *:not(.shape) { position: relative; }
.closing-title {
  max-width: 15ch;
  font-size: clamp(2.875rem, 0.6rem + 6vw, 7rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.closing-lead { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); font-size: var(--step-item); }
.closing-action { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--slate);
  color: var(--white);
  padding-top: var(--section);
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  margin-top: -1px; /* closes the sub-pixel seam with the closing section above */
}
.closing-logo { width: clamp(11rem, 6rem + 22vw, 30rem); height: auto; }
.closing-domain { font-weight: var(--w-semi); }
.shape--closing {
  right: 0;
  top: 0;
  width: 30vw;
  height: 75%;
  background: var(--teal);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* ---------- tablet and phone ---------- */
@media (max-width: 60rem) {
  .intro-title, .intro-body { grid-column: 1 / -1; }
  .services .section-title { max-width: 60%; }
  .service-name, .service p { grid-column: 1 / -1; }

  .founder-grid { row-gap: 3rem; padding-right: 0; }
  .founder-photo { grid-column: 1 / span 11; }
  .founder-text { grid-column: 1 / -1; padding-inline: var(--margin); }

  .shape--services, .shape--closing {
    left: auto; right: 0; top: 0; bottom: auto;
    width: 34vw;
    height: 34vw;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }
  .shape--services { background: var(--steel); }
  /* keeps clear of the hero triangle directly above */
  .intro { padding-bottom: calc(22vw + 4rem); }
  .shape--intro {
    left: 0; right: auto; top: auto; bottom: 0;
    width: 30vw;
    height: 22vw;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
  }
}

@media (max-width: 40rem) {
  .hero {
    min-height: 0;
    justify-content: flex-start;
    gap: 2rem;
    padding-top: 3.5rem;
    padding-bottom: calc(48vw + 2.5rem);
  }
  .shape--hero { width: 80vw; height: 48vw; }
  .principles { grid-template-columns: 1fr; }
  .principle { min-height: 19rem; }
  .sectors { grid-template-columns: 1fr; gap: 0.75rem; }
  .sector, .sector:nth-child(n + 4) { grid-column: 1 / -1; min-height: 9.5rem; font-size: 1.625rem; }
  .sector-icon svg { width: 2rem; }
  .founder-photo { grid-column: 1 / -1; }
  .site-footer { flex-direction: column; align-items: flex-start; }
  /* phones: section heads step down so the hero and the closing stay the two biggest statements */
  :root { --step-head: 1.875rem; }
  .principle-title { font-size: 1.75rem; }
}

/* 44px tap targets on phones and any touch screen, without moving the layout */
@media (max-width: 40rem), (pointer: coarse) {
  .site-logo { --tap-pad: 10px; }    /* 24px logo becomes a 44px target */
  .header-mail { --tap-pad: 9px; }   /* 26px line becomes a 44px target */
}

/* ---------- motion: entrances, once ---------- */
/* text rises into place */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* tiles: the fill wipes down from the top, and each line of words rises in once the colour has passed it.
   The tile itself is never clipped, so the observer can still see it. */
html.js [data-reveal="tile"] { opacity: 1; transform: none; }
html.js .principle::after,
html.js .sector::after {
  transition: clip-path var(--t-tile) var(--ease-out) var(--delay, 0ms);
}
html.js .principle:not(.is-in)::after {
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% 0, 100% 0, 0 0);
}
html.js .sector:not(.is-in)::after { clip-path: inset(0 0 100% 0); }
html.js .sector::after { clip-path: inset(0 0 0 0); }
html.js .sector::before { transition: opacity 520ms ease calc(var(--delay, 0ms) + 455ms), clip-path var(--t-row) var(--ease-out); }
html.js .sector:not(.is-in)::before { opacity: 0; }
html.js [data-reveal="tile"] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--delay, 0ms) + var(--t-lag));
}
html.js [data-reveal="tile"] > :last-child { transition-delay: calc(var(--delay, 0ms) + var(--t-lag-end)); }
html.js [data-reveal="tile"].is-in > * { opacity: 1; transform: none; }

/* each diagonal slides in from the edge it is anchored to */
html.js .shape {
  transform: translateX(101%);
  transition: transform var(--t-shape) var(--ease-out);
}
html.js .shape--intro { transform: translateX(-101%); }
html.js .shape.is-in { transform: none; }
html.js .founder-photo::before {
  transform: translate(-101%, 0);
  transition: transform var(--t-shape) var(--ease-out) calc(var(--delay, 0ms) + 260ms);
}
html.js .founder-photo.is-in::before { transform: none; }

/* replay: while an element is reset off screen, nothing transitions, so it never visibly snaps back */
html.js .is-resetting,
html.js .is-resetting *,
html.js .is-resetting::before,
html.js .is-resetting::after { transition: none !important; }

/* ---------- hover on tiles: desktop only, fast ---------- */
@media (hover: hover) and (pointer: fine) {
  html.js .principle,
  .principle { transition: --cut var(--t-row) var(--ease-out); }
  .principle:hover { --cut: calc(var(--notch) * 1.4); }

  .sector-icon svg { transition: transform var(--t-row) var(--ease-out); }
  .sector:hover::before { clip-path: polygon(15% 0, 100% 0, 100% 100%); }
  .sector:hover .sector-icon svg { transform: translateX(6px); }
}

/* reduced motion: content fades in, nothing moves */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal="tile"] > *,
  html.js .shape,
  html.js .founder-photo::before {
    transform: none !important;
    transition: opacity 300ms ease;
    transition-delay: 0ms;
  }
  html.js .principle::after { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%) !important; }
  .principle:hover { --cut: var(--notch); }
  .sector:hover::before { clip-path: polygon(45% 0, 100% 0, 100% 72%); }
  .sector:hover .sector-icon svg { transform: none; }
  .button:hover, .button:active, .header-mail:active { transform: none; }
  html.js .sector::after { clip-path: none !important; }
  html.js [data-reveal="tile"] { opacity: 0; transition: opacity 300ms ease; }
  html.js [data-reveal="tile"].is-in { opacity: 1; }
  .service::before { clip-path: none !important; opacity: 0; transition: opacity 200ms ease !important; }
  .service:hover::before { opacity: 1; }
  .service-name, .service::after { transform: none !important; }
}

/* ---------- print and save as PDF: everything shown, every fill kept ---------- */
@media print {
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html.js [data-reveal],
  html.js [data-reveal] > *,
  html.js .shape,
  html.js .founder-photo::before,
  html.js .sector::before {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.js .principle::after { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%) !important; transition: none !important; }
  html.js .sector::after { clip-path: none !important; transition: none !important; }
  .hero { min-height: 0; }
  .principle, .sector, .service, .founder-grid { break-inside: avoid; }
  .service::before, .service::after { display: none; }
}