/*
Theme Name: Think Comms Hybrid
Theme URI: https://www.think-comms.com/
Author: Think Comms Ltd
Description: The original Think Comms look with a modern dark hero, video window and SIM-shaped plan cards.
Version: 1.4.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: think-comms-hybrid
*/
/* Think Comms - base styles (the original look). The Hybrid theme adds hybrid.css on top. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("assets/fonts/montserrat-latin.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/nunito-latin.woff2") format("woff2"); }

:root {
  --bg: #FFFFFF;
  --bg-alt: #F7F9FC;
  --card: #FFFFFF;
  --text: #0A0A0A;
  --body: #5E6176;
  --line: #E4E8EF;
  --blue: #0E53A4;
  --blue-2: #2193D1;
  --grad: linear-gradient(90deg, #0E53A4, #2193D1);
  --shadow: 0 10px 30px -12px rgba(14, 40, 80, .22);
  --head: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --text-font: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wrap: 70rem;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --inner: min(var(--wrap), calc(100% - 2 * var(--gutter)));
  --ok: #1F8A5B;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0B1424; --bg-alt: #0F1B2F; --card: #13223A; --text: #EEF3F9; --body: #A9B6C8; --line: #22344F; --blue: #5EA3EC; --blue-2: #52B6EA; --shadow: 0 10px 30px -12px rgba(0,0,0,.6); --ok: #4CC08A; color-scheme: dark; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--body); font: 400 1.0625rem/1.7 var(--text-font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: .18em; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--blue-2); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--head); color: var(--text); line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 600; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 600; }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0; }
figure { margin: 0; }
.wrap { width: var(--inner); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--card); padding: .5rem 1rem; }
.tc-eyebrow { font-family: var(--head); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.tc-eyebrow a { color: inherit; text-decoration: none; }
.tc-eyebrow a:hover { text-decoration: underline; }

/* WordPress adds an extra wrapper inside groups for this kind of theme; let our grids see straight through it */
.wp-block-group__inner-container { display: contents; }

/* WordPress flow-layout spacing is replaced by our own gaps */
.tc-main :where(.wp-block-group, .wp-block-group__inner-container) > * { margin-block: 0; }
.tc-main .wp-block-image { margin: 0; }
.tc-main .wp-block-list { margin: 0; padding-left: 1.2rem; }

/* Header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--bg); box-shadow: 0 2px 18px -8px rgba(14,40,80,.25); }
.admin-bar .site-header { top: calc(32px + env(safe-area-inset-top, 0px)); }
@media (max-width: 782px) { .admin-bar .site-header { top: env(safe-area-inset-top, 0px); } }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; padding-block: .9rem; }
.brand { line-height: 0; flex-shrink: 0; }
.brand img { width: 12rem; }
.brand .logo-dark { display: none; }
@media (prefers-color-scheme: dark) { .brand .logo-light { display: none; } .brand .logo-dark { display: block; } }
.nav { display: flex; gap: 1.5rem; margin-left: auto; }
.nav a { font-family: var(--head); font-weight: 500; font-size: .92rem; color: var(--text); text-decoration: none; padding-block: .5rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--blue); }
.header-call { display: flex; align-items: center; gap: 1rem; }
.header-call .tel { font-family: var(--head); font-weight: 700; color: var(--text); text-decoration: none; white-space: nowrap; }
.menu-btn { display: none; margin-left: auto; border: 0; border-radius: 999px; min-height: 44px; padding: .5rem 1.1rem; background: var(--grad); color: #fff; font: 600 .9rem var(--head); cursor: pointer; }
@media (max-width: 960px) {
  .menu-btn { display: inline-block; }
  .header-call .btn { display: none; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--bg); box-shadow: 0 12px 20px -12px rgba(14,40,80,.3); padding: .5rem var(--gutter) 1rem; }
  .nav.open { display: flex; }
  .nav a { padding-block: .9rem; border-bottom: 1px solid var(--line); }
  .header-call { order: 3; }
}
@media (max-width: 520px) { .header-call .tel { display: none; } .brand img { width: 10rem; } }

/* Buttons (theme buttons and WordPress button blocks) */
.btn, .tc-main .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: .85rem 2rem; font: 600 .95rem/1.2 var(--head); text-decoration: none; cursor: pointer; border: 0; background: var(--grad); color: #fff; box-shadow: 0 8px 18px -8px rgba(14,83,164,.6); white-space: nowrap; transition: transform .15s, box-shadow .15s; min-height: 44px; }
.btn:hover, .tc-main .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -8px rgba(14,83,164,.7); color: #fff; }
.tc-main .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--blue); border: 1.5px solid currentColor; box-shadow: none; padding: .78rem 1.9rem; }
.tc-main .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.tc-main .wp-block-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.tc-main .wp-block-buttons > .wp-block-button { margin: 0; }
@media (prefers-reduced-motion: reduce) { .btn, .tc-main .wp-block-button__link { transition: none; } .btn:hover, .tc-main .wp-block-button__link:hover { transform: none; } }

