/* TourTour landing redesign (2026-08 animated hero direction).
   Ported from the Claude Design draft into classes: the draft used inline
   styles plus style-hover attributes that only work inside the design canvas.
   Everything animated respects prefers-reduced-motion, and every reveal is
   gated on html.tt-js so a no-JS visit (and every crawler) sees the full page
   with nothing hidden. */

:root {
  --tt-ink: #0B100E;
  --tt-ink-2: #0E1311;
  --tt-paper: #FBFCFB;
  --tt-cream: #F1F4F1;
  --tt-white: #F7FAF8;
  --tt-teal: #5FC2AE;
  --tt-teal-deep: #1E7E70;
  --tt-green: #155A4F;
  --tt-mint: #F0F7F4;
  --tt-serif: 'Newsreader', Georgia, serif;
  --tt-sans: 'Schibsted Grotesk', -apple-system, system-ui, sans-serif;
  --tt-ease: cubic-bezier(.19, 1, .22, 1);
}

.tt-landing { margin: 0; background: var(--tt-ink); color: var(--tt-cream); font-family: var(--tt-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.tt-landing a { text-decoration: none; }
/* height:auto is load-bearing. Every img carries width/height attributes
   for layout stability; with CSS width set and no CSS height, the height
   ATTRIBUTE would apply as a presentational hint and stretch the image tall
   (the founder's stretched phones). The scoped height:100% rules below
   override this where a fill is wanted. */
.tt-landing img { display: block; max-width: 100%; height: auto; }
/* The design sized bare <img> elements; ours sit inside <picture> for webp.
   display:contents removes the wrapper from layout so height:100% and
   object-fit behave exactly as in the design (no stretched or short images). */
.tt-landing picture { display: contents; }
.tt-landing section { scroll-margin-top: 20px; }

@keyframes tt-rise { from { opacity: 0; transform: translateY(1.05em) rotate(2.5deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes tt-marq-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tt-marq-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes tt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes tt-eq { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }

/* ---------- shared bits ---------- */

.tt-wrap { max-width: 1500px; margin: 0 auto; }
.tt-kicker { display: flex; align-items: center; gap: 10px; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; }
.tt-kicker--teal { color: var(--tt-teal); }
.tt-kicker--deep { color: var(--tt-teal-deep); }
.tt-h2 { margin: 0; font-family: var(--tt-serif); font-weight: 300; font-size: clamp(34px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -.025em; }
.tt-h2-sm { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.04; }
.tt-em { font-style: italic; }
.tt-em--teal { font-style: italic; color: var(--tt-teal); }
.tt-em--deep { font-style: italic; color: var(--tt-teal-deep); }
.tt-lede { margin: 0; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.65; text-wrap: pretty; }

/* Reveal on scroll. Hidden ONLY when JS is running; crawlers and no-JS
   visitors get the fully visible page. */
html.tt-js .tt-rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--tt-ease), transform .9s var(--tt-ease); transition-delay: var(--rvd, 0s); }
html.tt-js .tt-rv.is-in { opacity: 1; transform: none; }

/* App Store button: Apple logo + two-line label, dark and light variants. */
.tt-store { display: inline-flex; align-items: center; gap: 13px; padding: 12px 26px 12px 16px; border-radius: 14px; background: var(--tt-white); color: #16150F; box-shadow: 0 22px 50px -22px rgba(0, 0, 0, .85); transition: transform .35s var(--tt-ease), box-shadow .35s ease; }
.tt-store:hover { transform: translateY(-2px); box-shadow: 0 28px 60px -22px rgba(0, 0, 0, .9); }
.tt-store svg { width: 24px; height: 29px; flex: none; fill: currentColor; }
.tt-store-text { display: flex; flex-direction: column; line-height: 1.15; }
.tt-store-text small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.tt-store-text strong { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.tt-store--ink { background: var(--tt-ink); color: var(--tt-white); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .7); }
.tt-store--ink:hover { box-shadow: 0 32px 60px -24px rgba(0, 0, 0, .8); }

.tt-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-chip { padding: 8px 14px; border-radius: 999px; font-size: 13px; }
.tt-chip--light { background: var(--tt-mint); border: 1px solid rgba(22, 21, 15, .08); color: rgba(22, 21, 15, .72); }
.tt-chip--dark { border: 1px solid rgba(241, 244, 241, .18); color: rgba(241, 244, 241, .7); }

/* Dark strip that carries the shared header on light standalone pages
   (privacy, terms, legal). */
.tt-topbar { background: var(--tt-ink); }

/* ---------- hero ---------- */

.tt-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: var(--tt-ink); }
.tt-hero-bg { position: absolute; inset: -8% -4% -4%; z-index: 0; will-change: transform; }
.tt-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 20%; filter: saturate(.94) contrast(1.03); }
.tt-hero-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11, 16, 14, .94) 0%, rgba(11, 16, 14, .66) 38%, rgba(11, 16, 14, .18) 70%, rgba(11, 16, 14, .4) 100%), linear-gradient(180deg, rgba(11, 16, 14, .5) 0%, rgba(11, 16, 14, 0) 28%, rgba(11, 16, 14, .3) 66%, rgba(11, 16, 14, .94) 100%); }
.tt-hero-glow { position: absolute; inset: 0; z-index: 1; background: radial-gradient(110% 70% at 12% 78%, rgba(21, 90, 79, .42) 0%, rgba(11, 16, 14, 0) 62%); }
.tt-wave { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
/* The hero wave stays in the top band of the hero, above the copy, so a
   resize can never land the line across the headline (founder 2026-08-19). */
.tt-hero .tt-wave { inset: 0 0 auto 0; height: 32%; }
.tt-cursor { position: absolute; z-index: 3; top: 0; left: 0; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .6s ease; background: radial-gradient(circle, rgba(95, 194, 174, .18) 0%, rgba(95, 194, 174, 0) 68%); mix-blend-mode: screen; }

.tt-header { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px clamp(20px, 5vw, 64px); }
.tt-brand { display: flex; align-items: center; gap: 11px; color: var(--tt-white); }
.tt-brand svg { flex: none; overflow: visible; }
.tt-brand-name { font-family: var(--tt-serif); font-size: 27px; line-height: 1; letter-spacing: -.015em; }
.tt-brand-name i { font-style: italic; color: var(--tt-teal); }
.tt-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); font-size: 14px; letter-spacing: .01em; }
.tt-nav > a { color: rgba(241, 244, 241, .72); white-space: nowrap; }
.tt-nav > a:hover { color: var(--tt-teal); }
.tt-nav-get { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: 999px; background: var(--tt-cream); color: #16150F !important; font-weight: 600; }
.tt-nav-get:hover { background: var(--tt-white); color: #16150F !important; }
/* The language switcher is injected into the nav by build_i18n.py, so the
   markup is owned by the pipeline and only styled here. */
.tt-nav .lang-switch { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.tt-nav .lang-switch a { color: rgba(241, 244, 241, .48); }
.tt-nav .lang-switch a:hover { color: var(--tt-teal); }
.tt-nav .lang-switch a[aria-current="true"] { color: var(--tt-teal); font-weight: 600; }

.tt-hero-body { position: relative; z-index: 5; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(22px, 3vw, 38px); padding: 0 clamp(20px, 5vw, 64px) clamp(40px, 6vh, 72px); max-width: 1500px; }
.tt-eyebrow { display: flex; align-items: center; gap: 12px; }
.tt-eq { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.tt-eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--tt-teal); transform-origin: bottom; animation: tt-eq 1.1s ease-in-out infinite; }
.tt-eq i:nth-child(2) { animation-delay: .18s; }
.tt-eq i:nth-child(3) { animation-delay: .36s; }
.tt-eq i:nth-child(4) { animation-delay: .54s; }
.tt-eyebrow-label { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(241, 244, 241, .62); }

.tt-h1 { margin: 0; font-family: var(--tt-serif); font-weight: 300; font-size: clamp(50px, 10.2vw, 168px); line-height: .9; letter-spacing: -.03em; color: var(--tt-white); text-wrap: balance; }
.tt-h1-line { display: block; overflow: hidden; padding: .14em 0 .06em; margin-top: -.14em; }
.tt-h1-line--sub { font-size: .52em; line-height: 1.06; color: rgba(241, 244, 241, .78); }
html.tt-js .tt-h1-word { display: inline-block; animation: tt-rise 1.1s var(--tt-ease) both; animation-delay: var(--rise, 0s); }
.tt-h1 .tt-em--teal { font-style: italic; color: var(--tt-teal); }

.tt-hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(20px, 4vw, 60px); }
.tt-hero-lede { margin: 0; max-width: 46ch; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.6; color: rgba(241, 244, 241, .74); text-wrap: pretty; }
.tt-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }


.tt-statbar { position: relative; z-index: 5; display: flex; flex-wrap: wrap; gap: 1px; background: rgba(241, 244, 241, .1); border-top: 1px solid rgba(241, 244, 241, .1); }
.tt-statbar > div { flex: 1 1 220px; padding: 22px clamp(20px, 5vw, 64px); background: var(--tt-ink); display: flex; flex-direction: column; gap: 4px; }
.tt-stat-num { font-family: var(--tt-serif); font-size: 34px; line-height: 1; color: var(--tt-white); }
.tt-stat-num b { font-weight: inherit; color: var(--tt-teal); }
.tt-stat-label { font-size: 13px; letter-spacing: .04em; color: rgba(241, 244, 241, .55); }

/* ---------- the walk (scroll-driven) ---------- */

.tt-walk { position: relative; background: var(--tt-ink); }
html.tt-js .tt-walk { height: 340vh; }
.tt-walk-stage { display: flex; align-items: center; padding: clamp(40px, 8vh, 80px) 0; }
html.tt-js .tt-walk-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; padding: 0; }
.tt-walk-glow { position: absolute; inset: 0; background: radial-gradient(80% 60% at 78% 30%, rgba(21, 90, 79, .42) 0%, rgba(11, 16, 14, 0) 70%); }
.tt-walk-grid { position: relative; width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.tt-walk-copy { display: flex; flex-direction: column; gap: clamp(18px, 3vh, 34px); min-width: 0; }
.tt-walk-copy .tt-h2 { color: var(--tt-white); }
/* the accent sentence takes its own line so the heading never breaks mid
   phrase (founder 2026-08-20) */
.tt-walk-copy .tt-h2 .tt-em--teal { display: block; }
.tt-walk-copy .tt-lede { max-width: 44ch; color: rgba(241, 244, 241, .68); }

.tt-stops { position: relative; display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 20px); padding-left: 46px; }
.tt-route-svg { position: absolute; left: 8px; top: 6px; width: 40px; height: calc(100% - 12px); overflow: visible; }
.tt-stop { position: relative; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
html.tt-js .tt-stop { opacity: .24; transform: translateX(-8px); transition: opacity .55s ease, transform .55s var(--tt-ease); }
.tt-stop-dot { position: absolute; left: -18px; width: 12px; height: 12px; margin-top: .55em; border-radius: 50%; background: var(--tt-ink); border: 2px solid var(--tt-teal); transform: translateX(-50%) scale(.7); transition: transform .45s var(--tt-ease), background .45s ease; }
.tt-stop-name { font-family: var(--tt-serif); font-size: clamp(20px, 2vw, 30px); line-height: 1.2; color: var(--tt-white); }
.tt-stop-note { font-size: 13px; letter-spacing: .05em; color: rgba(241, 244, 241, .5); white-space: nowrap; }
.tt-walk-caption { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(241, 244, 241, .55); }
.tt-walk-caption .tt-walk-step { font-variant-numeric: tabular-nums; color: var(--tt-teal); }
.tt-walk-caption hr { flex: 1; height: 1px; border: 0; margin: 0; background: rgba(241, 244, 241, .14); }
.tt-walk-caption .tt-walk-pct { font-variant-numeric: tabular-nums; }
html:not(.tt-js) .tt-walk-caption { display: none; }

.tt-walk-phone { position: relative; justify-self: center; height: min(664px, 70svh); width: auto; aspect-ratio: 900 / 1956; will-change: transform; container-type: size; }
.tt-walk-phone-glow { position: absolute; inset: -14% -30% -18%; background: radial-gradient(closest-side, rgba(95, 194, 174, .24), rgba(95, 194, 174, 0) 72%); filter: blur(6px); }
/* Bezel and corner radius scale with the phone so the frame reads the same
   thickness at every size, from the desktop mock down to an iPhone 12 mini
   viewport. Pixel values are the ceiling, cqw keeps the proportions. */
/* No frame at all (founder 2026-08-20): the screenshots stand on their own
   with device real corners and a soft shadow. */
.tt-phone-frame { position: absolute; inset: 0; border-radius: min(36px, 12.5cqw); padding: 0; background: none; box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .75); }
.tt-phone-screen { position: relative; width: 100%; height: 100%; border-radius: min(36px, 12.5cqw); overflow: hidden; background: var(--tt-ink-2); }
.tt-phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .85s ease, transform 1.2s ease; }
.tt-phone-screen img.is-on { opacity: 1; }
html:not(.tt-js) .tt-phone-screen img:first-child { opacity: 1; }

