/* ==========================================================================
   GIFS Production Fixes v8 (2026-11-12)
   1. #home & #contact single-screen locks (zero vertical scrollbar).
   2. Smooth wheel scroll on service & article pages.
   3. Absolute unified typography ("GIFS Serif", "Cormorant Garamond", Georgia, serif)
      beating #root#root#root Arial overrides from sites-flight & studio-shell.
   4. Clean non-overlapping 8-apple crown placement (intact whole apples on #home).
   5. Cohesive signature Airship-with-Strings (.sf-air-stage) across ALL service pages.
   6. Clean zero-overlap 3-step studio layout for #approach.
   7. Simple human-friendly interactive showcase blocks without empty voids.
   ========================================================================== */

/* --- 0. Global Unified Typography (beats #root#root#root Arial rules!) --- */
html.gifs-refined body #root#root#root#root,
html.gifs-refined body #root#root#root#root *:not(svg):not(path):not(circle),
html.gifs-refined body .sites-flight,
html.gifs-refined body .sites-flight *,
html.gifs-refined body .craft-service,
html.gifs-refined body .craft-service *,
html.gifs-refined body #approach,
html.gifs-refined body #approach * {
  font-family: "GIFS Serif", "Cormorant Garamond", Georgia, serif !important;
}

/* --- 1. Main Screen (#home) & Studio Single-Screen Hub Views (#contact, #services, #approach) --- */
html:has(body.route-home),
html:has(body.route-inner #contact:not([hidden])),
html:has(body.route-inner #approach:not([hidden])) {
  height: 100svh !important;
  max-height: 100svh !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

html.gifs-refined body.route-home,
html.gifs-refined body.route-home #root,
html.gifs-refined body.route-home #main,
html.gifs-refined body.route-home #home.orchard-client,
html.gifs-refined body.route-home #home.orchard-client .orchard,
html.gifs-refined body.route-inner:has(#contact:not([hidden])),
html.gifs-refined body.route-inner:has(#contact:not([hidden])) #root,
html.gifs-refined body.route-inner:has(#contact:not([hidden])) #main,
html.gifs-refined body.route-inner:has(#approach:not([hidden])),
html.gifs-refined body.route-inner:has(#approach:not([hidden])) #root,
html.gifs-refined body.route-inner:has(#approach:not([hidden])) #main {
  height: 100svh !important;
  max-height: 100svh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Keep #contact strictly inside calc(100svh - 76px) with zero scrolling */
html.gifs-refined body.route-inner #root#root #contact.contact-compact.v6-contact:not([hidden]) {
  height: calc(100svh - 76px) !important;
  min-height: 0 !important;
  max-height: calc(100svh - 76px) !important;
  overflow: hidden !important;
  padding: clamp(12px, 2.2svh, 24px) clamp(20px, 4.5vw, 72px) !important;
}

html.gifs-refined body.route-inner #root#root #contact.contact-compact.v6-contact .contact-window {
  max-height: 100% !important;
  gap: clamp(18px, 4.5vw, 68px) !important;
}

html.gifs-refined body.route-inner #root#root #contact.contact-compact.v6-contact h1 {
  font-size: clamp(38px, 6.2svh, 84px) !important;
  line-height: 0.94 !important;
}

html.gifs-refined body.route-inner #root#root #contact.contact-compact.v6-contact .contact-lead {
  font-size: clamp(17px, 2.3svh, 22px) !important;
  margin: clamp(10px, 1.8svh, 20px) 0 !important;
}

html.gifs-refined body.route-inner #root#root #contact.contact-compact.v6-contact .v6-contact-sprig {
  height: clamp(56px, 9svh, 96px) !important;
  margin-top: clamp(10px, 1.8svh, 20px) !important;
}

@media (max-height: 700px) {
  html.gifs-refined body.route-inner #root#root #contact.contact-compact.v6-contact .v6-contact-sprig {
    display: none !important;
  }
}

html.gifs-refined body.route-inner #root#root #contact.contact-compact.v6-contact .v6-contact-letter {
  padding: clamp(16px, 2.6svh, 34px) clamp(18px, 2.6vw, 38px) !important;
}

html.gifs-refined body.route-inner #root#root #contact.contact-compact.v6-contact .v6-letter-heading {
  min-height: 36px !important;
  margin-bottom: clamp(8px, 1.5svh, 16px) !important;
}

html.gifs-refined body.route-inner #root#root #contact.contact-compact.v6-contact .contact-message-summary p {
  font-size: clamp(17px, 2.5svh, 22px) !important;
  margin-bottom: clamp(6px, 1svh, 12px) !important;
}

html.gifs-refined body.route-inner #root#root #contact.contact-compact.v6-contact .direct-contacts {
  margin: clamp(8px, 1.4svh, 14px) 0 !important;
}

