/* Schwalb Therapy — concept on the Delogis "Home Three" design (template licensed by Dana Wright Co.).
   Static rebuild: Castoro + Lexend (SIL OFL, self-hosted), WindSong (OFL) for the signature,
   the template's icon font and decorative shapes. A few text colors are nudged darker for WCAG AA. */
@font-face { font-family: 'Castoro'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/castoro-italic.woff2) format('woff2'); }
@font-face { font-family: 'Castoro'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/castoro-normal.woff2) format('woff2'); }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/assets/fonts/lexend-normal.woff2) format('woff2'); }
@font-face { font-family: 'WindSong'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/windsong-moshe.woff2) format('woff2'); }
@font-face { font-family: 'delogis-icons'; font-style: normal; font-weight: 400; font-display: block; src: url(/assets/fonts/delogis-icons.woff) format('woff'); }

:root {
  --font: "Lexend", system-ui, sans-serif;
  --font-two: "Castoro", Georgia, serif;
  --font-three: "WindSong", cursive;
  --gray: #58636e;            /* cool gray, AA on tinted panels */
  --white: #ffffff;
  --base: #44709a;            /* soft blue (fills); white text 5.2:1 */
  --base-ink: #355d84;        /* blue for small text */
  --black: #162330;
  --primary: #eef3f7;
  --secondary: #2c4762;
  --dark-gray: #edf3f8;
  --bdr: #d6e0e9;
  --extra: #e6eff7;
  --sand: #c8d8e8;            /* light text on deep blue */
  --radius: 6px;
  --container: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; font: 400 16px/30px var(--font); color: var(--gray); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .5s ease; }
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5 { font-family: var(--font-two); font-weight: 400; color: var(--black); margin: 0; line-height: 1.2; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--base); color: var(--white); }
:focus-visible { outline: 3px solid var(--base); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible, .on-brown :focus-visible { outline-color: #a8c7e3; }

.container { width: min(100% - 30px, var(--container)); margin-inline: auto; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--black); color: var(--white); padding: 10px 16px; border-radius: var(--radius); }
.skip:focus { top: 12px; }
.icon { font-family: 'delogis-icons'; font-style: normal; font-weight: 400; line-height: 1; speak: never; -webkit-font-smoothing: antialiased; display: inline-block; }
/* Moshe's leaf mark, drawn in the current text color */
.icon.leaf { width: 1em; height: 1em; vertical-align: middle; background: currentColor; -webkit-mask: url(/assets/img/leaf.webp) center / contain no-repeat; mask: url(/assets/img/leaf.webp) center / contain no-repeat; }
.ico-svg { width: 1em; height: 1em; display: inline-block; vertical-align: -.125em; }

/* Concept ribbon */
.ribbon { background: var(--black); color: #dde5ec; font-size: 13px; line-height: 20px; text-align: center; padding: 7px 15px; position: relative; z-index: 60; }
.ribbon b { color: #a8c7e3; font-weight: 500; }
.ribbon .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #fff0a6; vertical-align: -1px; margin-right: 4px; }

/* Buttons (thm-btn) */
.thm-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; background: var(--base); color: var(--white); font: 600 14px/30px var(--font); padding: 15px 50px; border-radius: 30px; overflow: hidden; z-index: 1; transition: color .5s linear; border: 0; cursor: pointer; white-space: nowrap; }
.thm-btn::before { content: ""; position: absolute; inset: 0; background: var(--black); transform: scaleX(0); transform-origin: right center; transition: transform .4s ease-in-out; z-index: -1; }
.thm-btn:hover::before { transform: scaleX(1); transform-origin: left center; }
.thm-btn:hover { color: var(--white); }
.thm-btn.secondary { background: var(--secondary); }
.thm-btn.secondary::before { background: var(--base); }
.thm-btn.white { background: var(--white); color: var(--black); padding: 10px 34px; font-size: 13px; }
.thm-btn.white::before { background: var(--black); }
.thm-btn.white:hover { color: var(--white); }
.thm-btn.line { background: transparent; color: var(--black); box-shadow: inset 0 0 0 1.5px var(--bdr); }
.thm-btn.line::before { background: var(--base); }
.thm-btn.line:hover { color: var(--white); box-shadow: none; }

/* Section title */
.section-title { position: relative; display: block; margin-bottom: 47px; }
.section-title__tagline { display: inline-block; font-size: 14px; line-height: 14px; color: var(--base-ink); text-transform: uppercase; letter-spacing: .1em; margin: 0; }
.section-title__title { margin: 12px 0 0; font-size: 50px; line-height: 59px; color: var(--black); }
.section-title__title span { position: relative; display: inline-block; font-style: italic; color: var(--base-ink); }
.section-title.mb0 { margin-bottom: 0; }
.section-title.center { text-align: center; }
.on-brown .section-title__title, .dark .section-title__title { color: var(--white); }
.on-brown .section-title__tagline, .dark .section-title__tagline, .on-brown .section-title__title span, .dark .section-title__title span { color: #a8c7e3; }

/* Header (main-menu-three) */
.top-wrap { position: relative; }
.top-wrap > .main-header { position: absolute; top: 0; left: 0; right: 0; }
.top-wrap > .main-header.sticky { position: fixed; }
.main-header { position: relative; z-index: 50; }
.main-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 60px; min-height: 110px; box-shadow: 0 10px 60px rgba(0, 0, 0, .03); }
.page-top .main-header { background: var(--white); }
.logo { display: inline-flex; flex-direction: column; line-height: 1; }
.logo img { display: block; height: 66px; width: auto; }
.main-menu { display: flex; align-items: center; gap: 4px; }
.main-menu a { display: block; padding: 10px 13px; font-size: 16px; color: var(--gray); position: relative; white-space: nowrap; }
.main-menu a::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 1.5px; background: var(--base); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.main-menu a:hover, .main-menu a[aria-current="page"] { color: var(--black); }
.main-menu a:hover::after, .main-menu a[aria-current="page"]::after { transform: scaleX(1); }
.header-right { display: flex; align-items: center; gap: 30px; }
.header-call { display: flex; align-items: center; gap: 10px; }
.header-call__icon { width: 45px; height: 45px; border-radius: 50%; background: var(--white); color: var(--base); display: flex; align-items: center; justify-content: center; font-size: 20px; transition: all .5s ease; }
.page-top .header-call__icon { background: var(--dark-gray); }
.header-call:hover .header-call__icon { background: var(--base); color: var(--white); }
.header-call small { display: block; font-size: 13px; line-height: 13px; color: var(--gray); margin-bottom: 4px; }
.header-call strong { font-weight: 400; color: var(--black); font-size: 16px; line-height: 20px; white-space: nowrap; }
.header-right .thm-btn { padding: 10px 30px; font-size: 13px; }
.menu-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--black); }
.menu-toggle span { display: block; width: 26px; height: 2px; background: currentColor; margin: 6px 0; transition: transform .3s, opacity .3s; }
.main-header.sticky { position: fixed; top: 0; left: 0; right: 0; background: var(--white); box-shadow: 0 10px 60px rgba(0, 0, 0, .07); animation: slide-down .7s ease; }
.main-header.sticky .main-header__inner { min-height: 84px; }
.header-spacer { display: none; }
/* Home page: the header stays in place over the pinned hero, then shrinks to the compact white bar once the
   page scrolls on past the hero (site.js). It never slides away and back. */
