/*
 * Tomilli Summit — public styles (v0.7).
 * Design tokens in :root so the active theme can override.
 *
 * Palette: navy ink + cream surface + coral accent. Tier pills carry their
 * own gold/silver colors so award level reads at a glance.
 *
 * Typography: display headings use a serif stack (Playfair Display first,
 * fallback to Georgia). Body inherits from theme.
 */

:root {
    /* Single shortcode background. Cliente confirmó (2026-05-27) que todos los
     * shortcodes deben usar el mismo gris azulado claro. --tomilli-cream se
     * mantiene como alias del mismo valor por compatibilidad con código viejo. */
    --tomilli-bg:        #F4F6FA;
    --tomilli-cream:     #F4F6FA;
    --tomilli-surface:   #FFFFFF;
    --tomilli-ink:       #14213D;
    --tomilli-ink-soft:  #1F2E55;
    --tomilli-muted:     #6B7280;
    --tomilli-border:    #E2E6EE;
    --tomilli-border-2:  #EEF1F6;
    --tomilli-accent:    #99191E;
    --tomilli-accent-d:  #7A1418;
    --tomilli-accent-l:  rgba(153, 25, 30, 0.12);
    --tomilli-success:   #2E7D5B;
    --tomilli-success-l: #E4F2EB;
    --tomilli-warn:      #B86E00;
    --tomilli-warn-l:    #FFF1D6;
    --tomilli-danger:    #C24A45;
    --tomilli-danger-l:  #FBE6E5;
    --tomilli-gold:      #C8A951;
    --tomilli-gold-d:    #8C7530;
    --tomilli-silver:    #8E9094;
    --tomilli-silver-d:  #5F6166;
    --tomilli-shadow-1:  0 1px 2px rgba(20, 33, 61, 0.05);
    --tomilli-shadow-2:  0 4px 16px rgba(20, 33, 61, 0.08);
    --tomilli-shadow-3:  0 12px 32px rgba(20, 33, 61, 0.14);
    --tomilli-radius:    10px;
    --tomilli-radius-sm: 6px;
    --tomilli-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ============================== WRAP / CONTAINER ============================== */

.tomilli-wrap {
    background: var(--tomilli-bg);
    padding: 56px 0;
    color: var(--tomilli-ink);
    font-family: inherit;
}
.tomilli-wrap--cream { background: var(--tomilli-cream); }
.tomilli-wrap--surface { background: var(--tomilli-surface); }
@media (max-width: 768px) {
    .tomilli-wrap { padding: 32px 0; }
}

.tomilli-container {
    max-width: 840px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}
.tomilli-container--wide {
    max-width: 1200px;
}

/* ============================== CARD (forms / states) ============================== */

.tomilli-card {
    background: var(--tomilli-surface);
    border: 1px solid var(--tomilli-border);
    border-radius: var(--tomilli-radius);
    padding: 36px 40px;
    box-shadow: var(--tomilli-shadow-2);
}
@media (max-width: 600px) {
    .tomilli-card { padding: 24px 20px; border-radius: 8px; }
}

.tomilli-card-head { margin-bottom: 24px; }
.tomilli-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tomilli-accent);
    margin-bottom: 10px;
}
.tomilli-title {
    font-family: var(--tomilli-font-display);
    font-size: 32px;
    line-height: 1.15;
    color: var(--tomilli-ink);
    margin: 0 0 10px;
    font-weight: 700;
    letter-spacing: -0.5px;
}
@media (max-width: 600px) {
    .tomilli-title { font-size: 24px; }
}
.tomilli-sub {
    font-size: 15px;
    line-height: 1.6;
    color: var(--tomilli-muted);
    margin: 0;
}

/* ============================== FORM ============================== */

.tomilli-form .tomilli-field { margin-bottom: 18px; }

/* Honeypot anti-bot. Off-screen, no display:none. */
.tomilli-hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}
.tomilli-hp-field input { width: 1px; height: 1px; }

.tomilli-form-row {
    display: grid;
    gap: 16px;
}
.tomilli-form-row-two { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) {
    .tomilli-form-row-two { grid-template-columns: 1fr; }
}

.tomilli-form .tomilli-field label,
.tomilli-form fieldset > legend {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tomilli-muted);
    margin-bottom: 6px;
}

.tomilli-form .tomilli-req { color: var(--tomilli-accent); margin-left: 2px; }

