/* Фирменный стиль Tømrerfirmaet Mfj · направление bold · шрифты sora / dm-sans (OFL) */
@font-face{font-family:"Sora Display";font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/sora-300-800-normal-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;}
@font-face{font-family:"Sora Display";font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/sora-300-800-normal-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 Text";font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/dm-sans-300-800-normal-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;}
@font-face{font-family:"DM Sans Text";font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/dm-sans-300-800-normal-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;}
html[data-palette="brand"]{--paper:#F1F3EF; --surface:#FBFCFA; --tone:#DEE1DA; --ink:#232919; --ink-soft:#565F49; --line:rgba(35,41,25,.18); --brand:#475F06; --brand-deep:#354800; --brand-soft:#DCE9C8; --on-brand:#FFFFFF; --accent:#036C4D; --accent-bright:#68EEBA; --dark:#12150F; --on-dark:#F8FCF3; --on-dark-soft:#D1D7C9; --display:"Sora Display", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --body:"DM Sans Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --display-weight:800; --display-tracking:-.04em; --display-leading:1.0; --radius:0; --radius-lg:0; --btn-radius:0; --logo-font:"Sora Display", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --logo-weight:800; --logo-case:uppercase; --logo-track:0.02em;}
/* ============================================================
   BLOCK LIBRARY · BRAND CORE (2026-10-28)
   ------------------------------------------------------------
   Общая часть фирменного стиля. Подключается вместе с токенами
   бренда в assets/css/brand.css сайта (build/brand.py).
   Здесь только то, что нужно ЛЮБОМУ направлению: логотип в шапке
   и подвале, словесный знак фирменным шрифтом, сглаживание.
   ============================================================ */

html[data-palette="brand"] body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; }

/* Знак вместо квадрата с буквами. */
.brand__mark:has(> .brand__logo), .brand__box:has(> .brand__logo){
  background:none; width:auto; height:auto; padding:0; border-radius:0; min-width:0;
}
.brand__logo{ display:block; width:var(--logo-mark-size, 44px); height:var(--logo-mark-size, 44px); flex:none; }
.site-head--center .brand__logo, .site-head--split .brand__logo{ --logo-mark-size:48px; }

/* Словесный знак — шрифт и характер логотипа, а не основного текста. */
.brand__name{
  font-family:var(--logo-font, var(--display));
  font-weight:var(--logo-weight, 700);
  text-transform:var(--logo-case, none);
  letter-spacing:var(--logo-track, -.01em);
  font-size:var(--logo-size, 1.2rem);
}
.brand__sub{ letter-spacing:.12em; }

/* Шрифт ставится браузером сразу: текст виден, пока файл грузится. */
html[data-palette="brand"]{ font-synthesis-weight:none; }

/* Шапки «крупный бренд» и «бренд с подписью» были без знака: знак слева. */
.brand--big:has(.brand__logo), .brand--stack:has(.brand__logo){ flex-direction:row; align-items:center; gap:14px; }
.brand--big:has(.brand__logo) > span:not(.brand__mark), .brand--stack:has(.brand__logo) > span:not(.brand__mark){ display:flex; flex-direction:column; }
.brand--big .brand__logo{ --logo-mark-size:52px; }

/* Крупные заголовки на широком экране не переносятся по слогам («beslutnin-ger»):
   колонки там широкие, перенос нужен только телефонам (длинные датские слова). */
@media (min-width:900px){
  html[data-palette="brand"] :is(h1, h2){ hyphens:manual; }
}
/* Герой «кадр в рамке»: на широком экране фото и текст рядом — заголовок в первом экране. */
@media (min-width:1000px){
  html[data-palette="brand"] .hero-frame .wrap{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:center;
    column-gap:clamp(36px,5vw,84px); }
  html[data-palette="brand"] .hero-frame__figure{ order:2; }
  html[data-palette="brand"] .hero-frame__figure img{ aspect-ratio:4/3.2; }
}
html[data-palette="brand"] .hero-frame{ padding-top:var(--sect-tight); }

/* ============================================================
   BLOCK LIBRARY · BRAND VISUAL (2026-10-28)
   ------------------------------------------------------------
   Визуальные акценты фирменного стиля, общие для всех направлений:
   иконки карточек, графика первого экрана, водяной знак логотипа,
   глубина и движение. Цвета — только токены: на тёмных секциях
   всё перевязывается само. Специфичность — базовая (:where), чтобы
   точечные правила блоков оставались главнее.
   ============================================================ */

/* --- 1. Иконка карточки ----------------------------------- */
:where(html[data-palette="brand"]) .card-icon{
  display:inline-grid; place-items:center; flex:none;
  width:56px; height:56px; margin-bottom:20px;
  border-radius:var(--icon-radius, 16px);
  color:var(--brand);
  background:color-mix(in srgb, var(--brand) 11%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease;
}
:where(html[data-palette="brand"]) .card-icon__svg{ width:26px; height:26px; }
/* на тёмных панелях иконка светлая */
:where(html[data-palette="brand"]) :is(.blk--dark, .blk--brand, .services-rail, .process-rail, .site-foot) .card-icon{
  color:var(--accent-bright); background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
/* в фактах иконка меньше и встаёт над меткой */
:where(html[data-palette="brand"]) .facts-cards__grid .card-icon{ width:44px; height:44px; margin-bottom:14px; }
:where(html[data-palette="brand"]) .facts-cards__grid .card-icon__svg{ width:21px; height:21px; }
:where(html[data-palette="brand"]) .facts-cards__grid > div{ display:flex; flex-direction:column; }

/* --- 2. Карточки: глубина и отклик --------------------------- */
:where(html[data-palette="brand"]) :is(.services-cards__grid article, .services-mosaic article, .services-mini article,
  .services-bento__grid article, .faq-cards__grid article, .contact-cards__grid article, .process-grid__list li,
  .intro-points article, .facts-cards__grid > div){
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s ease;
}
@media (hover:hover){
  :where(html[data-palette="brand"]) :is(.services-cards__grid article, .services-mosaic article, .services-mini article,
    .services-bento__grid article, .faq-cards__grid article, .contact-cards__grid article, .process-grid__list li,
    .intro-points article):hover{ transform:translateY(-6px); }
  :where(html[data-palette="brand"]) :is(.services-cards__grid article, .services-mosaic article, .services-mini article,
    .services-bento__grid article, .faq-cards__grid article, .process-grid__list li, .intro-points article):hover .card-icon{
    transform:scale(1.08) rotate(-4deg); background:var(--brand); color:var(--on-brand); }
}

/* --- 3. Графика первого экрана -------------------------------- */
/* .hero-art-row = текст героя слева + фирменная графика справа; ряды
   реквизитов/колонок героя идут ниже на всю ширину. */
:where(html[data-palette="brand"]) .hero-art-row{ display:grid; grid-template-columns:minmax(0,1fr); }
:where(html[data-palette="brand"]) .hero-art-copy{ min-width:0; }
/* телефон: графика компактно под текстом героя */
:where(html[data-palette="brand"]) .hero-art{ display:block; width:min(100%, 340px); margin:clamp(28px,6vw,40px) auto 0; pointer-events:none; }
:where(html[data-palette="brand"]) .hero-art__svg{ width:100%; height:auto; }
:where(html[data-palette="brand"]) .has-art{ isolation:isolate; overflow:clip; }
@media (min-width:1000px){
  :where(html[data-palette="brand"]) .hero-art-row{
    grid-template-columns:minmax(0,1fr) minmax(0, min(42%, 500px)); gap:clamp(32px, 4vw, 72px); align-items:center; }
  :where(html[data-palette="brand"]) .hero-art{ width:auto; margin:0; }
  :where(html[data-palette="brand"]) .hero-art__svg{ width:100%; height:auto; }
}
/* мягкое появление: графика и заголовок */
@media (prefers-reduced-motion:no-preference){
  :where(html[data-palette="brand"]) main > .blk:first-child :is(h1, .lede, .eyebrow, .actions){
    animation:brand-rise .8s cubic-bezier(.2,.8,.2,1) both; }
  :where(html[data-palette="brand"]) main > .blk:first-child h1{ animation-delay:.06s; }
  :where(html[data-palette="brand"]) main > .blk:first-child .lede{ animation-delay:.14s; }
  :where(html[data-palette="brand"]) main > .blk:first-child .actions{ animation-delay:.22s; }
  :where(html[data-palette="brand"]) .hero-art__svg{ animation:brand-float 9s ease-in-out infinite alternate; }
}
@keyframes brand-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes brand-float{ from{ transform:translateY(-6px); } to{ transform:translateY(8px); } }

/* --- 4. Водяной знак логотипа на тёмных и брендовых полосах --- */
:where(html[data-palette="brand"]) :is(.blk--brand, .blk--dark, .cta-bleed, .cta-stripe, .page-head, .site-foot){
  isolation:isolate; overflow:hidden;
}
:where(html[data-palette="brand"]) :is(.blk--brand, .blk--dark, .cta-bleed, .page-head, .site-foot)::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  width:min(46vw, 560px); aspect-ratio:1; right:-6vw; bottom:-22%;
  background:url(../img/logo-mark-inverse.svg) center/contain no-repeat;
  opacity:.07; transform:rotate(-12deg);
}
:where(html[data-palette="brand"]) .site-foot{ position:relative; }

/* --- 5. Фотографии: глубина и живость --------------------------- */
:where(html[data-palette="brand"]) .frame{ box-shadow:0 30px 60px -38px rgba(0,0,0,.45); }
:where(html[data-palette="brand"]) .frame img{ transition:transform .9s cubic-bezier(.2,.8,.2,1); }
@media (hover:hover){
  :where(html[data-palette="brand"]) .frame:hover img{ transform:scale(1.04); }
}

/* --- 6. Кнопки: стрелка и отклик ------------------------------- */
:where(html[data-palette="brand"]) .btn{ position:relative; }
:where(html[data-palette="brand"]) .actions .btn:first-child:not(.btn--ghost)::after{
  content:"\2192"; display:inline-block; margin-left:2px; transition:transform .25s ease; }
@media (hover:hover){
  :where(html[data-palette="brand"]) .actions .btn:first-child:not(.btn--ghost):hover::after{ transform:translateX(4px); }
}
/* ссылки меню: подчёркивание растёт слева */
:where(html[data-palette="brand"]) .site-nav a:not(.btn):not(.nav-phone){
  background:linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat;
  transition:background-size .3s ease, color .2s ease; padding-bottom:2px;
}
@media (hover:hover){
  :where(html[data-palette="brand"]) .site-nav a:not(.btn):not(.nav-phone):hover{ background-size:100% 1.5px; }
}

/* --- 7. Заголовки секций: крупнее и с характером ---------------- */
:where(html[data-palette="brand"]) h2{ font-size:clamp(1.85rem, 3.9vw, 3.3rem); }
:where(html[data-palette="brand"]) .section-head{ margin-bottom:var(--head-gap); }

/* Interior split heads use a half-width title column. The home display scale
   broke long Danish compounds into a final single-letter line on desktop. */
@media(min-width:900px){
  :where(html[data-palette="brand"]) :is(.page-quote__title,.page-split__title,.page-head,.page-head-media,.page-ledger) h1{
    font-size:clamp(2rem,3.8vw,3.25rem);
  }
}

/* --- 8. Цитаты: крупные кавычки и карточка ---------------------- */
:where(html[data-palette="brand"]) :is(.quote-band__q, .quote-bleed figure, .quote-rule figure, .quote-columns figure,
  .quote-card__q > div){ position:relative; }
:where(html[data-palette="brand"]) :is(.quote-band__q, .quote-bleed figure, .quote-rule figure, .quote-columns figure) blockquote::before{
  content:"\201C"; display:block; font-family:var(--display); font-size:5.5rem; line-height:.7; height:.45em;
  color:var(--accent); opacity:.85; margin-bottom:.2em; }
:where(html[data-palette="brand"]) .quote-bleed blockquote::before{ color:var(--accent-bright); }

/* Герой с цитатой: цитата — карточка со знаком компании */
:where(html[data-palette="brand"]) .hero-quote__figure{
  border-left:0; padding:clamp(28px,3.4vw,48px); background:var(--surface);
  border-radius:var(--radius-lg); box-shadow:0 40px 80px -48px rgba(0,0,0,.45), 0 0 0 1px var(--line);
  position:relative; overflow:hidden; isolation:isolate; }
:where(html[data-palette="brand"]) .hero-quote__figure::before{
  content:"\201C"; position:absolute; z-index:-1; right:18px; top:-36px; font-family:var(--display);
  font-size:12rem; line-height:1; color:var(--brand); opacity:.08; }
:where(html[data-palette="brand"]) .hero-quote__figure::after{
  content:""; display:block; width:46px; height:46px; margin-top:26px;
  background:url(../img/logo-mark.svg) left center/contain no-repeat; }

/* Цифры в рядах фактов героя — фирменным цветом и крупнее */
:where(html[data-palette="brand"]) .hero-rule__meta strong{ font-size:clamp(1.7rem, 3.4vw, 2.7rem); }

/* Interior legal tables: keep native HTML/captions/headers and the labelled,
   keyboard-focusable scroll region. On small screens only the known two-column
   question/answer summary becomes a vertical reading sequence. Wider recipient
   and cookie tables retain horizontal scrolling with a visible native track. */
@media(max-width:767px){
  :where(html[data-palette="brand"]) .prose .table-scroll{
    scrollbar-width:auto;
    padding-bottom:.5rem;
  }
  @supports not selector(::-webkit-scrollbar){
    :where(html[data-palette="brand"]) .prose .table-scroll{
      scrollbar-color:var(--ink-soft) var(--surface);
    }
  }
  :where(html[data-palette="brand"]) .prose .table-scroll::-webkit-scrollbar{height:10px;}
  :where(html[data-palette="brand"]) .prose .table-scroll::-webkit-scrollbar-track{
    background:var(--surface);color:var(--ink);
  }
  :where(html[data-palette="brand"]) .prose .table-scroll::-webkit-scrollbar-thumb{
    background:var(--ink-soft);color:var(--surface);border:2px solid var(--surface);border-radius:999px;
  }
  :where(html[data-palette="brand"]) .prose .table-scroll:focus-visible{
    outline:2px solid var(--brand);outline-offset:-2px;
  }
  :where(html[data-palette="brand"]) .prose .table-scroll caption{text-align:left;}
  :where(html[data-palette="brand"]) .prose #privacy-summary .table-scroll > table{
    display:block;min-width:0;max-width:100%;width:100%;table-layout:auto;
  }
  :where(html[data-palette="brand"]) .prose #privacy-summary caption{
    display:block;text-align:left;padding-bottom:var(--space-3);
  }
  :where(html[data-palette="brand"]) .prose #privacy-summary thead{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  }
  :where(html[data-palette="brand"]) .prose #privacy-summary :is(tbody,tr,td){display:block;}
  :where(html[data-palette="brand"]) .prose #privacy-summary tbody tr{
    padding-block:var(--space-4);border-bottom:1px solid var(--line);
  }
  :where(html[data-palette="brand"]) .prose #privacy-summary tbody td{
    width:auto;max-width:100%;padding:0;border:0;
  }
  :where(html[data-palette="brand"]) .prose #privacy-summary tbody td:first-child{
    font-weight:700;margin-bottom:.5rem;
  }
}
@media(max-width:639px){
  /* A graphical edge cue also works when the OS hides native scrollbars.
     Below640px all remaining640px tables necessarily overflow. */
  :where(html[data-palette="brand"]) .prose .table-scroll::before{
    content:"";display:block;position:sticky;left:calc(100% - 12px);
    width:8px;height:8px;margin:.3rem .3rem .65rem auto;
    border-top:2px solid var(--ink-soft);border-right:2px solid var(--ink-soft);
    transform:rotate(45deg);pointer-events:none;
  }
  :where(html[data-palette="brand"]) .prose #privacy-summary .table-scroll::before{display:none;}
}

