/* ==========================================================================
   Tech This Out — website layer
   Loads after tokens.css and tto.css (the shared landing-page components).
   Adds what a full site needs: main navigation, mobile drawer, step cards,
   the contact form inside the green slab, and a footer link row.
   ========================================================================== */

.tto-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}
.tto-skip:focus { top: 12px; }

/* ---- header: logo, nav, the top-right tab ------------------------------- */
.tto-header { position: relative; z-index: 5; }
.tto-header > .tto-tab--tr { align-items: center; flex-wrap: nowrap; }

.tto-nav { display: none; position: relative; margin-top: clamp(26px, 2.9vw, 54px); }
.tto-nav__list { display: flex; align-items: center; gap: clamp(4px, 0.6vw, 12px); }
.tto-nav__item { position: relative; }
.tto-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px clamp(6px, 0.55vw, 10px);
  border: 0;
  background: none;
  color: var(--white);
  font: 500 0.935rem / 1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}
.tto-nav__link:hover, .tto-nav__link[aria-expanded="true"] { color: var(--green); }
.tto-nav__link .tto-icon { width: 16px; height: 16px; color: currentColor; transition: rotate 0.25s ease; }
.tto-nav__link[aria-expanded="true"] .tto-icon { rotate: 180deg; }

.tto-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  padding: 18px 22px 20px;
  border: 1px solid var(--line);
  border-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card);
  background: var(--eerie-black);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  translate: 0 -6px;
  transition: opacity 0.2s ease, translate 0.2s ease, visibility 0.2s;
}
.tto-nav__link[aria-expanded="true"] + .tto-menu { opacity: 1; visibility: visible; translate: 0 0; }
.tto-menu ul { display: grid; gap: 2px; }
.tto-menu a { display: block; padding: 6px 0; color: var(--text-footer); font-size: 0.92rem; text-decoration: none; }
.tto-menu a:hover { color: var(--green); }
.tto-menu__label { margin-bottom: 6px; color: var(--dark-pastel-green); font: 600 0.75rem / 1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.tto-menu--wide { left: -120px; width: min(880px, 72vw); padding: 26px 30px 22px; }
.tto-menu__groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.tto-menu__all {
  margin-top: 18px;
  padding-top: 14px !important;
  border-top: 1px solid var(--line);
  color: var(--white) !important;
  font: 400 1.05rem / 1 var(--font-display) !important;
}
.tto-menu__all:hover { color: var(--green) !important; }

.tto-burger {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  flex: none;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.tto-burger:hover { border-color: var(--green); }
.tto-burger .tto-icon { width: 22px; height: 22px; color: currentColor; }

.tto-hide-narrow { display: none; }
@media (min-width: 860px) {
  .tto-hide-narrow { display: inline-flex; }
}
@media (min-width: 1180px) {
  .tto-nav { display: block; }
  .tto-header > .tto-tab--tr .tto-burger { display: none; }
  .tto-header__nav { display: none; }
}

/* ---- mobile drawer ------------------------------------------------------- */
.tto-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px var(--tto-gutter) calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--night);
}
.tto-drawer[hidden] { display: none; }
.tto-drawer__top { display: flex; align-items: center; justify-content: space-between; padding-block: 6px 18px; border-bottom: 1px solid var(--line); }
.tto-drawer__nav { display: grid; padding-block: 8px 24px; }
.tto-drawer__nav > a, .tto-drawer__nav summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font: 400 1.5rem / 1.2 var(--font-display);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}
.tto-drawer__nav summary::-webkit-details-marker { display: none; }
.tto-drawer__nav summary::after { content: "+"; color: var(--text-muted); transition: rotate 0.25s ease; }
.tto-drawer__nav details[open] summary::after { rotate: 45deg; }
.tto-drawer__nav details[open] summary { color: var(--green); }
.tto-drawer__sub { display: grid; padding: 6px 0 18px; border-bottom: 1px solid var(--line); }
.tto-drawer__sub p { margin-top: 14px; color: var(--dark-pastel-green); font: 600 0.75rem / 1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.tto-drawer__sub p:first-child { margin-top: 4px; }
.tto-drawer__sub a { padding: 7px 0; color: var(--text-footer); text-decoration: none; }
.tto-drawer__sub a.tto-drawer__all { margin-top: 10px; color: var(--white); font-family: var(--font-display); font-size: 1.1rem; }
.tto-drawer__actions { display: grid; gap: 10px; margin-top: auto; }
body.is-drawer-open { overflow: hidden; }

/* ---- four-up grid: banner photo on top once there are four columns ------- */
.tto-grid--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
  .tto-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .tto-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tto-grid--4 .tto-card--photo { padding-top: clamp(96px, 7vw, 124px); }
  .tto-grid--4 .tto-card__photo {
    inset: 0 0 auto;
    width: 100%;
    height: clamp(120px, 8.6vw, 156px);
    opacity: 0.7;
    -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 96%);
    mask-image: linear-gradient(180deg, #000 20%, transparent 96%);
  }
  .tto-grid--4 .tto-card--photo .tto-card__text { max-width: none; }
}