/* Hero */
.tc-main > .tc-hero { width: var(--inner); margin-inline: auto; padding-block: clamp(3rem, 7vw, 5.5rem); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.tc-main > .tc-hero.tc-hero-solo { grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.tc-hero-solo .tc-hero-copy { max-width: 46rem; }
.tc-hero-copy { display: grid; gap: 1.25rem; justify-items: start; min-width: 0; }
.tc-hero-copy .wp-block-buttons { margin-top: .25rem; }
.tc-lead { font-size: 1.15rem; }
.tc-hero-media { position: relative; min-width: 0; }
.tc-hero-media img { border-radius: 2rem; box-shadow: var(--shadow); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tc-hero-media.tc-has-video img { aspect-ratio: 1 / 1; }
.tc-video-badge { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: block; background: rgba(255,255,255,.95); color: #5E6176; border-radius: 1rem; padding: .75rem 1rem .75rem 4.4rem; box-shadow: var(--shadow); font-size: .92rem; line-height: 1.35; min-height: 4rem; }
.tc-video-badge::before { content: ""; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath d='M0 0l11 7-11 7z' fill='%23fff'/%3E%3C/svg%3E"), var(--grad); background-repeat: no-repeat; background-position: 55% 50%, 0 0; background-size: 11px 14px, cover; }
.tc-video-badge strong { display: block; font-family: var(--head); color: #0A0A0A; font-size: .95rem; }
.tc-hero-media video { width: 100%; border-radius: 2rem; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 860px) { .tc-main > .tc-hero { grid-template-columns: minmax(0, 1fr); } .tc-hero-media { max-width: 30rem; } }

/* Networks row */
.tc-main > .tc-networks { width: var(--inner); margin: 0 auto; padding-bottom: 2rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .5rem 2.5rem; font-size: .95rem; }
.tc-networks strong { font-family: var(--head); font-weight: 700; font-size: 1.35rem; color: var(--text); }

/* Sections */
.tc-section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.tc-section.is-alt { background: var(--bg-alt); }
.tc-section > *, .tc-section > .wp-block-group__inner-container > * { width: var(--inner); margin-inline: auto !important; }
.tc-section > * + *, .tc-section > .wp-block-group__inner-container > * + * { margin-top: 2.5rem !important; }
.tc-section .tc-head { max-width: 46rem; }
.tc-head { display: grid; gap: .9rem; justify-items: center; text-align: center; }
.tc-note { text-align: center; font-size: .95rem; }
.tc-center { text-align: center; }
.tc-center .wp-block-buttons { justify-content: center; }

/* Icon cards */
.tc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
@media (max-width: 960px) { .tc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tc-cards { grid-template-columns: minmax(0, 1fr); } }
.tc-card { background: var(--card); border-radius: 1.75rem; box-shadow: var(--shadow); padding: 2.25rem 1.75rem; display: grid; gap: .8rem; justify-items: center; text-align: center; align-content: start; min-width: 0; }
.tc-card .wp-block-image img { width: auto; height: 6.5rem; max-width: 7rem; object-fit: contain; margin-bottom: .4rem; }
.tc-card p { font-size: .98rem; }

/* Photo cards */
.tc-photo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.75rem; }
.tc-photo-cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .tc-photo-cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tc-photo-cards:has(> :nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); } }
.tc-photo-card { background: var(--card); border-radius: 1.75rem; box-shadow: var(--shadow); overflow: hidden; display: grid; align-content: start; min-width: 0; }
.tc-photo-card .wp-block-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tc-photo-card-body { padding: 1.5rem 1.6rem 1.9rem; display: grid; gap: .55rem; text-align: center; }
.tc-photo-card-body p { font-size: .97rem; }
.tc-photo-card h3 a { color: inherit; text-decoration: none; }
.tc-photo-card h3 a:hover { color: var(--blue); }

/* Plan cards (original price-table style) */
.tc-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 1000px) { .tc-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tc-plans { grid-template-columns: minmax(0, 1fr); } }
.tc-plan { background: var(--card); border-radius: 1.25rem; border-top: 4px solid var(--blue); box-shadow: var(--shadow); padding: 1.75rem 1.4rem; display: grid; grid-template-rows: auto 3.4rem auto 1fr auto; gap: .35rem; text-align: center; min-width: 0; }
.tc-plan-kind { font-family: var(--head); font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.tc-plan-data { font-family: var(--head); color: var(--text); font-size: 2.6rem; font-weight: 700; line-height: 1; align-self: end; white-space: nowrap; }
.tc-plan-data.is-word { font-size: 2rem; }
@media (max-width: 1100px) and (min-width: 1001px) { .tc-plan-data { font-size: 2.2rem; } }
.tc-plan-unit { font-size: .95rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.tc-plan .wp-block-list { list-style: none; padding: 0; margin: 0 0 .6rem; }
.tc-plan .wp-block-list li { padding-block: .55rem; border-bottom: 1px solid var(--line); font-size: .95rem; }
.tc-plan .wp-block-buttons { justify-content: center; }
.tc-plan .wp-block-button__link { padding: .7rem 1.4rem; font-size: .88rem; }

/* Image band */
.tc-band { position: relative; color: #fff; overflow: hidden; isolation: isolate; }
.tc-band .tc-band-bg { position: absolute; inset: 0; z-index: -2; }
.tc-band .tc-band-bg img { width: 100%; height: 100%; object-fit: cover; }
.tc-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(150deg, rgba(33,147,209,.72) 0%, rgba(14,83,164,.94) 100%); }
.tc-band-inner { width: var(--inner); margin-inline: auto; padding-block: clamp(4rem, 9vw, 6.5rem); display: grid; gap: 1.1rem; justify-items: center; text-align: center; }
.tc-band-inner h2 { color: #fff; }
.tc-band-inner p { color: rgba(255,255,255,.92); max-width: 42rem; }
.tc-band-inner .tc-eyebrow { color: #fff; opacity: .85; }
.tc-band .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.85); }

/* FAQ */
.tc-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.tc-faq-intro { display: grid; gap: 1rem; position: sticky; top: 7rem; }
.tc-faq-intro .wp-block-image img { width: 4rem; }
.tc-faq-list { display: grid; gap: .75rem; }
@media (max-width: 860px) { .tc-faq { grid-template-columns: minmax(0, 1fr); } .tc-faq-intro { position: static; } }
.tc-main .wp-block-details { background: var(--card); border-radius: 1rem; box-shadow: var(--shadow); padding: 0 1.4rem; margin: 0; }
.tc-main .wp-block-details summary { cursor: pointer; list-style: none; padding: 1.15rem 2.2rem 1.15rem 0; position: relative; font-family: var(--head); font-weight: 600; color: var(--text); }
.tc-main .wp-block-details summary::-webkit-details-marker { display: none; }
.tc-main .wp-block-details summary::after { content: ""; position: absolute; right: .2rem; top: 50%; width: .6rem; height: .6rem; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.tc-main .wp-block-details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.tc-main .wp-block-details > p { padding-bottom: 1.2rem; }

/* Text and picture side by side */
.tc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.tc-split.is-flip .tc-split-copy { order: 2; }
.tc-split .wp-block-image img { border-radius: 1.75rem; box-shadow: var(--shadow); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tc-split-copy { display: grid; gap: 1rem; min-width: 0; justify-items: start; }
@media (max-width: 860px) { .tc-split { grid-template-columns: minmax(0, 1fr); } .tc-split.is-flip .tc-split-copy { order: 0; } }
.tc-ticks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.tc-ticks p { background: var(--card); border-radius: 1.25rem; box-shadow: var(--shadow); padding: 1.4rem; text-align: center; font-family: var(--head); font-weight: 600; color: var(--text); }
@media (max-width: 700px) { .tc-ticks { grid-template-columns: minmax(0, 1fr); } }

/* Call-back request section */
.tc-quote { background: var(--grad); color: #fff; }
.tc-quote-inner { width: var(--inner); margin-inline: auto; padding-block: clamp(3.5rem, 8vw, 5.5rem); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .tc-quote-inner { grid-template-columns: minmax(0, 1fr); } }
.tc-quote h2 { color: #fff; }
.quote-copy { display: grid; gap: 1rem; }
.quote-copy p { color: rgba(255,255,255,.92); }
.quote-copy .tc-eyebrow { color: #fff; opacity: .85; }
.quote-copy .tel-big { font-family: var(--head); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.1rem); color: #fff; text-decoration: none; }
.hours { display: grid; gap: .2rem; font-size: .95rem; color: rgba(255,255,255,.9); }
.status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.status i { width: .6rem; height: .6rem; border-radius: 50%; background: #FFC46B; flex: none; }
.status.open i { background: #6BE3A4; }
.tc-quote .status { color: #fff; }
form.lead { background: var(--card); color: var(--text); border-radius: 1.5rem; padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; box-shadow: 0 20px 40px -20px rgba(0,0,0,.4); }
form.lead .full { grid-column: 1 / -1; }
@media (max-width: 520px) { form.lead { grid-template-columns: 1fr; } }
.field { display: grid; gap: .35rem; min-width: 0; }
.field label { font-family: var(--head); font-weight: 600; font-size: .88rem; color: var(--text); }
.field input { font: inherit; padding: .75rem 1rem; border-radius: .75rem; border: 1.5px solid var(--line); background: var(--bg-alt); color: var(--text); width: 100%; min-height: 44px; }
.field input:focus { border-color: var(--blue-2); outline: none; box-shadow: 0 0 0 3px rgba(33,147,209,.25); }
.field input[aria-invalid="true"] { border-color: #C2412D; }
.err { color: #C2412D; font-size: .85rem; }
form.lead .consent { font-size: .86rem; color: var(--body); }
form.lead .btn { justify-self: start; }
.form-done { grid-column: 1 / -1; padding: 1rem; border-radius: .75rem; background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--text); }
.hp { position: absolute; left: -9999px; }

/* GDPR pages */
.tc-legal { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; }
.tc-legal > *, .tc-legal > .wp-block-group__inner-container > * { min-width: 0; }
.tc-legal-nav { display: grid; gap: .25rem; align-content: start; position: sticky; top: 7rem; }
.tc-legal-nav a { text-decoration: none; color: var(--body); padding: .55rem .8rem; border-radius: .6rem; font-family: var(--head); font-size: .92rem; }
.tc-legal-nav a[aria-current="page"] { background: var(--bg-alt); color: var(--blue); font-weight: 600; }
.tc-legal-body { max-width: 44rem; display: grid; gap: 1rem; overflow-wrap: anywhere; }
.tc-legal-body h2 { font-size: 1.4rem; margin-top: 1.5rem; }
@media (max-width: 860px) { .tc-legal { grid-template-columns: minmax(0, 1fr); } .tc-legal-nav { position: static; display: flex; flex-wrap: wrap; } }

/* Footer */
.site-footer { background: var(--bg-alt); padding-block: 3.5rem 2rem; font-size: .93rem; }
.foot { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; }
.foot > div { display: grid; gap: .45rem; align-content: start; min-width: 0; }
.foot h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.foot a { color: var(--body); text-decoration: none; }
.foot a:hover { color: var(--blue); }
.foot strong a { color: var(--text); font-family: var(--head); }
.foot .status { color: var(--text); }
.foot .brand img { width: 11rem; }
.foot-base { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; font-size: .86rem; }
.foot-base div { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.foot-base a { color: var(--body); }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot { grid-template-columns: 1fr; } }

/* Cookie choice bar */
.cookie-bar { position: fixed; z-index: 60; left: var(--gutter); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 44rem; margin-inline: auto; background: var(--card); color: var(--text); border-radius: 1.25rem; box-shadow: 0 20px 50px -15px rgba(10,26,49,.45); border: 1px solid var(--line); padding: 1.1rem 1.25rem; display: flex; flex-wrap: wrap; gap: .9rem 1.25rem; align-items: center; }
.cookie-bar p { flex: 1 1 20rem; font-size: .93rem; color: var(--body); min-width: 0; }
.cookie-bar strong { color: var(--text); font-family: var(--head); }
.cookie-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie-actions .btn { padding: .7rem 1.3rem; font-size: .9rem; }
.cookie-actions .cookie-no { background: transparent; color: var(--text); border: 1.5px solid var(--line); box-shadow: none; }
.cookie-link { background: none; border: 0; padding: 0; font: inherit; color: var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
.cookie-link:hover { color: var(--blue); }
.cookie-toast { position: fixed; z-index: 61; right: 16px; bottom: 16px; background: var(--text); color: var(--bg); padding: .8rem 1rem; border-radius: .8rem; font-size: .9rem; }

/* Long email addresses wrap inside cards on small screens */
.tc-card a { overflow-wrap: anywhere; }

/* Four-box rows (GDPR page): 4 across on desktop, 2 x 2 on tablet, stacked on phone */
.tc-cards.tc-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.tc-cards-4 .tc-card h3 { font-size: 1.05rem; }
@media (max-width: 1100px) { .tc-cards.tc-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tc-cards.tc-cards-4 { grid-template-columns: minmax(0, 1fr); } }

/* Think Comms Hybrid: the original look plus a dark hero panel, presenter window, SIM-shaped plan cards and a dark call-back panel. */
:root { --screen: #0A1A31; --screen-2: #13355F; --on-screen: #EAF1F9; --on-screen-muted: #AFC2D8; }
@media (prefers-color-scheme: dark) { :root { --screen: #0E2039; --screen-2: #1A3D6B; } }

/* Dark hero panel */
.tc-main > .tc-hero { margin-top: 1.5rem; padding: clamp(1.75rem, 5vw, 4rem); border-radius: 2rem; border: 1px solid var(--line); background: radial-gradient(120% 90% at 85% 10%, var(--screen-2), var(--screen) 62%); color: var(--on-screen); gap: clamp(2rem, 5vw, 4rem); }
.tc-main > .tc-hero.tc-hero-solo { padding-bottom: clamp(1.75rem, 5vw, 4rem); }
.tc-hero h1 { color: var(--on-screen); }
.tc-hero .tc-lead, .tc-hero p { color: var(--on-screen-muted); }
.tc-hero .tc-eyebrow, .tc-hero .tc-eyebrow a { color: #7FC4EE; }
.tc-hero .wp-block-button__link { background: #EAF1F9; color: #0A1A31; box-shadow: none; }
.tc-hero .wp-block-button__link:hover { background: #fff; color: #0A1A31; }
.tc-hero .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--on-screen); border-color: rgba(234,241,249,.7); }
.tc-hero-media img { border-radius: 1.5rem; box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); }

/* Presenter window: the home page photo becomes the "Meet the team" video slot */
.tc-hero-media.tc-has-video { justify-self: end; width: min(100%, 24rem); aspect-ratio: 4 / 5; border-radius: 1.4rem; overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); background: #0E2747; }
.tc-hero-media.tc-has-video .wp-block-image, .tc-hero-media.tc-has-video img, .tc-hero-media.tc-has-video video { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; box-shadow: none; }
.tc-hero-media.tc-has-video::before { content: "Think Comms account team"; position: absolute; z-index: 2; top: 0; left: 0; right: 0; padding: .9rem 1rem .9rem 2.1rem; font: 600 .85rem/1.2 var(--head); color: #fff; background: linear-gradient(rgba(6,16,31,.7), transparent); }
.tc-hero-media.tc-has-video::after { content: ""; position: absolute; z-index: 3; top: 1.05rem; left: 1rem; width: 8px; height: 8px; border-radius: 50%; background: #4CC08A; box-shadow: 0 0 0 4px rgba(76,192,138,.25); }
.tc-hero-media.tc-has-video .tc-video-badge { left: 0; right: 0; bottom: 0; z-index: 2; border-radius: 0; background: linear-gradient(transparent, rgba(6,16,31,.9) 45%); box-shadow: none; padding: 3rem 1rem 1rem 4.4rem; color: #C9D6E6; }
.tc-hero-media.tc-has-video .tc-video-badge::before { top: auto; bottom: 1rem; transform: none; }
.tc-hero-media.tc-has-video .tc-video-badge strong { color: #fff; }
@media (max-width: 860px) { .tc-hero-media.tc-has-video { justify-self: stretch; width: 100%; max-width: 22rem; } }
@media (prefers-reduced-motion: no-preference) { .tc-hero-media.tc-has-video::after { animation: tc-pulse 2.4s ease-in-out infinite; } @keyframes tc-pulse { 50% { box-shadow: 0 0 0 7px rgba(76,192,138,0); } } }

.tc-main > .tc-networks { padding-top: 2rem; }

/* SIM-shaped plan cards: the cut corner mirrors a real SIM */
.tc-plan { --cut: 2.25rem; border-top: 0; border-radius: 1.25rem 0 1.25rem 1.25rem; box-shadow: none; filter: drop-shadow(0 10px 18px rgba(14,40,80,.14)); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); text-align: left; padding: 1.6rem 1.5rem 1.5rem; grid-template-rows: auto auto 3.4rem auto 1fr auto; }
.tc-plan::before { content: ""; width: 2.6rem; height: 2rem; border-radius: .4rem; margin-bottom: .6rem; background: linear-gradient(90deg, transparent 37%, rgba(90,64,10,.45) 37% calc(37% + 1px), transparent calc(37% + 1px) 62%, rgba(90,64,10,.45) 62% calc(62% + 1px), transparent calc(62% + 1px)), linear-gradient(transparent 29%, rgba(90,64,10,.45) 29% calc(29% + 1px), transparent calc(29% + 1px) 70%, rgba(90,64,10,.45) 70% calc(70% + 1px), transparent calc(70% + 1px)), linear-gradient(135deg, #E4C77A, #C9A247); }
.tc-plan-data { font-size: 2.8rem; }
.tc-plan-data.is-word { font-size: 2.1rem; }
.tc-plan-unit { border-bottom: 0; padding-bottom: .4rem; }
.tc-plan .wp-block-list li { border-bottom: 0; padding-block: .15rem; }
.tc-plan .wp-block-list li::before { content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--blue-2); margin-right: .55rem; vertical-align: .12em; }
.tc-plan .wp-block-buttons { justify-content: flex-start; }

/* Call-back request in the dark panel */
.tc-quote { background: none; color: inherit; padding-block: clamp(3rem, 7vw, 5rem); }
.tc-quote-inner { padding: clamp(1.75rem, 5vw, 4rem); border-radius: 2rem; border: 1px solid var(--line); background: radial-gradient(120% 90% at 85% 10%, var(--screen-2), var(--screen) 62%); color: var(--on-screen); }
.quote-copy p, .hours { color: var(--on-screen-muted); }
.quote-copy .tc-eyebrow { color: #7FC4EE; opacity: 1; }