/* ============================================================
   НАПРАВЛЕНИЕ · BOLD — смелый, контрастный, плакатный
   Тёмная шапка, крупный жирный гротеск, метки-плашки акцента,
   жёсткие рамки и сдвинутая тень у карточек, прямые углы.
   ============================================================ */
/* Heavy display faces already have tight side bearings; excessive negative
   tracking joined adjacent glyphs in the rendered opening audit. */
:where(html[data-direction="bold"]) h1{ font-size:clamp(2.4rem, 6.6vw, 5.6rem); font-weight:800; letter-spacing:-.015em; line-height:1.0; }
:where(html[data-direction="bold"]) h2{ font-weight:800; letter-spacing:-.015em; }
:where(html[data-direction="bold"]) h3{ font-weight:750; letter-spacing:-.005em; }
/* тёмная шапка: токены перевязаны так же, как у тёмных секций */
:where(html[data-direction="bold"]) .site-head{ background:var(--dark); color:var(--on-dark); border-bottom:0; }
:where(html[data-direction="bold"]) .site-head > *{ --ink:var(--on-dark); --ink-soft:var(--on-dark-soft); --accent:var(--accent-bright);
  --line:rgba(255,255,255,.22); --brand:var(--on-dark); --brand-deep:var(--on-dark-soft); --on-brand:var(--dark);
  --paper:var(--dark); --surface:rgba(255,255,255,.06); --tone:rgba(255,255,255,.09); --raise:rgba(255,255,255,.07); }