/* ---- steps: how we work -------------------------------------------------- */
.tto-steps { counter-reset: none; }
.tto-step { gap: 12px; padding-block: clamp(22px, 1.8vw, 32px); }
.tto-texture .tto-card--stroke { background: color-mix(in srgb, var(--night) 88%, transparent); }
.tto-step__num { color: var(--green); font: 600 clamp(2.6rem, 2rem + 2vw, 3.6rem) / 1 var(--font-display); }

/* ---- side heads, audience rows, inline links ----------------------------- */
.tto-head--side { margin-bottom: 0; justify-items: start; align-content: start; }
.tto-head--side .tto-btn { margin-top: 8px; }
.tto-row__label { display: inline-flex; align-items: center; gap: 14px; }
.tto-row__label .tto-icon { width: 30px; height: 30px; stroke-width: 1.75; }
.tto-row__body { display: grid; gap: 12px; justify-items: start; }
.tto-row__body a { color: var(--white); }
.tto-more { color: var(--green) !important; font-weight: 600; text-decoration: none; }
.tto-more span { display: inline-block; transition: transform 0.25s ease; }
.tto-more:hover span { transform: translateX(3px); }

/* ---- the green slab, carrying the contact form --------------------------- */
.tto-slab--form { align-items: start; }
.tto-slab__side { display: grid; gap: clamp(22px, 2.4vw, 36px); }
.tto-slab__copy { max-width: 38rem; }
.tto-slab .tto-heading { max-width: 24ch; }
.tto-slab__dark { color: var(--night); }
.tto-form {
  display: grid;
  gap: 16px;
  padding: clamp(20px, 2vw, 34px);
  border-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card);
  background: var(--night);
  color: var(--white);
}
.tto-form__row { display: grid; gap: 16px; }
@media (min-width: 560px) {
  .tto-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tto-form .tto-field label { font-size: 1.05rem; }
.tto-form .tto-field input { min-height: 52px; }
.tto-form .tto-field textarea { min-height: 150px; }
.tto-form .tto-btn { margin-top: 4px; }
@media (min-width: 1100px) {
  .tto-slab.tto-slab--form { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; }
}

/* ---- footer link row ----------------------------------------------------- */
.tto-footer__nav {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.tto-footer__nav a { color: var(--text-footer); }
@media (max-width: 719px) {
  .tto-footer__nav { justify-content: flex-start; }
}

/* ==========================================================================
   Inner pages
   ========================================================================== */

/* ---- nav: the page you're on ---------------------------------------------- */
.tto-nav__link[aria-current="page"] { color: var(--green); }

/* ---- inner hero: shorter stage, breadcrumb, the brandmark glowing at right - */
.tto-stage--inner .tto-hero { position: relative; }
.tto-hero--inner .tto-hero__copy { position: relative; z-index: 1; }
.tto-hero--inner .tto-display { font-size: clamp(2.5rem, 1.6rem + 4.4vw, 6rem); }
.tto-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(12px, 1.2vw, 20px); color: var(--text-muted); font: 500 0.875rem / 1.4 var(--font-body); }
.tto-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.tto-crumbs a { text-decoration: none; }
.tto-crumbs a:hover { color: var(--green); }
.tto-crumbs li:last-child a { color: var(--white); pointer-events: none; }
.tto-mark { display: none; position: absolute; pointer-events: none; overflow: visible; }
.tto-mark .tto-power__mark { fill: color-mix(in srgb, var(--green) 14%, transparent); stroke: var(--green); stroke-width: 5; }
.tto-mark .tto-power__glow { opacity: 0.55; }
@media (min-width: 860px) {
  .tto-stage--inner .tto-hero { grid-template-columns: minmax(0, 1fr); min-height: clamp(380px, 30vw, 560px); }
  .tto-hero--inner .tto-hero__copy { padding-top: clamp(40px, 5vw, 90px); }
  .tto-mark { display: block; right: clamp(30px, 8vw, 160px); bottom: auto; top: 58%; width: clamp(240px, 22vw, 400px); translate: 0 -40%; opacity: 1; }
}

/* ---- section rhythm helpers ---------------------------------------------- */
.tto-section--flush { padding-top: 0; }
.tto-section--tight { padding-block: clamp(20px, 2vw, 36px); }
.tto-head--intro { max-width: 60rem; margin-bottom: 0; }
.tto-head--intro .tto-heading { max-width: 26ch; }

/* ---- intro panel with checklist card ------------------------------------- */
@media (min-width: 860px) {
  .tto-split--list { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.tto-listcard { align-content: start; }
@media (min-width: 860px) {
  .tto-listcard { margin: 14px; border-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card); background: var(--eerie-black); }
}
@media (max-width: 859px) {
  .tto-listcard { border-top: 2px solid var(--line); }
}
.tto-listcard__label { font: 400 var(--tto-fs-title) / 1.2 var(--font-display); }
.tto-checks { display: grid; gap: 4px; width: 100%; }
.tto-checks li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tto-checks li:last-child { border-bottom: 0; }
.tto-checks .tto-icon { width: 22px; height: 22px; margin-top: 1px; }
.tto-checks--num { counter-reset: step; }
.tto-checks--num li { counter-increment: step; }
.tto-checks--num .tto-icon { display: none; }
.tto-checks--num li::before { content: "0" counter(step); flex: none; width: 2ch; color: var(--green); font: 600 1.1rem / 1.4 var(--font-display); }

/* ---- feature cards ------------------------------------------------------- */
.tto-card--feature { border-color: var(--line); background: var(--night); transition: border-color 0.3s ease; }
.tto-card--feature:hover { border-color: var(--white); }
.tto-grid--2x { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
  .tto-grid--2x { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- download / call-out strip ------------------------------------------- */
.tto-callout { display: grid; gap: 18px; align-items: center; padding: clamp(24px, 3vw, 48px) clamp(20px, 2.4vw, var(--space-panel-inset)); }
.tto-callout .tto-heading { max-width: 26ch; }
.tto-callout__copy { display: grid; gap: 10px; }
@media (min-width: 860px) {
  .tto-callout { grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(20px, 2.4vw, 40px); }
}

/* ---- drop in: visit-us strip --------------------------------------------- */
.tto-dropin {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 20px;
  align-items: center;
  padding: clamp(24px, 2.6vw, 44px) clamp(20px, 2.4vw, var(--space-panel-inset));
  border: 2px solid var(--line);
  border-radius: 0 var(--tto-r-panel) var(--tto-r-panel) var(--tto-r-panel);
  background: var(--eerie-black);
}
.tto-dropin__photo {
  position: absolute; inset: 0 0 0 auto; z-index: -1; width: 46%; height: 100%; object-fit: cover; opacity: 0.45;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.tto-dropin__copy { display: flex; align-items: flex-start; gap: 16px; }
.tto-dropin__copy p { margin-top: 6px; color: var(--text-muted); }
.tto-dropin__title { font: 400 var(--tto-fs-title) / 1.2 var(--font-display); text-wrap: balance; }
.tto-dropin__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.tto-icon--lg { width: 40px; height: 40px; stroke-width: 1.75; }
@media (min-width: 1000px) {
  .tto-dropin { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 559px) {
  .tto-dropin__btns .tto-btn { flex: 1 1 auto; }
}

/* ---- link cards: related services, audiences ----------------------------- */
.tto-linkcards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.tto-linkcard {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  min-height: 74px;
  padding: 14px 18px;
  border: 2px solid var(--line);
  border-radius: 0 var(--radius-field) var(--radius-field) var(--radius-field);
  background: var(--night);
  font: 400 1.2rem / 1.2 var(--font-display);
  text-decoration: none;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.tto-linkcard:hover { border-color: var(--green); background: color-mix(in srgb, var(--green) 8%, var(--night)); }
.tto-linkcard > .tto-icon:first-child { width: 28px; height: 28px; }
.tto-linkcard span { margin-right: auto; }
.tto-linkcard > .tto-icon:last-child { width: 20px; height: 20px; color: var(--text-muted); transition: color 0.25s ease, translate 0.25s ease; }
.tto-linkcard:hover > .tto-icon:last-child { color: var(--green); translate: 2px -2px; }

/* ---- services overview: whole-card links + directory --------------------- */
.tto-grid--cards > li { display: grid; }
.tto-card--link { text-decoration: none; color: inherit; }
.tto-card--link:hover { border-color: var(--green); }
.tto-card__go { display: inline-block; color: var(--green); transition: transform 0.25s ease; }
.tto-card--link:hover .tto-card__go { transform: translateX(4px); }
.tto-dir { display: grid; gap: clamp(24px, 3vw, 48px); padding: clamp(28px, 4vw, 64px) clamp(20px, 2.4vw, var(--space-panel-inset)); }
.tto-dir__groups { display: grid; gap: 28px clamp(20px, 2.4vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.tto-dir__label { margin-bottom: 8px; color: var(--dark-pastel-green); font: 600 0.8rem / 1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.tto-dir__group a { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: color 0.2s ease; }
.tto-dir__group a:hover { color: var(--green); }
.tto-dir__group .tto-icon { width: 20px; height: 20px; }

/* ---- about: markets panel -------------------------------------------------- */
.tto-markets { justify-items: stretch; }
.tto-markets .tto-heading { max-width: 34ch; }

/* ---- why choose us: the four-step journey -------------------------------- */
.tto-journey { display: grid; gap: clamp(16px, 2vw, 32px); }
.tto-journey__step { display: grid; }
.tto-journey__step .tto-step__num { margin-bottom: -4px; }
.tto-journey__step .tto-checks { columns: 1; }
@media (min-width: 860px) {
  .tto-journey__step { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; }
}
@media (min-width: 560px) {
  .tto-journey__step .tto-checks { display: block; columns: 2; column-gap: 28px; }
  .tto-journey__step .tto-checks li { break-inside: avoid; border-bottom: 1px solid var(--line); }
  .tto-journey__step .tto-checks li:last-child { border-bottom: 1px solid var(--line); }
}

/* ---- contact page: info tiles + map ---------------------------------------- */
.tto-contact { display: grid; gap: var(--tto-gap); }
@media (min-width: 1000px) {
  .tto-contact { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.tto-infos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-content: start; }
.tto-info {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px;
  border: 2px solid var(--line); border-radius: 0 var(--radius-field) var(--radius-field) var(--radius-field);
}
.tto-info .tto-icon { width: 28px; height: 28px; }
.tto-info__label { color: var(--text-muted); font: 500 0.82rem / 1.3 var(--font-body); }
.tto-info__value { margin-top: 4px; font: 400 1.2rem / 1.3 var(--font-display); overflow-wrap: anywhere; }
.tto-info__value a { text-decoration: none; }
.tto-info__value a:hover { color: var(--green); }
.tto-info--remote { border-color: var(--green); }
.tto-map { overflow: hidden; min-height: 340px; border: 2px solid var(--line); border-radius: 0 var(--tto-r-panel) var(--tto-r-panel) var(--tto-r-panel); background: var(--eerie-black); }
.tto-map iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; filter: grayscale(1) invert(0.92) contrast(0.9); }

/* a lone last card spans the row instead of dangling */
@media (min-width: 860px) and (max-width: 1099px) {
  .tto-grid--3 > li:last-child:nth-child(2n+1) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .tto-grid--3 > li:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
/* services overview: longer copy reads better two-up */
@media (min-width: 860px) {
  .tto-grid--3.tto-grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tto-grid--cards > li:last-child { grid-column: auto; }
  .tto-grid--cards .tto-card__text { max-width: 44ch; }
}

/* ---- contact form: spam trap + send status ------------------------------- */
.tto-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tto-form { position: relative; }
.tto-form button[disabled] { opacity: 0.6; cursor: progress; }
.tto-form__status {
  padding: 14px 16px;
  border-radius: 0 var(--radius-field) var(--radius-field) var(--radius-field);
  background: color-mix(in srgb, var(--green) 18%, var(--night));
  border: 1px solid var(--green);
  font-weight: 500;
}
.tto-form__status.is-error { background: color-mix(in srgb, #e5484d 16%, var(--night)); border-color: #e5484d; }

/* ---- 404 ----------------------------------------------------------------- */
.tto-404 { display: grid; gap: 18px; justify-items: start; }

/* ---- small screens: comfortable tap targets, long buttons wrap ------------ */
.tto-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
.tto-header__logo, .tto-footer__logo, .tto-drawer__top > a { display: inline-block; padding-block: 8px; margin-block: -8px; }
@media (max-width: 479px) {
  .tto-btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
  .tto-footer__nav { gap: 0 18px; }
}