html.gifs-refined body.route-inner #root#root #contact.contact-compact.v6-contact .direct-contact {
  min-height: clamp(42px, 6.2svh, 54px) !important;
  padding: 8px 12px !important;
}

html.gifs-refined body.route-inner #root #services.studio-projects:not([hidden]) {
  height: calc(100svh - 76px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* --- 1B. Clean Overlap-Proof #approach ("Наш подход") --- */
html.gifs-refined body.route-inner #root#root#root #approach.screen-approach:not([hidden]) {
  height: calc(100svh - 76px) !important;
  min-height: 0 !important;
  max-height: calc(100svh - 76px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: clamp(18px, 3svh, 36px) clamp(20px, 4.5vw, 72px) !important;
  background: #f0e8d4 !important;
  color: #1f3c2f !important;
  gap: clamp(14px, 2.5svh, 26px) !important;
}

html.gifs-refined body #root#root#root .v8-approach-head {
  text-align: center;
  max-width: 760px;
}

html.gifs-refined body #root#root#root .v8-approach-head .v8-eyebrow {
  display: block;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #705b3c;
  margin-bottom: 6px;
  font-weight: 600;
}

html.gifs-refined body #root#root#root .v8-approach-head h1 {
  margin: 0 !important;
  font-size: clamp(32px, 4.2svh, 52px) !important;
  line-height: 1.05 !important;
  color: #1b3529 !important;
  font-weight: 500 !important;
}

html.gifs-refined body #root#root#root .v8-approach-head p {
  margin: 8px auto 0 !important;
  font-size: clamp(17px, 2svh, 21px) !important;
  color: #465a4e !important;
  line-height: 1.35 !important;
}

html.gifs-refined body #root#root#root .v8-approach-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  width: min(100%, 1180px);
}

@media (max-width: 860px) {
  html.gifs-refined body #root#root#root .v8-approach-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

html.gifs-refined body #root#root#root .v8-approach-card {
  background: #faf5e8;
  border: 1px solid rgba(35, 69, 54, 0.16);
  border-radius: 6px;
  padding: clamp(16px, 2.6svh, 28px) clamp(18px, 2vw, 26px);
  display: grid;
  gap: 8px;
  align-content: start;
  box-shadow: 0 12px 26px rgba(24, 52, 40, 0.06);
}

html.gifs-refined body #root#root#root .v8-approach-step {
  font-size: 14px;
  font-weight: 600;
  color: #82623c;
  letter-spacing: 0.06em;
}

html.gifs-refined body #root#root#root .v8-approach-card h2 {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 29px);
  line-height: 1.12;
  color: #1b3529;
  font-weight: 600;
}

html.gifs-refined body #root#root#root .v8-approach-card p {
  margin: 2px 0 0;
  font-size: clamp(16px, 1.8svh, 19px);
  line-height: 1.42;
  color: #364a3e;
}

html.gifs-refined body #root#root#root .v8-approach-result {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(35, 69, 54, 0.14);
  font-size: 16px;
  color: #1b3529;
  font-weight: 600;
}

html.gifs-refined body #root#root#root .v8-approach-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

html.gifs-refined body #root#root#root .v8-approach-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 26px;
  background: #20392e;
  color: #f6ecd7 !important;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(24, 52, 40, 0.16);
  transition: transform 0.2s ease, background 0.2s ease;
}

html.gifs-refined body #root#root#root .v8-approach-cta:hover {
  transform: translateY(-2px);
  background: #2d4e3f;
}

@media (orientation: landscape) {
  html.gifs-refined #root #home.orchard-client .desktop-scene {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    height: max(100%, 100svh, 56.2801932vw) !important;
  }
}

/* --- 2. Service & Guide Pages: Smooth Mouse Wheel Scrolling --- */
html:not(:has(body.route-home)):not(:has(body.route-inner #contact:not([hidden]))):not(:has(body.route-inner #approach:not([hidden]))) {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  scroll-behavior: smooth;
}

html.gifs-refined body.inside,
html:has(.craft-frame) body,
html body:has(#root[data-static]):not(.route-home) {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  overscroll-behavior: auto !important;
  position: static !important;
}

html.gifs-refined body.route-inner:not(:has(#contact:not([hidden]))):not(:has(#approach:not([hidden]))) {
  height: auto !important;
  min-height: 100svh !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
}

html.gifs-refined body.route-inner:not(:has(#contact:not([hidden]))):not(:has(#approach:not([hidden]))) #root,
html.gifs-refined body.route-inner:not(:has(#contact:not([hidden]))):not(:has(#approach:not([hidden]))) #main {
  height: auto !important;
  min-height: calc(100svh - 76px) !important;
  overflow: visible !important;
}

html.gifs-refined #root .screen-service:not(.craft-frame) {
  height: auto !important;
  min-height: 100svh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
}

html.gifs-refined #root .screen-service:not(.craft-frame) > main {
  flex: 1 0 auto !important;
  height: auto !important;
  overflow: visible !important;
}

html.gifs-refined #root #main.guide-library {
  display: block !important;
  height: auto !important;
}

html.gifs-refined #root #main.guide-library .screen-library-list {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  margin-top: 24px !important;
}

html.gifs-refined #root #main.guide-library .screen-library-list article[hidden] {
  display: grid !important;
}