:where(html[data-direction="bold"]) .site-head .brand__sub{ color:var(--on-dark-soft); }
:where(html[data-direction="bold"]) .site-head__strip{ background:var(--accent-bright); color:var(--dark); }
:where(html[data-direction="bold"]) .site-head__strip > *{ --on-brand:var(--dark); }
@media (max-width:820px){ :where(html[data-direction="bold"]) .site-nav{ background:var(--dark); } }
/* кнопки: прямые, капсом, со стрелкой */
:where(html[data-direction="bold"]) .btn{ border-radius:0; text-transform:uppercase; letter-spacing:.07em; font-weight:800; font-size:.84rem;
  border-width:2px; }
:where(html[data-direction="bold"]) .btn:not(.btn--ghost):not(.btn--outline-light)::after{ content:"\2192"; font-size:1.05em; }
:where(html[data-direction="bold"]) .btn:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--accent); }
:where(html[data-direction="bold"]) .btn--ghost{ border-color:var(--ink); color:var(--ink); }
@media(max-width:480px){
  :where(html[data-direction="bold"]) main > .blk[class*="hero-"] .actions > a.btn{letter-spacing:.02em;}
}
/* карточки: рамка в цвет текста и сдвинутая тень */
:where(html[data-direction="bold"]) :is(.process-grid__list li, .feature-offset__panel, .facts-cards__grid div,
  .faq-cards__grid article, .contact-form__box, .contact-cards__grid article, .contact-stack__form,
  .contact-person__card, .contact-brief__box, .hero-aside__list, .services-bento__grid article,
  .services-checklist__col, .services-cards__grid article){
  border-radius:0; border:2px solid var(--ink); box-shadow:7px 7px 0 var(--brand);
}
:where(html[data-direction="bold"]) .services-cards__grid article{ border-left-width:2px; }
:where(html[data-direction="bold"]) .frame{ border-radius:0; }
:where(html[data-direction="bold"]) .services-rows__list .num,
:where(html[data-direction="bold"]) .services-numbered__grid .num{ font-weight:800; color:var(--brand); }
:where(html[data-direction="bold"]) .services-rows__list{ border-top:3px solid var(--ink); }
:where(html[data-direction="bold"]) .blk--tone{ background:var(--tone); }