/* ---------- photo spots ---------- */

.tt-spots { position: relative; background: var(--tt-paper); color: #16150F; padding: clamp(72px, 12vh, 140px) clamp(20px, 5vw, 64px); }
.tt-spots-inner { display: flex; flex-direction: column; gap: clamp(34px, 6vh, 64px); }
.tt-spots-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.tt-spots-head-copy { display: flex; flex-direction: column; gap: 16px; max-width: 60ch; }
.tt-spots-head .tt-lede { max-width: 38ch; color: rgba(22, 21, 15, .68); }
.tt-spot-cards { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.6vw, 22px); }
.tt-spot-card { position: relative; flex: 1 1 250px; margin: 0; min-width: 0; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: var(--tt-ink-2); }
.tt-spot-card > img, .tt-spot-card > picture img { width: 100%; height: 100%; object-fit: cover; }
.tt-spot-badge { position: absolute; top: 16px; left: 16px; padding: 6px 12px; border-radius: 999px; background: rgba(11, 16, 14, .6); color: var(--tt-white); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(6px); }
.tt-spot-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: clamp(18px, 2vw, 26px); background: linear-gradient(0deg, rgba(11, 16, 14, .86), rgba(11, 16, 14, 0)); color: var(--tt-white); pointer-events: none; margin: 0; }
.tt-spot-cap-title { font-family: var(--tt-serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
.tt-spot-cap-title i { font-style: italic; opacity: .75; }
.tt-spot-cap-sub { font-size: 13.5px; line-height: 1.5; color: rgba(241, 244, 241, .72); }

/* ---------- cities marquee + chips ---------- */

.tt-cities { position: relative; background: var(--tt-ink); padding: clamp(72px, 12vh, 130px) 0; overflow: hidden; }
.tt-cities-head { margin: 0 auto clamp(38px, 6vh, 64px); padding: 0 clamp(20px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 26px; max-width: 1500px; }
.tt-cities-head .tt-h2 { color: var(--tt-white); }
.tt-cities-head p { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.65; color: rgba(241, 244, 241, .6); }
.tt-marquees { display: flex; flex-direction: column; gap: clamp(8px, 1.4vw, 18px); font-family: var(--tt-serif); font-size: clamp(30px, 5vw, 72px); line-height: 1.06; letter-spacing: -.02em; will-change: transform; }
.tt-marquee { display: flex; width: max-content; gap: clamp(20px, 2.6vw, 44px); }
.tt-marquee > span { white-space: nowrap; }
html.tt-js .tt-marquee--l { animation: tt-marq-l var(--marq, 52s) linear infinite; }
html.tt-js .tt-marquee--r { animation: tt-marq-r var(--marq, 64s) linear infinite; }
.tt-marquee--a { color: rgba(241, 244, 241, .9); }
.tt-marquee--b { color: rgba(241, 244, 241, .55); }
.tt-marquee--c { color: rgba(241, 244, 241, .75); }
.tt-mq-teal { color: var(--tt-teal); }
.tt-mq-dim { color: rgba(241, 244, 241, .4); }
.tt-mq-lit { color: var(--tt-white); }

/* City chips grid, self-contained copy of the site.css rules restyled for the
   dark section (the homepage no longer loads site.css). */
.tt-cities .cities-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; margin: clamp(38px, 6vh, 64px) clamp(20px, 5vw, 64px) 0; max-width: 1460px; }
@media (min-width: 1540px) { .tt-cities .cities-strip { margin-left: auto; margin-right: auto; } }
.tt-cities .city-chip { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; }
.tt-cities .city-chip img { width: 100%; height: 100%; object-fit: cover; }
.tt-cities a.city-chip { display: block; text-decoration: none; color: inherit; transition: transform .16s ease, box-shadow .16s ease; }
.tt-cities a.city-chip:hover, .tt-cities a.city-chip:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .5); }
.tt-cities a.city-chip:focus-visible { outline: 2px solid var(--tt-teal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .tt-cities a.city-chip { transition: none; }
  .tt-cities a.city-chip:hover, .tt-cities a.city-chip:focus-visible { transform: none; }
}
.tt-cities .city-chip-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 3px 7px; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); color: #fff; font-size: .62rem; font-weight: 600; }
.tt-cities .city-chip-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: rgba(241, 244, 241, .05); border: 1px solid rgba(241, 244, 241, .16); color: var(--tt-teal); transition: background .15s, transform .15s; }
.tt-cities .city-chip-more:hover { background: #18302a; transform: translateY(-1px); }
.tt-cities .city-chip-more .more-num { font-size: 1.1rem; font-weight: 700; line-height: 1; }
.tt-cities .city-chip-more .more-txt { font-size: .56rem; font-weight: 600; color: rgba(241, 244, 241, .6); letter-spacing: .02em; }

/* ---------- get (green CTA) ---------- */

.tt-get { position: relative; background: var(--tt-green); color: var(--tt-mint); padding: clamp(78px, 13vh, 150px) clamp(20px, 5vw, 64px); overflow: hidden; }
.tt-get-glow { position: absolute; inset: 0; background: radial-gradient(70% 90% at 82% 8%, rgba(95, 194, 174, .35), rgba(21, 90, 79, 0) 62%); }
.tt-get .tt-wave { inset: auto 0 0 0; height: 46%; opacity: .85; }
.tt-get-grid { position: relative; max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(30px, 5vw, 80px); align-items: center; }
.tt-get-copy { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 32px); }
/* Founder 2026-08-20: headings keep one scale across the page instead of
   jumping a size in this section. */
