/* =========================================================================
   WordPress isolation layer
   -------------------------------------------------------------------------
   The approved design is full-bleed: coloured bands run edge to edge and each
   section manages its own gutters via .tad-container. WordPress, Elementor and
   most plugins wrap page content in padded, max-width containers, which would
   squeeze those bands into a narrow column and put a page title above the hero.

   This file undoes those wrappers on our two templates ONLY — everything is
   scoped to .tad-wp-page, the body class the templates add. Ordinary pages and
   anything built in Elementor are untouched.

   Loaded last so it wins.
   ========================================================================= */

/* ---- 1. Kill the theme's page title / entry header ------------------- */
.tad-wp-page .page-header,
.tad-wp-page .entry-header,
.tad-wp-page .entry-title,
.tad-wp-page .site-main > .page-header,
.tad-wp-page .post-navigation,
.tad-wp-page .entry-footer {
    display: none !important;
}

/* ---- 2. Strip the content wrappers back to full width ---------------- */
.tad-wp-page .site-main,
.tad-wp-page .site-content,
.tad-wp-page .entry-content,
.tad-wp-page article,
.tad-wp-page .page-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Elementor's own containers, when the page is built with it */
.tad-wp-page .elementor-section-boxed > .elementor-container,
.tad-wp-page .elementor-container,
.tad-wp-page .elementor-widget-wrap,
.tad-wp-page .e-con,
.tad-wp-page .e-con-inner {
    max-width: none !important;
}

/* Hello Elementor's utility container */
.tad-wp-page .container,
.tad-wp-page .site-header .container,
.tad-wp-page .site-footer .container {
    max-width: none !important;
}

/* ---- 3. Our own page wrapper is always full width -------------------- */
.tad-page {
    width: 100%;
    max-width: none;
    margin: 0;
    overflow-x: clip;          /* a stray wide child must never scroll the page */
}

/* .tad-container is what actually creates the gutters — restate it here so a
   parent theme's `.container` rules can't override the design's own rhythm. */
.tad-page .tad-container {
    width: var(--tad-container, min(1240px, 100% - 48px));
    max-width: 100%;
    margin-inline: auto;
}

/* ---- 4. Suppress any plugin-injected header/footer ------------------
   This theme renders the approved header and footer inside the landing page
   templates themselves. If a header/footer builder plugin (Elementor Pro's
   Theme Builder, Header Footer Elementor, etc.) is also outputting one, you
   would get two stacked. This hides theirs on our two templates only —
   everywhere else on the site their header still shows normally.

   Using an Elementor-built header instead? Delete this block. */
.tad-wp-page .site-header,
.tad-wp-page .ehf-header,
.tad-wp-page .site-footer,
.tad-wp-page .ehf-footer,
.tad-wp-page .tad-basic__header,
.tad-wp-page .tad-basic__footer {
    display: none !important;
}

/* ---- 5. Reset inherited type so the design's own scale applies -------- */
.tad-wp-page .site-main p,
.tad-wp-page .site-main ul,
.tad-wp-page .site-main ol {
    margin: 0;
}
.tad-page * {
    box-sizing: border-box;
}

/* Images typed into the WordPress editor need the usual responsive treatment.
   This must NOT be a blanket `.tad-page img` rule: that has the same
   specificity as component rules like `.tad-tagback__link img { height:18px }`
   and, because this file loads last, it would win — which blew the 18px "TA"
   mark in the tagback bar up to full size. Scope it to editor content only. */
.tad-prose img,
.tad-page .wp-block-image img,
.tad-page figure img {
    max-width: 100%;
    height: auto;
}

/* WordPress adds figure/caption wrappers around images inside the editor —
   keep those from breaking the gallery grids. */
.tad-page figure {
    margin: 0;
}

/* ---- 6. Body copy typed into the WordPress editor -------------------- */
/* The "About" / "What happens" sections render whatever the editor contains.
   Give it the design's typography instead of the theme's defaults. */