/* метка — плашка с полосой */
:where(html[data-direction="bold"]) .eyebrow{ display:inline-flex; width:auto; padding:5px 10px 5px 9px;
  background:color-mix(in srgb, currentColor 12%, transparent); border-left:4px solid currentColor;
  letter-spacing:.12em; font-size:.72rem; }
:where(html[data-direction="bold"]) .eyebrow::before{ display:none; }

/* --- v2: тёмный первый экран сливается с тёмной шапкой ------------ */
:where(html[data-direction="bold"]) main > .blk:first-child:is(.hero-split, .hero-stack, .hero-cols, .hero-minimal, .hero-duo, .hero-rule, .hero-ledger, .hero-frame, .hero-aside, .hero-quote, .hero-tiles){ background:var(--dark); color:var(--on-dark); }
:where(html[data-direction="bold"]) main > .blk:first-child:is(.hero-split, .hero-stack, .hero-cols, .hero-minimal, .hero-duo, .hero-rule, .hero-ledger, .hero-frame, .hero-aside, .hero-quote, .hero-tiles) > *{ --ink:var(--on-dark); --ink-soft:var(--on-dark-soft); --accent:var(--accent-bright); --line:rgba(255,255,255,.2); --surface:rgba(255,255,255,.06); --tone:rgba(255,255,255,.09); --brand:var(--on-dark); --brand-deep:var(--on-dark-soft); --brand-soft:rgba(255,255,255,.24); --on-brand:var(--dark); --raise:rgba(255,255,255,.07); }
:where(html[data-direction="bold"]) .card-icon{ --icon-radius:0; background:var(--accent); color:#FFFFFF; box-shadow:5px 5px 0 var(--ink); }
:where(html[data-direction="bold"]) :is(.blk--dark, .blk--brand, .services-rail, .process-rail) .card-icon{ background:var(--accent-bright); color:var(--dark);
  box-shadow:5px 5px 0 rgba(255,255,255,.25); }
:where(html[data-direction="bold"]) .cta-panel__box{ border-radius:0; box-shadow:12px 12px 0 var(--accent); }

/* Site genotype. Attributes live on html; the visual effect belongs to the
   opening three sections. Form/consent controls, legal prose and the lower
   page retain their existing contracts. All colors remain semantic tokens. */

:where(html[data-gt-heading="center"]) main > .blk:nth-child(-n+3) .section-head:not(.section-head--split){
  margin-inline:auto; text-align:center;
}
:where(html[data-gt-heading="center"]) main > .blk:nth-child(-n+3) .section-head:not(.section-head--split) :is(.eyebrow,p){margin-inline:auto;justify-content:center;}
@media(min-width:900px){
  :where(html[data-gt-heading="split"]) main > .blk:nth-child(-n+3) .section-head:not(.section-head--center):not(.services-sticky__head){
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:var(--space-3) var(--gap);max-width:none;align-items:end;
  }
  :where(html[data-gt-heading="split"]) main > .blk:nth-child(-n+3) .section-head:not(.section-head--center) .eyebrow{grid-column:1/-1;}
  :where(html[data-gt-heading="split"]) main > .blk:nth-child(-n+3) .section-head:not(.section-head--center) h2{margin-bottom:0;}
}

/* Only navigation CTAs in the opening content use these button silhouettes. */
:where(html[data-gt-button="pill"]) main > .blk:nth-child(-n+3) .actions > a.btn{border-radius:999px;}
:where(html[data-gt-button="square"]) main > .blk:nth-child(-n+3) .actions > a.btn{border-radius:0;}
:where(html[data-gt-button="underline"]) main > .blk:nth-child(-n+3) .actions > a.btn:not(.btn--light):not(.btn--outline-light){
  border-radius:0;border:0;border-bottom:2px solid currentColor;background:transparent;color:var(--brand);box-shadow:none;padding-inline:0;
}
:where(html[data-gt-button="arrowbox"]) main > .blk:nth-child(-n+3) .actions > a.btn:first-child{border-radius:0;padding-inline:var(--action-pad,var(--space-4));}
:where(html[data-gt-button="arrowbox"]) main > .blk:nth-child(-n+3) .actions > a.btn:first-child::after{
  content:"\2192";border-inline-start:1px solid currentColor;padding-inline-start:var(--space-2);margin-inline-start:var(--space-1);
}

/* Equal peer cards only: bento anchors, staggered stories and facts are owned
   by their compositions and are deliberately absent from this selector. */
:where(html[data-gt-card]) main > .blk:nth-child(-n+3) :is(.services-cards__grid,.services-mini__grid,.intro-points__grid,.process-grid__list) > :is(article,li){
  border-radius:var(--radius-lg);padding:var(--card-pad);background:var(--raise);color:var(--ink);
}
:where(html[data-gt-card="outline"]) main > .blk:nth-child(-n+3) :is(.services-cards__grid,.services-mini__grid,.intro-points__grid,.process-grid__list) > :is(article,li){border:1px solid var(--line);box-shadow:none;}
:where(html[data-gt-card="soft"]) main > .blk:nth-child(-n+3) :is(.services-cards__grid,.services-mini__grid,.intro-points__grid,.process-grid__list) > :is(article,li){border:1px solid var(--line);box-shadow:var(--shadow-sm);}
:where(html[data-gt-card="filled"]) main > .blk:nth-child(-n+3) :is(.services-cards__grid,.services-mini__grid,.intro-points__grid,.process-grid__list) > :is(article,li){border:1px solid transparent;box-shadow:none;}
:where(html[data-gt-card="edge"]) main > .blk:nth-child(-n+3) :is(.services-cards__grid,.services-mini__grid,.intro-points__grid,.process-grid__list) > :is(article,li){border:1px solid var(--line);border-inline-start:4px solid var(--accent);box-shadow:none;}
/* Rounded individual cards cannot share the native one-pixel grid backplate. */
:where(html[data-gt-card]) main > .blk:nth-child(-n+3) .intro-points__grid{
  gap:var(--space-5);border:0;background:transparent;color:inherit;
}

/* Frame geometry changes; image sizing/object-fit and its reserved area do not. */
:where(html[data-gt-photo="rounded"]) main > .blk:nth-child(-n+3) .frame{border-radius:clamp(20px,3vw,48px);}
:where(html[data-gt-photo="arch"]) main > .blk:nth-child(-n+3) .frame{border-radius:42% 42% var(--radius) var(--radius);}
:where(html[data-gt-photo="offset"]) main > .blk:nth-child(-n+3) .frame{border:1px solid var(--line);box-shadow:8px 8px 0 -1px var(--paper),8px 8px 0 0 var(--brand);}

/* Motifs use an isolated non-interactive layer so direction backgrounds and
   transparent cards keep their measured text/background pairs. */
:where(html[data-gt-motif]) main > .blk:nth-child(-n+3){isolation:isolate;}
:where(html[data-gt-motif]) main > .blk:nth-child(-n+3) > .wrap{--gt-motif-color:var(--tone);}
/* Keep each pattern pixel within the palette's checked light-surface floor;
   on tone it lightens, and on dark/brand it darkens. Ink over a pseudo-layer
   otherwise silently lost AA even though the flat background pair passed. */
:where(html[data-gt-motif]) main > .blk.blk--tone:nth-child(-n+3) > .wrap{--gt-motif-color:var(--surface);}
:where(html[data-gt-motif]) main > .blk:is(.blk--dark,.blk--brand):nth-child(-n+3) > .wrap{--gt-motif-color:var(--dark);}
:where(html[data-gt-motif]) main > .blk:nth-child(-n+3) > .wrap::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6;
}
:where(html[data-gt-motif="grid"]) main > .blk:nth-child(-n+3) > .wrap::before{background-image:linear-gradient(var(--gt-motif-color) 1px,transparent 1px),linear-gradient(90deg,var(--gt-motif-color) 1px,transparent 1px);background-size:48px 48px;}
:where(html[data-gt-motif="dots"]) main > .blk:nth-child(-n+3) > .wrap::before{background-image:radial-gradient(var(--gt-motif-color) 1.5px,transparent 1.6px);background-size:24px 24px;}
:where(html[data-gt-motif="lines"]) main > .blk:nth-child(-n+3) > .wrap::before{background-image:repeating-linear-gradient(135deg,var(--gt-motif-color) 0 1px,transparent 1px 32px);}
/* Photo covers own their contrast veil; an extra grid would cross the image
   and its lettering, rather than decorate an opaque semantic surface. */
:where(html[data-gt-motif]) main > .blk:is(.hero-bleed,.page-cover,.hero-magazine-cover,.quote-bleed,.cta-bleed):nth-child(-n+3) > .wrap::before{content:none;}

:where(html[data-gt-density="compact"]) main > .blk:nth-child(n+2):nth-child(-n+3){padding-block:var(--sect-tight);}
:where(html[data-gt-accent="end"]) main > .blk:nth-child(-n+3) .section-head{border-inline-start:0;padding-inline-start:0;border-inline-end:3px solid var(--accent);padding-inline-end:var(--space-5);}
:where(html[data-gt-signature="rule"]) main > .blk:nth-child(2){border-block-start:3px solid var(--accent);}
:where(html[data-gt-signature="band"]) main > .blk:nth-child(2) > .wrap > .section-head{border-block:1px solid var(--line);padding-block:var(--space-5);}
:where(html[data-gt-signature="frame"]) main > .blk:nth-child(2) > .wrap > .section-head{border:1px solid var(--line);padding:var(--space-5);}

@media(prefers-reduced-motion:reduce){
  :where(html[data-gt-button]) main > .blk:nth-child(-n+3) .actions > a.btn::after{transition:none;transform:none;}
}