html.gifs-refined #root #main.guide-library .screen-pager {
  display: none !important;
}

/* --- 3. Orchard 8-Apple Positioning & Zero Logo Overlap --- */
html.gifs-refined #root #home.orchard-client .fruit .orchard-caption-upper,
html.gifs-refined #root #home.orchard-client .fruit[data-apple] .orchard-caption-upper,
html.gifs-refined #root #home.orchard-client .fruit:is([data-apple=sites],[data-apple=content],[data-apple=parsers],[data-apple=apps]) .orchard-caption-upper {
  dominant-baseline: auto !important;
}

html.gifs-refined #root #home.orchard-client .fruit[data-apple=ai] .orchard-caption-upper {
  transform: none !important;
}

html.gifs-refined #root #home.orchard-client .hero-actions {
  flex-wrap: wrap !important;
  gap: 10px 18px !important;
  align-items: center !important;
}

html.gifs-refined #root #home.orchard-client .hero-actions a {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

@media (orientation: landscape) and (max-height: 540px) {
  html.gifs-refined #root #home.orchard-client .fruit,
  html.gifs-refined #root #home.orchard-client .fruit[data-apple] {
    --fruit-size: clamp(34px, 4.6vw, 42px) !important;
    padding: 0 !important;
  }

  html.gifs-refined #root #home.orchard-client .fruit .orchard-caption,
  html.gifs-refined #root #home.orchard-client .fruit[data-apple] .orchard-caption {
    inset: auto !important;
    left: 50% !important;
    top: 50% !important;
    width: calc(var(--fruit-size) + 22px) !important;
    height: calc(var(--fruit-size) + 22px) !important;
    transform: translate(-50%, -50%) !important;
  }

  html.gifs-refined #root #home.orchard-client .fruit .orchard-caption text {
    font-size: 24px !important;
    letter-spacing: 0.02em !important;
  }
}

@media (orientation: landscape) and (max-width: 960px) {
  html.gifs-refined #root #home.orchard-client .desktop-scene {
    left: clamp(-28px, calc((100vw - 177.6833156svh) * 0.11), 0px) !important;
  }

  html.gifs-refined #root #home.orchard-client .fruit,
  html.gifs-refined #root #home.orchard-client .fruit[data-apple] {
    --fruit-size: clamp(34px, 4.6vw, 42px) !important;
    padding: 0 !important;
  }

  html.gifs-refined #root #home.orchard-client .fruit .orchard-caption,
  html.gifs-refined #root #home.orchard-client .fruit[data-apple] .orchard-caption {
    inset: auto !important;
    left: 50% !important;
    top: 50% !important;
    width: calc(var(--fruit-size) + 22px) !important;
    height: calc(var(--fruit-size) + 22px) !important;
    transform: translate(-50%, -50%) !important;
  }

  html.gifs-refined #root #home.orchard-client .fruit .orchard-caption text {
    font-size: 24px !important;
    letter-spacing: 0.02em !important;
  }

  html.gifs-refined #root #home.orchard-client .fruit[data-apple=parsers] {
    --ax: 16.5% !important;
    --ay: 23.5% !important;
  }

  html.gifs-refined #root #home.orchard-client .fruit[data-apple=content] {
    --ax: 28.0% !important;
    --ay: 16.5% !important;
  }

  html.gifs-refined #root #home.orchard-client .fruit[data-apple=chatbots] {
    --ax: 6.5% !important;
    --ay: 34.0% !important;
  }

  html.gifs-refined #root #home.orchard-client .fruit[data-apple=sites] {
    --ax: 21.5% !important;
    --ay: 35.0% !important;
  }

  html.gifs-refined #root #home.orchard-client .fruit[data-apple=apps] {
    --ax: 33.5% !important;
    --ay: 30.5% !important;
  }

  html.gifs-refined #root #home.orchard-client .fruit[data-apple=approach] {
    --ax: 11.5% !important;
    --ay: 48.0% !important;
  }

  html.gifs-refined #root #home.orchard-client .fruit[data-apple=contact] {
    --ax: 22.5% !important;
    --ay: 53.5% !important;
  }

  html.gifs-refined #root #home.orchard-client .fruit[data-apple=ai] {
    --ax: 33.0% !important;
    --ay: 47.0% !important;
  }

  html.gifs-refined #root #home.orchard-client .home-copy {
    left: 48.5% !important;
    right: 2.5% !important;
    top: max(54px, 12%) !important;
    width: auto !important;
    max-width: none !important;
  }

  html.gifs-refined #root #home.orchard-client .home-copy h1 {
    font-size: clamp(22px, 3.6vw, 36px) !important;
    line-height: 1.05 !important;
  }

  html.gifs-refined #root #home.orchard-client .hero-actions a {
    font-size: clamp(14px, 2vw, 17px) !important;
    min-height: 34px !important;
  }
}