.tomilli-form input[type="text"],
.tomilli-form input[type="email"],
.tomilli-form input[type="url"],
.tomilli-form input[type="tel"],
.tomilli-form input[type="number"],
.tomilli-form input[type="password"],
.tomilli-form select,
.tomilli-form textarea {
    width: 100%;
    background: #fff;
    border: 1px solid var(--tomilli-border);
    color: var(--tomilli-ink);
    padding: 12px 14px;
    border-radius: var(--tomilli-radius-sm);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tomilli-form textarea { min-height: 140px; resize: vertical; }

.tomilli-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2314213D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    padding-right: 36px;
    cursor: pointer;
}

.tomilli-form input:focus,
.tomilli-form select:focus,
.tomilli-form textarea:focus,
.tomilli-form input:focus-visible,
.tomilli-form select:focus-visible,
.tomilli-form textarea:focus-visible {
    outline: none !important;
    border-color: var(--tomilli-accent) !important;
    box-shadow: 0 0 0 3px var(--tomilli-accent-l) !important;
}

.tomilli-form fieldset {
    border: 1px solid var(--tomilli-border);
    border-radius: var(--tomilli-radius-sm);
    padding: 14px 18px 4px;
    margin: 0 0 18px;
    background: #FBFBFE;
}
.tomilli-form fieldset legend {
    padding: 0 6px;
    margin-bottom: 8px;
}
.tomilli-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px 14px;
    padding: 4px 0 10px;
}
.tomilli-checks label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--tomilli-ink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer;
    margin: 0 !important;
}
.tomilli-checks input[type=checkbox],
.tomilli-checks input[type=radio] {
    accent-color: var(--tomilli-accent);
    width: 16px; height: 16px;
    margin: 0;
}

.tomilli-form-actions {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.tomilli-help-note {
    margin: 20px 0 0;
    font-size: 13px;
    color: var(--tomilli-muted);
}

/* ============================== BUTTON ============================== */

.tomilli-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tomilli-accent);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 14px 32px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 6px 18px rgba(153, 25, 30, 0.28);
    -webkit-appearance: none;
    appearance: none;
}
.tomilli-btn:hover,
.tomilli-btn:focus {
    background: var(--tomilli-accent-d);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
    outline: none;
}
.tomilli-btn-ghost {
    background: transparent;
    color: var(--tomilli-ink);
    border: 1px solid var(--tomilli-border);
    box-shadow: none;
}
.tomilli-btn-ghost:hover {
    background: var(--tomilli-bg);
    color: var(--tomilli-ink);
}

/* ============================== ALERTS ============================== */

.tomilli-alert {
    padding: 14px 16px;
    border-radius: var(--tomilli-radius-sm);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 18px;
}
.tomilli-alert-error { background: var(--tomilli-danger-l); border: 1px solid #F3C7C5; color: var(--tomilli-danger); }
.tomilli-alert-info  { background: var(--tomilli-accent-l); border: 1px solid #FBD3C9; color: var(--tomilli-ink); }

/* ============================== THANKS STATE ============================== */

.tomilli-thanks {
    text-align: center;
    padding: 48px 32px;
}
.tomilli-thanks-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: var(--tomilli-accent-l);
    margin: 0 auto 18px;
}
.tomilli-thanks .tomilli-title { margin-bottom: 12px; }
.tomilli-thanks .tomilli-sub { max-width: 480px; margin: 0 auto; }

/* ============================== DASHBOARD ============================== */

.tomilli-dashboard { min-height: 80px; }
.tomilli-dashboard-inner {
    background: var(--tomilli-surface);
    border: 1px solid var(--tomilli-border);
    border-radius: var(--tomilli-radius);
    padding: 32px 36px;
    box-shadow: var(--tomilli-shadow-2);
}
@media (max-width: 600px) { .tomilli-dashboard-inner { padding: 22px 18px; } }

.tomilli-dashboard-greeting {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tomilli-muted);
    margin: 0 0 4px;
}
.tomilli-dashboard h2 {
    font-family: var(--tomilli-font-display);
    font-size: 28px;
    color: var(--tomilli-ink);
    margin: 0 0 16px;
    letter-spacing: -0.3px;
    font-weight: 700;
}

.tomilli-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}
.tomilli-status-pill::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 999px;
    background: currentColor;
}
.tomilli-status-in_process { background: var(--tomilli-warn-l);    color: var(--tomilli-warn); }
.tomilli-status-approved   { background: var(--tomilli-success-l); color: var(--tomilli-success); }
.tomilli-status-rejected   { background: var(--tomilli-danger-l);  color: var(--tomilli-danger); }

