/* ==========================================================================
   Tab Servis — layout and components
   Figtree + DM Sans, emerald on white. Tokens and @font-face live in
   tokens.css; this file is layout and component rules only.

   Its own layout: the homepage is built around a selector. Instead of
   scrolling past six services, the visitor picks one and reads it in place,
   so the page stays short and the enquiry link for the chosen service is
   always one click away.

   Without JavaScript the tab strip is a list of in-page links and every
   panel is visible and stacked — a complete page. js/v-tabs.js upgrades it
   into an ARIA tab set with arrow-key navigation.

   Loads after tokens/base/components.
   ========================================================================== */

h1,
h2 {
  font-weight: 700;
  letter-spacing: -0.03em;
}

h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.13em;
}

.btn {
  border-radius: var(--radius-md);
  font-weight: 600;
}

.section {
  padding-block: var(--space-6);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-7);
  }
}

/* --- Hero ----------------------------------------------------------------- */

.o-hero {
  padding-block: var(--space-6) var(--space-5);
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 768px) {
  .o-hero {
    padding-block: var(--space-7) var(--space-6);
  }
}

.o-hero__inner {
  max-width: 54rem;
}

/* Split hero: the photograph sits beside the headline instead of under it.
   The plain .o-hero__inner keeps its 54rem measure for the copy-only version;
   the split variant hands the measure back to the wrap so both columns have
   room. Under 900px the two children stack in source order — copy, then
   image — which is the layout this hero had before. */
.o-hero__inner--split {
  max-width: var(--wrap);
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .o-hero__inner--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: center;
  }
}

/* The image carries a top margin for the stacked layout it was written for.
   In a column of its own the grid gap does that job. */
.o-hero__media .media {
  margin-top: 0;
}

/* The source photograph is 16:9. Beside a headline it is framed taller so the
   two columns finish at roughly the same height. */
.o-hero__media .media {
  aspect-ratio: 4 / 3;
}

.o-hero h1 {
  margin-top: var(--space-2);
  max-width: 17ch;
}

/* In the split hero the column already sets the measure; a second cap on top
   of it would break the lines early and leave the column half empty. */
.o-hero__inner--split h1 {
  max-width: none;
}

.o-hero__lede {
  margin-top: var(--space-3);
  max-width: 54ch;
  font-size: var(--step-1);
  color: var(--ink-muted);
}

.o-hero__actions {
  margin-top: var(--space-4);
}

.o-hero__trust {
  margin-top: var(--space-3);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* ==========================================================================
   The selector
   ========================================================================== */

.o-picker__head {
  max-width: 46rem;
}

.o-picker__head .lede {
  margin-top: var(--space-2);
}

.o-tabs {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 900px) {
  .o-tabs {
    grid-template-columns: 19rem minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }
}

/* --- Tab strip ------------------------------------------------------------ */

.o-tabs__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

@media (min-width: 900px) {
  .o-tabs__list {
    position: sticky;
    top: calc(var(--vbar-h, 0px) + var(--header-h) + var(--space-3));
    flex-direction: column;
    gap: 0;
    overflow: visible;
    border-left: 2px solid var(--line);
  }
}

.o-tabs__tab {
  display: block;
  padding: 0.7rem 1rem;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-muted);
  font-weight: 600;
  font-size: var(--step--1);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease),
              background-color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}

@media (min-width: 900px) {
  .o-tabs__tab {
    white-space: normal;
    border: 0;
    border-radius: 0;
    margin-left: -2px;
    border-left: 2px solid transparent;
    padding: 0.7rem 0 0.7rem 1rem;
    font-size: var(--step-0);
  }
}

.o-tabs__tab:hover {
  color: var(--ink);
}