.tt-get-copy .tt-h2 { color: #FFFFFF; text-wrap: balance; }
.tt-em--mint { font-style: italic; color: #CDEDE4; }
.tt-get-copy .tt-lede { max-width: 42ch; color: rgba(240, 247, 244, .82); }
.tt-get-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.tt-get-note { font-size: 13.5px; color: rgba(240, 247, 244, .7); }
.tt-get-phone { position: relative; justify-self: center; width: min(300px, 70vw); }
.tt-get-bob { position: relative; border-radius: min(34px, 11.4%); box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .7); }
.tt-get-phone img { width: 100%; display: block; border-radius: min(34px, 11.4%); }
html.tt-js .tt-get-bob { animation: tt-bob 7s ease-in-out infinite; }

/* ---------- walking cards ---------- */

/* ---------- one city, everyone (Apple Family Sharing) ----------------------
   Founder 2026-08-20: the strongest commercial line on the page, so it gets a
   section rather than the last card in a row. The photo sits on the right and
   fades into the ground colour from the side, so the copy stays readable over
   it at every width and the section still reads with no image at all. */
.tt-family { position: relative; background: var(--tt-ink); color: var(--tt-white); padding: clamp(64px, 10vh, 120px) clamp(20px, 5vw, 64px); overflow: hidden; }
.tt-family-photo { position: absolute; inset: 0 0 0 auto; width: min(58%, 760px); background: linear-gradient(120deg, rgba(95, 194, 174, .10), rgba(11, 16, 14, 0)); }
/* the source is landscape and the panel near square, so the crop keeps the
   centre where the people are; nudge this if the framing wants it */
.tt-family-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* the fade: solid ground on the copy side, image showing through on the right */
.tt-family-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--tt-ink) 4%, rgba(11, 16, 14, .82) 34%, rgba(11, 16, 14, .35) 72%, rgba(11, 16, 14, .55) 100%); }
.tt-family-inner { position: relative; z-index: 2; }
.tt-family-copy { display: flex; flex-direction: column; gap: 16px; max-width: 46ch; }
.tt-family-copy .tt-h2 { color: var(--tt-white); }
.tt-family-copy .tt-lede { max-width: 44ch; color: rgba(241, 244, 241, .74); }
.tt-family-points { display: flex; flex-direction: column; gap: 14px; margin-top: clamp(8px, 1.6vh, 18px); }
.tt-family-points > div { display: flex; flex-direction: column; gap: 3px; padding-left: 16px; border-left: 2px solid rgba(95, 194, 174, .5); }
.tt-family-points strong { font-size: 15.5px; font-weight: 600; color: var(--tt-white); }
.tt-family-points span { font-size: 14.5px; line-height: 1.6; color: rgba(241, 244, 241, .66); }

.tt-why { background: var(--tt-paper); color: #16150F; padding: clamp(72px, 11vh, 130px) clamp(20px, 5vw, 64px); }
.tt-why-inner { display: flex; flex-direction: column; gap: clamp(34px, 5vh, 56px); }
.tt-why-head .tt-h2 { margin-top: 14px; }
.tt-why-head .tt-lede { margin-top: 14px; max-width: 52ch; color: rgba(22, 21, 15, .68); }
.tt-why-cards { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 28px); }
.tt-why-card { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.4vw, 34px); border-radius: 20px; background: var(--tt-mint); border: 1px solid rgba(22, 21, 15, .07); }
.tt-why-card h3 { margin: 0; font-family: var(--tt-serif); font-weight: 400; font-size: clamp(21px, 2vw, 27px); line-height: 1.2; letter-spacing: -.01em; }
.tt-why-card p { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(22, 21, 15, .68); text-wrap: pretty; }

/* ---------- gems ---------- */

.tt-gems { background: var(--tt-ink); color: var(--tt-cream); padding: clamp(72px, 11vh, 130px) clamp(20px, 5vw, 64px); overflow: hidden; }
.tt-gems-grid { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(30px, 5vw, 80px); align-items: center; }
.tt-gems-grid .tt-h2 { margin-top: 14px; color: var(--tt-white); }
.tt-gems-grid .tt-lede { margin-top: 16px; max-width: 46ch; color: rgba(241, 244, 241, .68); }
.tt-gems-grid .tt-chip-row { margin-top: 22px; }
.tt-gems-phone { position: relative; justify-self: center; width: min(300px, 72vw); margin: 0 auto; border-radius: min(32px, 11%); box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .8); }
.tt-gems-phone img { width: 100%; border-radius: min(32px, 11%); }

/* ---------- languages ---------- */