/* --- 4. Signature Airship-on-Golden-Strings Flight Stage (uniform across ALL service pages) --- */
@keyframes sf-ship-enter {
  from { transform: translate3d(-14%, 14px, 0) rotate(-5deg); opacity: 0.92; }
  to { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
}
@keyframes sf-ship-hover {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}
@keyframes sf-fruit-float {
  0%, 100% { translate: 0 0; rotate: -4deg; }
  50% { translate: 0 -11px; rotate: 4deg; }
}
@keyframes sf-page-assemble {
  from { opacity: 0.9; transform: translate3d(0, 18px, 0) rotate(-10deg) scale(0.95); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(-7deg) scale(1); }
}

html.gifs-refined #root .sf-air-stage {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: auto;
  aspect-ratio: 1.38;
  isolation: isolate;
  perspective: 900px;
}

html.gifs-refined #root .sf-horizon {
  position: absolute;
  inset: 6% -2% 5%;
  background: radial-gradient(ellipse at 53% 36%, #cbb57535, transparent 62%);
  border-radius: 50%;
  z-index: -2;
}

html.gifs-refined #root .sf-orbit {
  position: absolute;
  width: 88%;
  height: 35%;
  left: 3%;
  top: 40%;
  border: 1px solid #bea56933;
  border-radius: 50%;
  transform: rotate(-14deg);
  z-index: -1;
}

html.gifs-refined #root .sf-orbit-two {
  transform: rotate(19deg);
  top: 42%;
  left: 7%;
  width: 85%;
}

html.gifs-refined #root .sf-ship-entry {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  animation: sf-ship-enter 0.6s cubic-bezier(.16,.65,.25,1) both;
  z-index: 4;
}

html.gifs-refined #root .sf-hero-ship {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 24px #00190f55);
  animation: sf-ship-hover 7s ease-in-out infinite;
}

html.gifs-refined #root .sf-floating-fruit {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 13px 9px #09261944);
  animation: sf-fruit-float 6s ease-in-out infinite;
  z-index: 3;
}

html.gifs-refined #root .sf-floating-one {
  width: 17%;
  height: auto;
  left: 1%;
  bottom: 14%;
  transform: rotate(-9deg);
  animation-delay: -2s;
}

html.gifs-refined #root .sf-floating-two {
  width: 14%;
  height: auto;
  right: 0%;
  bottom: 18%;
  animation-delay: -4s;
}

html.gifs-refined #root .sf-floating-three {
  width: 10.5%;
  height: auto;
  right: 19%;
  bottom: 1%;
  animation-delay: -1s;
}

html.gifs-refined #root .sf-suspended-page {
  position: absolute;
  left: 26%;
  top: 47%;
  width: 52%;
  aspect-ratio: 1.62;
  background: #f4ecda;
  box-shadow: 0 22px 25px #071f1740;
  transform: rotate(-7deg);
  border: 1px solid #f6e7c0;
  animation: sf-page-assemble 0.7s 0.1s cubic-bezier(.2,.7,.2,1) both;
  z-index: 2;
}

html.gifs-refined #root .sf-suspended-page:before,
html.gifs-refined #root .sf-suspended-page:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 48%;
  background: linear-gradient(#e0c485cc, #e0c48544);
  bottom: 100%;
  left: 15%;
  transform: rotate(-10deg);
  transform-origin: bottom;
}

html.gifs-refined #root .sf-suspended-page:after {
  left: auto;
  right: 14%;
  transform: rotate(7deg);
}

html.gifs-refined #root .sf-mini-chrome {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid #b4b09b66;
}

html.gifs-refined #root .sf-mini-chrome i {
  width: 4px;
  height: 4px;
  background: #a9ad91;
  border-radius: 50%;
}

html.gifs-refined #root .sf-mini-content {
  position: relative;
  padding: 7% 7%;
  color: #234536;
}

html.gifs-refined #root .sf-mini-content > span {
  display: block;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  color: #5e6d5e;
}

html.gifs-refined #root .sf-mini-content > b {
  display: block;
  font-size: clamp(19px, 2vw, 30px) !important;
  line-height: 0.98 !important;
  margin-top: 5px;
  position: relative;
  z-index: 2;
  font-weight: 500;
}

html.gifs-refined #root .sf-mini-content > b em {
  color: #7c3f38;
  font-style: italic;
}

html.gifs-refined #root .sf-mini-content img {
  position: absolute;
  width: 34%;
  height: 105%;
  right: 3%;
  top: -2%;
  object-fit: contain;
}

html.gifs-refined #root .sf-mini-rule {
  width: 24%;
  height: 3px;
  background: #b9b18c66;
  margin-top: 10px;
}