.main-header.pinned { position: fixed; left: 0; right: 0; transition: background-color .45s ease, box-shadow .45s ease; }
.page-top { min-height: 110px; }
.main-header.pinned .main-header__inner { transition: min-height .45s ease; }
.main-header.pinned .logo img { transition: height .45s ease; }
.main-header.pinned.sticky { animation: none; }
.main-header.sticky .logo img { height: 54px; }
@keyframes slide-down { from { transform: translateY(-100%); } to { transform: none; } }

/* Mobile nav drawer */
.mobile-nav { position: fixed; inset: 0; z-index: 120; visibility: hidden; }
.mobile-nav.open { visibility: visible; }
.mobile-nav__overlay { position: absolute; inset: 0; background: var(--black); opacity: 0; transition: opacity .5s ease; }
.mobile-nav.open .mobile-nav__overlay { opacity: .5; }
.mobile-nav__content { position: absolute; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); background: var(--black); padding: 26px 22px; overflow-y: auto; transform: translateX(-100%); transition: transform .5s ease; }
.mobile-nav.open .mobile-nav__content { transform: none; }
.mobile-nav__close { position: absolute; top: 18px; right: 16px; background: none; border: 0; color: var(--white); font-size: 26px; cursor: pointer; line-height: 1; padding: 6px; }
.mobile-nav ul { margin: 30px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.mobile-nav li a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); color: var(--white); font-size: 15px; }
.mobile-nav li a[aria-current="page"] { color: #a8c7e3; }
.mobile-nav__contact li { display: flex; gap: 10px; align-items: center; color: #cdd6df; font-size: 14px; padding: 4px 0; }
.mobile-nav__contact .icon { color: #a8c7e3; }

/* Hero (main-slider-three) */
/* The hero fills the screen and stays pinned for a short "hold" (.hero-hold) while the mountains zoom in,
   then the page scrolls on to the content. A hero taller than the screen pins by its bottom edge
   (--hero-top, set by hero-depth.js). No hold without JavaScript or with reduced motion. */
.hero-track { position: relative; --hold: 75vh; }
.hero-hold { display: none; }
.js .hero-hold { display: block; height: var(--hold); }
/* After the hold, the cards and the "Hi, I'm Moshe" section scroll up over the still-pinned hero. The cards
   section fades from clear to white, so the mountains show through at its top and are fully covered by the
   white of the next section. The fly-over keeps going a little (--c) while they rise. */
.js .hero { position: sticky; top: var(--hero-top, 0px); }
/* Only the mountains stay behind: once the hold ends, the hero's text scrolls away at normal speed (--rise) */
.hero > .container { transform: translate3d(0, calc(var(--rise, 0px) * -1), 0); }
.hero-track > .feature-two, .hero-track > .about-three { position: relative; z-index: 3; }
.hero-track > .feature-two { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .88) 48%, var(--white) 76%); }
.hero-track > .about-three { background: var(--white); }
.hero { position: relative; overflow: hidden; height: 100vh; height: 100svh; min-height: 600px; padding: 110px 0 40px; display: flex; align-items: center; background: var(--dark-gray); isolation: isolate; }
/* The mountain photo as a texture behind the text (12%, multiply) that zooms gently with the scroll. Over its
   darkest spot behind the text, the hero's small text (#4a5561) stays 5.6:1 and the headline 11.7:1.
   --p is the scroll progress through the hold (hero-depth.js). */
.hero { --p: 0; --e: 0; --c: 0; --depth: 1; --horizon: 36%; }
.hero::before { content: ""; position: absolute; inset: -40px 0 0; background: url(/assets/img/hero-mountains-texture.webp) center / cover no-repeat; mix-blend-mode: multiply; opacity: .12; z-index: -1; transform-origin: 50% 40%; transform: scale(calc(1 + var(--e) * var(--depth) * .15 + var(--c) * .05)); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(237, 243, 248, .35) 0%, rgba(237, 243, 248, 0) 45%, rgba(237, 243, 248, .25) 100%); z-index: -1; }
/* Hero photo: fills the right side and bleeds off the page. Its left edge is a swoop traced from the stem of
   Moshe's leaf logo, turned 180° (64% across at the top, sweeping to 40% at the bottom). The ridges are five
   stacked layers (sky + four ridges, far to near); during the hold each one zooms toward the horizon at its own
   rate (sky 1.12x, far 1.22x, mid 1.5x, near 2x, front 3.2x), so the front ridge passes underneath and drops
   out of view, as if flying over the top. Gaps between ridges open onto valley mist. At rest the stack is the
   original photo. */
.hero__img { position: absolute; top: 0; bottom: 0; right: 0; width: 60%; z-index: 2; overflow: hidden; clip-path: polygon(38.3% 0.0%, 38.6% 3.7%, 39.0% 7.4%, 39.4% 11.1%, 39.7% 14.8%, 39.8% 18.5%, 39.7% 22.2%, 39.5% 25.9%, 39.1% 29.6%, 38.5% 33.3%, 37.7% 37.0%, 36.8% 40.7%, 35.8% 44.4%, 34.5% 48.1%, 33.1% 51.9%, 31.5% 55.6%, 29.7% 59.3%, 27.7% 63.0%, 25.6% 66.7%, 23.3% 70.4%, 20.9% 74.1%, 18.3% 77.8%, 15.5% 81.5%, 12.6% 85.2%, 9.6% 88.9%, 6.5% 92.6%, 3.9% 96.3%, 2.0% 100.0%, 100% 100%, 100% 0); }
.hero-depth .hd { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 62%; transform-origin: 50% var(--horizon); will-change: transform; }
.hd-0 { transform: translate3d(0, calc(var(--e) * var(--depth) * 0px), 0) scale(calc((1 + var(--e) * var(--depth) * 0.12) * (1 + var(--c) * 0.04))); }
.hd-1 { transform: translate3d(0, calc(var(--e) * var(--depth) * 0px), 0) scale(calc((1 + var(--e) * var(--depth) * 0.22) * (1 + var(--c) * 0.06))); }
.hd-2 { transform: translate3d(0, calc(var(--e) * var(--depth) * 0px), 0) scale(calc((1 + var(--e) * var(--depth) * 0.5) * (1 + var(--c) * 0.09))); }
.hd-3 { transform: translate3d(0, calc(var(--e) * var(--depth) * 30px), 0) scale(calc((1 + var(--e) * var(--depth) * 1.0) * (1 + var(--c) * 0.12))); }
.hd-4 { transform: translate3d(0, calc(var(--e) * var(--depth) * 90px), 0) scale(calc((1 + var(--e) * var(--depth) * 2.2) * (1 + var(--c) * 0.16))); }

.hero__content { position: relative; z-index: 15; max-width: 780px; }
.hero__title .nw { white-space: nowrap; }
.hero__title { font-size: 74px; line-height: 90px; color: var(--black); margin: 0 0 22px; }
.hero__title .underlined { position: relative; display: inline-block; }
.hero__title .underlined::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 6px; height: 4px; border-radius: 2px; background: var(--base); transform-origin: left center; animation: draw-line 1s 1.6s ease-out both; }
@keyframes draw-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__text { font-size: 18px; line-height: 30px; margin: 0 0 37px; max-width: 34em; text-wrap: pretty; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 30px; }
.founder__name { font: 400 46px/44px var(--font-three); color: var(--black); margin: 0; }
.founder__sub { font-size: 15px; line-height: 20px; margin: 4px 0 0; }
.hero__where { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 38px; font-size: 14px; color: var(--gray); }
.hero__where span { display: inline-flex; align-items: center; gap: 8px; }
.hero__text, .hero__where, .founder__sub { color: #4a5561; }
.hero__where span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--base); }

