/* ==========================================================================
   Creatio Construction: Skid Steers category page styles
   Loaded only by skid-steers.html, after style.css. Every class here starts
   with "ss-" (or sits under .page-skid-steers), so the homepage, Services,
   Equipment Overview, Backhoes and Excavators are not affected.
   The look is the compact module: a light stone hero on a tight square grid,
   the machine photo framed like a drawing with dimension rules, small
   modular tiles with corner brackets and a nameplate for the one unit.

   CONTENTS
   01  Page tokens and navigation state
   02  Hero
   03  Introduction and rental card
   04  The CAT 262D3
   05  Uses
   06  Choosing the machine
   07  Why Creatio
   08  Operator option
   09  Service area
   10  Request a quote and related links
   11  FAQ
   12  Motion preferences
   13  Responsive
   ========================================================================== */


/* 01 PAGE TOKENS AND NAVIGATION STATE ======================================= */
.page-skid-steers {
  --ss-stone: #ebe5da;
  --ss-stone-2: #f5f2ec;
  --ss-sand: #d6c29c;
  --ss-graphite: #151618;
  --ss-plate: #1d1e21;
  --ss-line: rgba(28, 24, 18, .14);
  --ss-line-dark: rgba(255, 255, 255, .12);
  --ss-brass-text: #6f5830; /* darker brass for small text on light surfaces (5.4:1 on stone, 6.7:1 on white) */
  --ss-cell: 32px;          /* the compact module the page is laid out on */
  /* brass corner bracket drawn on a tile's top left corner */
  --ss-bracket:
    linear-gradient(var(--accent), var(--accent)) top left / 22px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 2px 22px no-repeat;
}

/* The submenu link for this page */
.page-skid-steers .nav__sub a[aria-current="page"] { color: var(--accent); }


/* 02 HERO ================================================================== */
.ss-hero { position: relative; isolation: isolate; overflow: hidden; padding: 26px 0 0; background: var(--ss-stone); color: var(--ink); }
/* tight square grid, the "module" the page is built on */
.ss-hero__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(28, 24, 18, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28, 24, 18, .07) 1px, transparent 1px);
  background-size: var(--ss-cell) var(--ss-cell);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.ss-hero__layout { display: grid; }
/* phones and tablets: the photo slots in right after the headline */
.ss-hero__content { display: contents; }
.ss-crumbs { order: 1; }
.ss-hero__kicker { order: 2; }
.ss-hero__title { order: 3; }
.ss-hero__media { order: 4; margin-bottom: 26px; }
.ss-hero__lead { order: 5; }
.ss-hero__actions { order: 6; }

.ss-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-bottom: 12px; font: 500 .76rem var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--gray-700); }
.ss-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.ss-crumbs li + li::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--ss-brass-text); }
.ss-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.ss-crumbs a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.ss-crumbs [aria-current] { color: var(--ss-brass-text); font-weight: 600; }

.ss-hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; font: 500 .78rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--gray-700); }
.ss-hero__kicker span { padding: 7px 10px 6px; background: var(--ss-graphite); color: var(--accent); }
.ss-hero__title { max-width: 10ch; margin-bottom: 22px; color: var(--black); font-size: clamp(2.45rem, 7.4vw, 4.8rem); line-height: .96; letter-spacing: -.045em; }
.ss-hero__lead { max-width: 50ch; margin-bottom: 28px; font-size: var(--fs-lead); color: var(--ink); }
.ss-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.ss-hero__actions .btn { flex: 1 1 240px; }
.ss-hero__jump {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  color: var(--black); font: 600 .95rem var(--font-head); text-decoration: none;
  border-bottom: 2px solid var(--accent);
}
.ss-hero__jump .icon { transition: transform .3s var(--ease); }
.ss-hero__jump:hover .icon { transform: translateY(3px); }