/* --- 5. Tight Vertical Rhythm & Unified Serif Styling on /sites/ & Service Pages --- */
html.gifs-refined #root .sites-flight .sf-hero {
  padding: clamp(20px, 3svh, 36px) clamp(20px, 4vw, 48px) clamp(22px, 3svh, 36px) !important;
  min-height: 0 !important;
}

html.gifs-refined #root .sites-flight .sf-section-inner {
  padding: clamp(30px, 4vw, 46px) 0 !important;
}

html.gifs-refined #root .sites-flight .sf-section-title {
  margin-bottom: 22px !important;
}

html.gifs-refined #root .sites-flight .sf-overline {
  font-size: 14px !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
}

html.gifs-refined #root .sites-flight .sf-fruit-button small {
  font-size: 15px !important;
  letter-spacing: 0.02em !important;
}

html.gifs-refined #root .sites-flight .sf-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  min-height: 48px !important;
  padding: 12px 26px !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  background: #eedbb4 !important;
  color: #1f3c2f !important;
  border: 1px solid rgba(238, 219, 180, 0.5) !important;
  border-radius: 4px !important;
  box-shadow: 0 8px 20px rgba(8, 28, 19, 0.2) !important;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}

html.gifs-refined #root .sites-flight .sf-cta:hover {
  transform: translateY(-2px) !important;
  background: #f9ebd0 !important;
}

html.gifs-refined #root .sites-flight .sf-format-copy .sf-cta {
  background: #20392e !important;
  color: #f7eed9 !important;
  border-color: #20392e !important;
}

html.gifs-refined #root .sites-flight .sf-format-copy .sf-cta:hover {
  background: #2b4c3d !important;
}

html.gifs-refined #root .sites-flight .sf-final {
  padding: 36px 0 !important;
  gap: 5% !important;
}

html.gifs-refined #root .sites-flight .sf-final-art {
  aspect-ratio: 1.45 !important;
  max-height: 280px !important;
}

html.gifs-refined #root .sites-flight .sf-final h2 {
  font-size: clamp(34px, 4vw, 54px) !important;
  margin-bottom: 12px !important;
}

html.gifs-refined #root .sites-flight .sf-final > div > p {
  margin-bottom: 18px !important;
  font-size: 20px !important;
}

html.gifs-refined #root .sites-flight .sf-final small {
  font-size: 15px !important;
  margin-top: 12px !important;
}

html.gifs-refined #root .sites-flight .sf-faq-section {
  padding: 16px 0 34px !important;
}

html.gifs-refined #root .sf-deliverables-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 860px) {
  html.gifs-refined #root .sf-deliverables-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

html.gifs-refined #root .sf-deliv-card {
  background: #faf4e6;
  border: 1px solid rgba(35, 69, 54, 0.16);
  border-radius: 4px;
  padding: 20px 22px;
  display: grid;
  gap: 8px;
  align-content: start;
}

html.gifs-refined #root .sf-deliv-card .sf-overline {
  color: #6a5a3c;
  font-size: 14px !important;
}

html.gifs-refined #root .sf-deliv-card h3 {
  margin: 0;
  font-size: 23px;
  line-height: 1.15;
  color: #1f3c2f;
}

html.gifs-refined #root .sf-deliv-card p {
  margin: 0;
  font-size: 17px;
  line-height: 1.42;
  color: #384e42;
}

/* Service Pages (/chatbots/, /ai/, /content/, /parsers/, /apps/) Hero & Tight Sections */
html.gifs-refined #root .craft-hero-copy {
  animation: none !important;
  opacity: 1 !important;
}

html.gifs-refined #root .craft-service:not(.sites-flight) .craft-hero {
  padding: clamp(20px, 3svh, 32px) clamp(20px, 4vw, 48px) clamp(18px, 2.5svh, 28px) !important;
  gap: 4.5% !important;
}

html.gifs-refined #root .craft-service:not(.sites-flight) .craft-hero .craft-kicker {
  font-size: 15px !important;
  letter-spacing: 0.04em !important;
}

html.gifs-refined #root .craft-service:not(.sites-flight) .craft-hero h2 {
  font-size: clamp(36px, 3.8vw, 56px) !important;
  margin: 10px 0 14px !important;
  line-height: 1.03 !important;
}

html.gifs-refined #root .craft-service:not(.sites-flight) .craft-hero-copy > p {
  font-size: clamp(18px, 1.4vw, 21px) !important;
  line-height: 1.4 !important;
}

html.gifs-refined #root .craft-service:not(.sites-flight) .craft-hero-actions {
  margin-top: 20px !important;
  gap: 10px 18px !important;
}

html.gifs-refined #root .craft-service:not(.sites-flight) .craft-button {
  min-height: 46px !important;
  padding: 11px 22px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
}