@media (min-width: 1025px) and (max-height: 800px) {
  .hero__title { font-size: 60px; line-height: 72px; }
  .hero__text { margin-bottom: 26px; }
  .hero__where { margin-top: 24px; }
}

/* Entrance + loop animations (from the template's custom-animate.css) */
.anim-down { animation: drop-in 1.6s .2s ease both; }
.anim-up { animation: rise-in 1.6s .4s ease both; }
.anim-right { animation: slide-in-right 1.1s .1s ease both; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-80px); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: none; } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(300px); } to { opacity: 1; transform: none; } }
@keyframes zoom-fade-2 { 0% { transform: scale(.9); } 50% { transform: scale(1); } 100% { transform: scale(.9); } }
@keyframes zoominout { 0% { transform: rotate(0) scale(.7); opacity: 0; } 50% { transform: rotate(180deg) scale(1); opacity: 1; } 100% { transform: rotate(360deg) scale(.7); opacity: 0; } }
@keyframes img-bounce { from { transform: translateY(0); } to { transform: translateY(-30px); } }
@keyframes float-bob-y { 0% { transform: translateY(-20px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(-20px); } }
@keyframes ripple { 70% { box-shadow: 0 0 0 40px rgba(68, 112, 154, 0); } 100% { box-shadow: 0 0 0 0 rgba(68, 112, 154, 0); } }
.zoominout { animation: zoominout 3s ease-in-out infinite; }
.img-bounce { animation: img-bounce 5s ease-in-out infinite alternate; }

/* Scroll reveals (WOW / animate.css style) */
.js .wow { opacity: 0; transition: opacity 1.1s ease, transform 1.1s ease; transition-delay: var(--d, 0s); }
.js .wow.fadeInUp { transform: translateY(60px); }
.js .wow.fadeInLeft { transform: translateX(-60px); }
.js .wow.fadeInRight { transform: translateX(60px); }
.js .wow.in { opacity: 1; transform: none; }

/* Feature cards (feature-two, without photos) */
.feature-two { padding: 120px 0 90px; }
.grid { display: grid; gap: 30px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.feature-card { position: relative; display: block; border-radius: var(--radius); padding: 44px 40px 36px; color: var(--white); overflow: hidden; isolation: isolate; min-height: 190px; transition: transform .5s ease; }
.feature-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #44709a 0%, #2c4762 100%); z-index: -2; }
.feature-card:hover { transform: translateY(-6px); }
.feature-card__icon { position: absolute; top: 0; right: 0; width: 80px; height: 80px; background: var(--white); border-bottom-left-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 50px; color: var(--base); }
.feature-card.has-photo { padding-top: 0; }
.feature-card__photo { display: block; width: calc(100% + 80px); max-width: none; height: 190px; margin: 0 -40px 30px; object-fit: cover; transition: transform 1.2s ease; }
.feature-card.has-photo:hover .feature-card__photo { transform: scale(1.04); }
.feature-card h2, .feature-card h3 { font-size: 24px; line-height: 32px; color: var(--white); max-width: 75%; margin-bottom: 10px; }
.feature-card p { color: #dbe7f2; margin: 0; font-size: 15px; line-height: 26px; max-width: 85%; }

/* About (about-three) */
.about-three { padding: 0 0 130px; }
.about-three__row { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center; }
.about-three__points-intro { color: var(--black); font-weight: 500; margin: 26px 0 0; }
.about-three__points { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 40px; margin: 14px 0 41px; }
.check-list li { display: flex; align-items: flex-start; gap: 14px; color: var(--black); font-size: 16px; line-height: 26px; }
.check-list li + li { margin-top: 10px; }
.check-list .ico-svg { color: var(--base); flex: none; margin-top: 5px; }
.about-three__img-box { position: relative; margin-left: 40px; isolation: isolate; }
.about-three__img img { width: 100%; border-radius: 999px 999px var(--radius) var(--radius); aspect-ratio: 4 / 5; object-fit: cover; }
.about-three__shape { position: absolute; inset: -24px 24px 24px -24px; border: 1.5px solid rgba(68, 112, 154, .45); border-radius: 999px 999px var(--radius) var(--radius); z-index: -1; }
.about-three__card { position: absolute; left: -120px; bottom: -60px; width: 290px; background: var(--white); border-radius: var(--radius); box-shadow: 2px -2px 24px rgba(0, 0, 0, .14); padding: 26px 28px; }
.about-three__card .icon { font-size: 54px; color: var(--base); }
.about-three__card h3 { font-size: 22px; margin: 12px 0 4px; }
.about-three__card p { margin: 0; font-size: 14px; line-height: 24px; }

/* Focus areas (services-three, without photos) */
.services-three { position: relative; padding: 120px 0 90px; isolation: isolate; }
.services-three__bg { position: absolute; top: 0; left: 0; right: 0; height: 528px; background: var(--dark-gray); z-index: -2; }
.services-three__bg::after { content: ""; position: absolute; inset: 0; background: url(/assets/img/delogis/stripes.webp) center / cover no-repeat; mix-blend-mode: overlay; }
.svc-card { position: relative; display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); box-shadow: 0 10px 60px rgba(0, 0, 0, .07); margin-top: 30px; }
.svc-card__inner { position: relative; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; flex: 1; }
.svc-card__inner::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--base); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; transform: translate3d(0, 100%, 0); transition: transform .5s ease; }
.svc-card:hover .svc-card__inner::before { transform: none; }
.svc-card__strip { display: block; width: 100%; height: 130px; object-fit: cover; }
.svc-card__content { position: relative; padding: 30px 40px 22px; }
.svc-card h3 { font-size: 21px; line-height: 27px; margin-bottom: 11px; transition: color .5s; }
.svc-card:hover h3 { color: var(--base-ink); }
.svc-card p { font-weight: 300; margin: 0; font-size: 15px; line-height: 28px; }
.svc-card__more { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 13px; padding: 13px 40px; border-top: 1px solid var(--bdr); background: var(--dark-gray); border-radius: 0 0 var(--radius) var(--radius); color: var(--gray); transition: all .5s ease; }
.svc-card:hover .svc-card__more { background: var(--base); color: var(--white); border-top-color: transparent; }
.svc-card__more .ico-svg { width: 15px; }
.svc-card .svc-card__tag { font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--base-ink); margin: 0 0 8px; }
.svc-card.is-specialty { background: var(--secondary); }
.svc-card.is-specialty h3, .svc-card.is-specialty:hover h3 { color: var(--white); }
.svc-card.is-specialty p { color: var(--sand); }
.svc-card.is-specialty .svc-card__tag { color: #a8c7e3; }
.svc-card.is-specialty .svc-card__inner::before { border-color: #a8c7e3; }
.svc-card.is-specialty .svc-card__more { background: #253d54; color: var(--sand); border-top-color: transparent; }

/* Specialties: trauma, IFS, AEDP as arches (dark band) */
.specialties { padding: 120px 0 130px; }
.specialties::before { content: ""; position: absolute; inset: 0; background: url(/assets/img/delogis/paper.webp) center / cover; opacity: .06; z-index: -1; }
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.spec { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 118px 34px 40px; border-radius: 999px 999px var(--radius) var(--radius); background: #1c2c3c; isolation: isolate; overflow: hidden; transition: transform .6s ease; }
.spec::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(168, 199, 227, .3); border-radius: inherit; pointer-events: none; transition: border-color .6s; }
.spec::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #44709a 0%, #2c4762 100%); opacity: 0; transition: opacity .6s ease; z-index: -1; }
.spec:hover { transform: translateY(-8px); }
.spec:hover::after { opacity: 1; }
.spec:hover::before { border-color: rgba(255, 255, 255, .45); }
.spec__tag { font-size: 12px; line-height: 18px; letter-spacing: .12em; text-transform: uppercase; color: #a8c7e3; margin: 0 0 14px; max-width: 19em; transition: color .6s; }
.spec__title { font-size: 36px; line-height: 44px; color: var(--white); margin: 0 0 18px; }
.spec__text { font-size: 15px; line-height: 27px; color: #c3cfdb; margin: 0 0 24px; transition: color .6s; }
.spec__cred { width: 100%; margin: auto 0 18px; padding-top: 16px; border-top: 1px solid rgba(168, 199, 227, .25); font-size: 13px; line-height: 20px; color: #a8c7e3; transition: color .6s; }
.spec__more { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--white); }
.spec__more .ico-svg { width: 16px; transition: transform .5s; }
.spec:hover .spec__more .ico-svg { transform: translateX(4px); }
.spec:hover .spec__tag, .spec:hover .spec__text, .spec:hover .spec__cred { color: var(--white); }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 3; }

/* Deep blue band (counter-two) */
.on-brown { position: relative; background: var(--secondary); color: var(--sand); overflow: hidden; isolation: isolate; }
.reframe { padding: 110px 0 90px; text-align: center; }
/* The sea photo behind it, at higher contrast, rippling on scroll (ripple.js, WebGL; the still photo otherwise).
   A 70% navy wash keeps the text readable even over the photo's whitest pixel: white 5.9:1, the light text 4.7:1+. */
.reframe.has-water { background: var(--black); }
.reframe__water { position: absolute; inset: 0; z-index: -2; filter: contrast(1.3) saturate(1.1); }
.reframe__water img, .reframe__water canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; }
.reframe__water canvas { opacity: 0; transition: opacity .6s ease; }
.reframe__water.live canvas { opacity: 1; }
.reframe__water--mist img, .reframe__water--mist canvas { object-position: 50% 82%; }
.reframe.has-water::after { content: ""; position: absolute; inset: 0; background: rgba(22, 35, 48, .7); z-index: -1; }
.reframe.has-mist::after { background: rgba(22, 35, 48, .6); }
.reframe.has-water .section-title__tagline { color: #dce8f4; }
.reframe.has-water .reframe__note { color: #e6eef6; }
.reframe__lead { font: 400 26px/36px var(--font-two); color: var(--sand); margin: 18px 0 6px; }
.reframe__from { font: 400 30px/40px var(--font-two); color: rgba(255, 255, 255, .82); margin: 0; }
.reframe__from > span { position: relative; display: inline-block; }
.scratch { position: absolute; left: -4%; top: 6%; width: 108%; height: 88%; overflow: visible; pointer-events: none; }
.scratch path { stroke-dasharray: 100; stroke-dashoffset: 0; }
.js .wow:not(.in) .scratch path { stroke-dashoffset: 100; }
.wow.in .scratch path { transition: stroke-dashoffset .7s cubic-bezier(.6, .05, .4, 1) .55s; }
.wow.in .scratch path + path { transition-delay: .85s; }
.struck { position: relative; display: inline-block; font-weight: inherit; }
.struck .scratch { top: 16%; height: 72%; }
.struck .scratch g { stroke: #a8c7e3; }
.reframe__list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 54px 0 30px; }
.reframe__item { position: relative; padding: 0 22px; margin-bottom: 22px; }
.reframe__item + .reframe__item::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 4px; width: 2px; background: rgba(255, 255, 255, .1); }
.reframe__item .icon { font-size: 60px; color: #9fbad3; transition: transform .5s; }
.reframe__item:hover .icon { transform: scale(.9); }
.reframe__item p { font: 400 25px/34px var(--font-two); color: var(--white); margin: 0; }
.reframe__note { max-width: 700px; margin: 10px auto 0; font-size: 18px; font-weight: 300; line-height: 30px; color: var(--sand); }

/* Pricing */
.price-card { position: relative; background: var(--dark-gray); border-radius: var(--radius); padding: 10px 10px 40px; text-align: left; box-shadow: 0 10px 60px rgba(0, 0, 0, .05); }
.price-card__inner { position: relative; background: var(--white); border-radius: var(--radius); padding: 40px 30px 34px; margin-bottom: 30px; }
.price-card__inner::after { content: ""; position: absolute; left: 40px; bottom: -14px; border: 14px solid transparent; border-bottom: 0; border-top-color: var(--white); }
.price-card .icon { font-size: 50px; color: var(--secondary); }
.price-card__price { font: 700 30px/1 var(--font); color: var(--black); margin: 22px 0 6px; }
.price-card__label { font-size: 14px; line-height: 20px; letter-spacing: .1em; text-transform: uppercase; color: var(--base-ink); margin: 0 0 18px; }
.price-card li { position: relative; padding-left: 18px; font-size: 15px; line-height: 26px; color: var(--black); }
.price-card li + li { margin-top: 6px; }
.price-card li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--base); }
.price-card .thm-btn { margin-left: 30px; padding: 12px 40px; font-size: 13px; }
.pricing__note { text-align: center; margin: 40px auto 0; max-width: 720px; font-size: 15px; }

/* Quote (testimonial-three style) */
.dark { background: var(--black); color: #bac6d2; position: relative; overflow: hidden; isolation: isolate; }
.quote { padding: 110px 0; }
.quote__solo { max-width: 920px; text-align: center; }
.quote__text { font: italic 400 36px/50px var(--font-two); color: var(--white); margin: 0 0 28px; }
.quote__name { font: 400 20px/1 var(--font-two); color: var(--white); }
.quote__role { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #a8c7e3; margin-left: 10px; }

/* CTA band (cta-one) */
.cta-one { position: relative; background: var(--base); padding: 50px 0; overflow: hidden; isolation: isolate; }
.cta-one__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 24px; text-align: center; }
.cta-one__text { font-size: 24px; line-height: 34px; color: var(--white); margin: 0; }

/* Footer */
.site-footer { background: var(--black); color: #9fadba; position: relative; overflow: hidden; }
.site-footer__top { background: #0f1923; }
.site-footer__top-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 26px 0; }
.site-footer__time { display: flex; align-items: center; gap: 24px; }
.site-footer__time .icon { font-size: 44px; color: var(--base); }
.site-footer__time h2 { font-size: 20px; color: var(--white); padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .1); }
.site-footer__time p { margin: 0; font-size: 15px; }
.site-footer__follow { display: flex; align-items: center; gap: 12px; color: var(--white); font-size: 15px; }
.site-footer__follow a { width: 40px; height: 40px; border-radius: 50%; background: #22313f; display: inline-flex; align-items: center; justify-content: center; color: var(--white); font-size: 17px; transition: background .5s; }
.site-footer__follow a:hover { background: var(--base); color: var(--white); }
.site-footer__main { padding: 80px 0 50px; display: grid; grid-template-columns: 1.15fr .8fr 1.15fr 1.1fr; gap: 40px; }
.site-footer__about p { font: 400 20px/30px var(--font-two); color: var(--white); margin: 26px 0 0; }
.site-footer h2.f-title { font-size: 20px; color: var(--white); margin: 0 0 24px; }
.site-footer__links li + li { margin-top: 6px; }
.site-footer__links a { font-size: 15px; color: #bac6d2; }
.site-footer__links a:hover { color: #a8c7e3; padding-left: 4px; }
.site-footer__contact li { display: flex; gap: 14px; align-items: center; }
.site-footer__contact li + li { margin-top: 16px; }
.site-footer__contact .ci { width: 38px; height: 38px; border-radius: 50%; background: #22313f; color: #a8c7e3; display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.site-footer__contact small { display: block; font-size: 12px; line-height: 16px; color: #9fadba; }
.site-footer__contact a, .site-footer__contact span.v { font-size: 15px; line-height: 22px; color: var(--white); }
.site-footer .crisis { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); color: #cdd6df; }
.site-footer .crisis strong { color: var(--white); }
.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding: 22px 0 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 14px; }
.site-footer__bottom a { color: #a8c7e3; text-decoration: underline; text-underline-offset: 3px; }

.crisis { border-radius: var(--radius); padding: 16px 18px; background: var(--extra); border: 1px solid #d3e0ec; color: var(--black); font-size: 14px; line-height: 23px; }
.crisis strong { display: block; font-weight: 600; margin-bottom: 2px; }

/* Draft notes (things still needed from Moshe) */
.draft-note { display: block; background: #fff0a6; color: #3b2f00; border: 1px dashed #b89a10; border-radius: 8px; padding: 9px 13px; margin: 12px 0 16px; font: 500 14px/1.45 var(--font); max-width: 40em; text-align: left; }
.draft-note::before { content: "Needed from Moshe · "; font-weight: 700; }
.draft-note.inline { display: inline-block; margin: 6px 0; }

/* Page header (inner pages) */
/* Inner-page heroes move like the home hero: the page hero pins when it reaches the top and the content rises
   over it right away (no pause), fading in from white. Meanwhile the photo zooms in (the What I Help With
   ridges fly over). The heading scrolls away at normal speed. --e, --rise: hero-depth.js. */
.ph-track { position: relative; }
.ph-rest { position: relative; z-index: 3; background: var(--white); }
.ph-rest::before { content: ""; position: absolute; left: 0; right: 0; top: -150px; height: 150px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--white)); pointer-events: none; }
.page-header { --p: 0; --e: 0; --c: 0; --depth: 1; --horizon: 33%; position: relative; background: var(--black); isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 60vh; min-height: 60svh; }
.js .page-header { position: sticky; top: var(--hero-top, 0px); }
.page-header > .container { transform: translate3d(0, calc(var(--rise, 0px) * -1), 0); }
.page-header__media { position: absolute; inset: 0; z-index: -1; opacity: .3; }
.page-header.has-media::before { display: none; }
.ph-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform-origin: 50% 40%; transform: scale(calc(1 + var(--e) * var(--depth) * .3 + var(--c) * .06)); will-change: transform; }
.page-header .hero-depth .hd { object-position: 50% 45%; }
.page-header::before { content: ""; position: absolute; inset: 0; background: url(/assets/img/delogis/paper.webp) center / cover; opacity: .16; z-index: -1; }
.page-header__inner { padding: 90px 0 110px; position: relative; }
.page-header h1 { font-size: 46px; line-height: 56px; color: var(--white); margin: 0 0 10px; }
.page-header h1 span { position: relative; display: inline-block; z-index: 1; }
.page-header h1 span::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 3px; border-radius: 2px; background: #a8c7e3; }
.breadcrumb { display: flex; gap: 10px; font-size: 14px; color: #e3eaf1; }
.breadcrumb a { color: var(--white); }
.breadcrumb a:hover { color: #a8c7e3; }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; color: #a8c7e3; }

/* Inner sections */
.section { padding: 120px 0; position: relative; }
.section.tint { background: var(--dark-gray); isolation: isolate; }
.section.tint::before { content: ""; position: absolute; inset: 0; background: url(/assets/img/delogis/paper.webp) center / cover; mix-blend-mode: multiply; opacity: .2; z-index: -1; }
.section.pt0 { padding-top: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.two-col.media { grid-template-columns: .85fr 1.15fr; align-items: start; }
.prose p { margin: 0 0 1em; }
.lede { font-size: 19px; line-height: 32px; color: var(--black); }
.frame-img img { border-radius: 999px 999px var(--radius) var(--radius); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.frame-img.center { max-width: 460px; }
/* Privacy, Terms and Accessibility pages */
.legal { max-width: 820px; }
.legal .updated { font-size: 14px; color: var(--gray); margin: 0 0 6px; }
.legal h2 { font-size: 30px; line-height: 38px; margin: 34px 0 10px; }
.legal ul { list-style: disc; padding-left: 22px; margin: 0 0 1em; }
.legal li { color: var(--gray); }
.legal li + li { margin-top: 8px; }
.legal a { color: var(--base-ink); text-decoration: underline; text-underline-offset: 3px; }
.cred-line { margin: 26px 0 0; padding-left: 18px; border-left: 2px solid var(--base); font: 400 19px/30px var(--font-two); color: var(--black); }
.sticky-col { position: sticky; top: 120px; }
.big-line { font: 400 28px/40px var(--font-two); color: var(--black); }
.big-line em { color: var(--base-ink); }
.card-white { background: var(--white); border-radius: var(--radius); padding: 40px; box-shadow: 0 10px 60px rgba(0, 0, 0, .06); }
.q-list li { display: flex; gap: 14px; align-items: flex-start; font: 400 21px/30px var(--font-two); color: var(--black); padding: 12px 0; border-bottom: 1px solid var(--bdr); }
.q-list li:last-child { border-bottom: 0; }
.q-list .icon { color: var(--base); font-size: 26px; margin-top: 2px; flex: none; }
.q-list.final li:last-child { color: var(--base-ink); font-style: italic; }
/* My Approach: the central principles as tiles that turn over (hover, or a tap, click or Enter: site.js) */
.flips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.flip { perspective: 1200px; border-radius: var(--radius); }
.flip:has(.flip__btn:focus-visible) { outline: 2px solid var(--base); outline-offset: 4px; }
.flip__inner { display: grid; min-height: 230px; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.flip__face { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 34px 32px; border-radius: var(--radius); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip__front { background: var(--dark-gray); }
.flip__front::before { content: ""; position: absolute; left: 32px; top: 0; width: 44px; height: 3px; border-radius: 0 0 2px 2px; background: var(--base); }
.flip__front h3 { font-size: 25px; line-height: 34px; margin: 0; }
.flip__btn { all: unset; cursor: pointer; }
.flip__btn::after { content: ""; position: absolute; inset: 0; }
.flip__hint { margin-top: 18px; font-size: 12px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--base-ink); }
.flip__back { background: var(--secondary); transform: rotateY(180deg); }
.flip__back p { margin: 0; color: var(--white); font-size: 16px; line-height: 28px; }
@media (hover: hover) and (pointer: fine) { .flip:hover .flip__inner { transform: rotateY(180deg); } .flip__hint .on-tap { display: none; } }
@media not ((hover: hover) and (pointer: fine)) { .flip__hint .on-hover { display: none; } }

/* My Approach: modality tiles, the name and credential; open one for the rest. IFS and AEDP lead. */
.mods { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; align-items: start; }
.mod:first-child { grid-column: 2 / span 2; }
.mod { grid-column: span 2; background: var(--white); border-radius: var(--radius); box-shadow: 0 10px 60px rgba(0, 0, 0, .05); transition: box-shadow .5s; }
.mod[open] { box-shadow: 0 10px 60px rgba(0, 0, 0, .1); }
.mod summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; padding: 28px 30px; min-height: 200px; align-content: center; }
.mod summary::-webkit-details-marker { display: none; }
.mod__name { font: 400 23px/31px var(--font-two); color: var(--black); }
.mod__cred { grid-row: 2; font-size: 12px; line-height: 18px; letter-spacing: .1em; text-transform: uppercase; color: var(--base-ink); }
.mod .pm { grid-row: 1 / span 2; grid-column: 2; align-self: center; position: relative; width: 16px; height: 16px; }
.mod .pm::before, .mod .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--base); transition: transform .4s; }
.mod .pm::after { transform: rotate(90deg); }
.mod[open] .pm::after { transform: rotate(0); }
.mod__body { margin: 0 30px; padding: 20px 0 26px; border-top: 1px solid var(--bdr); }
.mod__body p { font-size: 15px; line-height: 28px; margin: 0 0 .8em; }
.mod__body p:last-child { margin: 0; }
.mod__body a { color: var(--base-ink); text-decoration: underline; text-underline-offset: 3px; }
.mod--lead { background: var(--secondary); }
.mod--lead .mod__name { color: var(--white); }
.mod--lead .mod__cred { color: #a8c7e3; }
.mod--lead .pm::before, .mod--lead .pm::after { background: #a8c7e3; }
.mod--lead .mod__body { border-top-color: rgba(255, 255, 255, .16); }
.mod--lead .mod__body p { color: #dce6ef; }
.mod--lead .mod__body a { color: var(--white); }

/* My Approach opens with the dark water band right under the page hero: the hero fades into it, not into white */
.ph-rest:has(> .reframe:first-child)::before { background: linear-gradient(180deg, rgba(24, 38, 51, 0), rgb(24, 38, 51)); }
.ph-rest > .reframe.has-water:first-child::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 220px; background: linear-gradient(180deg, rgb(30, 45, 59), rgba(30, 45, 59, 0)); z-index: -1; }
.reframe__intro { max-width: 760px; margin: -14px auto 0; font: 400 27px/38px var(--font-two); color: var(--white); }
/* What I Help With: six tiles, the same size, each opening in place (a set with the modality tiles on My Approach) */
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.area { background: var(--white); border-radius: var(--radius); box-shadow: 0 10px 60px rgba(0, 0, 0, .05); overflow: hidden; scroll-margin-top: 110px; transition: box-shadow .5s; }
.area[open] { box-shadow: 0 10px 60px rgba(0, 0, 0, .1); }
.area summary { list-style: none; cursor: pointer; display: block; }
.area summary::-webkit-details-marker { display: none; }
.area__photo { display: block; width: 100%; height: 190px; object-fit: cover; }
.area__text { display: block; min-height: 208px; padding: 26px 30px 20px; }
.area__tag { display: block; font-size: 12px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: #a8c7e3; margin-bottom: 8px; }
.area__name { display: block; font: 400 23px/31px var(--font-two); color: var(--black); margin-bottom: 10px; }
.area__sum { display: block; font-size: 15px; font-weight: 300; line-height: 27px; color: var(--gray); }
.area__more { display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 13px; padding: 14px 30px; border-top: 1px solid var(--bdr); }
.area .pm { position: relative; flex: none; width: 14px; height: 14px; }
.area .pm::before, .area .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--base); transition: transform .4s; }
.area .pm::after { transform: rotate(90deg); }
.area[open] .pm::after { transform: rotate(0); }
.area__body { padding: 22px 30px 26px; border-top: 1px solid var(--bdr); }
.area__body p { font-size: 15px; line-height: 28px; margin: 0 0 .8em; }
.area__body p:last-child { margin: 0; }
.area__note { font-size: 12px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--base-ink); }
.area.is-specialty { background: var(--secondary); }
.area.is-specialty .area__name { color: var(--white); }
.area.is-specialty .area__sum, .area.is-specialty .area__more, .area.is-specialty .area__body p { color: var(--sand); }
.area.is-specialty .area__more, .area.is-specialty .area__body { border-top-color: rgba(255, 255, 255, .16); }
.area.is-specialty .pm::before, .area.is-specialty .pm::after { background: #a8c7e3; }
.area.is-specialty .area__note { color: #a8c7e3; }
/* Home: what happens next */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 0; padding: 0; list-style: none; }
.step { height: 100%; padding: 34px 32px 30px; background: var(--dark-gray); border-radius: var(--radius); }
.step__num { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 50%; background: var(--secondary); color: var(--white); font: 400 20px/1 var(--font-two); }
.step h3 { font-size: 22px; line-height: 30px; margin-bottom: 10px; }
.step p { margin: 0; font-size: 15px; font-weight: 300; line-height: 27px; }
/* Contact form: the field bots fill in, and the message if sending fails */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { color: #a12a22; font-size: 14px; line-height: 22px; margin: 12px 0 0; }
/* The comparison copy of the About page */
.cred-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cred { border: 1px solid var(--bdr); border-radius: var(--radius); padding: 30px 30px 24px; background: var(--white); transition: box-shadow .5s, border-color .5s; }
.cred:hover { border-color: transparent; box-shadow: 0 10px 60px rgba(0, 0, 0, .08); }
.cred .icon { font-size: 44px; color: var(--base); }
.cred h3 { font-size: 21px; line-height: 28px; margin: 14px 0 12px; }
.cred li { display: flex; gap: 14px; padding: 7px 0; border-top: 1px dashed var(--bdr); font-size: 15px; line-height: 24px; color: var(--black); }
.cred li .yr { min-width: 104px; color: var(--base-ink); }
.pill { display: inline-block; font-style: normal; font-size: 11px; line-height: 20px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; padding: 0 9px; border-radius: 20px; background: var(--extra); border: 1px solid #c9dbea; color: var(--base-ink); }
.cred--cpd { grid-column: 1 / -1; background: var(--dark-gray); border-color: transparent; }
.cred.wide { grid-column: span 3; display: grid; grid-template-columns: 70px 1fr; gap: 20px; align-items: start; background: var(--dark-gray); border-color: transparent; }
.cred.wide h3 { margin-top: 2px; }

/* Services-details layout (sidebar + content) */
.details { display: grid; grid-template-columns: 330px 1fr; gap: 60px; align-items: start; }
.sidebar { position: sticky; top: 110px; display: grid; gap: 30px; }
.sidebar__box { border: 1px solid var(--bdr); border-radius: var(--radius); padding: 20px; background: var(--white); }
.sidebar__list li + li { margin-top: 8px; }
.sidebar__list a { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--dark-gray); border-radius: var(--radius); padding: 10px 18px; font-size: 15px; line-height: 24px; color: var(--black); transition: all .4s ease; }
.sidebar__list a::after { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; opacity: .6; }
.sidebar__list a:hover, .sidebar__list a.active { background: var(--base); color: var(--white); }
.sidebar__list a.active::after { background: var(--white); }
.help-card { position: relative; background: var(--secondary); border-radius: var(--radius); padding: 36px 30px; color: var(--sand); overflow: hidden; isolation: isolate; }
.help-card .ci { width: 50px; height: 50px; border-radius: 50%; background: var(--white); color: var(--base); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 18px; }
.help-card h2, .help-card h3 { color: var(--white); font-size: 26px; line-height: 32px; margin-bottom: 14px; }
.help-card small { display: block; font-size: 13px; line-height: 18px; color: var(--sand); }
.help-card a.num { font-size: 18px; color: var(--white); }
.help-card .thm-btn { margin-top: 18px; padding: 10px 30px; font-size: 13px; }
.d-block { padding: 0 0 46px; margin: 0 0 46px; border-bottom: 1px solid var(--bdr); }
.d-block:last-child { border-bottom: 0; margin-bottom: 0; }
.d-block h2 { font-size: 34px; line-height: 42px; margin-bottom: 18px; }
.d-block h3 { font-size: 26px; line-height: 34px; margin-bottom: 14px; }
.d-block .sub { font: 400 21px/30px var(--font-two); color: var(--base-ink); margin: 0 0 14px; }
.d-head { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.d-head .ci { width: 61px; height: 61px; border-radius: 50%; background: var(--base); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 32px; flex: none; }
.d-head h2, .d-head h3 { margin: 0; }
.d-head small { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--base-ink); margin-top: 4px; font-family: var(--font); }
.banner-card { position: relative; border-radius: var(--radius); background: var(--dark-gray); padding: 54px 50px; overflow: hidden; isolation: isolate; margin-bottom: 50px; }
.banner-card::before { content: ""; position: absolute; inset: 0; background: url(/assets/img/delogis/paper.webp) center / cover; mix-blend-mode: multiply; opacity: .3; z-index: -1; }
.banner-card p.big { font: 400 34px/44px var(--font-two); color: var(--black); margin: 0 0 12px; max-width: 18em; }
.banner-card p { margin: 0; max-width: 40em; }
.check-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; }

/* Fees & FAQ */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.info-box { background: var(--dark-gray); border-radius: var(--radius); padding: 30px 32px; }
.info-box h3 { font-size: 22px; line-height: 30px; margin-bottom: 10px; }
.info-box p { margin: 0 0 .6em; font-size: 15px; line-height: 27px; }
.info-box p:last-child { margin-bottom: 0; }
.info-box.wide { grid-column: span 2; }
.faq-wrap { display: grid; grid-template-columns: 330px 1fr; gap: 50px; align-items: start; }
.accordion details { background: var(--white); border: 1px solid var(--bdr); border-radius: var(--radius); transition: box-shadow .5s; }
.accordion details + details { margin-top: 10px; }
.accordion details[open] { box-shadow: 0 10px 60px rgba(0, 0, 0, .05); }
.accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 19px 28px; font: 400 20px/30px var(--font-two); color: var(--black); transition: color .5s; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion details[open] summary { color: var(--base-ink); }
.accordion summary .pm { position: relative; width: 14px; height: 14px; flex: none; }
.accordion summary .pm::before, .accordion summary .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--base); transition: transform .4s; }
.accordion summary .pm::after { transform: rotate(90deg); }
.accordion details[open] summary .pm::after { transform: rotate(0); }
.accordion details[open] summary .pm::before { background: var(--black); }
.accordion .a { padding: 0 34px 23px 28px; }
.accordion .a p { margin: 0 0 .7em; font-size: 15px; line-height: 28px; }
.accordion .a p:last-child { margin: 0; }

/* Contact */
.contact-row { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; }
.form-card { background: var(--white); border-radius: var(--radius); box-shadow: 0 10px 60px rgba(0, 0, 0, .07); padding: 40px; }
.form-card h2 { font-size: 30px; line-height: 38px; margin-bottom: 8px; }
.field { margin-bottom: 18px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
label, legend { display: block; font-size: 14px; line-height: 20px; color: var(--black); font-weight: 500; margin-bottom: 8px; }
label .opt, legend .opt { font-weight: 300; color: var(--gray); }
input[type=text], input[type=email], input[type=tel], select, textarea { width: 100%; height: 60px; border: 1.5px solid transparent; background: var(--primary); padding: 0 24px; font: 400 15px/1 var(--font); color: var(--black); border-radius: var(--radius); outline: none; transition: border-color .3s, background .3s; }
textarea { height: 110px; padding: 18px 24px; line-height: 24px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--base); background: var(--white); box-shadow: 0 0 0 3px rgba(68, 112, 154, .18); }
fieldset { border: 0; margin: 0 0 18px; padding: 0; }
.radios { display: flex; flex-wrap: wrap; gap: 8px; }
.radios label { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 10px 16px; border-radius: 30px; background: var(--primary); font-weight: 400; font-size: 14px; cursor: pointer; border: 1.5px solid transparent; transition: all .3s; }
.radios input { accent-color: var(--base); margin: 0; }
.radios label:has(input:checked) { border-color: var(--base); background: var(--white); }
.privacy-line { display: flex; gap: 12px; align-items: flex-start; background: var(--extra); border-radius: var(--radius); padding: 12px 16px; font-size: 14px; line-height: 22px; color: var(--black); margin: 4px 0 18px; }
.privacy-line .ico-svg { color: var(--base); flex: none; margin-top: 3px; width: 18px; height: 18px; }
.form-note { font-size: 13px; line-height: 20px; color: var(--gray); margin: 14px 0 0; }
.thanks { text-align: center; padding: 30px 10px; }
.thanks h2 { font-size: 34px; margin-bottom: 10px; }
.info-bar { background: var(--base); border-radius: var(--radius); padding: 30px 40px; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 20px; margin-top: 70px; position: relative; overflow: hidden; isolation: isolate; }
.info-bar li { display: flex; gap: 14px; align-items: center; color: var(--white); }
.info-bar .ci { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
.info-bar small { display: block; font-size: 12px; line-height: 16px; color: #e3edf6; }
.info-bar a, .info-bar span.v { font-size: 15px; line-height: 22px; color: var(--white); }

/* WhatsApp button in WhatsApp's bright green (#25d366) with WhatsApp's near-black label (#0b141a, 10:1) */
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 95; display: inline-flex; align-items: center; gap: 10px; background: #25d366; color: #0b141a; padding: 12px 22px 12px 16px; border-radius: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); font: 600 14px/20px var(--font); transition: transform .3s ease, background .3s ease; }
.wa-float:hover { background: #1fbe5b; transform: translateY(-2px); }
.wa-float svg { width: 24px; height: 24px; flex: none; }
.dark :focus-visible.wa-float, .wa-float:focus-visible { outline-color: var(--base); }

/* Mobile action bar */
.action-bar { display: none; }

/* Responsive */
@media (max-width: 1380px) {
  .header-call { display: none; }
}
@media (max-width: 1280px) {
  .main-header__inner { padding: 0 30px; }
}
@media (max-width: 1100px) {
  .main-menu, .header-right .thm-btn { display: none; }
  .page-top { min-height: 90px; }
  .menu-toggle { display: block; }
  .main-header__inner { min-height: 90px; }
  .hero__title { font-size: 62px; line-height: 76px; }
  .hero__content { max-width: 60%; }
  .about-three__row, .two-col, .two-col.media, .contact-row { grid-template-columns: 1fr; gap: 60px; }
  .about-three__img-box { margin: 0 0 60px 120px; max-width: 460px; }
  .details, .faq-wrap { grid-template-columns: 1fr; }
  .sidebar, .sticky-col { position: static; }
  .site-footer__main { grid-template-columns: 1fr 1fr; }
  .reframe__list { grid-template-columns: repeat(2, 1fr); }
  .reframe__item:nth-child(3)::before { display: none; }
  .cred-grid { grid-template-columns: 1fr 1fr; }
  .cred.wide { grid-column: span 2; }
  .spec-grid { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
  .info-bar { grid-template-columns: 1fr 1fr; }
}
/* Tablets and phones: the photo becomes a full-width band under the text, with a shallow angled top edge */
@media (max-width: 1024px) {
  .hero-track { --hold: 60vh; }
  .hero { flex-direction: column; align-items: stretch; height: auto; min-height: 100vh; min-height: 100svh; padding-bottom: 0; --depth: .85; --horizon: 30%; }
  .hero > .container { flex: none; }
  .hero__img { position: relative; top: auto; bottom: auto; right: auto; width: 100%; flex: 1 1 0; min-height: clamp(200px, 30svh, 420px); margin-top: 32px; clip-path: polygon(0.0% 24.9%, 3.7% 25.1%, 7.4% 25.4%, 11.1% 25.6%, 14.8% 25.8%, 18.5% 25.9%, 22.2% 25.8%, 25.9% 25.7%, 29.6% 25.4%, 33.3% 25.0%, 37.0% 24.5%, 40.7% 24.0%, 44.4% 23.2%, 48.1% 22.4%, 51.9% 21.5%, 55.6% 20.4%, 59.3% 19.3%, 63.0% 18.0%, 66.7% 16.7%, 70.4% 15.2%, 74.1% 13.6%, 77.8% 11.9%, 81.5% 10.1%, 85.2% 8.2%, 88.9% 6.3%, 92.6% 4.2%, 96.3% 2.6%, 100.0% 1.3%, 100% 100%, 0 100%); }
  .hero__content { max-width: none; }
}
@media (max-width: 900px) {
  .grid-3, .flips { grid-template-columns: 1fr 1fr; }
  .mods { grid-template-columns: repeat(4, 1fr); }
  .mod, .mod:first-child { grid-column: span 2; }
  .mod:last-child { grid-column: 2 / span 2; }
  .areas, .steps { grid-template-columns: 1fr 1fr; }
  .hero { padding-top: 140px; }
}
@media (max-width: 767px) {
  /* Phones: the hero fits the screen above the fixed Call / Schedule bar, so the mountains and their fly-over show
     from the first screen. The bar already carries the button, so the hero's own comes off. A short hold gives
     the fly-over room before the cards rise. */
  .hero-track { --hold: 40vh; }
  body { padding-bottom: 76px; }
  .main-header__inner { padding: 0 15px; min-height: 76px; }
  .logo img { height: 52px; }
  .main-header.sticky .main-header__inner { min-height: 62px; }
  .main-header.sticky .logo img { height: 42px; }
  .hero { padding-top: 84px; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .hero__content { padding-top: 0; }
  .hero__actions { gap: 14px; }
  .hero__actions .thm-btn { display: none; }
  .founder__name { font-size: 34px; line-height: 34px; }
  .hero__where { margin-top: 10px; gap: 2px 20px; }
  .hero__img { margin-top: 8px; min-height: 170px; }
  .hero__title { font-size: 36px; line-height: 46px; margin-bottom: 12px; }
  .hero__title .underlined::after { bottom: 3px; height: 3px; }
  .hero__text { font-size: 15px; line-height: 24px; margin-bottom: 12px; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .section-title__title { font-size: 34px; line-height: 44px; }
  .section, .services-three, .feature-two { padding: 80px 0; }
  .feature-two { padding-bottom: 50px; }
  .about-three { padding-bottom: 80px; }
  .specialties { padding: 80px 0; }
  .spec { padding: 96px 32px 34px; }
  .about-three__shape { inset: -14px 14px 14px -10px; }
  .spec__title { font-size: 30px; line-height: 38px; }
  .grid-3, .grid-2, .flips, .mods, .areas, .steps, .cred-grid, .info-grid, .row2, .check-2, .about-three__points { grid-template-columns: 1fr; }
  .cred.wide, .info-box.wide { grid-column: auto; grid-template-columns: 1fr; }
  .about-three__img-box { margin: 0 0 90px 0; }
  .about-three__card { left: 10px; bottom: -70px; width: 260px; }
  .reframe { padding: 80px 0 60px; }
  .reframe__list { grid-template-columns: 1fr; }
  .reframe__item::before { display: none; }
  .quote { padding: 80px 0; }
  .quote__text { font-size: 25px; line-height: 36px; }
  .reframe__intro { font-size: 22px; line-height: 32px; }
  .flip__inner { min-height: 200px; }
  .mod summary { padding: 24px 22px; }
  .mod__body { margin: 0 22px; }
  /* A sideways slide-in widens the page on a phone: rise up instead */
  .js .wow.fadeInLeft:not(.in), .js .wow.fadeInRight:not(.in) { transform: translateY(30px); }
  .mod, .mod:first-child, .mod:last-child { grid-column: auto; }
  .mod summary { min-height: 0; }
  .area__text { min-height: 0; }
  .step { padding: 28px 26px 24px; }
  .site-footer__main { grid-template-columns: 1fr; padding-top: 60px; }
  .site-footer__time { flex-wrap: wrap; gap: 6px 16px; }
  .site-footer__time h2 { border-left: 0; padding-left: 0; }
  .site-footer__time p { flex-basis: 100%; }
  .page-header__inner { padding: 60px 0 76px; }
  .page-header { min-height: 50vh; min-height: 50svh; --horizon: 30%; }
  .page-top { min-height: 76px; }
  .page-header h1 { font-size: 34px; line-height: 44px; }
  .banner-card { padding: 40px 26px; }
  .banner-card p.big { font-size: 26px; line-height: 36px; }
  .d-block h2 { font-size: 28px; line-height: 36px; }
  .form-card { padding: 28px 20px; }
  .info-bar { grid-template-columns: 1fr; padding: 26px; }
  .accordion summary { font-size: 18px; line-height: 26px; padding: 16px 18px; }
  .accordion .a { padding: 0 20px 20px 18px; }
  .action-bar { display: grid; grid-template-columns: auto 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); box-shadow: 0 -8px 30px rgba(0, 0, 0, .08); }
  .action-bar .thm-btn { justify-content: center; padding: 11px 16px; font-size: 14px; }
  .action-bar .thm-btn.line { padding-inline: 28px; }
  .wa-float { right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); width: 54px; height: 54px; padding: 0; justify-content: center; border-radius: 50%; }
  .wa-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .feature-card__photo { height: 160px; }
  .ribbon { display: none; }
}

/* Short phones: the cursive name is decoration (his name is on the line under it), and dropping it keeps the ridges in view */
@media (max-width: 767px) and (max-height: 620px) {
  .founder__name { display: none; }
  .hero__title { font-size: 32px; line-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { --p: 0 !important; --e: 0 !important; --c: 0 !important; }
  .js .hero-hold { display: none; }
  .js .hero, .js .page-header { position: relative; top: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
  .js .wow { opacity: 1; transform: none; }
}