/* Framed photo with dimension rules along the top and the left side */
.ss-hero__media { position: relative; padding: 30px 0 0 30px; }
.ss-hero__frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ss-plate); border: 6px solid var(--ss-graphite); }
.ss-hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; }
.ss-hero__frame::after { /* shade at the bottom so the caption stays readable */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0) 58%, rgba(10, 10, 11, .66) 100%);
}
.ss-dim { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--gray-700); }
.ss-dim span { position: relative; z-index: 1; padding: 0 10px; background: var(--ss-stone); font: 500 .7rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.ss-dim::before { /* the rule with end ticks */
  content: ""; position: absolute; background:
    linear-gradient(var(--gray-700), var(--gray-700)) center / 100% 1px no-repeat;
}
.ss-dim--x { left: 30px; right: 0; top: 4px; height: 18px; }
.ss-dim--x::before { inset: 0; border-left: 1px solid var(--gray-700); border-right: 1px solid var(--gray-700); }
.ss-dim--y { top: 30px; bottom: 0; left: 4px; width: 18px; }
.ss-dim--y::before { inset: 0; background: linear-gradient(var(--gray-700), var(--gray-700)) center / 1px 100% no-repeat; border-top: 1px solid var(--gray-700); border-bottom: 1px solid var(--gray-700); }
.ss-dim--y span { transform: rotate(-90deg); }

.ss-hero__tag {
  position: absolute; left: 48px; right: 18px; bottom: 16px; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font: 500 .74rem/1.3 var(--font-head); letter-spacing: .06em; color: var(--white);
}
.ss-hero__tag span { padding: 5px 8px 4px; background: var(--accent); color: var(--black); letter-spacing: .18em; text-transform: uppercase; font-size: .7rem; }

/* Four compact fact modules along the bottom of the hero */
.ss-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 30px; padding-bottom: 34px; }
.ss-module { position: relative; padding: 16px 14px 14px; background: var(--white); border: 1px solid var(--ss-line); }
.ss-module::before { content: ""; position: absolute; inset: -1px; pointer-events: none; background: var(--ss-bracket); }
.ss-module dt { margin-bottom: 4px; font: 600 .7rem/1.2 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--ss-brass-text); }
.ss-module dd { color: var(--black); font: 600 1rem/1.25 var(--font-head); }


/* 03 INTRODUCTION AND RENTAL CARD =========================================== */
.ss-intro { background: var(--white); }
.ss-intro__grid { display: grid; gap: 44px; align-items: start; }
.ss-intro__text .section-title { max-width: 16ch; margin-bottom: 28px; }
.ss-intro__statement {
  position: relative; max-width: 32ch; margin-bottom: 28px; padding: 18px 20px;
  background: var(--ss-stone-2); color: var(--black);
  font: 500 clamp(1.2rem, 2.1vw, 1.6rem)/1.4 var(--font-head); letter-spacing: -.02em;
}
.ss-intro__statement::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--ss-bracket); }
.ss-intro__text p:last-child { margin-bottom: 0; }
.ss-intro__text a { color: var(--black); font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* graphite "rental card" with a punched tab at the top */
.ss-card { position: relative; padding: 34px 24px 26px; background: var(--ss-graphite); color: rgba(255, 255, 255, .8); }
.ss-card::before { content: ""; position: absolute; top: 14px; left: 50%; width: 46px; height: 6px; margin-left: -23px; border-radius: 3px; background: var(--ss-stone); opacity: .9; }
.ss-card__title { margin: 6px 0 14px; color: var(--white); font-size: 1.2rem; }
.ss-card__list div { display: grid; gap: 2px; padding: 12px 0; border-top: 1px dashed rgba(255, 255, 255, .18); }
.ss-card__list dt { font: 600 .7rem/1.3 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.ss-card__list dd { color: var(--white); line-height: 1.45; }
.ss-card__link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 10px; color: var(--white); font: 600 .95rem var(--font-head); text-decoration: none; border-bottom: 1px solid var(--accent); }
.ss-card__link .icon { transition: transform .3s var(--ease); }
.ss-card__link:hover .icon { transform: translateX(4px); }


/* 04 THE CAT 262D3 ========================================================== */
.ss-model { background: var(--ss-stone-2); }
.ss-model__head { max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 60px); }
.ss-model__head .section-title { margin-bottom: 20px; }
.ss-model__head p:last-child { margin-bottom: 0; font-size: 1.0625rem; }