html.gifs-refined #root .craft-service:not(.sites-flight) .craft-hero-art {
  padding-bottom: 0 !important;
  position: relative !important;
  display: grid !important;
  gap: 6px !important;
}

/* Subtle bottom landed-apple line under hero visual (no overlapping duplicate shelf boxes) */
html.gifs-refined #root .craft-hero .craft-apple-shelf {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 40px !important;
  padding: 4px 0 6px 52px !important;
  border-bottom: 1px solid rgba(207, 189, 143, 0.3) !important;
  display: flex !important;
  align-items: center !important;
}

html.gifs-refined #root .craft-hero .craft-apple-shelf .craft-apple {
  width: 40px !important;
  height: 40px !important;
  left: 0 !important;
  bottom: 2px !important;
}

html.gifs-refined #root .craft-hero .craft-apple-shelf > span:last-child {
  display: block !important;
  font-size: 15px !important;
  transform: none !important;
}

html.gifs-refined #root .craft-section-inner {
  padding: clamp(30px, 4vw, 44px) 0 !important;
}

html.gifs-refined #root .craft-section-heading {
  margin-bottom: 20px !important;
}

html.gifs-refined #root .craft-section-heading h2 {
  font-size: clamp(30px, 3vw, 44px) !important;
}

/* Compact Chat Simulator & Transform Box (NO empty beige wasteland!) */
html.gifs-refined #root .craft-demo-spread {
  align-items: stretch !important;
  gap: 20px !important;
}

html.gifs-refined #root .craft-chat-sheet {
  min-height: 0 !important;
  height: auto !important;
  padding: 18px 20px !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

html.gifs-refined #root .craft-messages {
  padding: 6px 0 !important;
  gap: 10px !important;
}

html.gifs-refined #root .craft-ticket-sheet {
  min-height: 0 !important;
  height: auto !important;
  padding: 18px 20px !important;
}

html.gifs-refined #root .craft-transform {
  align-items: stretch !important;
  gap: 18px !important;
}

html.gifs-refined #root .craft-transform-before,
html.gifs-refined #root .craft-transform-after {
  min-height: 0 !important;
  padding: 20px 22px !important;
}

html.gifs-refined #root .craft-simple-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

@media (max-width: 820px) {
  html.gifs-refined #root .craft-simple-cards {
    grid-template-columns: 1fr;
  }
}

html.gifs-refined #root .craft-simple-card {
  background: rgba(255, 250, 238, 0.06);
  border: 1px solid rgba(207, 189, 143, 0.32);
  border-radius: 4px;
  padding: 18px 20px;
  display: grid;
  gap: 7px;
  align-content: start;
}

html.gifs-refined #root .craft-simple-card span {
  font-size: 13px;
  color: #cab88f;
  letter-spacing: 0.06em;
}

html.gifs-refined #root .craft-simple-card h3 {
  margin: 0 !important;
  font-size: 22px !important;
  color: #f4ecda !important;
}

html.gifs-refined #root .craft-simple-card p {
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.4 !important;
  color: #dcd3bc !important;
}

/* Light-paper variant for simple step cards */
html.gifs-refined #root .craft-paper .craft-simple-card {
  background: #faf5e8;
  border-color: rgba(32, 57, 46, 0.16);
}
html.gifs-refined #root .craft-paper .craft-simple-card span { color: #7a6644; }
html.gifs-refined #root .craft-paper .craft-simple-card h3 { color: #1f3c2f !important; }
html.gifs-refined #root .craft-paper .craft-simple-card p { color: #364b3e !important; }

/* Collapsible FAQ matching /sites/ */
html.gifs-refined #root .craft-questions {
  margin-top: 24px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(35, 69, 54, 0.16);
}

html.gifs-refined #root .craft-questions .sf-faq-wrap {
  max-width: none !important;
  border-bottom: 1px solid rgba(35, 69, 54, 0.22);
}

html.gifs-refined #root .craft-questions .sf-faq-wrap > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 21px;
  font-weight: 600;
  color: #1f3c2f;
  cursor: pointer;
}

html.gifs-refined #root .craft-questions .sf-faq-wrap > summary::-webkit-details-marker {
  display: none;
}

html.gifs-refined #root .craft-questions .sf-faq-wrap[open] > summary span {
  transform: rotate(45deg);
}

html.gifs-refined #root .craft-questions .sf-faq-wrap > summary span {
  font-size: 24px;
  transition: transform 0.2s ease;
}

html.gifs-refined #root .craft-questions .sf-questions {
  padding: 6px 0 16px;
}

/* --- 6. Living Newspaper Video Gallery on /content/ --- */
html.gifs-refined #root .craft-content-still {
  position: relative !important;
  overflow: hidden !important;
}

html.gifs-refined #root .craft-content-still .mg-preview-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

html.gifs-refined #root .craft-content-still .craft-film-label {
  z-index: 2 !important;
}