.tt-lang { background: var(--tt-paper); color: #16150F; padding: clamp(72px, 11vh, 130px) clamp(20px, 5vw, 64px); }
.tt-lang-grid { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(30px, 5vw, 80px); align-items: center; }
.tt-lang-phone { position: relative; width: min(280px, 70vw); margin: 0 auto; border-radius: min(31px, 11.1%); box-shadow: 0 40px 70px -40px rgba(22, 21, 15, .5); }
.tt-lang-phone img { width: 100%; border-radius: min(31px, 11.1%); }
.tt-lang-grid .tt-h2 { margin-top: 14px; }
.tt-lang-grid .tt-lede { margin-top: 16px; max-width: 48ch; color: rgba(22, 21, 15, .68); }
.tt-lang-grid .tt-chip-row { margin-top: 22px; gap: 7px; }
.tt-lang-grid .tt-chip { padding: 7px 13px; }
.tt-lang-note { margin: 20px 0 0; max-width: 48ch; font-size: 14px; line-height: 1.6; color: rgba(22, 21, 15, .55); }

/* ---------- reach ---------- */

.tt-reach { background: var(--tt-ink); color: var(--tt-cream); padding: clamp(72px, 11vh, 130px) clamp(20px, 5vw, 64px); }
.tt-reach-inner { max-width: 1500px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(30px, 5vh, 52px); }
.tt-reach-inner .tt-h2 { margin-top: 14px; color: var(--tt-white); }
.tt-reach-inner .tt-lede { margin-top: 16px; max-width: 50ch; color: rgba(241, 244, 241, .68); }
.tt-reach-stats { display: flex; flex-wrap: wrap; gap: 1px; background: rgba(241, 244, 241, .1); border: 1px solid rgba(241, 244, 241, .1); border-radius: 18px; overflow: hidden; }
.tt-reach-stats > div { flex: 1 1 200px; padding: 26px clamp(18px, 2vw, 30px); background: var(--tt-ink); display: flex; flex-direction: column; gap: 5px; }
.tt-reach-num { font-family: var(--tt-serif); font-size: clamp(30px, 3vw, 44px); line-height: 1; color: var(--tt-white); }
.tt-reach-label { font-size: 13px; letter-spacing: .04em; color: rgba(241, 244, 241, .55); }
.tt-cats { display: flex; flex-direction: column; gap: 14px; }
.tt-cats-head { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(241, 244, 241, .45); }
.tt-cats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 24px; }
.tt-cats li { display: flex; align-items: baseline; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid rgba(241, 244, 241, .09); font-size: 13.5px; color: rgba(241, 244, 241, .62); }
.tt-cats b { font-family: var(--tt-serif); font-weight: 400; font-size: 20px; line-height: 1; color: var(--tt-teal); font-variant-numeric: tabular-nums; }

/* ---------- faq ---------- */

.tt-faq { background: var(--tt-paper); color: #16150F; padding: clamp(72px, 11vh, 130px) clamp(20px, 5vw, 64px); }
.tt-faq-grid { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: start; }
.tt-faq-grid .tt-h2 { margin-top: 14px; }
.tt-faq-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 13px 24px; border-radius: 14px; background: #16150F; color: var(--tt-paper); font-size: 15px; font-weight: 600; transition: background .3s ease; }
.tt-faq-cta:hover { background: var(--tt-teal-deep); color: var(--tt-paper); }
.tt-faq-intro { margin: 16px 0 0; max-width: 44ch; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.65; color: rgba(22, 21, 15, .68); text-wrap: pretty; }
.tt-faq-list { display: flex; flex-direction: column; gap: 10px; }
.tt-faq-list details { padding: 16px 20px; border-radius: 16px; background: #FFFFFF; border: 1px solid rgba(22, 21, 15, .09); }
.tt-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; }
.tt-faq-list summary::-webkit-details-marker { display: none; }
.tt-faq-list summary::marker { content: ""; }
.tt-faq-q { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; color: #16150F; }
.tt-faq-side { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.tt-faq-show { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tt-teal-deep); transition: opacity .25s ease; }
.tt-faq-plus { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tt-mint); border: 1px solid rgba(30, 126, 112, .3); color: var(--tt-teal-deep); font-size: 18px; font-weight: 500; line-height: 1; transition: transform .3s var(--tt-ease), background .25s ease, color .25s ease, border-color .25s ease; }
.tt-faq-list summary:hover .tt-faq-plus { background: #dceee7; }
.tt-faq-list details[open] .tt-faq-plus { transform: rotate(45deg); background: var(--tt-teal-deep); color: var(--tt-mint); border-color: var(--tt-teal-deep); }
.tt-faq-list details[open] .tt-faq-show { opacity: 0; }
.tt-faq-list .faq-a { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: rgba(22, 21, 15, .68); text-wrap: pretty; }
.tt-faq-list .faq-a ol { margin: 10px 0 0; padding-left: 20px; }
.tt-faq-list .faq-a li { margin-top: 6px; }

/* ---------- destinations index ---------- */

.tt-index { background: var(--tt-ink); color: var(--tt-cream); padding: clamp(54px, 8vh, 90px) clamp(20px, 5vw, 64px); border-top: 1px solid rgba(241, 244, 241, .1); }
.tt-index-inner { max-width: 1500px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(22px, 3vh, 34px); }
.tt-index-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; }
.tt-index-head h2 { margin: 0; font-family: var(--tt-serif); font-weight: 300; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.02em; color: var(--tt-white); }
.tt-index-head p { margin: 0; max-width: 46ch; font-size: 13.5px; line-height: 1.6; color: rgba(241, 244, 241, .5); }
.tt-index .idx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px 22px; }
.tt-index .idx-country { margin: 0 0 4px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(241, 244, 241, .45); font-weight: 600; }
.tt-index .idx-block ul { list-style: none; margin: 0; padding: 0; }
.tt-index .idx-block a { color: rgba(241, 244, 241, .62); font-size: 13.5px; line-height: 1.7; }
.tt-index .idx-block a:hover { color: var(--tt-teal); }