.ss-unit { display: grid; background: var(--white); border: 1px solid var(--ss-line); box-shadow: var(--shadow-sm); }
.ss-unit__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ss-stone); }
.ss-unit__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* nameplate tag on the photo */
.ss-unit__plate {
  position: absolute; right: 12px; bottom: 12px; margin: 0; padding: 6px 12px 5px;
  background: var(--ss-graphite); color: var(--accent);
  font: 600 .9rem/1 var(--font-head); letter-spacing: .14em;
  border: 1px solid rgba(196, 168, 116, .6);
}
.ss-unit__body { position: relative; padding: 28px 22px 30px; }
.ss-unit__index { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; font: 500 .72rem/1.3 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--gray-500); }
.ss-unit__index span { padding: 4px 7px 3px; border: 1px solid var(--ss-brass-text); color: var(--ss-brass-text); }
.ss-unit__name { margin-bottom: 14px; font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -.04em; line-height: 1; }
.ss-unit__desc { color: var(--ink); font-size: 1.08rem; }
.ss-unit__body > p:not([class]) { margin-bottom: 22px; }
.ss-unit__side { display: flex; flex-direction: column; background: var(--ss-graphite); }
.ss-unit__suited { flex: 1; padding: 22px 22px 24px; color: rgba(255, 255, 255, .84); }
.ss-unit__label { margin: 0 0 10px; font: 600 .72rem/1.3 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.ss-unit__uses { display: grid; gap: 8px; }
.ss-unit__uses li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.ss-unit__uses .icon { margin-top: .3em; color: var(--accent); font-size: .85rem; }
.ss-unit__operator { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 24px; padding: 14px 16px; background: var(--ss-stone-2); border-left: 3px solid var(--accent); line-height: 1.5; }
.ss-unit__operator .icon { margin-top: .2em; color: var(--ss-brass-text); font-size: 1.1rem; }
.ss-unit__operator strong { color: var(--black); }
.ss-unit__cta { width: 100%; }

.ss-model__note { display: flex; gap: 12px; align-items: flex-start; max-width: 760px; margin: 28px 0 0; font-size: .98rem; line-height: 1.6; }
.ss-model__note .icon { margin-top: .3em; color: var(--ss-brass-text); }
.ss-model__note strong { color: var(--black); }


/* 05 USES =================================================================== */
.ss-uses { overflow: hidden; background: var(--ss-graphite); color: rgba(255, 255, 255, .76); }
.ss-uses__grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: var(--ss-cell) var(--ss-cell);
  -webkit-mask-image: radial-gradient(ellipse at 20% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 20% 0%, #000 0%, transparent 70%);
}
.ss-uses .container { position: relative; z-index: 1; }
.ss-tasks { display: grid; gap: 10px; }
.ss-task { position: relative; padding: 26px 22px 24px; background: var(--ss-plate); border: 1px solid var(--ss-line-dark); transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.ss-task::before { content: ""; position: absolute; inset: -1px; pointer-events: none; background: var(--ss-bracket); }
.ss-task:hover { border-color: rgba(196, 168, 116, .45); background: #222326; }
.ss-task__code { position: absolute; top: 18px; right: 18px; font: 600 .74rem/1 var(--font-head); letter-spacing: .16em; color: var(--accent); }
.ss-task h3 { max-width: 18ch; margin: 18px 0 10px; color: var(--white); font-size: 1.2rem; }
.ss-task p { margin: 0; font-size: 1rem; line-height: 1.6; }


/* 06 CHOOSING THE MACHINE =================================================== */
.ss-compare { background: var(--white); }
.ss-compare__grid { display: grid; gap: 40px; align-items: start; }
.ss-compare__intro .section-title { max-width: 14ch; margin-bottom: 22px; }
.ss-compare__photo { margin-top: 28px; }
.ss-compare__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--ss-line); }
.ss-compare__photo figcaption { margin-top: 10px; font-size: .9rem; color: var(--gray-500); }

.ss-options { display: grid; gap: 12px; }
.ss-option { position: relative; padding: 26px 22px 24px; background: var(--ss-stone-2); border: 1px solid var(--ss-line); }
.ss-option h3 { margin-bottom: 12px; font-size: 1.15rem; }
.ss-option ul { display: grid; gap: 8px; }
.ss-option li { position: relative; padding-left: 20px; line-height: 1.5; color: var(--ink); }
.ss-option li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border: 1px solid var(--ss-brass-text); }
.ss-option--main { background: var(--ss-graphite); border-color: var(--ss-graphite); }
.ss-option--main::before { content: ""; position: absolute; inset: -1px; pointer-events: none; background: var(--ss-bracket); }
.ss-option--main h3 { color: var(--white); }
.ss-option--main li { color: rgba(255, 255, 255, .84); }
.ss-option--main li::before { background: var(--accent); border-color: var(--accent); }
.ss-option__tag { margin: 0 0 10px; font: 600 .7rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.ss-option__link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; color: var(--black); font: 600 .95rem var(--font-head); text-decoration: none; border-bottom: 1px solid var(--accent); }
.ss-option__link .icon { transition: transform .3s var(--ease); }
.ss-option__link:hover .icon { transform: translateX(4px); }


