/* ============================================================
   FLO EDITOR — supporting tokens & signature components
   Loaded site-wide. Layout/colour/spacing live in Elementor;
   this file carries fonts, tokens, and a few brutalist touches.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

:root{
  --flo-bg:#FAFAFA; --flo-surface:#F5F5F5; --flo-surface-2:#E5E5E5;
  --flo-ink:#0A0A0A; --flo-ink-2:#525252; --flo-ink-3:#A3A3A3;
  --flo-inverse:#FAFAFA; --flo-accent:#FF46A2; --flo-accent-hover:#E63B91;
  --flo-accent-active:#C71F70; --flo-border:#E5E5E5;
  --flo-display:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --flo-mono:'Space Mono','Courier New',monospace;
}

body{ background:var(--flo-bg); color:var(--flo-ink); font-family:var(--flo-display); }
::selection{ background:var(--flo-accent); color:var(--flo-inverse); }

/* Mono label / overline utility */
.flo-mono, .flo-mono *{ font-family:var(--flo-mono)!important; text-transform:uppercase; letter-spacing:.12em; font-weight:700; }

/* Section number (pink mono) */
.flo-num, .flo-num *{ font-family:var(--flo-mono)!important; font-weight:700; letter-spacing:.1em; color:var(--flo-accent)!important; text-transform:uppercase; }

/* Struck-through wordmark for header/footer */
.flo-wordmark{ font-family:var(--flo-display)!important; font-weight:700; letter-spacing:-.02em; white-space:nowrap; line-height:1; }
.flo-wordmark .struck{ text-decoration:line-through; text-decoration-thickness:.09em; }
.flo-wordmark .dot{ color:var(--flo-accent); }
/* Xpro heading wordmark: strike the focus part, add pink dot */
.flo-wordmark .xpro-title-focus{ text-decoration:line-through; text-decoration-thickness:.09em; color:inherit!important; font-weight:700; }
.flo-wordmark .xpro-heading-title{ display:inline-block; }
.flo-wordmark .xpro-heading-title::after{ content:"."; color:var(--flo-accent); }
.flo-wordmark a{ color:inherit; }

/* Hero index row separators */
.flo-index .sep{ color:var(--flo-accent); }
.flo-accent-text{ color:var(--flo-accent)!important; }

/* Ticker strip */
.flo-ticker{ background:var(--flo-ink); color:var(--flo-inverse); border-top:2px solid var(--flo-ink); border-bottom:2px solid var(--flo-ink); }
.flo-ticker .flo-ticker-row{ display:flex; flex-wrap:wrap; gap:32px; font-family:var(--flo-mono); font-size:.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; align-items:center; }
.flo-ticker .flo-ticker-row span{ display:inline-flex; align-items:center; gap:32px; }
.flo-ticker .flo-ticker-row span::after{ content:"\2736"; color:var(--flo-accent); }

/* Work / gallery cards: 2px ink border + lift on hover */
.flo-card{ border:2px solid var(--flo-ink); background:var(--flo-bg); transition:transform .12s ease, box-shadow .12s ease; }
.flo-card:hover{ transform:translateY(-4px); box-shadow:6px 6px 0 var(--flo-ink); }
.flo-card-accent{ border-top:4px solid var(--flo-accent)!important; }