.o-tabs__tab[aria-selected="true"] {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

@media (min-width: 900px) {
  .o-tabs__tab[aria-selected="true"] {
    background-color: transparent;
    border-left-color: var(--accent);
    color: var(--accent);
  }
}

/* --- Panels --------------------------------------------------------------- */

.o-tabs__panels {
  display: grid;
  gap: var(--space-3);
}

/* Before the script runs every panel is shown, so the content is complete
   with JavaScript disabled. Once upgraded, only the selected one remains. */
.o-panel {
  padding: var(--space-3);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .o-panel {
    padding: var(--space-4);
  }
}

[data-tabs-ready] .o-panel {
  border-color: var(--line);
}

.o-panel[hidden] {
  display: none;
}

.o-panel__n {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.o-panel h3 {
  margin-top: 0.35rem;
  font-size: var(--step-2);
}

.o-panel p {
  margin-top: var(--space-2);
  max-width: 62ch;
  color: var(--ink-muted);
}

.o-panel__audience {
  font-size: var(--step--1);
}

.o-panel .btn {
  margin-top: var(--space-3);
}

.o-panel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ==========================================================================
   Supporting sections
   ========================================================================== */

.o-problem {
  background-color: var(--surface-2);
}

.o-problem__grid,
.o-who__grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .o-problem__grid,
  .o-who__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
  }
}

.o-problem .lede,
.o-who .lede {
  margin-top: var(--space-2);
}

.o-resolution {
  margin-top: var(--space-3);
  padding-left: var(--space-2);
  border-left: 3px solid var(--accent);
  max-width: 52ch;
}

.o-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
}

.o-list > li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) 1.75rem;
  border-bottom: 1px solid var(--line);
  line-height: var(--leading-snug);
}

.o-list > li:first-child {
  border-top: 1px solid var(--line);
}

.o-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 0.5rem;
  height: 0.85rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}

.o-who__cta {
  margin-top: var(--space-3);
}

/* --- Steps ---------------------------------------------------------------- */

.o-steps {
  list-style: none;
  padding: 0;
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 700px) {
  .o-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

@media (min-width: 1100px) {
  .o-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.o-step {
  padding: var(--space-3);
  background-color: var(--surface-2);
  border-radius: var(--radius-lg);
}

.o-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: var(--step--1);
  margin-bottom: var(--space-2);
}

.o-step h3 {
  font-size: var(--step-1);
  margin-bottom: 0.25rem;
}

.o-step p {
  color: var(--ink-muted);
  font-size: var(--step--1);
}

/* --- Benefits ------------------------------------------------------------- */

.o-defs {
  margin-top: var(--space-4);
  display: grid;
  gap: 0;
  border-top: 2px solid var(--ink);
}

.o-def {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 800px) {
  .o-def {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: var(--space-4);
    align-items: baseline;
  }
}

.o-def dt {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.o-def dd {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-muted);
}

/* --- Closing CTA ---------------------------------------------------------- */

.o-cta {
  background-color: var(--brand-900);
  color: var(--on-dark);
}

.o-cta__inner {
  max-width: 46rem;
}

/* Full-width CTA: the band was already edge to edge, but its content sat in a
   46rem island in the middle of it. The wide variant gives the measure back to
   the wrap and splits the content in two so the line lengths stay readable —
   heading on the left, the ask and the buttons on the right. The split starts
   at 900px, the same breakpoint as .o-problem__grid and .o-who__grid; the
   action column takes the larger share so both buttons stay on one line. */
.o-cta__inner--wide {
  max-width: var(--wrap);
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 900px) {
  .o-cta__inner--wide {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-6);
    align-items: start;
  }
}

.o-cta h2 {
  color: var(--on-dark);
}

.o-cta p {
  margin-top: var(--space-3);
  font-size: var(--step-1);
  color: var(--on-dark-muted);
}

.o-cta__actions {
  margin-top: var(--space-4);
}

.o-cta .btn--outline {
  border-color: var(--line-dark);
  color: var(--on-dark);
}

.o-cta .btn--outline:hover {
  border-color: var(--on-dark);
  background-color: rgba(242, 247, 244, 0.1);
  color: var(--on-dark);
}

.o-cta :focus-visible {
  outline-color: var(--on-dark);
}