/* ==========================================================================
   SEO SERVICES PAGE (/seo)

   WHAT THIS FILE IS
   -----------------
   The site's design LANGUAGE applied to sections that exist nowhere else.

   An earlier version of this page reused homepage SECTIONS — the hero
   component, the four-up services grid, the horizontal process row — which
   made /seo read as a rearranged homepage. Those are gone. What is carried
   over is only the vocabulary:

     type        var(--font-primary), "Montserrat", weights 700/800,
                 the same clamp()ed heading scale and -0.025em tracking
     accent      var(--primary-color) #0073FC / --primary-color-dark #005BC7
     dark        ground #0A0C0D, band #0D1012,
                 surface linear-gradient(rgb(32,37,42), rgb(25,29,33))
                 + inset 0 1px 0 rgba(255,255,255,.09),
                 border rgba(255,255,255,.07)
     light       ground #F3F6F8, band #EDF1F4, card #FFFFFF,
                 ink #0A0D0F / #4A535D / #626B75,
                 border rgba(15,23,42,.08)
     geometry    14px card radius, 12px control radius, 999px pills

   The MODULES built from that vocabulary are this page's own: an asymmetric
   hero with an abstract graphic, a dividerless surfaces band, a bento grid
   of unequal tiles, an audit-report panel, a vertical phase timeline and a
   flat FAQ list. None of them appears on the homepage.

   SCOPING
   -------
   Every rule is scoped to `.tk-seo-page`, a wrapper that exists only in
   resources/views/seo.blade.php, so this sheet matches nothing anywhere else
   on the site.

   TWO things on the page are still shared components, deliberately:
     the package cards   .logo-slide.animated-package-card — surface comes
                         from the global tbtk-packages-shared.css
     the reviews slider  section.customreviews — tbtk-testimonials-redesign.css
     the booking form    partials.home.consultation, which carries its own
                         scoped styles and is not touched here
   ========================================================================== */

/* ==========================================================================
   1. PAGE GROUND AND SECTION RHYTHM
   ========================================================================== */
.tk-seo-page {
    background: #0A0C0D;
}

html[data-tk-theme="light"] .tk-seo-page {
    background: #F3F6F8;
}

.tk-seo-section {
    position: relative;
    padding: clamp(44px, 4.2vw, 60px) 0;
    overflow: hidden;
}

.tk-seo-section--band {
    background: #0D1012;
}

html[data-tk-theme="light"] .tk-seo-section--band {
    background: #EDF1F4;
}

.tk-seo-section--wash::before {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 84% 78%, rgba(0, 115, 252, 0.05), transparent 34%);
    pointer-events: none;
    content: "";
}

html[data-tk-theme="light"] .tk-seo-section--wash::before {
    background: radial-gradient(circle at 84% 78%, rgba(0, 115, 252, 0.04), transparent 34%);
}

.tk-seo-section > .container {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   2. SHARED TYPE AND CONTROLS
   ==========================================================================
   The heading type scale is the site's. The LAYOUT of the headings is not:
   this page alternates between a centred heading, a left-aligned one and a
   split head (title left, lede right) to give it its own rhythm. */
.tk-seo-head {
    max-width: 720px;
    margin: 0 auto clamp(32px, 4vw, 52px);
    text-align: center;
}

.tk-seo-head--left {
    max-width: 640px;
    margin-left: 0;
    text-align: left;
}

.tk-seo-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px 48px;
    align-items: end;
    max-width: none;
    margin-bottom: clamp(32px, 4vw, 52px);
    text-align: left;
}

.tk-seo-head--split p {
    margin: 0;
    padding-bottom: 4px;
}