/* ---------- footer ---------- */

.tt-foot { background: var(--tt-ink); padding: clamp(30px, 5vh, 54px) clamp(20px, 5vw, 64px); border-top: 1px solid rgba(241, 244, 241, .1); }
.tt-foot-inner { max-width: 1500px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 34px; }
.tt-foot .tt-brand-name { font-size: 22px; color: var(--tt-white); }
.tt-foot-links { display: flex; flex-wrap: wrap; gap: 22px; font-size: 13.5px; }
.tt-foot-links a { color: rgba(241, 244, 241, .6); }
.tt-foot-links a:hover { color: var(--tt-teal); }
.tt-foot-social { display: flex; gap: 16px; }
.tt-foot-social a { color: rgba(241, 244, 241, .55); }
.tt-foot-social a:hover { color: var(--tt-teal); }
.tt-foot-social svg { width: 18px; height: 18px; fill: currentColor; }
.tt-foot-copy { font-size: 12.5px; color: rgba(241, 244, 241, .4); }

/* ---------- responsive ---------- */

@media (max-width: 800px) {
  /* Founder 2026-08-19: on phones the spot cards are a vertical stack. Each
     card pins below the header while the next scrolls up OVER it, throwing a
     shadow as it comes closer; the covered card is scaled back and dimmed by
     the script. Desktop keeps the side by side row. */
  .tt-spot-cards { display: block; }
  .tt-spot-card { position: sticky; margin: 0 0 26px; width: 100%; box-shadow: 0 -16px 44px rgba(11, 16, 14, .38); transform-origin: center top; }
  .tt-spot-card:nth-child(1) { top: 76px; }
  .tt-spot-card:nth-child(2) { top: 88px; }
  .tt-spot-card:nth-child(3) { top: 100px; }
}

@media (max-width: 900px) {
  /* Founder 2026-08-19: the kicker sat almost on top of the heading while a
     dead strip was left under the phone. The copy gets its air back, the
     kicker its own step, and the phone grows into the space it was leaving. */
  .tt-walk-grid { grid-template-columns: 1fr; gap: 20px; align-content: center; }
  .tt-walk-copy { gap: 15px; }
  .tt-walk-copy .tt-kicker { margin-bottom: 4px; }
  .tt-h2, .tt-h2-sm { font-size: 28px; line-height: 1.1; }
  .tt-kicker { font-size: 11.5px; letter-spacing: .16em; }
  /* the stop notes and the progress caption read as clutter on a phone
     (founder 2026-08-20); the four stop names carry the story alone */
  .tt-stop-note { display: none; }
  .tt-walk-caption { display: none; }
  .tt-walk-copy .tt-lede { font-size: 14px; }
  .tt-stops { gap: 8px; padding-left: 38px; }
  .tt-route-svg { left: 6px; width: 32px; }
  .tt-stop-name { font-size: 17px; }
  .tt-stop-note { font-size: 11.5px; }
  .tt-walk-caption { font-size: 12.5px; }
  /* Founder 2026-08-20: this phone ran a size smaller than the ones in the
     sections below. It now matches their width; the pinned stage crops the
     last sliver of bezel on short screens, which the glow already softens. */
  .tt-walk-phone { height: min(580px, 69svh); margin-top: 2px; }
  html.tt-js .tt-walk { height: 300vh; }
}

.tt-lang-select { display: none; }