/* Tier pills (Gold / Silver) carry their own metallic accents. */
.tomilli-tier-gold {
    background: linear-gradient(135deg, var(--tomilli-gold), #E8D08A);
    color: var(--tomilli-gold-d);
}
.tomilli-tier-gold::before { background: var(--tomilli-gold-d); }
.tomilli-tier-silver {
    background: linear-gradient(135deg, var(--tomilli-silver), #C4C6CB);
    color: var(--tomilli-silver-d);
}
.tomilli-tier-silver::before { background: var(--tomilli-silver-d); }

.tomilli-loading {
    color: var(--tomilli-muted);
    font-size: 14px;
}

/* ============================== AWARDS / CATEGORIES GRID ============================== */

.tomilli-awards-hero {
    text-align: center;
    padding: 64px 24px 32px;
    max-width: 760px;
    margin: 0 auto;
}
.tomilli-awards-hero .tomilli-eyebrow-rule {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    color: var(--tomilli-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.tomilli-awards-hero .tomilli-eyebrow-rule::before,
.tomilli-awards-hero .tomilli-eyebrow-rule::after {
    content: "";
    width: 36px;
    height: 1.5px;
    background: var(--tomilli-accent);
}
.tomilli-awards-hero h1 {
    font-family: var(--tomilli-font-display);
    font-size: 48px;
    line-height: 1.1;
    margin: 0 0 14px;
    font-weight: 700;
    letter-spacing: -0.6px;
    color: var(--tomilli-ink);
}
.tomilli-awards-hero p {
    color: var(--tomilli-muted);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 640px) {
    .tomilli-awards-hero { padding: 40px 20px 24px; }
    .tomilli-awards-hero h1 { font-size: 32px; }
}

.tomilli-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
    padding: 24px 0 48px;
}
.tomilli-category-card {
    background: var(--tomilli-surface);
    border: 1px solid var(--tomilli-border);
    border-radius: var(--tomilli-radius);
    padding: 28px 24px;
    text-decoration: none;
    color: var(--tomilli-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    box-shadow: var(--tomilli-shadow-1);
}
.tomilli-category-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--tomilli-shadow-2);
    border-color: var(--tomilli-accent);
    color: var(--tomilli-ink);
    text-decoration: none;
}
.tomilli-category-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--tomilli-cream);
    color: var(--tomilli-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-family: var(--tomilli-font-display);
    font-size: 22px;
    font-weight: 700;
    transition: background .18s ease, color .18s ease;
}
.tomilli-category-card:hover .tomilli-category-card-icon {
    background: var(--tomilli-accent);
    color: #fff;
}
.tomilli-category-card h3 {
    font-family: var(--tomilli-font-display);
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--tomilli-ink);
    letter-spacing: -0.2px;
}
.tomilli-category-card-count {
    margin: 0;
    color: var(--tomilli-muted);
    font-size: 13px;
    font-weight: 500;
}
.tomilli-category-card-cta {
    margin-top: 14px;
    color: var(--tomilli-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ============================== CATEGORY ARCHIVE ============================== */

.tomilli-archive-hero {
    text-align: center;
    padding: 56px 24px 24px;
    max-width: 720px;
    margin: 0 auto;
}
.tomilli-archive-hero .tomilli-eyebrow {
    color: var(--tomilli-accent);
}
.tomilli-archive-hero h1 {
    font-family: var(--tomilli-font-display);
    font-size: 48px;
    line-height: 1.1;
    margin: 6px 0 14px;
    font-weight: 700;
    letter-spacing: -0.6px;
    color: var(--tomilli-ink);
}
.tomilli-archive-hero p {
    color: var(--tomilli-muted);
    font-size: 16px;
    margin: 0;
}
@media (max-width: 640px) {
    .tomilli-archive-hero h1 { font-size: 32px; }
}

.tomilli-archive-filters {
    background: var(--tomilli-surface);
    border: 1px solid var(--tomilli-border);
    border-radius: 999px;
    padding: 10px 14px;
    margin: 24px auto 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    box-shadow: var(--tomilli-shadow-1);
    max-width: 100%;
}
/* The theme may force select { width:100% } in its base styles; override
   explicitly so the filters stay on one row as a toolbar. */
.tomilli-archive-filters select {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    background: #fff;
    border: 1px solid var(--tomilli-border);
    border-radius: 999px;
    padding: 8px 32px 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--tomilli-ink);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%2314213D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 6px;
    transition: border-color .15s ease, color .15s ease;
    box-sizing: border-box;
}
.tomilli-archive-filters select:hover {
    border-color: var(--tomilli-accent);
    color: var(--tomilli-accent);
}
.tomilli-archive-filters select:focus {
    outline: none;
    border-color: var(--tomilli-accent);
    box-shadow: 0 0 0 3px var(--tomilli-accent-l);
}
.tomilli-archive-filters button {
    width: auto !important;
    flex: 0 0 auto !important;
    background: var(--tomilli-ink);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 9px 22px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    margin-left: 4px;
    transition: background .15s ease;
}
.tomilli-archive-filters button:hover { background: var(--tomilli-ink-soft); }
.tomilli-archive-filters .tomilli-archive-search {
    width: auto !important;
    flex: 1 1 200px !important;
    min-width: 160px;
    max-width: 320px;
    background: #fff;
    border: 1px solid var(--tomilli-border);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    color: var(--tomilli-ink);
    box-sizing: border-box;
}
.tomilli-archive-filters .tomilli-archive-search:focus {
    outline: none;
    border-color: var(--tomilli-accent);
    box-shadow: 0 0 0 3px var(--tomilli-accent-l);
}
@media (max-width: 640px) {
    .tomilli-archive-filters {
        border-radius: var(--tomilli-radius);
        flex-direction: column;
        align-items: stretch;
    }
    .tomilli-archive-filters select,
    .tomilli-archive-filters .tomilli-archive-search,
    .tomilli-archive-filters button { width: 100% !important; }
}

.tomilli-cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 32px;
    padding-bottom: 48px;
}
.tomilli-case-card {
    text-decoration: none;
    color: var(--tomilli-ink);
    display: flex;
    flex-direction: column;
    background: transparent;
}
.tomilli-case-card:hover {
    text-decoration: none;
    color: var(--tomilli-ink);
}
.tomilli-case-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    background: var(--tomilli-surface);
    border: 1px solid var(--tomilli-border);
    border-radius: var(--tomilli-radius);
    overflow: hidden;
    box-shadow: var(--tomilli-shadow-1);
    transition: border-color .2s ease, box-shadow .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tomilli-case-card:hover .tomilli-case-card-media {
    border-color: var(--tomilli-accent);
    box-shadow: var(--tomilli-shadow-2);
}
/* Logo (no thumbnail): stays contained as a brand mark. */
.tomilli-case-card-media img {
    max-width: 72%;
    max-height: 72%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform .35s ease;
}
/* A nomination thumbnail (case imagery) fills the card edge-to-edge and is
   cover-cropped, with a subtle zoom on hover — the lovethework editorial feel. */