.tk-seo-kicker {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--primary-color, #0073FC);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tk-seo-head h2 {
    margin: 0;
    color: #F3F5F7;
    font-family: var(--font-primary), "Montserrat", sans-serif;
    font-size: clamp(30px, 3.4vw, 42px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.025em;
    text-transform: uppercase;
}

.tk-seo-head p {
    max-width: 640px;
    margin: 13px auto 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 15px;
    line-height: 1.62;
}

.tk-seo-head--left p {
    margin-left: 0;
}

html[data-tk-theme="light"] .tk-seo-head h2 {
    color: #0A0D0F;
}

html[data-tk-theme="light"] .tk-seo-head p {
    color: #626B75;
}

/* ---- Pill ------------------------------------------------------------- */
.tk-seo-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 7px 16px;
    border: 1px solid rgba(0, 115, 252, 0.35);
    border-radius: 999px;
    background: rgba(0, 115, 252, 0.10);
    color: var(--primary-color, #0073FC);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tk-seo-badge svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* ---- Buttons ----------------------------------------------------------
   Same blue as every primary control on the site, but this page's own pair:
   a filled primary and an OUTLINE secondary (the homepage hero's secondary
   is a filled dark surface). */
.tk-seo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 48px;
    padding: 0 26px;
    border: 0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.055em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.tk-seo-btn:hover,
.tk-seo-btn:focus-visible {
    transform: translateY(-2px);
}

.tk-seo-btn i {
    font-size: 11px;
}

.tk-seo-btn--primary,
.tk-seo-btn--primary:hover,
.tk-seo-btn--primary:focus-visible {
    color: #FFFFFF;
}

.tk-seo-btn--primary {
    background: linear-gradient(var(--primary-color, #0073FC), var(--primary-color-dark, #005BC7));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 3px 7px rgba(0, 0, 0, 0.5);
}

.tk-seo-btn--primary:hover,
.tk-seo-btn--primary:focus-visible {
    background: linear-gradient(var(--primary-color-light, #66ACFF), var(--primary-color, #0073FC));
}

.tk-seo-btn--ghost {
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: #F3F5F7;
}

.tk-seo-btn--ghost:hover,
.tk-seo-btn--ghost:focus-visible {
    border-color: rgba(0, 115, 252, 0.5);
    background: rgba(0, 115, 252, 0.08);
    color: #FFFFFF;
}

html[data-tk-theme="light"] .tk-seo-btn--ghost {
    border-color: rgba(15, 23, 42, 0.16);
    color: #0A0D0F;
}

html[data-tk-theme="light"] .tk-seo-btn--ghost:hover,
html[data-tk-theme="light"] .tk-seo-btn--ghost:focus-visible {
    border-color: rgba(0, 115, 252, 0.45);
    color: #0A0D0F;
}

/* ==========================================================================
   3. HERO — asymmetric copy + abstract graphic
   ==========================================================================
   Not the homepage hero. That one is a centred-ish copy block over a 2x2
   portfolio grid, with boxed stat cards. This is a 2-column split whose
   right side is a single piece of generated line art, and whose proof row is
   a flat rule-separated strip rather than boxed chips. */
.tk-seo-hero {
    position: relative;
    /* the site header is position:fixed, so the first section clears it */
    padding: 134px 0 clamp(48px, 5vw, 64px);
    overflow: hidden;
}

.tk-seo-hero-aura {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(70% 60% at 78% 28%, rgba(0, 115, 252, 0.10), transparent 62%),
        radial-gradient(50% 50% at 8% 4%, rgba(0, 115, 252, 0.05), transparent 60%);
    pointer-events: none;
}

html[data-tk-theme="light"] .tk-seo-hero-aura {
    background:
        radial-gradient(70% 60% at 78% 28%, rgba(0, 115, 252, 0.08), transparent 62%),
        radial-gradient(120% 90% at 18% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 58%);
}

.tk-seo-hero > .container {
    position: relative;
    z-index: 1;
}

.tk-seo-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}

.tk-seo-hero-title {
    margin: 0 0 20px;
    color: #FFFFFF;
    font-family: var(--font-primary), "Montserrat", sans-serif;
    font-size: clamp(36px, 4.1vw, 56px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.028em;
    text-transform: none;
}

/* The accent is an underline, not coloured text — the homepage hero colours
   the words themselves, and this page should not repeat that. */
.tk-seo-hero-mark {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

.tk-seo-hero-mark::after {
    position: absolute;
    right: 0;
    bottom: 0.04em;
    left: 0;
    height: 0.14em;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-color, #0073FC), rgba(0, 115, 252, 0.18));
    content: "";
}

.tk-seo-hero-lede {
    max-width: 52ch;
    margin: 0 0 30px;
    color: rgba(255, 255, 255, 0.64);
    font-size: 16px;
    line-height: 1.68;
}

.tk-seo-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* The proof row: a rule and five words. No boxes. */
.tk-seo-hero-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 30px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    list-style: none;
}

.tk-seo-hero-strip li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tk-seo-hero-strip li::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary-color, #0073FC);
    content: "";
}

html[data-tk-theme="light"] .tk-seo-hero-title {
    color: #0A0D0F;
}

html[data-tk-theme="light"] .tk-seo-hero-lede {
    color: #4A535D;
}

html[data-tk-theme="light"] .tk-seo-hero-strip {
    border-top-color: rgba(15, 23, 42, 0.10);
}

html[data-tk-theme="light"] .tk-seo-hero-strip li {
    color: #626B75;
}

/* ---- The graphic ------------------------------------------------------- */
.tk-seo-hero-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.tk-seo-hero-art svg {
    width: 100%;
    max-width: 460px;
    height: auto;
    animation: tkSeoFloat 11s ease-in-out infinite;
}

.tk-seo-art-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: tkSeoSpin 46s linear infinite;
}

/* The trend-line markers are knocked out of the line, so they have to carry
   the hero's ground colour in each theme rather than a hardcoded dark fill. */
.tk-seo-art-node {
    fill: #0A0C0D;
}

html[data-tk-theme="light"] .tk-seo-art-node {
    fill: #F3F6F8;
}

@keyframes tkSeoFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

@keyframes tkSeoSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tk-seo-hero-art svg,
    .tk-seo-art-ring {
        animation: none;
    }
}

/* ==========================================================================
   4. SURFACES BAND — where customers find you
   ==========================================================================
   Four items separated by hairlines. No cards at all, which is what keeps it
   from reading as any grid on this site. */
.tk-seo-surfaces {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tk-seo-surface {
    position: relative;
    padding: 30px 26px;
}

.tk-seo-surface + .tk-seo-surface {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.tk-seo-surface-art {
    display: block;
    width: 38px;
    height: 38px;
    margin-bottom: 18px;
    color: var(--primary-color, #0073FC);
}

.tk-seo-surface-art svg {
    width: 100%;
    height: 100%;
}

.tk-seo-surface h3 {
    margin: 0 0 9px;
    color: #F3F5F7;
    font-family: var(--font-primary), "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.005em;
    line-height: 1.3;
}

.tk-seo-surface p {
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13.5px;
    line-height: 1.64;
}

html[data-tk-theme="light"] .tk-seo-surfaces {
    border-top-color: rgba(15, 23, 42, 0.10);
    border-bottom-color: rgba(15, 23, 42, 0.10);
}

html[data-tk-theme="light"] .tk-seo-surface + .tk-seo-surface {
    border-left-color: rgba(15, 23, 42, 0.10);
}

html[data-tk-theme="light"] .tk-seo-surface h3 {
    color: #0A0D0F;
}

html[data-tk-theme="light"] .tk-seo-surface p {
    color: #626B75;
}

/* ==========================================================================
   5. BENTO — what's included
   ==========================================================================
   Six tiles at four different sizes on a 12-column grid. The lead tile is
   two rows tall and carries its own sub-list; the site's uniform card grids
   are all equal-size, so the unequal rhythm is what distinguishes this. */
.tk-seo-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.tk-seo-tile {
    display: flex;
    min-width: 0;
    padding: 24px 22px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    background: linear-gradient(rgb(32, 37, 42), rgb(25, 29, 33));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 6px 16px rgba(0, 0, 0, 0.42);
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.tk-seo-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 115, 252, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        0 10px 22px rgba(0, 0, 0, 0.5);
}

.tk-seo-tile--lead { grid-column: 1 / span 7;  grid-row: 1 / span 2; }
.tk-seo-tile--b    { grid-column: 8 / span 5;  grid-row: 1; }
.tk-seo-tile--c    { grid-column: 8 / span 5;  grid-row: 2; }
.tk-seo-tile--d    { grid-column: 1 / span 4;  grid-row: 3; }
.tk-seo-tile--e    { grid-column: 5 / span 4;  grid-row: 3; }
.tk-seo-tile--f    { grid-column: 9 / span 4;  grid-row: 3; }

/* The lead tile earns a faint blue ground so the grid has a focal point. */
.tk-seo-tile--lead {
    padding: 30px 28px;
    border-color: rgba(0, 115, 252, 0.22);
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(0, 115, 252, 0.13), transparent 58%),
        linear-gradient(rgb(32, 37, 42), rgb(25, 29, 33));
}

/* The index is decorative, but at the original rgba(255,255,255,.26) /
   #9AA3AC it measured 2.24:1 and 2.36:1 — faint enough to read as a render
   artifact rather than a label. Lifted to ~4:1 in both themes; still
   clearly subordinate to the tile heading. */
.tk-seo-tile-num {
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.42);
    font-family: var(--font-primary), "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.tk-seo-tile h3 {
    margin: 0 0 10px;
    color: #F3F5F7;
    font-family: var(--font-primary), "Montserrat", sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.26;
}

.tk-seo-tile--lead h3 {
    font-size: clamp(21px, 2vw, 26px);
    line-height: 1.16;
}

.tk-seo-tile p {
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13.5px;
    line-height: 1.66;
}

.tk-seo-tile--lead p {
    max-width: 46ch;
    font-size: 14.5px;
}

.tk-seo-tile-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    margin: 22px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    list-style: none;
}

.tk-seo-tile-list li {
    position: relative;
    padding-left: 22px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.5;
}

.tk-seo-tile-list li::before {
    position: absolute;
    top: 0.45em;
    left: 0;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(0, 115, 252, 0.55);
    border-radius: 3px;
    background: rgba(0, 115, 252, 0.18);
    content: "";
}

html[data-tk-theme="light"] .tk-seo-tile {
    border-color: rgba(15, 23, 42, 0.08);
    background: linear-gradient(#FFFFFF, #F8FAFB);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 6px 18px rgba(15, 23, 42, 0.07);
}

html[data-tk-theme="light"] .tk-seo-tile:hover {
    border-color: rgba(0, 115, 252, 0.3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 10px 24px rgba(15, 23, 42, 0.11);
}

html[data-tk-theme="light"] .tk-seo-tile--lead {
    border-color: rgba(0, 115, 252, 0.26);
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(0, 115, 252, 0.12), transparent 58%),
        linear-gradient(#FFFFFF, #F4F8FB);
}

html[data-tk-theme="light"] .tk-seo-tile-num {
    color: #7B848D;
}

html[data-tk-theme="light"] .tk-seo-tile h3 {
    color: #0A0D0F;
}

html[data-tk-theme="light"] .tk-seo-tile p {
    color: #626B75;
}

html[data-tk-theme="light"] .tk-seo-tile-list {
    border-top-color: rgba(15, 23, 42, 0.08);
}

html[data-tk-theme="light"] .tk-seo-tile-list li {
    color: #4A535D;
}

/* ==========================================================================
   6. AUDIT PANEL — what a free audit covers
   ==========================================================================
   A report-shaped module: a titled bar over two columns of named checks. */
.tk-seo-audit {
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    background: linear-gradient(rgb(32, 37, 42), rgb(25, 29, 33));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 10px 28px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.tk-seo-audit-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);
    color: rgba(255, 255, 255, 0.72);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 0.02em;
}

.tk-seo-audit-dots {
    display: inline-flex;
    gap: 6px;
    flex: 0 0 auto;
}

.tk-seo-audit-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
}

.tk-seo-audit-dots span:first-child {
    background: rgba(0, 115, 252, 0.6);
}

.tk-seo-audit-count {
    margin-left: auto;
    color: var(--primary-color, #0073FC);
    font-weight: 700;
}

.tk-seo-audit-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.tk-seo-audit-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

/* the vertical split between the two columns */
.tk-seo-audit-row:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.055);
}

.tk-seo-audit-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: rgba(0, 115, 252, 0.16);
    color: var(--primary-color, #0073FC);
    font-size: 10px;
}

.tk-seo-audit-text {
    min-width: 0;
}

.tk-seo-audit-text strong {
    display: block;
    margin-bottom: 3px;
    color: #F3F5F7;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.tk-seo-audit-text span {
    color: rgba(255, 255, 255, 0.52);
    font-size: 12.5px;
    line-height: 1.55;
}

.tk-seo-audit-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.02);
}