@media (max-width: 860px) {
  .tt-family-photo { inset: 0; width: 100%; }
  .tt-family-photo::after { background: linear-gradient(180deg, rgba(11, 16, 14, .86) 0%, rgba(11, 16, 14, .93) 55%, var(--tt-ink) 100%); }
  .tt-family-copy { max-width: none; }
  .tt-family-points span { font-size: 14px; }

  .tt-nav > a:not(.tt-nav-get) { display: none; }
  .tt-nav > a[href$="blog.html"] { display: inline-block; }
  .tt-nav .lang-switch { display: none; }
  .tt-nav { flex: 1; gap: 12px; min-width: 0; }
  .tt-brand { gap: 8px; flex: none; }
  .tt-brand svg { width: 28px; height: 28px; }
  .tt-brand-name { font-size: 21px; }
  /* Translated CTAs run long (Russian "Скачать приложение", Portuguese
     "Baixe o app"). The header shrinks its own type before anything can
     overflow, and on the narrowest phones the nav pill steps aside since a
     store button always follows in the page itself. */
  .tt-header { padding-left: 18px; padding-right: 18px; gap: 10px; }
  .tt-nav-get { font-size: 12.5px; padding: 8px 13px; }
  .tt-lang-select { display: block; order: -1; margin: 0 auto; appearance: none; -webkit-appearance: none; border: 0; border-radius: 0; color: var(--tt-cream); font: 400 13px var(--tt-sans); letter-spacing: .06em; padding: 8px 15px 8px 4px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F1F4F1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / 10px 6px; }
  .tt-nav-get { white-space: nowrap; padding: 9px 14px; font-size: 13.5px; }
  .tt-hero-row { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 860px) {
  /* The destination index holds two country columns on a phone instead of
     one long ribbon. */
  .tt-index .idx-grid { grid-template-columns: 1fr 1fr; gap: 16px 18px; }
  .tt-index .idx-block a { font-size: 13px; }

  /* Founder 2026-08-19: the four stats stacked into four rows and pushed the
     hero past one screen. Two by two keeps the whole hero on a phone. */
  .tt-statbar { display: grid; grid-template-columns: 1fr 1fr; }
  .tt-statbar > div { padding: 16px clamp(18px, 5vw, 28px); }
  .tt-statbar .tt-stat-num { font-size: 28px; }
  .tt-statbar .tt-stat-label { font-size: 12px; }
  .tt-hero-body { padding-bottom: clamp(26px, 4vh, 44px); gap: 18px; }

  /* The step between the hero and the walk lives inside the walk's own ink
     background; a margin here opened a bare strip under the stat row
     (founder 2026-08-19). */
  html.tt-js .tt-walk-stage { padding-top: clamp(16px, 3vh, 30px); }
}

@media (max-width: 520px) {
  .tt-nav-get { display: none; }
  .tt-brand-name { font-size: 20px; }
}

/* Founder 2026-08-19: the store button was built for a desktop and crowded a
   small phone. It steps down twice so a 12 mini (375px) still has margin
   around it, and the label never wraps. */
@media (max-width: 600px) {
  .tt-store { gap: 10px; padding: 11px 20px 11px 14px; border-radius: 13px; }
  .tt-store svg { width: 20px; height: 24px; }
  .tt-store-text small { font-size: 10px; letter-spacing: .12em; }
  .tt-store-text strong { font-size: 15.5px; }
}
@media (max-width: 400px) {
  .tt-store { gap: 9px; padding: 10px 16px 10px 12px; }
  .tt-store svg { width: 18px; height: 22px; }
  .tt-store-text small { font-size: 9.5px; letter-spacing: .1em; }
  .tt-store-text strong { font-size: 14.5px; white-space: nowrap; }
}

/* ---------- city pages (Berlin design template) ---------- */

.tt-hero--city { min-height: 82svh; }
.tt-hero--city .tt-hero-bg { inset: -6% -3% -3%; }
.tt-hero--city .tt-hero-bg img { object-position: 50% 42%; filter: none; }
.tt-hero--city .tt-hero-shade { background: linear-gradient(90deg, rgba(11, 16, 14, .92) 0%, rgba(11, 16, 14, .6) 42%, rgba(11, 16, 14, .2) 74%, rgba(11, 16, 14, .45) 100%), linear-gradient(180deg, rgba(11, 16, 14, .55) 0%, rgba(11, 16, 14, 0) 34%, rgba(11, 16, 14, .9) 100%); }
.tt-hero--city .tt-hero-body { gap: 22px; padding-bottom: clamp(38px, 6vh, 66px); }
.tt-h1--city { font-size: clamp(56px, 11vw, 180px); letter-spacing: -.035em; }
.tt-hero-sub { margin: 0; max-width: 34ch; font-family: var(--tt-serif); font-style: italic; font-size: clamp(19px, 2vw, 30px); line-height: 1.25; color: rgba(241, 244, 241, .82); }
.tt-hero-note { font-size: 13.5px; color: rgba(241, 244, 241, .62); }
.tt-statbar--city > div { flex: 1 1 170px; padding: 20px clamp(18px, 3vw, 40px); }
.tt-statbar--city .tt-stat-num { font-size: 32px; }
.tt-statbar--city .tt-stat-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(241, 244, 241, .5); }

.tt-light { background: var(--tt-paper); color: #16150F; padding: clamp(60px, 10vh, 120px) clamp(20px, 5vw, 64px); }
.tt-dark { background: var(--tt-ink); color: var(--tt-cream); padding: clamp(60px, 10vh, 120px) clamp(20px, 5vw, 64px); }
.tt-dark .tt-h2, .tt-dark .tt-index-head h2 { color: var(--tt-white); }
.tt-sect-head { display: flex; flex-direction: column; gap: 14px; }
.tt-sect-head .tt-lede { max-width: 52ch; }
.tt-dark .tt-sect-head .tt-lede { color: rgba(241, 244, 241, .62); }
.tt-light .tt-sect-head .tt-lede { color: rgba(22, 21, 15, .68); }
.tt-h2--city { font-size: clamp(32px, 4.4vw, 62px); }
.tt-stack { max-width: 1500px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(24px, 4vh, 44px); }

.tt-city-grid { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 70px); align-items: center; }
.tt-city-copy { display: flex; flex-direction: column; gap: 18px; }
.tt-city-serif { margin: 0; font-family: var(--tt-serif); font-size: clamp(21px, 2.2vw, 31px); line-height: 1.3; letter-spacing: -.01em; text-wrap: pretty; }
.tt-city-body { margin: 0; max-width: 56ch; font-size: 15.5px; line-height: 1.7; color: rgba(22, 21, 15, .68); text-wrap: pretty; }
.tt-chip--link { background: var(--tt-mint); border: 1px solid rgba(30, 126, 112, .2); color: var(--tt-teal-deep) !important; }
.tt-chip--link:hover { background: #dceee7; }

.tt-phone-trio { display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 1.4vw, 20px); }
.tt-phone-trio figure { margin: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; width: 31%; }
.tt-phone-trio figure:nth-child(2) { width: 36%; }
.tt-phone-trio img { width: 100%; border-radius: 18px; border: 1px solid rgba(22, 21, 15, .1); box-shadow: 0 30px 50px -30px rgba(22, 21, 15, .5); }
.tt-phone-trio figure:nth-child(2) img { border-radius: 20px; box-shadow: 0 40px 60px -34px rgba(22, 21, 15, .55); }
.tt-phone-trio figcaption { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(22, 21, 15, .5); }

.tt-cards { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.6vw, 22px); }
.tt-quote-card { flex: 1 1 300px; min-width: 0; padding: clamp(20px, 2.2vw, 30px); border-radius: 20px; background: rgba(241, 244, 241, .04); border: 1px solid rgba(241, 244, 241, .1); display: flex; flex-direction: column; gap: 12px; }
.tt-quote-card h3 { margin: 0; font-family: var(--tt-serif); font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--tt-white); }
.tt-quote-card p { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(241, 244, 241, .66); text-wrap: pretty; }

.tt-route-card { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.2vw, 30px); border-radius: 20px; background: #FFFFFF; border: 1px solid rgba(22, 21, 15, .09); }
.tt-route-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tt-route-head h3 { margin: 0; font-family: var(--tt-serif); font-weight: 400; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; }
.tt-route-count { flex: none; font-size: 12.5px; color: var(--tt-teal-deep); white-space: nowrap; }
.tt-route-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(22, 21, 15, .66); text-wrap: pretty; }