/* Video frame: dark 16:9 placeholder with centred play badge + corner tag */
.flo-frame{ position:relative; aspect-ratio:16/9; background:#0A0A0A; overflow:hidden; }
.flo-frame.flo-frame-43{ aspect-ratio:4/3; }
.flo-frame.flo-frame-34{ aspect-ratio:3/4; }
.flo-frame img{ width:100%; height:100%; object-fit:cover; }
.flo-frame .flo-play{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.flo-frame .flo-play span{ width:72px; height:72px; display:grid; place-items:center; background:var(--flo-accent); color:#fff; }
.flo-frame .flo-play svg{ width:38%; height:38%; }
.flo-frame .flo-badge{ position:absolute; top:16px; left:16px; z-index:2; background:var(--flo-bg); color:var(--flo-ink); font-family:var(--flo-mono); font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; padding:4px 8px; border:1px solid var(--flo-ink); }

/* Quote cards invert on hover */
.flo-quote{ border:2px solid var(--flo-ink); transition:background .12s ease,color .12s ease; }
.flo-quote:hover{ background:var(--flo-ink); color:var(--flo-inverse); }
.flo-quote:hover *{ color:var(--flo-inverse)!important; }
.flo-quote .flo-qmark{ font-family:var(--flo-display); font-weight:700; font-size:3rem; line-height:.6; color:var(--flo-accent); }
.flo-avatar{ width:44px; height:44px; border-radius:9999px; background:var(--flo-accent); color:#fff; display:grid; place-items:center; font-family:var(--flo-mono); font-weight:700; font-size:.8125rem; flex:none; }

/* Service rows: indent + tint on hover */
.flo-svc-row{ transition:padding-left .12s ease, background .12s ease; }
.flo-svc-row:hover{ padding-left:16px!important; background:var(--flo-surface); }

/* Timeline ghost numbers */
.flo-ghost-num, .flo-ghost-num *{ font-family:var(--flo-display)!important; font-weight:700; color:#E5E5E5!important; -webkit-text-stroke:1px var(--flo-ink); }

/* Stat unit accent */
.flo-stat-unit{ color:var(--flo-accent); }

/* Buttons: arrow nudge */
.flo-btn .elementor-button-icon{ transition:transform .12s ease; }
.flo-btn:hover .elementor-button-icon{ transform:translateX(4px); }

/* Native accordion (FAQ) brutalist skin */
.flo-faq .elementor-accordion .elementor-accordion-item{ border:0; border-bottom:1px solid var(--flo-border); }
.flo-faq .elementor-accordion .elementor-tab-title{ font-family:var(--flo-display)!important; font-weight:700; letter-spacing:-.01em; }
.flo-faq .elementor-accordion .elementor-tab-title.elementor-active{ color:var(--flo-accent); }

/* Header sticky offset safety + footer link underline */
.flo-footer a:hover{ border-bottom:2px solid var(--flo-accent); }

/* WPForms brutalist skin on contact page */
.flo-form .wpforms-field-label{ font-family:var(--flo-mono)!important; text-transform:uppercase; letter-spacing:.12em; font-size:.6875rem!important; font-weight:700!important; color:var(--flo-ink)!important; }
.flo-form input[type=text],.flo-form input[type=email],.flo-form input[type=tel],.flo-form input[type=date],.flo-form select,.flo-form textarea{ border:2px solid var(--flo-ink)!important; border-radius:0!important; background:var(--flo-bg)!important; font-family:var(--flo-display)!important; }
.flo-form input:focus,.flo-form select:focus,.flo-form textarea:focus{ border-color:var(--flo-accent)!important; box-shadow:inset 0 0 0 1px var(--flo-accent)!important; }
.flo-form .wpforms-submit{ font-family:var(--flo-mono)!important; text-transform:uppercase!important; letter-spacing:.1em!important; font-weight:700!important; border-radius:0!important; border:2px solid var(--flo-ink)!important; background:var(--flo-ink)!important; color:#FAFAFA!important; padding:18px 40px!important; }
.flo-form .wpforms-submit:hover{ background:var(--flo-accent)!important; border-color:var(--flo-accent)!important; }

/* ============================================================
   RESPONSIVE GRID UTILITIES (children stay native containers)
   ============================================================ */
.flo-work-grid{ display:grid; gap:32px; grid-template-columns:1fr; }
@media(min-width:760px){ .flo-work-grid{ grid-template-columns:1fr 1fr; gap:48px; } .flo-work-grid .flo-span-2{ grid-column:1/-1; } }

.flo-stats{ display:grid; grid-template-columns:1fr 1fr; border:2px solid var(--flo-ink); }
.flo-stats .flo-stat{ padding:32px 24px; border-bottom:1px solid var(--flo-border); border-right:1px solid var(--flo-border); }
.flo-stats .flo-stat:nth-child(2n){ border-right:0; }
@media(min-width:760px){ .flo-stats{ grid-template-columns:repeat(4,1fr);} .flo-stats .flo-stat{ border-bottom:0;} .flo-stats .flo-stat:nth-child(2n){ border-right:1px solid var(--flo-border);} .flo-stats .flo-stat:last-child{ border-right:0;} }

.flo-quote-grid{ display:grid; gap:32px; grid-template-columns:1fr; }
@media(min-width:720px){ .flo-quote-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:1040px){ .flo-quote-grid{ grid-template-columns:repeat(3,1fr);} }

.flo-gallery{ display:grid; gap:32px; grid-template-columns:1fr; }
@media(min-width:680px){ .flo-gallery{ grid-template-columns:1fr 1fr;} .flo-gallery .flo-span-2{ grid-column:span 2; } }
@media(min-width:1000px){ .flo-gallery{ grid-template-columns:repeat(3,1fr);} }

.flo-contact-grid{ display:grid; gap:48px; grid-template-columns:1fr; }
@media(min-width:920px){ .flo-contact-grid{ grid-template-columns:1.2fr .9fr; gap:64px; } }

.flo-facts{ display:grid; border-top:1px solid var(--flo-border); }
.flo-facts .flo-fact{ display:grid; gap:4px; padding:24px 0; border-bottom:1px solid var(--flo-border); }
@media(min-width:720px){ .flo-facts .flo-fact{ grid-template-columns:220px 1fr; gap:32px; align-items:baseline; } }

.flo-svc-list{ border-top:2px solid var(--flo-ink); }
.flo-svc-list .flo-svc-row{ display:grid; gap:8px; grid-template-columns:auto 1fr; align-items:baseline; padding:32px 0; border-bottom:1px solid var(--flo-border); }
@media(min-width:760px){ .flo-svc-list .flo-svc-row{ grid-template-columns:64px 1fr 1.1fr; align-items:center; } }

.flo-timeline{ border-top:2px solid var(--flo-ink); }
.flo-timeline .flo-tl-step{ display:grid; gap:16px; padding:48px 0; border-bottom:1px solid var(--flo-border); }
@media(min-width:760px){ .flo-timeline .flo-tl-step{ grid-template-columns:160px 1fr; gap:48px; align-items:start; } }

.flo-section-split{ display:grid; gap:16px; }
@media(min-width:880px){ .flo-section-split{ grid-template-columns:1fr auto; align-items:end; } }

.flo-footer-grid{ display:grid; gap:48px; grid-template-columns:1fr; }
@media(min-width:760px){ .flo-footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }

.flo-contact-card{ border:2px solid var(--flo-ink); border-top:4px solid var(--flo-accent); padding:32px; display:grid; gap:24px; }
.flo-cta-grid{ display:grid; gap:48px; align-items:center; }
@media(min-width:880px){ .flo-cta-grid{ grid-template-columns:1fr auto; } }