.tomilli-case-card-media--thumb { background: #fff; }
.tomilli-case-card-media img.tomilli-case-card-thumb {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tomilli-case-card:hover .tomilli-case-card-media img.tomilli-case-card-thumb {
    transform: scale(1.04);
}
.tomilli-case-card-media-empty {
    color: var(--tomilli-muted);
    font-family: var(--tomilli-font-display);
    font-size: 36px;
    font-weight: 700;
    opacity: 0.5;
}
.tomilli-case-card-pill {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* "View entry →" overlay, slides up from the bottom edge on hover. */
.tomilli-case-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px 16px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, rgba(20,33,61,0) 0%, rgba(20,33,61,0.82) 100%);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease;
}
.tomilli-case-card:hover .tomilli-case-card-overlay {
    opacity: 1;
    transform: translateY(0);
}
.tomilli-case-card-body {
    padding: 16px 4px 0;
}
.tomilli-case-card-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tomilli-accent);
    margin-bottom: 6px;
}
.tomilli-case-card h4 {
    font-family: var(--tomilli-font-display);
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tomilli-ink);
}
.tomilli-case-card-brand {
    color: var(--tomilli-muted);
    font-size: 13px;
    display: block;
}
.tomilli-cases-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 24px;
    color: var(--tomilli-muted);
}

/* ============================== COMPANY DETAIL ============================== */

.tomilli-company-detail {
    background: var(--tomilli-cream);
    padding-bottom: 80px;
}