/* 07 WHY CREATIO ============================================================ */
.ss-why { background: var(--ss-stone); }
.ss-why__grid { display: grid; gap: 10px; }
.ss-why__item { position: relative; padding: 26px 22px 24px; background: var(--white); border: 1px solid var(--ss-line); }
.ss-why__item h3 { margin-bottom: 8px; font-size: 1.12rem; }
.ss-why__item p { margin: 0; font-size: 1rem; line-height: 1.6; }
.ss-why__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; background: var(--ss-graphite); color: var(--accent); }
.ss-why__item--lead { background: var(--ss-graphite); border-color: var(--ss-graphite); color: rgba(255, 255, 255, .8); }
.ss-why__item--lead::before { content: ""; position: absolute; inset: -1px; pointer-events: none; background: var(--ss-bracket); }
.ss-why__item--lead h3 { color: var(--white); font-size: 1.3rem; }
.ss-why__item .ss-why__figure { margin: 0 0 10px; color: var(--white); font: 600 clamp(3.6rem, 8vw, 5.6rem)/.9 var(--font-head); letter-spacing: -.05em; }
.ss-why__figure span { color: var(--accent); }


/* 08 OPERATOR OPTION ======================================================== */
.ss-operator { background: var(--black); color: rgba(255, 255, 255, .76); }
.ss-operator__grid { display: grid; gap: 36px; align-items: start; }
.ss-operator__head .section-title { max-width: 13ch; margin-bottom: 22px; color: var(--white); }
.ss-operator__lead { max-width: 40ch; font-size: var(--fs-lead); }
.ss-operator__lead strong { color: var(--white); }

.ss-switch { display: grid; gap: 12px; }
.ss-switch__opt { padding: 24px 22px 22px; border: 1px solid var(--ss-line-dark); background: var(--ss-plate); }
.ss-switch__opt h3 { margin-bottom: 8px; color: var(--white); font-size: 1.2rem; }
.ss-switch__opt p:last-child { margin: 0; line-height: 1.6; }
.ss-switch__state { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 .72rem/1 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
/* a small toggle drawn in CSS: off on the first card, on on the second */
.ss-switch__dot { position: relative; width: 34px; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, .16); }
.ss-switch__dot::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .7); }
.ss-switch__opt--on { border-color: rgba(196, 168, 116, .55); }
.ss-switch__opt--on .ss-switch__state { color: var(--accent); }
.ss-switch__opt--on .ss-switch__dot { background: var(--accent); }
.ss-switch__opt--on .ss-switch__dot::after { left: auto; right: 3px; background: var(--black); }
.ss-switch__note { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 0; font-size: .98rem; line-height: 1.6; }
.ss-switch__note .icon { margin-top: .3em; color: var(--accent); }