.tk-seo-audit-foot p {
    max-width: 58ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13.5px;
    line-height: 1.6;
}

html[data-tk-theme="light"] .tk-seo-audit {
    border-color: rgba(15, 23, 42, 0.08);
    background: #FFFFFF;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 10px 28px rgba(15, 23, 42, 0.08);
}

html[data-tk-theme="light"] .tk-seo-audit-bar {
    border-bottom-color: rgba(15, 23, 42, 0.08);
    background: #F6F8FA;
    color: #4A535D;
}

html[data-tk-theme="light"] .tk-seo-audit-dots span {
    background: rgba(15, 23, 42, 0.14);
}

html[data-tk-theme="light"] .tk-seo-audit-dots span:first-child {
    background: rgba(0, 115, 252, 0.6);
}

html[data-tk-theme="light"] .tk-seo-audit-row {
    border-bottom-color: rgba(15, 23, 42, 0.07);
}

html[data-tk-theme="light"] .tk-seo-audit-row:nth-child(odd) {
    border-right-color: rgba(15, 23, 42, 0.07);
}

html[data-tk-theme="light"] .tk-seo-audit-text strong {
    color: #0A0D0F;
}

html[data-tk-theme="light"] .tk-seo-audit-text span {
    color: #626B75;
}

html[data-tk-theme="light"] .tk-seo-audit-foot {
    background: #F6F8FA;
}