.tad-prose {
    font-family: var(--tad-font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--tad-ink, #0B1B3B);
}
.tad-prose > * + * { margin-top: 1em; }
.tad-prose h2 {
    font-family: var(--tad-font-display);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.2;
    margin-top: 1.4em;
}
.tad-prose h3 {
    font-family: var(--tad-font-display);
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
    margin-top: 1.2em;
}
.tad-prose a { color: var(--tad-brand); }
.tad-prose ul, .tad-prose ol { padding-left: 1.25em; }
.tad-prose li + li { margin-top: .4em; }

/* ---- 6b. Photo blur override ------------------------------------------ */
/* Normally the date decides: photos are blurred before an edition and sharp
   after it. Editions → Photo blur can override that per city, and these two
   rules are what carry the decision. They sit here rather than in the approved
   stylesheets so those stay byte-identical to the signed-off static build. */
.tad-page .tad-photos--clear .tad-city__gallery-img,
.tad-page .tad-photos--clear img {
    filter: none !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.tad-page .tad-photos--clear .tad-city__coming-badge,
.tad-page .tad-photos--clear .tt-subevent__gallery-badge {
    display: none !important;
}

.tad-page .tad-photos--blurred .tad-city__gallery-img,
.tad-page .tad-photos--blurred img {
    filter: blur(12px) saturate(0.8) !important;
    pointer-events: none !important;
}

/* ---- 7. Admin bar offset ---------------------------------------------- */
/* A sticky header sits under the WP admin bar for logged-in editors. */
body.admin-bar .tad-header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .tad-header { top: 46px; }
}

/* ---- 8. Responsive safety nets ---------------------------------------- */
/* The design is already responsive; these only guard against a WordPress
   wrapper reintroducing horizontal overflow on small screens. */
@media (max-width: 782px) {
    .tad-wp-page .site-main,
    .tad-wp-page .entry-content { padding: 0 !important; }
}
@media (max-width: 480px) {
    .tad-page .tad-container {
        width: 100%;
        padding-inline: 18px;
    }
}

/* =========================================================================
   9 · MOBILE
   -------------------------------------------------------------------------
   Measured on a 390px viewport against the live site. Everything below fixes
   an element that was actually wider than the screen:

     .tt-form / .tt-form__grid ....... 466–499px  (fields ran off the right)
     .tt-partner-carousel__slide ..... 738px
     .tt-hero__grid .................. stayed 2-up instead of stacking
     .tt-subevent__gallery ........... tiles overlapped

   Scoped to .tad-page so nothing else on the site is affected.
   ========================================================================= */
@media (max-width: 782px) {

    /* --- nothing may exceed the screen --------------------------------- */
    .tad-page,
    .tad-page section,
    .tad-page .tad-container { max-width: 100vw; }

    .tad-page img,
    .tad-page input,
    .tad-page select,
    .tad-page textarea,
    .tad-page button { max-width: 100%; }

    /* --- forms: one field per row, full width -------------------------- */
    .tad-page .tt-form,
    .tad-page .tad-form,
    .tad-page .tt-forms__grid { max-width: 100%; width: 100%; }

    .tad-page .tt-form__grid,
    .tad-page .tad-form__grid {
        display: grid;
        grid-template-columns: 1fr;   /* was a 2-up grid that never collapsed */
        gap: 14px;
        width: 100%;
        max-width: 100%;
    }
    .tad-page .tt-form__grid > *,
    .tad-page .tad-form__grid > *,
    .tad-page .tt-form__full { grid-column: 1 / -1; width: 100%; max-width: 100%; }

    .tad-page .tt-form input,
    .tad-page .tt-form select,
    .tad-page .tt-form textarea,
    .tad-page .tad-form__input {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* --- hero: stack, don't sit side by side --------------------------- */
    .tad-page .tt-hero__grid,
    .tad-page .tad-hero__inner {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    .tad-page .tt-hero__media { margin-inline: auto; max-width: 200px; }
    .tad-page .tt-hero__ctas,
    .tad-page .tad-hero__ctas { justify-content: center; flex-wrap: wrap; }

    /* --- partner carousel: one slide, exactly the screen width ---------- */
    .tad-page .tt-partner-carousel__slide {
        flex: 0 0 100% !important;
        width: 100%;
        max-width: 100%;
    }
    .tad-page .tt-partner-carousel__arrow--prev { left: 4px; }
    .tad-page .tt-partner-carousel__arrow--next { right: 4px; }

    /* --- galleries: even tiles, no overlap ----------------------------- */
    .tad-page .tt-subevent__gallery,
    .tad-page .tad-city__gallery {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-auto-rows: auto !important;
        gap: 6px;
    }
    .tad-page .tt-subevent__gallery img,
    .tad-page .tad-city__gallery-img {
        grid-column: auto !important;   /* cancel the 2x2 hero span */
        grid-row: auto !important;
        aspect-ratio: 1 / 1;
        height: auto;
        object-fit: cover;
    }

    /* --- the logo marquee must clip, never widen the page -------------- */
    .tad-page [data-tt-marquee],
    .tad-page .tt-marquee { overflow: hidden; max-width: 100%; }

    /* --- city blocks stack ---------------------------------------------- */
    .tad-page .tad-city__grid { grid-template-columns: 1fr !important; }

    /* --- readable tap targets and type ---------------------------------- */
    .tad-page .tad-btn { min-height: 44px; }
    .tad-page .tt-form input,
    .tad-page .tt-form select,
    .tad-page .tt-form textarea { font-size: 16px; }  /* stops iOS zoom-on-focus */
}

@media (max-width: 480px) {
    .tad-page .tt-subevent__gallery,
    .tad-page .tad-city__gallery { grid-template-columns: repeat(2, 1fr) !important; }
    .tad-page .tt-stats,
    .tad-page .tad-metrics__grid { grid-template-columns: repeat(2, 1fr) !important; }
    .tad-page .tad-container { padding-inline: 16px; }
}

/* ---- 9. Footer sizing -------------------------------------------------- */
/* The footer was rendering noticeably larger than the rest of the page: the
   logo ran oversized and the address/list type sat close to body size, so the
   whole block competed with the content above it. These bring it back to a
   proper footer scale. Scoped to .tad-page so nothing else is touched. */
.tad-page .tad-footer,
.tad-page .tt-footer {
    padding-block: clamp(32px, 4vw, 56px);
    font-size: 0.875rem;
    line-height: 1.6;
}
.tad-page .tad-footer__logo,
.tad-page .tt-footer__logo {
    height: 34px;
    width: auto;
    margin-bottom: 12px;
}
.tad-page .tad-footer__heading,
.tad-page .tt-footer__heading {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.tad-page .tad-footer__tagline,
.tad-page .tad-footer__powered,
.tad-page .tad-footer__contact,
.tad-page .tad-footer__list,
.tad-page .tt-footer__brand,
.tad-page .tt-footer__col {
    font-size: 0.8125rem;
    line-height: 1.65;
}
.tad-page .tad-footer__list li + li { margin-top: 6px; }
.tad-page .tad-footer__contact span { display: block; }

/* The bottom credit strip is secondary — keep it quiet. */
.tad-page .tad-footer__bottom,
.tad-page .tt-footer__bottom {
    font-size: 0.75rem;
    padding-top: 18px;
    margin-top: 24px;
}

/* Footer columns that never got a rule of their own. */
.tad-page .tad-footer__col,
.tad-page .tt-footer__brand { min-width: 0; }

/* ---- 10. Mobile + tablet ---------------------------------------------- */
@media (max-width: 1024px) {
    .tad-page .tad-footer__inner,
    .tad-page .tt-footer__inner {
        gap: 28px;
    }
}
@media (max-width: 767px) {
    .tad-page .tad-footer,
    .tad-page .tt-footer { text-align: left; }
    .tad-page .tad-footer__inner,
    .tad-page .tt-footer__inner {
        grid-template-columns: 1fr !important;
        gap: 26px;
    }
    .tad-page .tad-footer__logo,
    .tad-page .tt-footer__logo { height: 30px; }

    /* Nothing may push the page sideways on a phone. */
    .tad-page { overflow-x: clip; }
    .tad-page img,
    .tad-page svg { max-width: 100%; }
}

/* ---- 11. Status pill, every state ------------------------------------- */
/* The approved CSS only ever styled the "registrations open" pill; a completed
   edition fell back to a bare CSS pseudo-element reading COMPLETED, which read
   as unfinished next to the others. Each state now gets a proper pill in its
   own colour, and the old pseudo tags are suppressed so nothing doubles up. */
.tad-page--talr .tad-city--past .tad-city__eyebrow::after,
.tad-page--talr .tad-city--tbd .tad-city__eyebrow::after,
.tad-page--talr .tad-city--coming-soon .tad-city__eyebrow::after { content: none !important; }

.tad-page--talr .tad-city__badge--past,
.tad-page--talr .tad-city__badge--tbd {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: var(--tad-fs-xs);
    font-weight: 600;
    letter-spacing: var(--tad-tracking-wide);
    text-transform: uppercase;
}
.tad-page--talr .tad-city__badge--past {
    background: rgba(11, 27, 59, 0.06);
    border: 1px solid rgba(11, 27, 59, 0.14);
    color: var(--tad-ink-muted, #4A5A7A);
}
.tad-page--talr .tad-city__badge--past .tad-city__badge-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--tad-ink-muted, #4A5A7A);
    animation: none;          /* completed does not pulse */
}
.tad-page--talr .tad-city__badge--tbd {
    background: rgba(6, 48, 132, 0.06);
    border: 1px solid rgba(6, 48, 132, 0.16);
    color: var(--tad-brand, #063084);
}
.tad-page--talr .tad-city__badge--tbd .tad-city__badge-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--tad-brand, #063084);
}

/* The gallery note is drawn by talr.css as a centred pill on upcoming
   editions. On a "date to be announced" edition it is a real element, so give
   it the same treatment there. */
.tad-page--talr .tad-city--coming-soon .tad-city__gallery,
.tad-page--talr .tad-city--tbd .tad-city__gallery { position: relative; }

/* ---- 12. reCAPTCHA ----------------------------------------------------- */
/* v3 is invisible and needs nothing here. These rules are for the v2 tick box,
   which Google renders at a fixed 304px — without them it overflows the
   narrower newsletter band on a phone. */
.tad-page .tad-field--recaptcha {
    grid-column: 1 / -1;
    margin: 4px 0 8px;
}
.tad-page .g-recaptcha {
    display: inline-block;
    max-width: 100%;
}
@media (max-width: 400px) {
    /* 304px is Google's own width; scale rather than let it clip. */
    .tad-page .g-recaptcha {
        transform: scale(0.85);
        transform-origin: 0 0;
    }
}
/* In the single-line newsletter band the box needs its own row. */
.tad-page .tad-cta-band__form .tad-field--recaptcha,
.tad-page .tt-newsband__form .tad-field--recaptcha {
    flex-basis: 100%;
    width: 100%;
}

/* ---- 13. "Registrations Open Soon" ------------------------------------- */
/* An announced edition looks like an upcoming one — same date, same countdown,
   same blurred photos — but registration has not opened yet, so the pill is
   quieter and the dot does not pulse. */
.tad-page--talr .tad-city__badge--announced {
    background: rgba(6, 48, 132, 0.06);
    border: 1px solid rgba(6, 48, 132, 0.16);
    color: var(--tad-brand, #063084);
}
.tad-page--talr .tad-city__badge--announced .tad-city__badge-dot {
    background: var(--tad-brand, #063084);
    animation: none;
}

/* ---- 14. TA Tech display face: Electrobyte ----------------------------- */
/* Replaces Montserrat for headings on the TA Tech page only. TALR is
   untouched. Declared here rather than in tokens.css so the six approved
   stylesheets stay byte-identical to the signed-off static build.

   Montserrat stays second in the stack on purpose: Electrobyte has no middle
   dot, en dash or em dash, and five TA Tech headings use "·" as a separator
   ("TA Tech Summit 2026 · Bangalore"). Browsers fall back per character, so
   those dots quietly render in Montserrat instead of showing a blank box. */
@font-face {
    font-family: "Electrobyte";
    src: url("../fonts/Electrobyte.ttf") format("truetype");
    font-weight: 400 800;      /* one weight; the range stops faux-bolding */
    font-style: normal;
    font-display: swap;
}

.tad-page--tatech {
    /* TA Tech's own stylesheet reads --tt-font-display for every heading — h1
       through h4, .tt-h1/2/3, the hero title and the theme line, 17 rules in
       all. Setting only --tad-font-display moved the eyebrows and nothing else,
       because the headings never look at that variable. Both are set here. */
    --tad-font-display: "Electrobyte", "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --tt-font-display:  "Electrobyte", "Montserrat", "Helvetica Neue", Arial, sans-serif;
}

/* Electrobyte is a squarish, wide face — at heading sizes the default tracking
   reads cramped, and its caps are tall, so the line-height needs a little air. */
.tad-page--tatech h1,
.tad-page--tatech h2,
.tad-page--tatech h3,
.tad-page--tatech h4,
.tad-page--tatech .tt-h1,
.tad-page--tatech .tt-h2,
.tad-page--tatech .tt-h3,
.tad-page--tatech .tt-hero__title,
.tad-page--tatech .tt-eyebrow,
.tad-page--tatech .tt-happens__label,
.tad-page--tatech .tt-speaker__name,
.tad-page--tatech .tt-agenda__title,
.tad-page--tatech .tt-subevent__title,
.tad-page--tatech .tt-stat__num,
.tad-page--tatech .tt-form__title {
    font-family: var(--tad-font-display);
    letter-spacing: 0.01em;
    line-height: 1.18;
}

/* Long headings in a wide face will break awkwardly rather than overflow. */
.tad-page--tatech h1,
.tad-page--tatech h2,
.tad-page--tatech .tt-h2 {
    overflow-wrap: break-word;
}

/* .tt-hero__theme is declared with !important in tatech-v2.css, so a plain
   rule here loses to it however late this file loads. */
.tad-page--tatech .tt-hero__theme {
    font-family: var(--tad-font-display) !important;
    font-style: normal;          /* Electrobyte has no italic; faux-slanting it looks wrong */
}

/* ---- 15. Flagship marker ---------------------------------------------- */
/* The flagship edition used to be signalled by the testimonial band sitting
   inside it. That band is now its own section, so the edition needs a marker
   of its own — a small box above the city name. Clearing the text in
   Customize → Brand Kit hides it entirely. */
.tad-page--talr .tad-city__flagship-note {
    display: inline-block;
    margin-bottom: var(--tad-space-3, 12px);
    padding: 6px 14px;
    border: 1px solid var(--tad-accent, #F27F0C);
    border-radius: var(--tad-radius-pill, 999px);
    background: rgba(242, 127, 12, 0.08);
    color: var(--tad-accent, #F27F0C);
    font-family: var(--tad-font-display);
    font-size: var(--tad-fs-xs, 0.8125rem);
    font-weight: 700;
    letter-spacing: var(--tad-tracking-wide, 0.08em);
    text-transform: uppercase;
    line-height: 1;
}

/* The band is a full-width section of its own now, so it needs the vertical
   rhythm the surrounding sections have — inside a city block it inherited it. */
.tad-page--talr .tad-testimonial-band {
    margin-block: clamp(32px, 5vw, 64px);
}

/* ---- 16. Flagship positioning line ------------------------------------ */
/* This line reads var(--tt-font-display), which is now Electrobyte — and it is
   set in italic, which Electrobyte has no cut for, so the browser was slanting
   it artificially. It is a sentence of running text rather than a heading, so
   it stays on Montserrat where it is legible and the italic is genuine. */
.tad-page--tatech .tt-positioning {
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    font-style: italic;
}

/* ---- 17. Section eyebrow size ----------------------------------------- */
/* The kickers above each TA Tech section ("Speakers", "Our Delegates") were
   set to 11px, which reads as a caption rather than a section marker —
   especially in Electrobyte, whose square letterforms need more room than a
   humanist face at the same size. Raised 52% to 16.7px at the client's
   request. The !important matches the upstream declaration it overrides. */
.tad-page--tatech .tt-eyebrow {
    font-size: 17.87px !important;   /* 11px → 16.7px (+52%) → 17.87px (+7%) */
    font-weight: 700 !important;
}

/* ---- 18. Button text ---------------------------------------------------- */
/* tatech-v2.css sets .tad-btn to var(--tt-font-display), which is now
   Electrobyte. At button size its square letterforms cost more legibility than
   they add — and its "V" in particular reads badly, turning RESERVE into
   something closer to RESER'.'E. Buttons are an action a visitor has to read at
   a glance, so they stay on Montserrat. Headings keep Electrobyte. */
.tad-page--tatech .tad-btn,
.tad-page--tatech .tt-form__submit,
.tad-page--tatech button.tad-btn {
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: 0.06em;
}

/* ---- 19. Montserrat for reading text on TA Tech ------------------------ */
/* Electrobyte stays on the hero title, section headings, speaker names, stat
   figures and nav. Everything a visitor actually reads through — section
   kickers, form titles, the newsletter heading and the agenda rows — is on
   Montserrat, which stays legible at those sizes and does not carry
   Electrobyte's broken "V" (it renders closer to an apostrophe-dot-apostrophe,
   turning RESERVE into RESER'.'E). */
.tad-page--tatech .tt-eyebrow,
.tad-page--tatech .tt-form__title,
.tad-page--tatech .tt-newsband__title,
.tad-page--tatech .tt-agenda__title,
.tad-page--tatech .tt-agenda__time {
    font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !important;
}

/* ---- 20. Hero eyebrow as a link ---------------------------------------- */
/* The pill now jumps to the registration form, so it is an <a> rather than a
   <div>. These rules stop it picking up default link styling and give it the
   affordances a clickable thing needs — a pointer, a hover state and a visible
   keyboard focus ring. */
.tad-page--tatech .tt-hero__eyebrow--link {
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.tad-page--tatech .tt-hero__eyebrow--link:hover {
    background: rgba(109, 40, 217, 0.14);
    transform: translateY(-1px);
}
.tad-page--tatech .tt-hero__eyebrow--link:focus-visible {
    outline: 2px solid var(--tt-purple, #6D28D9);
    outline-offset: 3px;
}

/* ---- 21. Testimonial band — auto-running single-row carousel ------------ */
/* One row, moving on its own, seamless for any number of testimonials.

   The card width is a fixed length on purpose. It was clamp(230px, 24%, 280px),
   and a percentage cannot resolve against a track whose width is max-content --
   the container width depends on the items and the items depend on the
   container. Chrome broke the cycle by falling back to content width, which
   measured a 6220px track against 3514px of actual cards: the surplus showed as
   a blank stretch mid-loop and made the run stutter.

   The translate is -50% minus half a gap. For N cards rendered twice there are
   2N-1 gaps, so half the track lands half a gap short of where the copy begins.
   That correction depends only on the gap, not on the card count or width, so
   adding testimonials in wp-admin needs no change here. */
.tad-page--talr .tad-testimonial-band--full {
    display: block;
    grid-template-columns: none;
    background: var(--tad-bg-alt);

    /* Margin sat outside the cream background, so the page showed through as
       white bands above and below -- directly under the newsletter strip. The
       spacing is padding now, so the colour runs edge to edge. */
    margin: 0;
    border-top: 0;
    padding: 30px 0 26px;
}

/* Same treatment as the section eyebrows elsewhere on the page. */
.tad-page--talr .tad-testimonial__eyebrow {
    display: block;
    font-family: var(--tad-font-mono);
    font-size: var(--tad-fs-xs);
    font-weight: 700;
    letter-spacing: var(--tad-tracking-wider);
    text-transform: uppercase;
    color: var(--tad-brand);
    margin: 0 0 var(--tad-space-4);
    line-height: 1;
    text-align: center;   /* centred like the section eyebrows it now matches */
}

.tad-page--talr .tad-testimonial-band--full .tad-testimonial__viewport {
    overflow: hidden;
}
.tad-page--talr .tad-testimonial-band--full .tad-testimonial__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
    width: max-content;
    overflow: visible;
    scroll-snap-type: none;
    transition: none;
    animation: tad-testimonial-marquee 46s linear infinite;
}
.tad-page--talr .tad-testimonial-band--full:hover .tad-testimonial__track,
.tad-page--talr .tad-testimonial-band--full .tad-testimonial__track:focus-within {
    animation-play-state: paused;
}
@keyframes tad-testimonial-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 7px)); }
}

/* Block, not the inherited horizontal flex row -- otherwise the note sits
   beside the photo and name instead of underneath them. */
.tad-page--talr .tad-testimonial-band--full .tad-testimonial__card {
    display: block;
    flex: 0 0 280px;
}
.tad-page--talr .tad-testimonial__head { display: flex; align-items: center; gap: 10px; }
.tad-page--talr .tad-testimonial-band--full .tad-testimonial__card img {
    width: 38px; height: 38px; border-radius: 50%;
}
.tad-page--talr .tad-testimonial__note { margin: 9px 0 0; font-size: 0.75rem; font-style: italic; }

/* Lengths stay definite at every width so the loop keeps landing exactly. */
@media (max-width: 900px) {
    .tad-page--talr .tad-testimonial-band--full .tad-testimonial__card { flex: 0 0 260px; }
}
@media (max-width: 600px) {
    .tad-page--talr .tad-testimonial-band--full .tad-testimonial__card { flex: 0 0 76vw; }
}

@media (prefers-reduced-motion: reduce) {
    .tad-page--talr .tad-testimonial-band--full .tad-testimonial__track {
        animation: none;
        overflow-x: auto;
        width: auto;
    }
}

/* ---- 22. Chips ---------------------------------------------------------- */
/* The date / venue / time chips inherit the mono face at its default weight,
   which sits lighter than everything around them. Semi-bold gives them the
   weight of the facts they carry without turning them into headings. */
.tad-page .tad-chip {
    font-weight: 600;
}

/* ---- 23. Register form — full width, single sequence -------------------- */
/* The form was capped at 720px inside a 1240px container, so it sat as a
   narrow column with blank blue either side while the three cards above it
   ran the full width.

   Everything here is gated at min-width 783px. The mobile rules in block 12
   force a single full-width column at 782px and below, and must keep winning,
   since this block sits later in the file. */
@media (min-width: 783px) {
    .tad-page--talr .tad-form { max-width: 100%; }
}

@media (min-width: 1024px) {
    /* The form itself becomes the three-column grid and the inner wrapper
       dissolves into it, so the submit button and the email note become cells
       of the same grid as the fields instead of stacking underneath it.
       display:contents also makes this work whether the button sits inside
       the field wrapper or after it. */
    .tad-page--talr .tad-form {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--tad-space-4);
        align-items: start;
    }
    .tad-page--talr .tad-form__grid { display: contents; }

    /* Interest and message rejoin the flow as ordinary cells, so the eight
       fields run in sequence: rows 1 and 2 fill completely, row 3 starts with
       interest and message and leaves column 3 free. */
    .tad-page--talr .tad-form__field--full { grid-column: auto; }

    /* Column 3, row 3 — directly under City. The top margin clears the label
       line so the button lines up with the inputs beside it, not their labels. */
    .tad-page--talr .tad-form__submit,
    .tad-page--talr .tad-form button[type="submit"] {
        grid-column: 3;
        grid-row: 3;
        justify-self: stretch;   /* match the City select above it exactly */
        align-self: start;
        margin-top: 27px;        /* label height 21px + its 6px margin */
    }

    /* A shorter message box: it was the tallest thing in the row and set the
       height of the whole block. */
    .tad-page--talr .tad-form__textarea { height: 104px; min-height: 104px; }

    /* Same cell, pinned to the bottom: the note ends up below the button and
       fills what would otherwise be dead space beside the message box. The
       element carries inline text-align and margin, so both need overriding. */
    .tad-page--talr .tad-form > p {
        grid-column: 3;
        grid-row: 3;
        align-self: end;
        text-align: left !important;
        margin: 0 !important;
    }

    .tad-page--talr .tad-form__status { grid-column: 1 / -1; grid-row: 4; }
}

/* ---- 24. Section eyebrows on the roundtable ----------------------------- */
/* "TA LEADERSHIP ROUNDTABLE" and every other section kicker, bold. The token
   sets the face, size and tracking but leaves the weight at the body default,
   which reads faint against the headings underneath. */
.tad-page--talr .tad-eyebrow,
.tad-page--talr .tad-city__eyebrow,
.tad-page--talr .tad-testimonial__eyebrow { font-weight: 700; }

/* ---- 25. Anchor landing offset ------------------------------------------ */
/* The header is position:sticky at top:0 and 83px tall, and the anchor targets
   had no scroll margin -- so "Register Now" and "Partner with Us" scrolled the
   section to y=0, putting its heading and the first row of fields underneath
   the header. scroll-padding-top on the scroll container fixes every in-page
   jump at once, the footer edition links included. */
html {
    scroll-padding-top: 99px;   /* 83px header + 16px breathing room */
}

/* Logged-in views carry the 32px WordPress admin bar above everything. */
html:has(body.admin-bar) {
    scroll-padding-top: 131px;
}

/* ---- 26. Mobile menu panel --------------------------------------------- */
/* Covers both pages: the roundtable hides its nav at 640px and TA Tech at
   780px, and the open class is only ever set by a toggle that is hidden above
   those widths. */
@media (max-width: 780px) {
    .tad-page .tad-header--menu-open .tad-header__nav {
        display: flex;
        flex-direction: column;
        gap: 2px;

        /* Break out of .tad-header__inner, which is a .tad-container and so
           narrower than the screen -- the old panel stopped short of both edges. */
        position: absolute;
        top: 100%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 100vw;

        margin: 0;
        padding: 8px 24px 18px;
        background: #fff;          /* an explicit colour, not inherit */
        border-bottom: 1px solid rgba(150, 163, 199, 0.2);
        box-shadow: 0 14px 30px rgba(11, 27, 59, 0.16);
        z-index: 60;               /* above the backdrop below */
    }
    .tad-page .tad-header--menu-open .tad-header__nav a {
        display: block;
        padding: 13px 0;
    }

    /* The dim behind it. Absolute rather than fixed so it hangs off the bottom
       of the sticky header and never covers the logo or the close button. */
    .tad-page .tad-header--menu-open::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100vh;
        background: rgba(11, 27, 59, 0.45);
        z-index: 40;
    }

    body.tad-menu-open,
    html:has(body.tad-menu-open) { overflow: hidden; }
}

/* ---- 27. Mobile spacing pass ------------------------------------------- */
/* The status pill sat 7px above the city name -- close enough that the two
   read as one block. A little air separates the label from the heading it
   describes. Applied at every width; it was tight on desktop too. */
.tad-page--talr .tad-city__badge { margin-bottom: 10px; }

@media (max-width: 640px) {
    /* The footer ran 934px on a 375px screen -- brand 147, Editions 459,
       Contact 118, Follow 68, all in one column. Two changes: the four blocks
       share a two-column grid, and the twelve city links inside Editions do
       the same. Roundtable only; TA Tech has no edition list to compress. */
    /* Follow sits directly under the logo and tagline, so the brand block
       reads as one unit; the rest follows in order. The inner grid stays the
       single column block 12 sets -- only the city list needs two. */
    .tad-page--talr .tad-footer__brand         { order: 1; }
    .tad-page--talr .tad-footer__col--follow   { order: 2; }
    .tad-page--talr .tad-footer__col--editions { order: 3; }
    .tad-page--talr .tad-footer__col--contact  { order: 4; }
    .tad-page--talr .tad-footer__inner         { row-gap: 22px; }

    .tad-page--talr .tad-footer__list--editions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 18px;
        row-gap: 11px;
    }

    /* The photo wall began 16px under the buttons, so the gallery read as part
       of the same group rather than as the next thing down. */
    .tad-page--talr .tad-city__cta { margin-bottom: 20px; }
}

/* ---- 28. Gallery first tile, and metric labels -------------------------- */
@media (max-width: 767px) {
    /* The first photo is meant to be a wide hero spanning the row. Block 12
       cancels that span with grid-column:auto !important, but the 16/9 ratio
       comes from a :nth-child(1) rule that outranks it -- so the tile kept the
       banner shape inside a single square column and came out half the height
       of every other photo. Match its neighbours. */
    .tad-page .tad-city__gallery-img:nth-child(1),
    .tad-page .tt-subevent__gallery img:first-child {
        aspect-ratio: 1 / 1 !important;
    }
}

/* Each metric cell is 292px wide but the label was capped at 172px, which
   forced "Fortune 500 & Enterprise Brands Represented" onto three lines while
   its neighbours took two -- and a taller label pushed that number 20px above
   the rest of the row. The cap goes up so every label fits on two lines, and
   the min-height holds the row on one baseline whatever the wording. */
.tad-page--talr .tad-metric__label {
    max-width: 240px;
    min-height: 3em;   /* two lines at the 1.5 line-height */
}