html.gifs-refined #root .craft-service #motion-examples.motion-gallery,
html.gifs-refined #root .craft-service .motion-gallery.mg-presentation {
  margin-top: 24px !important;
  padding-top: 22px !important;
  border-top: 2px double rgba(48, 43, 31, 0.28) !important;
  border-bottom: 2px double rgba(48, 43, 31, 0.28) !important;
  padding-bottom: 24px !important;
}

html.gifs-refined #root .craft-service .motion-gallery.mg-presentation .mg-grid,
html.gifs-refined #root .craft-service #motion-preview-grid.mg-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px 22px !important;
  align-items: stretch !important;
}

@media (max-width: 960px) {
  html.gifs-refined #root .craft-service .motion-gallery.mg-presentation .mg-grid,
  html.gifs-refined #root .craft-service #motion-preview-grid.mg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  html.gifs-refined #root .craft-service .motion-gallery.mg-presentation .mg-grid,
  html.gifs-refined #root .craft-service #motion-preview-grid.mg-grid {
    grid-template-columns: 1fr !important;
  }
}

html.gifs-refined #root .craft-service .mg-card,
html.gifs-refined #root .craft-service .mg-card[hidden] {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  align-content: start !important;
  gap: 12px !important;
  background: #e7dec9 !important;
  border: 1px solid rgba(58, 50, 35, 0.32) !important;
  border-radius: 2px !important;
  padding: 12px 12px 16px !important;
}

html.gifs-refined #root .craft-service .mg-open {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  padding: 0 !important;
  border: 1px solid rgba(46, 39, 27, 0.45) !important;
  overflow: hidden !important;
  background: #1b2821 !important;
  cursor: pointer !important;
}

html.gifs-refined #root .craft-service .mg-open::after,
html.gifs-refined #root .craft-service .mg-card-play,
html.gifs-refined #root .craft-service .mg-pagination {
  display: none !important;
}

html.gifs-refined #root .craft-service .mg-open > img,
html.gifs-refined #root .craft-service .mg-open > video.mg-preview-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

html.gifs-refined #root .craft-service .mg-open > video.mg-preview-video {
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

html.gifs-refined #root .craft-service .mg-card-caption {
  display: grid !important;
  gap: 5px !important;
}

html.gifs-refined #root .craft-service .mg-card-caption .mg-study-number {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #5c5340 !important;
  border-bottom: 1px solid rgba(58, 50, 35, 0.18) !important;
  padding-bottom: 4px !important;
}

html.gifs-refined #root .craft-service .mg-card-caption h3 {
  font-size: clamp(20px, 1.7vw, 24px) !important;
  line-height: 1.12 !important;
  margin: 0 !important;
  color: #1b2c23 !important;
}

html.gifs-refined #root .craft-service .mg-card-caption .mg-study-desc {
  display: block !important;
  font-size: 16px !important;
  line-height: 1.34 !important;
  color: #3f4b43 !important;
  margin: 2px 0 0 !important;
}

/* --- 7. Portfolio Cases & Interactive /apps/ OS Mockup --- */
html.gifs-refined #root#root .ab-book .ab-book-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px 14px !important;
}

@media (max-width: 720px) {
  html.gifs-refined #root#root .ab-book .ab-book-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px 12px !important;
  }
}

html.gifs-refined #root#root .ab-book .ab-book-actions a {
  font: 600 19px/1.15 "GIFS Serif", Georgia, serif;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #a5986d88;
  padding: 6px 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

html.gifs-refined .screen-dialog-body .ab-project-details-block {
  margin: 18px 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(117, 93, 64, 0.25);
}

html.gifs-refined .screen-dialog-body .ab-project-details-block h3 {
  font-size: 19px !important;
  color: #755d40 !important;
  margin: 0 0 10px !important;
  font-weight: 600 !important;
}

html.gifs-refined .screen-dialog-body .ab-project-details-block ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: 18px;
  line-height: 1.4;
  color: #294334;
}

html.gifs-refined .screen-dialog-body .ab-project-ext-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font: 600 20px/1.2 "GIFS Serif", Georgia, serif;
  color: #20392e;
  text-decoration: none;
  border-bottom: 1px solid #755d4088;
  padding-bottom: 3px;
}

html.gifs-refined #root .craft-project-copy ul.craft-project-details,
html.gifs-refined #root .sf-project-detail ul.sf-project-details-list {
  display: grid !important;
  gap: 7px !important;
  list-style: disc !important;
  margin: 8px 0 12px !important;
  padding: 12px 0 4px 18px !important;
  border-top: 1px solid rgba(229, 216, 183, 0.25) !important;
  color: #f3ecdb !important;
  font-size: 16px !important;
  line-height: 1.38 !important;
}

html.gifs-refined #root .pb-copy ul.pb-project-details-list {
  display: grid !important;
  gap: 6px !important;
  list-style: disc !important;
  margin: 10px 0 !important;
  padding: 10px 0 0 20px !important;
  border-top: 1px solid rgba(41, 67, 52, 0.18) !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
}