.tomilli-company-hero {
    background: linear-gradient(180deg, var(--tomilli-cream) 0%, var(--tomilli-surface) 100%);
    border-bottom: 1px solid var(--tomilli-border);
    padding: 56px 0 48px;
}
.tomilli-company-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 36px;
    align-items: center;
}
@media (max-width: 720px) {
    .tomilli-company-hero { padding: 36px 0 28px; }
    .tomilli-company-hero-inner {
        grid-template-columns: 1fr;
        gap: 22px;
        text-align: center;
        justify-items: center;
    }
}
.tomilli-company-logo {
    width: 200px;
    height: 200px;
    background: var(--tomilli-surface);
    border: 1px solid var(--tomilli-border);
    border-radius: var(--tomilli-radius);
    box-shadow: var(--tomilli-shadow-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.tomilli-company-logo img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}
.tomilli-company-logo-empty {
    font-family: var(--tomilli-font-display);
    font-size: 64px;
    font-weight: 700;
    color: var(--tomilli-accent);
    opacity: 0.6;
}
.tomilli-company-hero-info { min-width: 0; }
.tomilli-company-hero-eyebrow {
    font-size: 11px;
    font-weight: 700;
    color: var(--tomilli-accent);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.tomilli-company-hero h1 {
    font-family: var(--tomilli-font-display);
    font-size: 56px;
    line-height: 1;
    margin: 0 0 16px;
    font-weight: 700;
    letter-spacing: -0.8px;
    color: var(--tomilli-ink);
}
@media (max-width: 720px) { .tomilli-company-hero h1 { font-size: 36px; } }
.tomilli-company-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    color: var(--tomilli-muted);
    font-size: 14px;
    margin: 0 0 16px;
    align-items: center;
}
.tomilli-company-hero-meta strong {
    color: var(--tomilli-ink);
    font-weight: 600;
}

/* The detail body uses generous spacing and a clean serif heading hierarchy. */
.tomilli-company-body {
    max-width: 920px;
    margin: 0 auto;
    padding: 56px 24px 0;
}
.tomilli-company-section { margin-bottom: 56px; }
.tomilli-company-section:last-child { margin-bottom: 0; }

.tomilli-company-section h2 {
    font-family: var(--tomilli-font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tomilli-accent);
    margin: 0 0 18px;
}
.tomilli-company-section .tomilli-company-case-name {
    font-family: var(--tomilli-font-display);
    font-size: 36px;
    line-height: 1.15;
    color: var(--tomilli-ink);
    margin: 0 0 24px;
    font-weight: 700;
    letter-spacing: -0.4px;
}
@media (max-width: 640px) {
    .tomilli-company-section .tomilli-company-case-name { font-size: 28px; }
}

.tomilli-company-prose p {
    font-size: 17px;
    line-height: 1.75;
    color: var(--tomilli-ink-soft);
    margin: 0 0 18px;
}
.tomilli-company-prose p:last-child { margin: 0; }

.tomilli-company-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 36px;
    padding: 24px 0;
    border-top: 1px solid var(--tomilli-border-2);
    border-bottom: 1px solid var(--tomilli-border-2);
    margin: 32px 0 0;
}
.tomilli-company-meta-row dt {
    font-size: 11px;
    font-weight: 700;
    color: var(--tomilli-muted);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.tomilli-company-meta-row dd {
    margin: 0;
    color: var(--tomilli-ink);
    font-size: 14px;
    font-weight: 500;
}

.tomilli-company-section .tomilli-video-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--tomilli-accent);
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.04em;
    padding: 12px 22px;
    border: 1px solid var(--tomilli-accent);
    border-radius: 999px;
    transition: background .15s ease, color .15s ease;
}
.tomilli-company-section .tomilli-video-cta:hover {
    background: var(--tomilli-accent);
    color: #fff;
    text-decoration: none;
}

.tomilli-company-people {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px 28px;
}
.tomilli-company-people li {
    padding: 14px 16px;
    background: var(--tomilli-surface);
    border: 1px solid var(--tomilli-border-2);
    border-radius: var(--tomilli-radius-sm);
}
.tomilli-company-people strong {
    display: block;
    color: var(--tomilli-ink);
    font-weight: 700;
    font-size: 14px;
}
.tomilli-company-people .tomilli-muted {
    color: var(--tomilli-muted);
    font-size: 13px;
}

.tomilli-company-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px 24px;
}
.tomilli-company-contact li {
    color: var(--tomilli-ink);
    font-size: 14px;
}
.tomilli-company-contact a {
    color: var(--tomilli-accent);
    text-decoration: none;
}
.tomilli-company-contact a:hover { text-decoration: underline; }

.tomilli-company-prose {
    color: var(--tomilli-ink-soft);
}
.tomilli-company-prose .tomilli-status-pill { margin: 0 0 12px; }