html[data-tk-theme="light"] .tk-seo-audit-foot p {
    color: #4A535D;
}

/* ==========================================================================
   7. TIMELINE — what the first months look like
   ==========================================================================
   A vertical spine beside a left-aligned heading. Vertical on purpose: the
   site's only other sequence is a horizontal numbered row, and repeating it
   is what made the earlier draft read as the homepage. */
.tk-seo-phases {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

.tk-seo-phases .tk-seo-head {
    margin-bottom: 0;
}

.tk-seo-timeline {
    position: relative;
    margin: 0;
    padding: 4px 0 0 48px;
    list-style: none;
}

.tk-seo-timeline::before {
    position: absolute;
    top: 18px;
    bottom: 34px;
    left: 14px;
    width: 2px;
    background: linear-gradient(
        180deg,
        var(--primary-color, #0073FC),
        rgba(0, 115, 252, 0.35) 55%,
        rgba(255, 255, 255, 0.07)
    );
    content: "";
}

.tk-seo-phase {
    position: relative;
    padding-bottom: 30px;
}

.tk-seo-phase:last-child {
    padding-bottom: 0;
}

.tk-seo-phase-node {
    position: absolute;
    top: 6px;
    left: -48px;
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(0, 115, 252, 0.45);
    border-radius: 50%;
    background: #0A0C0D;
}

.tk-seo-phase-node::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary-color, #0073FC);
    transform: translate(-50%, -50%);
    content: "";
}

.tk-seo-phase-when {
    display: block;
    margin-bottom: 6px;
    color: var(--primary-color, #0073FC);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tk-seo-phase h3 {
    margin: 0 0 8px;
    color: #F3F5F7;
    font-family: var(--font-primary), "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.26;
}

.tk-seo-phase p {
    max-width: 54ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
    line-height: 1.66;
}

html[data-tk-theme="light"] .tk-seo-timeline::before {
    background: linear-gradient(
        180deg,
        var(--primary-color, #0073FC),
        rgba(0, 115, 252, 0.35) 55%,
        rgba(15, 23, 42, 0.10)
    );
}

html[data-tk-theme="light"] .tk-seo-phase-node {
    border-color: rgba(0, 115, 252, 0.4);
    background: #F3F6F8;
}

html[data-tk-theme="light"] .tk-seo-phase h3 {
    color: #0A0D0F;
}

html[data-tk-theme="light"] .tk-seo-phase p {
    color: #626B75;
}

/* ==========================================================================
   8. PACKAGES
   ==========================================================================
   The cards themselves are the site's shared package component
   (.logo-slide.animated-package-card > .product-card ...), whose surface,
   type colours, feature list and START NOW button come from the global
   tbtk-packages-shared.css in both themes.

   Two things do NOT reach this page and are restated below:

   1. The card's GEOMETRY and type scale. The `.home-package-card` block
      lives in a page-level <style> inside index.blade.php, so it is
      homepage-only. Without it the <img> keeps its width="920" height="1160"
      presentational height and each card renders ~1460px tall (measured).

   2. The row. Bootstrap's `xl` tier is not loaded on this site, so
      `col-xl-4` matches nothing and `col-md-6` would lay the three plans out
      two-up with one orphan underneath. index.blade.php replaces the
      Bootstrap row with a three-column CSS grid from 768px up; the same two
      rules are restated here. Below 768px Bootstrap's own `.row > *` keeps
      the cards stacked. */
@media (min-width: 768px) {
    .tk-seo-packages-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        margin-right: 0;
        margin-left: 0;
    }

    .tk-seo-packages-row > [class*="col-"] {
        width: auto;
        max-width: none;
        padding-right: 0;
        padding-left: 0;
    }
}

.tk-seo-page .home-package-card {
    position: relative;
    height: 100%;
    max-width: 360px;
    padding: 10px;
    overflow: hidden;
}

.tk-seo-page .home-package-card .product-card {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.tk-seo-page .home-package-card .tk-static-container {
    display: flex;
    flex-direction: column;
}

/* object-fit:cover plus an explicit height is what caps the card. */
.tk-seo-page .home-package-card .featured-img {
    display: block;
    width: 100%;
    height: clamp(145px, 17vw, 205px);
    background: #090909;
    object-fit: cover;
    object-position: center;
}

.tk-seo-page .home-package-card .tk-product-info {
    gap: 5px;
}

.tk-seo-page .home-package-card .tk-product-info .tk-title {
    font-size: 16px;
    text-transform: uppercase;
    text-shadow: none;
}

.tk-seo-page .home-package-card .tk-product-info .tk-category {
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tk-seo-page .home-package-delivery {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 6px;
    color: var(--primary-color, #0073FC);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.tk-seo-page .home-package-price-row {
    align-items: center;
    gap: 12px;
}

.tk-seo-page .home-package-card .tk-product-info p.tk-price {
    font-size: 20px;
    line-height: 1.2;
}

.tk-seo-page .home-package-card .tk-switch-wrap {
    flex: 1;
}

.tk-seo-page .home-package-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    padding: 5px 10px;
    border-radius: 8px;
    background: linear-gradient(var(--primary-color, #0073FC), var(--primary-color-dark, #005BC7));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 3px 8px rgba(0, 0, 0, 0.4);
    color: #FFFFFF;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The feature list stays open, as it does on the service-detail pages — the
   homepage's "View package details" toggle belongs to #logodeal's own
   show/hide rules and script and is deliberately not reproduced. */

.tk-seo-assurance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 26px;
    margin: 34px auto 0;
    padding: 0;
    list-style: none;
}

.tk-seo-assurance li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.tk-seo-assurance i {
    color: var(--primary-color, #0073FC);
    font-size: 12px;
}

html[data-tk-theme="light"] .tk-seo-assurance li {
    color: #4A535D;
}

/* ==========================================================================
   9. FAQ — flat list
   ==========================================================================
   Native <details>, so there is no script and no collision with the legacy
   Bootstrap accordion used elsewhere. Rules rather than cards, so it reads
   as an index and not as another row of the site's card component. */
.tk-seo-faq {
    max-width: 840px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tk-seo-faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tk-seo-faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 4px;
    color: #F3F5F7;
    font-family: var(--font-primary), "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
    transition: color 0.18s ease;
}

.tk-seo-faq-item > summary::-webkit-details-marker { display: none; }
.tk-seo-faq-item > summary::marker { content: ""; }

.tk-seo-faq-item > summary:hover,
.tk-seo-faq-item[open] > summary {
    color: var(--primary-color, #0073FC);
}

/* A drawn plus that becomes a minus — no icon font dependency. */
.tk-seo-faq-sign {
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.tk-seo-faq-sign::before,
.tk-seo-faq-sign::after {
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.22s ease, opacity 0.22s ease;
    content: "";
}

.tk-seo-faq-sign::before {
    width: 16px;
    height: 2px;
}

.tk-seo-faq-sign::after {
    width: 2px;
    height: 16px;
}

.tk-seo-faq-item[open] .tk-seo-faq-sign::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

.tk-seo-faq-answer {
    max-width: 72ch;
    padding: 0 4px 24px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 14.5px;
    line-height: 1.72;
}

.tk-seo-faq-answer p {
    margin: 0;
}

html[data-tk-theme="light"] .tk-seo-faq {
    border-top-color: rgba(15, 23, 42, 0.10);
}

html[data-tk-theme="light"] .tk-seo-faq-item {
    border-bottom-color: rgba(15, 23, 42, 0.10);
}

html[data-tk-theme="light"] .tk-seo-faq-item > summary {
    color: #0A0D0F;
}

html[data-tk-theme="light"] .tk-seo-faq-item > summary:hover,
html[data-tk-theme="light"] .tk-seo-faq-item[open] > summary {
    color: var(--primary-color-dark, #005BC7);
}

html[data-tk-theme="light"] .tk-seo-faq-answer {
    color: #4A535D;
}

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
    .tk-seo-hero-grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    }

    /* the bento folds to a 6-column frame: lead full width, then pairs */
    .tk-seo-bento {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .tk-seo-tile--lead { grid-column: 1 / span 6; grid-row: 1; }
    .tk-seo-tile--b    { grid-column: 1 / span 3; grid-row: 2; }
    .tk-seo-tile--c    { grid-column: 4 / span 3; grid-row: 2; }
    .tk-seo-tile--d    { grid-column: 1 / span 2; grid-row: 3; }
    .tk-seo-tile--e    { grid-column: 3 / span 2; grid-row: 3; }
    .tk-seo-tile--f    { grid-column: 5 / span 2; grid-row: 3; }

    .tk-seo-surfaces {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* with two per row, only the second of each pair takes a left rule */
    .tk-seo-surface + .tk-seo-surface {
        border-left: 0;
    }

    .tk-seo-surface:nth-child(even) {
        border-left: 1px solid rgba(255, 255, 255, 0.08);
    }

    .tk-seo-surface:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    html[data-tk-theme="light"] .tk-seo-surface:nth-child(even) {
        border-left-color: rgba(15, 23, 42, 0.10);
    }

    html[data-tk-theme="light"] .tk-seo-surface:nth-child(n + 3) {
        border-top-color: rgba(15, 23, 42, 0.10);
    }
}

@media (max-width: 991px) {
    .tk-seo-hero {
        padding-top: 112px;
    }

    .tk-seo-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .tk-seo-hero-art {
        order: -1;
    }

    .tk-seo-hero-art svg {
        max-width: 340px;
    }

    .tk-seo-head--split,
    .tk-seo-phases {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .tk-seo-phases {
        gap: 34px;
    }

    .tk-seo-audit-rows {
        grid-template-columns: minmax(0, 1fr);
    }

    .tk-seo-audit-row:nth-child(odd) {
        border-right: 0;
    }
}

@media (max-width: 767px) {
    .tk-seo-section {
        padding: 44px 0;
    }

    .tk-seo-hero {
        padding: 96px 0 48px;
    }

    .tk-seo-hero-title {
        font-size: clamp(30px, 8.4vw, 40px);
    }

    .tk-seo-hero-lede {
        font-size: 15px;
    }

    .tk-seo-btn {
        width: 100%;
    }

    .tk-seo-bento {
        grid-template-columns: minmax(0, 1fr);
    }

    /* every tile becomes one full-width row, in source order */
    .tk-seo-tile--lead,
    .tk-seo-tile--b,
    .tk-seo-tile--c,
    .tk-seo-tile--d,
    .tk-seo-tile--e,
    .tk-seo-tile--f {
        grid-column: 1;
        grid-row: auto;
    }

    .tk-seo-tile--lead {
        padding: 24px 20px;
    }

    .tk-seo-tile-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .tk-seo-surfaces {
        grid-template-columns: minmax(0, 1fr);
    }

    .tk-seo-surface {
        padding: 24px 2px;
    }

    .tk-seo-surface:nth-child(even) {
        border-left: 0;
    }

    .tk-seo-surface + .tk-seo-surface {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    html[data-tk-theme="light"] .tk-seo-surface + .tk-seo-surface {
        border-top-color: rgba(15, 23, 42, 0.10);
    }

    .tk-seo-audit-bar,
    .tk-seo-audit-row,
    .tk-seo-audit-foot {
        padding-right: 18px;
        padding-left: 18px;
    }

    .tk-seo-timeline {
        padding-left: 40px;
    }

    .tk-seo-phase-node {
        left: -40px;
        width: 26px;
        height: 26px;
    }

    .tk-seo-timeline::before {
        left: 12px;
    }

    .tk-seo-faq-item > summary {
        padding: 17px 2px;
        font-size: 15px;
    }

    .tk-seo-faq-answer {
        padding: 0 2px 20px;
        font-size: 14px;
    }
}