html.gifs-refined #root .sf-project-detail .sf-project-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  list-style: none;
  margin: 10px 0 8px;
  padding: 0;
  font-size: 16px;
  color: #e5d8b7;
}

html.gifs-refined #root .sf-project-detail .sf-project-features li::before {
  content: "· ";
  opacity: 0.7;
}

html.gifs-refined #root .craft-os-preview {
  background: #f9f3e4;
  border: 1px solid rgba(32, 57, 46, 0.18);
  border-radius: 4px;
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 22px;
  align-items: center;
}

@media (max-width: 820px) {
  html.gifs-refined #root .craft-os-preview {
    grid-template-columns: 1fr;
  }
}

html.gifs-refined #root .craft-device-frame {
  background: #173428;
  color: #f3e9d2;
  border-radius: 8px;
  border: 1px solid rgba(226, 206, 160, 0.35);
  padding: 14px 16px;
  display: grid;
  gap: 9px;
}

html.gifs-refined #root .craft-device-frame.is-phone {
  max-width: 290px;
  margin: 0 auto;
  border-radius: 20px;
  padding: 14px 16px;
  border: 2px solid #bca678;
}

html.gifs-refined #root .craft-device-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #ceb88b;
  border-bottom: 1px solid rgba(226, 206, 160, 0.2);
  padding-bottom: 6px;
}

html.gifs-refined #root .craft-device-row {
  background: rgba(255, 250, 238, 0.08);
  border: 1px solid rgba(226, 206, 160, 0.22);
  border-radius: 4px;
  padding: 8px 11px;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

html.gifs-refined #root .craft-os-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 820px) {
  html.gifs-refined #root .craft-os-grid {
    grid-template-columns: 1fr;
  }
}

html.gifs-refined #root .craft-os-card {
  border-top: 1px solid rgba(207, 189, 143, 0.45);
  padding-top: 16px;
  display: grid;
  gap: 8px;
  align-content: start;
}

html.gifs-refined #root .craft-os-card h3 {
  margin: 0 !important;
  font-size: clamp(22px, 2vw, 27px) !important;
  color: #efe5cf !important;
}

html.gifs-refined #root .craft-os-card p {
  font-size: 17px !important;
  line-height: 1.4 !important;
  color: #dfd6c1 !important;
  margin: 0 !important;
}

html.gifs-refined #root .craft-os-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

html.gifs-refined #root .craft-os-tags span {
  border: 1px solid rgba(229, 216, 183, 0.4);
  background: rgba(255, 250, 236, 0.08);
  color: #f3ead4;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 14px;
}

/* --- 8. Header Logo Inline Alignment & Navigation Single-Row Fit --- */
html.gifs-refined :is(.masthead .wordmark, .client-brand > a, .mobile-logo) {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  gap: 0.14em !important;
}

html.gifs-refined :is(.masthead .wordmark, .client-brand > a, .mobile-logo) .gifs-apple-mark {
  display: inline-block !important;
  flex-shrink: 0 !important;
  margin-right: 0 !important;
  width: 0.72em !important;
  height: 0.85em !important;
  vertical-align: middle !important;
}

html.gifs-refined body.route-inner #root#root > .masthead {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(12px, 1.8vw, 28px) !important;
  padding: 8px clamp(16px, 3vw, 48px) !important;
  height: auto !important;
  min-height: 76px !important;
}

html.gifs-refined body.route-inner #root#root > .masthead .wordmark {
  font-size: clamp(32px, 3.2vw, 44px) !important;
  line-height: 1 !important;
}

html.gifs-refined body.route-inner #root#root > .masthead .studio-navigation {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px clamp(10px, 1.3vw, 20px) !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

html.gifs-refined body.route-inner #root#root > .masthead .studio-navigation a {
  white-space: nowrap !important;
  font-size: clamp(14px, 1.2vw, 17px) !important;
}

html.gifs-refined body.route-inner #root#root > .masthead .back-link {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-left: 0 !important;
  font-size: clamp(14px, 1.2vw, 17px) !important;
}

@media (max-width: 1020px) {
  html.gifs-refined body.route-inner #root#root > .masthead .studio-navigation {
    display: none !important;
  }
  html.gifs-refined body.route-inner #root#root > .masthead .studio-menu {
    display: block !important;
    margin-left: auto !important;
  }
}

html.gifs-refined #root .client-header {
  gap: clamp(12px, 1.8vw, 28px) !important;
}

html.gifs-refined #root .client-desktop-navigation {
  gap: clamp(10px, 1.2vw, 20px) !important;
}

html.gifs-refined #root .client-desktop-navigation a {
  white-space: nowrap !important;
  font-size: clamp(14px, 1.15vw, 17px) !important;
}

html.gifs-refined #root .client-header-contact {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}