.tt-accs { display: flex; flex-direction: column; gap: 10px; }
.tt-accs details { padding: 18px 20px; border-radius: 16px; background: rgba(241, 244, 241, .04); border: 1px solid rgba(241, 244, 241, .1); }
.tt-accs summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; }
.tt-accs summary::-webkit-details-marker { display: none; }
.tt-accs summary::marker { content: ""; }
.tt-acc-name { display: flex; align-items: center; gap: 12px; font-size: 16.5px; font-weight: 600; color: var(--tt-white); }
.tt-acc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--tt-teal)); flex: none; }
.tt-acc-count { font-size: 13px; font-weight: 400; color: rgba(241, 244, 241, .5); }
.tt-acc-plus { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(95, 194, 174, .14); border: 1px solid rgba(95, 194, 174, .3); color: var(--tt-teal); font-size: 17px; line-height: 1; transition: transform .3s var(--tt-ease); }
.tt-accs details[open] .tt-acc-plus { transform: rotate(45deg); }
.tt-acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 22px; margin-top: 16px; font-size: 14px; line-height: 1.55; color: rgba(241, 244, 241, .66); }

.tt-more { background: var(--tt-green); color: var(--tt-mint); padding: clamp(56px, 9vh, 110px) clamp(20px, 5vw, 64px); }
.tt-more-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; }
.tt-more-head h2 { margin: 0; font-family: var(--tt-serif); font-weight: 300; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.06; letter-spacing: -.02em; color: #FFFFFF; }
.tt-more-head p { margin: 0; max-width: 44ch; font-size: 14.5px; line-height: 1.6; color: rgba(240, 247, 244, .78); }
.tt-more-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.tt-more-chips a { padding: 11px 20px; border-radius: 999px; background: rgba(240, 247, 244, .1); border: 1px solid rgba(240, 247, 244, .22); color: var(--tt-mint); font-size: 14.5px; transition: background .2s ease; }
.tt-more-chips a:hover { background: rgba(240, 247, 244, .2); }
.tt-more-chips a.tt-more-all { background: var(--tt-ink); border-color: var(--tt-ink); color: var(--tt-white); font-weight: 600; }
.tt-foot-tag { font-family: var(--tt-serif); font-size: 20px; color: rgba(247, 250, 248, .85); }

/* ---------- blog index ---------- */

.tt-blog-hero { position: relative; padding: clamp(30px, 6vh, 64px) clamp(20px, 5vw, 64px) clamp(44px, 7vh, 80px); overflow: hidden; }
.tt-blog-hero-glow { position: absolute; inset: 0; background: radial-gradient(80% 70% at 18% 0%, rgba(21, 90, 79, .5) 0%, rgba(11, 16, 14, 0) 66%); }
.tt-blog-hero-inner { position: relative; max-width: 1500px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.tt-h1--blog { font-size: clamp(46px, 8vw, 120px); line-height: .94; letter-spacing: -.03em; }
.tt-blog-hero .tt-lede { max-width: 52ch; color: rgba(241, 244, 241, .7); }

.tt-posts { max-width: 1500px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(26px, 4vh, 44px); }
.tt-post-lead { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(22px, 2.6vw, 38px); border-radius: 24px; background: var(--tt-mint); border: 1px solid rgba(22, 21, 15, .08); color: #16150F !important; }
.tt-post-lead-copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tt-post-tag { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: #16150F; color: var(--tt-mint); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.tt-post-lead h2 { margin: 0; font-family: var(--tt-serif); font-weight: 300; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.tt-post-lead p { margin: 0; max-width: 56ch; font-size: 15.5px; line-height: 1.6; color: rgba(22, 21, 15, .68); text-wrap: pretty; }
.tt-post-more { font-size: 14px; font-weight: 600; color: var(--tt-teal-deep); }
.tt-post-lead-phone { justify-self: center; width: min(230px, 60vw); padding: min(8px, 3.5%); border-radius: min(34px, 14.8%); background: linear-gradient(160deg, #e8ebe9, #c4ccc8 45%, #eef1ef); box-shadow: 0 40px 70px -40px rgba(22, 21, 15, .5); }
.tt-post-lead-phone img { width: 100%; border-radius: min(27px, 11.7%); }

.tt-post-card { display: flex; flex-direction: column; gap: 12px; flex: 1 1 300px; min-width: 0; padding: clamp(22px, 2.2vw, 32px); border-radius: 20px; background: #FFFFFF; border: 1px solid rgba(22, 21, 15, .09); color: #16150F !important; }
.tt-post-badge { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: var(--tt-mint); border: 1px solid rgba(30, 126, 112, .2); color: var(--tt-teal-deep); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.tt-post-card h3 { margin: 0; font-family: var(--tt-serif); font-weight: 400; font-size: clamp(22px, 2.1vw, 29px); line-height: 1.14; letter-spacing: -.015em; }
.tt-post-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(22, 21, 15, .66); text-wrap: pretty; }
.tt-post-card .tt-post-more { margin-top: auto; font-size: 13.5px; }

.tt-getband { background: var(--tt-green); color: var(--tt-mint); padding: clamp(60px, 10vh, 120px) clamp(20px, 5vw, 64px); overflow: hidden; }
.tt-getband-inner { position: relative; max-width: 1500px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 60px); }
.tt-getband-copy { display: flex; flex-direction: column; gap: 16px; max-width: 44ch; }
.tt-getband-copy h2 { margin: 0; font-family: var(--tt-serif); font-weight: 300; font-size: clamp(32px, 4.6vw, 66px); line-height: 1; letter-spacing: -.03em; color: #FFFFFF; }
.tt-getband-copy p { margin: 0; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: rgba(240, 247, 244, .82); }
.tt-getband-cta { display: flex; flex-direction: column; gap: 12px; }