/* 09 SERVICE AREA =========================================================== */
.ss-area { background: var(--white); }
.ss-area__grid { display: grid; gap: 36px; align-items: start; }
.ss-area__text .section-title { max-width: 14ch; margin-bottom: 22px; }
.ss-area__note { margin: 0; padding-top: 16px; border-top: 1px solid var(--ss-line); font-size: .98rem; }
/* place modules on the square grid */
.ss-area__map {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px;
  background-color: var(--ss-stone-2);
  background-image:
    linear-gradient(to right, rgba(28, 24, 18, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28, 24, 18, .06) 1px, transparent 1px);
  background-size: var(--ss-cell) var(--ss-cell);
  border: 1px solid var(--ss-line);
}
.ss-area__place { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 76px; padding: 12px 12px 10px; background: var(--white); border: 1px solid var(--ss-line); color: var(--black); font: 600 .95rem/1.25 var(--font-head); }
.ss-area__place small { font: 600 .66rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.ss-area__place.is-base { grid-column: 1 / -1; min-height: 96px; background: var(--ss-graphite); border-color: var(--ss-graphite); color: var(--white); font-size: 1.15rem; }
.ss-area__place--more { background: transparent; border-style: dashed; color: var(--gray-700); font-weight: 500; }


/* 10 REQUEST A QUOTE AND RELATED LINKS ===================================== */
.ss-quote { background: var(--ss-graphite); color: rgba(255, 255, 255, .78); }
.ss-quote__grid { display: grid; gap: 36px; align-items: start; }
.ss-quote__main .section-title { max-width: 14ch; margin-bottom: 22px; color: var(--white); }
.ss-quote__intro { max-width: 52ch; font-size: var(--fs-lead); }
.ss-checklist { display: grid; gap: 8px; margin: 26px 0 22px; counter-reset: ss-step; }
.ss-checklist li { position: relative; display: grid; gap: 2px; padding: 16px 16px 14px 60px; background: var(--ss-plate); border: 1px solid var(--ss-line-dark); counter-increment: ss-step; }
.ss-checklist li::before {
  content: counter(ss-step, decimal-leading-zero);
  position: absolute; left: 14px; top: 16px; display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--accent); color: var(--accent); font: 600 .78rem/1 var(--font-head);
}
.ss-checklist h3 { margin: 0; color: var(--white); font-size: 1.05rem; }
.ss-checklist p { margin: 0; font-size: .98rem; line-height: 1.5; }
.ss-quote__extra { margin: 0; font-size: .98rem; }

.ss-quote__box { position: relative; display: grid; gap: 12px; padding: 30px 24px; background: var(--ss-stone); color: var(--ink); }
.ss-quote__box::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--ss-bracket); }
.ss-quote__kicker { margin: 0; font: 600 .72rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--ss-brass-text); }
.ss-quote__box h3 { margin: 0 0 8px; font-size: 1.45rem; }
.ss-quote__box .btn--light { background: var(--black); color: var(--white); }
.ss-quote__box .btn--light::before { background: var(--steel); }
.ss-quote__box .btn--ghost { background: transparent; color: var(--black); border-color: rgba(10, 10, 11, .35); backdrop-filter: none; -webkit-backdrop-filter: none; }
.ss-quote__box .btn--ghost::before { background: var(--black); }
.ss-quote__box .btn--ghost:hover { color: var(--white); border-color: var(--black); }
.ss-quote__lines { display: grid; gap: 4px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--ss-line); }
.ss-quote__lines a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--black); font-size: .92rem; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.ss-quote__lines a .icon { color: var(--ss-brass-text); }
.ss-quote__lines a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }

.ss-related { margin-top: clamp(44px, 6vw, 72px); padding-top: 26px; border-top: 1px solid var(--ss-line-dark); }
.ss-related__title { margin-bottom: 14px; color: var(--white); font-size: 1rem; letter-spacing: .02em; }
.ss-related ul { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-related a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--ss-line-dark); color: var(--white); font: 500 .92rem var(--font-head); text-decoration: none; transition: border-color .2s, background-color .2s; }
.ss-related a .icon { color: var(--accent); font-size: .8rem; }
.ss-related a:hover { border-color: var(--accent); background: rgba(196, 168, 116, .08); }


/* 11 FAQ ==================================================================== */
.ss-faq .faq__contact { position: relative; background: var(--ss-stone-2); border-radius: 0; }
.ss-faq .faq__contact::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--ss-bracket); }
.ss-faq .faq__contact a { min-height: 44px; }


/* 12 MOTION PREFERENCES ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .ss-hero__jump .icon, .ss-card__link .icon, .ss-option__link .icon, .ss-task { transition: none; }
  .ss-hero__jump:hover .icon, .ss-card__link:hover .icon, .ss-option__link:hover .icon { transform: none; }
}


/* 13 RESPONSIVE ============================================================= */
@media (max-width: 380px) {
  .ss-hero__media { padding: 26px 0 0 24px; }
  .ss-dim--x { left: 24px; }
  .ss-dim--y { top: 26px; left: 2px; }
  .ss-hero__tag { left: 40px; }
  .ss-hero__tag { font-size: .7rem; }
  .ss-module dd { font-size: .95rem; }
}

@media (min-width: 768px) {
  .ss-modules { grid-template-columns: repeat(4, 1fr); }
  .ss-tasks { grid-template-columns: 1fr 1fr; }
  .ss-why__grid { grid-template-columns: 1fr 1fr; }
  .ss-why__item--lead { grid-column: 1 / -1; }
  .ss-switch { grid-template-columns: 1fr 1fr; }
  .ss-switch__note { grid-column: 1 / -1; }
  .ss-area__map { grid-template-columns: repeat(3, 1fr); }
  .ss-area__place.is-base { grid-column: span 2; grid-row: span 2; justify-content: flex-end; font-size: 1.4rem; }
  .ss-options { grid-template-columns: 1fr 1fr; }
  .ss-option--main { grid-column: 1 / -1; }
  .ss-unit__body { padding: 34px 32px 36px; }
}

@media (min-width: 1024px) {
  .ss-hero { padding-top: 34px; }
  .ss-hero__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; }
  .ss-hero__content { display: block; }
  .ss-hero__media { margin-bottom: 0; }
  .ss-hero__title { font-size: clamp(3.4rem, 5.4vw, 5rem); }
  .ss-modules { margin-top: 36px; padding-bottom: 46px; }

  .ss-intro__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 72px; }
  .ss-card { position: sticky; top: calc(var(--header-h) + 24px); }

  .ss-unit { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .ss-unit__body { padding: 44px 44px 46px; }
  .ss-unit__cta { width: auto; }

  .ss-tasks { grid-template-columns: repeat(3, 1fr); }

  .ss-compare__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; }
  .ss-compare__intro { position: sticky; top: calc(var(--header-h) + 24px); }

  .ss-why__grid { grid-template-columns: repeat(3, 1fr); }
  .ss-why__item--lead { grid-column: span 1; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 34px 30px; }
  .ss-why__grid { grid-template-columns: 1.2fr 1fr 1fr; }

  .ss-operator__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 64px; }

  .ss-area__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 64px; align-items: center; }
  .ss-area__map { grid-template-columns: repeat(4, 1fr); padding: 20px; }

  .ss-quote__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; }
  .ss-quote__box { position: sticky; top: calc(var(--header-h) + 24px); padding: 36px 32px; }
}

@media (min-width: 1440px) {
  .ss-hero__layout { gap: 72px; }
  .ss-hero__media { padding: 34px 0 0 34px; }
  .ss-dim--x { left: 34px; top: 6px; }
  .ss-dim--y { top: 34px; left: 6px; }
}