/* ============================== KEY PEOPLE LIST (legacy compatibility) ============================== */
.tomilli-key-people { list-style: none; padding: 0; margin: 0; }
.tomilli-key-people li {
    padding: 10px 0;
    border-bottom: 1px solid var(--tomilli-border-2);
    font-size: 14px;
    color: var(--tomilli-ink);
}
.tomilli-key-people li:last-child { border-bottom: 0; }

/* ============================== COMPANY DETAIL v0.10.0 (Figma layout) ============================== */
.tomilli-cd {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 24px 72px;
}
.tomilli-cd-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}
.tomilli-cd-title {
    font-family: var(--tomilli-font-display);
    font-size: 34px;
    line-height: 1.15;
    margin: 0 0 10px;
    color: var(--tomilli-ink);
}
.tomilli-cd-subline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.tomilli-cd-category { color: var(--tomilli-muted); font-weight: 600; font-size: 15px; }
.tomilli-cd-section { margin-top: 34px; }
.tomilli-cd-section h2 { font-size: 18px; font-weight: 700; margin: 0 0 14px; color: var(--tomilli-ink); }
.tomilli-cd-prose p { font-size: 15px; line-height: 1.7; color: var(--tomilli-ink-soft); margin: 0; }

/* Video */
.tomilli-cd-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--tomilli-shadow-1);
    background: #0E1730;
}
.tomilli-cd-video iframe,
.tomilli-cd-video video,
.tomilli-cd-video embed,
.tomilli-cd-video object {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}
.tomilli-cd-video--poster {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: linear-gradient(160deg, #3b82f6 0%, #1e3a8a 100%);
}
.tomilli-cd-video-play {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--tomilli-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    padding-left: 5px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
    transition: transform .15s ease;
}
.tomilli-cd-video--poster:hover .tomilli-cd-video-play { transform: scale(1.06); }
.tomilli-cd-video-caption {
    position: absolute;
    left: 18px;
    bottom: 16px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

/* Key people table */
.tomilli-cd-people { width: 100%; border-collapse: collapse; }
.tomilli-cd-people td { padding: 13px 18px; font-size: 14px; color: var(--tomilli-ink); }
.tomilli-cd-people tr:nth-child(odd) { background: var(--tomilli-surface); }
.tomilli-cd-people td:last-child { color: var(--tomilli-muted); }

/* Sidebar card */
.tomilli-cd-card {
    background: #fff;
    border: 1px solid var(--tomilli-border);
    border-radius: 14px;
    padding: 22px;
    box-shadow: var(--tomilli-shadow-1);
    position: sticky;
    top: 24px;
}
.tomilli-cd-company {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--tomilli-border);
}
.tomilli-cd-logo {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tomilli-surface);
}
.tomilli-cd-logo img { width: 100%; height: 100%; object-fit: cover; }
.tomilli-cd-logo span { font-family: var(--tomilli-font-display); font-weight: 700; font-size: 20px; color: var(--tomilli-muted); }
.tomilli-cd-company-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tomilli-cd-company-info strong { font-size: 16px; color: var(--tomilli-ink); }
.tomilli-cd-loc { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--tomilli-muted); }
.tomilli-cd-loc svg { color: var(--tomilli-muted); }
.tomilli-cd-type-pill {
    align-self: flex-start;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--tomilli-muted);
    background: var(--tomilli-surface);
    border: 1px solid var(--tomilli-border);
    padding: 2px 10px;
    border-radius: 999px;
}

.tomilli-cd-awards-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--tomilli-accent);
    margin: 18px 0 8px;
}
.tomilli-cd-awards { list-style: none; margin: 0; padding: 0; }
.tomilli-cd-awards li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--tomilli-border);
}
.tomilli-cd-awards li:last-child { border-bottom: 0; }
.tomilli-cd-award-icon { color: var(--tomilli-accent); display: inline-flex; flex: 0 0 auto; }
.tomilli-cd-award-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.tomilli-cd-award-year { font-size: 11px; color: var(--tomilli-muted); }
.tomilli-cd-award-name { font-size: 14px; font-weight: 600; color: var(--tomilli-ink); }
.tomilli-cd-award-count {
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--tomilli-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tomilli-cd-links {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--tomilli-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tomilli-cd-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--tomilli-accent);
    text-decoration: none;
    word-break: break-all;
}
.tomilli-cd-link:hover { text-decoration: underline; }

@media (max-width: 880px) {
    .tomilli-cd-grid { grid-template-columns: 1fr; }
    .tomilli-cd-card { position: static; }
    .tomilli-cd-title { font-size: 28px; }
}