/*
Theme Name: Griol Fire Protection
Theme URI: https://griol.co.uk
Description: Certified UK Fire Door Inspection & Compliance
Version: 1.0
Author: Griol
*/

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 1px; }

:root {
  --charcoal: #1e2130;
  --fire: #c0392b;
  --ember: #e67e22;
  --bg: #ffffff;
  --fg: #1e2130;
  --muted: #f5f5f7;
  --muted-fg: #6b7280;
  --card: #ffffff;
  --border: #e8e8ed;
  --radius: 0.5rem;
  --shadow-elegant: 0 20px 60px -20px rgba(30,33,48,0.25);
  --shadow-fire: 0 18px 40px -18px rgba(192,57,43,0.45);
  --gradient-hero: linear-gradient(135deg, rgba(18,20,30,0.92), rgba(30,33,48,0.78));
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.6; }
h1,h2,h3,h4 { font-family: 'Inter', system-ui, sans-serif; letter-spacing: -0.02em; font-weight: 700; line-height: 1.1; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ── Layout ── */
.container-page { max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; }
.site-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; padding-top: 80px; }

/* ── Utilities ── */
.text-fire { color: var(--fire); }
.bg-fire { background-color: var(--fire); }
.bg-charcoal { background-color: var(--charcoal); }
.bg-muted { background-color: var(--muted); }
.text-muted { color: var(--muted-fg); }
.fade-up { animation: fadeUp 0.7s ease-out both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }

/* ── Buttons ── */
.btn-fire { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background:var(--fire); color:#fff; padding:.9rem 1.75rem; border-radius:var(--radius); font-weight:600; font-size:.9rem; box-shadow:var(--shadow-fire); transition:opacity .2s; border:none; cursor:pointer; }
.btn-fire:hover { opacity:.9; }
.btn-outline { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background:rgba(255,255,255,.1); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.3); color:#fff; padding:.9rem 1.75rem; border-radius:var(--radius); font-weight:600; font-size:.9rem; transition:background .2s; }
.btn-outline:hover { background:rgba(255,255,255,.2); }
.btn-dark { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background:var(--charcoal); color:#fff; padding:.75rem 1.5rem; border-radius:var(--radius); font-weight:600; font-size:.9rem; transition:opacity .2s; }
.btn-dark:hover { opacity:.85; }

/* ── Header ── */
.site-header { position:fixed; top:0; inset-inline:0; z-index:50; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); transition:box-shadow .3s; }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:80px; }
.site-logo img { height:48px; width:auto; }
.main-nav { display:flex; align-items:center; gap:.25rem; }
.main-nav a { padding:.5rem .75rem; font-size:.875rem; font-weight:500; border-radius:var(--radius); transition:color .2s; }
.main-nav a:hover, .main-nav a.active { color:#000; }
.nav-dropdown { position:relative; }
.nav-dropdown > a { display:flex; align-items:center; gap:.25rem; }
.dropdown-menu { position:absolute; top:100%; left:0; padding-top:.5rem; visibility:hidden; opacity:0; transition:all .2s; pointer-events:none; }
.nav-dropdown:hover .dropdown-menu { visibility:visible; opacity:1; pointer-events:auto; }
.dropdown-inner { background:var(--card); border:1px solid var(--border); border-radius:.75rem; box-shadow:var(--shadow-elegant); padding:.5rem 0; min-width:260px; }
.dropdown-inner a { display:block; padding:.5rem 1rem; font-size:.875rem; transition:background .15s, color .15s; }
.dropdown-inner a:hover { background:var(--muted); color:var(--fire); }
.dropdown-divider { border-top:1px solid var(--border); margin:.25rem 0; }
.nav-cta { margin-left:.75rem; }
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:.5rem; }
.mobile-nav { display:none; border-top:1px solid var(--border); background:var(--bg); }
.mobile-nav-inner {  display:flex; flex-direction:column; }
.mobile-nav-inner a { display:block; padding:.75rem 0; font-weight:500; border-bottom:1px solid var(--border); }
.mobile-nav-inner a:last-child { border-bottom:none; }
.mobile-services-toggle { display:flex; justify-content:space-between; align-items:center; width:100%; padding:.75rem 0; font-weight:500; font-size:1rem; color:var(--fg); background:none; border:none; border-bottom:1px solid var(--border); cursor:pointer; font-family:inherit; }
.mobile-services-toggle svg { transition:transform .25s; }
.mobile-services-toggle.open svg { transform:rotate(180deg); }
.mobile-services-list { display:none; flex-direction:column; }
.mobile-services-list.open { display:flex; }
.mobile-services-list a { display:block; padding:.65rem 0 .65rem 1rem; font-size:.9rem; font-weight:500; color:var(--fg); border-bottom:1px solid var(--border); }
.mobile-services-list a:last-child { border-bottom:none; }

/* ── Footer ── */
.site-footer { background:var(--charcoal); color:#fff; margin-top:6rem; }
.footer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem; padding:4rem 0; }
.footer-col h4 { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; }
.footer-col p, .footer-col li, .footer-col a { font-size:.875rem; color:rgba(255,255,255,.7); line-height:1.8; }
.footer-col a:hover { color:var(--fire); }
.footer-col .contact-item { display:flex; align-items:flex-start; gap:.5rem; margin-bottom:.75rem; }
.footer-col .contact-item svg { color:var(--fire); flex-shrink:0; margin-top:.15rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:1.5rem 0; display:flex; align-items:center; justify-content:space-between; font-size:.75rem; color:rgba(255,255,255,.5); }

/* ── Floating Buttons ── */
.floating-btns { position:fixed; right:1.5rem; bottom:1.5rem; z-index:40; display:flex; flex-direction:column; gap:.75rem; }
.float-btn { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .2s; }
.float-btn:hover { transform:scale(1.05); }
.float-btn-email { background:var(--charcoal); color:#fff; box-shadow:var(--shadow-elegant); }
.float-btn-phone { background:var(--fire); color:#fff; box-shadow:var(--shadow-fire); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{box-shadow:var(--shadow-fire);} 50%{box-shadow:0 0 0 8px rgba(192,57,43,.15),var(--shadow-fire);} }

/* ── Hero (Home) ── */
.hero { position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; }
.hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background:var(--gradient-hero); }
.hero-content { position:relative; color:#fff; padding:5rem 0; display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; align-items:center; width:100%; }
.hero-left { display:flex; flex-direction:column; }
.hero-form-wrap { background:rgba(255,255,255,.97); color:var(--fg); border-radius:1rem; padding:2rem; box-shadow:0 8px 40px rgba(0,0,0,.35); }
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.1); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.2); border-radius:9999px; padding:.375rem 1rem; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.5rem; }
.hero-badge-dot { width:.5rem; height:.5rem; border-radius:50%; background:var(--fire); animation:pulse 2s infinite; }
.hero-title { font-size:clamp(2.25rem,6vw,4.5rem); font-weight:700; line-height:1.05; max-width:52rem; }
.hero-subtitle { margin-top:1.5rem; font-size:1.125rem; color:rgba(255,255,255,.8); max-width:40rem; }
.hero-actions { margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:1rem; }
.hero-stats { margin-top:3.5rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; max-width:48rem; }
.hero-stat-num { font-size:2.25rem; font-weight:700; color:var(--fire); }
.hero-stat-label { font-size:.875rem; color:rgba(255,255,255,.7); margin-top:.25rem; }

/* ── Trust Badges ── */
.trust-bar { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--muted); }
.trust-bar-inner { padding:2rem 0; display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem; align-items:center; text-align:center; }
.trust-item { display:flex; align-items:center; justify-content:center; gap:.5rem; color:var(--muted-fg); }
.trust-item svg { color:var(--fire); }
.trust-item span { font-size:.875rem; font-weight:600; letter-spacing:.05em; }

/* ── Section Eyebrow ── */
.eyebrow { color:var(--fire); font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.15em; margin-bottom:.75rem; }

/* ── About Preview ── */
.about-preview { padding:5rem 0; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.about-img-wrap { position:relative; }
.about-img-wrap img { border-radius:1rem; box-shadow:var(--shadow-elegant); width:100%;height: 50%; }
.about-badge { position:absolute; bottom:-1.5rem; right:-1.5rem; background:var(--fire); color:#fff; padding:1.5rem; border-radius:.75rem; box-shadow:var(--shadow-fire); max-width:200px; }
.about-badge-num { font-size:1.875rem; font-weight:700; }
.about-badge-text { font-size:.875rem; }
.about-list { margin-top:1.5rem; display:flex; flex-direction:column; gap:.75rem; }
.about-list li { display:flex; align-items:flex-start; gap:.75rem; }
.about-list svg { color:var(--fire); flex-shrink:0; margin-top:.15rem; }
.link-fire { display:inline-flex; align-items:center; gap:.5rem; color:var(--fire); font-weight:600; margin-top:2rem; }
.link-fire:hover { text-decoration:underline; }

/* ── Services Grid ── */
.services-section { background:var(--muted); padding:5rem 0; }
.services-grid { margin-top:3rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.service-card { background:var(--card); border:1px solid var(--border); border-radius:.75rem; padding:1.75rem; transition:box-shadow .2s, transform .2s; display:block; }
.service-card:hover { box-shadow:var(--shadow-elegant); transform:translateY(-4px); }
.service-icon { width:3rem; height:3rem; border-radius:.5rem; background:rgba(192,57,43,.1); color:var(--fire); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; transition:background .2s, color .2s; }
.service-card:hover .service-icon { background:var(--fire); color:#fff; }
.service-card h3 { font-size:1.25rem; font-weight:700; }
.service-card p { margin-top:.5rem; font-size:.875rem; color:var(--muted-fg); }
.service-card .learn-more { margin-top:1.25rem; display:inline-flex; align-items:center; gap:.25rem; font-size:.875rem; font-weight:600; color:var(--fire); }

/* ── Why Us ── */
.why-us { padding:5rem 0; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.why-grid { margin-top:2rem; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.why-item { display:flex; gap:1rem; }
.why-icon { width:2.75rem; height:2.75rem; border-radius:.5rem; background:rgba(192,57,43,.1); color:var(--fire); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.why-item h4 { font-weight:600; }
.why-item p { font-size:.875rem; color:var(--muted-fg); margin-top:.25rem; }

/* ── Industries ── */
.industries { background:var(--charcoal); color:#fff; padding:5rem 0; text-align:center; }
.industries-grid { margin-top:3rem; display:grid; grid-template-columns:repeat(6,1fr); gap:1.5rem; }
.industry-card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:.75rem; padding:1.5rem 1rem; transition:background .2s; }
.industry-card:hover { background:rgba(255,255,255,.1); }
.industry-card svg { color:var(--fire); margin:0 auto .75rem; }
.industry-card p { font-size:.875rem; font-weight:500; }

/* ── Testimonials ── */
.testimonials { padding:5rem 0; }
.testimonials-grid { margin-top:3rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.testimonial-card { background:var(--card); border:1px solid var(--border); border-radius:.75rem; padding:1.75rem; box-shadow:var(--shadow-elegant); }
.stars { display:flex; gap:.25rem; color:var(--fire); margin-bottom:1rem; }
.testimonial-card blockquote { font-size:.875rem; line-height:1.7; }
.testimonial-card figcaption { margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.testimonial-card .name { font-weight:600; font-size:.875rem; }
.testimonial-card .role { font-size:.75rem; color:var(--muted-fg); }

/* ── FAQ ── */
.faq-section { background:var(--muted); padding:5rem 0; }
.faq-list { display:flex; flex-direction:column; gap:.75rem; }
details.faq-item { background:var(--card); border:1px solid var(--border); border-radius:.5rem; padding:1.25rem; }
details.faq-item summary { font-weight:600; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
details.faq-item summary::-webkit-details-marker { display:none; }
details.faq-item summary .toggle { color:var(--fire); font-size:1.5rem; transition:transform .2s; flex-shrink:0; }
details.faq-item[open] summary .toggle { transform:rotate(45deg); }
details.faq-item p { margin-top:.75rem; font-size:.875rem; color:var(--muted-fg); line-height:1.7; }

/* ── CTA Section ── */
.cta-section { background:var(--charcoal); color:#fff; }
.cta-inner { padding:4rem 0; display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center; }
.cta-inner h2 { font-size:clamp(1.75rem,3vw,2.25rem); }
.cta-inner p { margin-top:.75rem; color:rgba(255,255,255,.7); max-width:36rem; }
.cta-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.btn-outline-white { display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.2); color:#fff; padding:.75rem 1.5rem; border-radius:var(--radius); font-weight:600; font-size:.875rem; transition:background .2s; }
.btn-outline-white:hover { background:rgba(255,255,255,.1); }

/* ── Page Hero ── */
.page-hero { position:relative; height:42vh; min-height:320px; display:flex; align-items:flex-end; overflow:hidden; }
.page-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.page-hero-overlay { position:absolute; inset:0; background:var(--gradient-hero); }
.page-hero-content { position:relative; padding-bottom:0.5rem; color:#fff; }
.page-hero-content h1 { font-size:clamp(1.875rem,5vw,3.75rem); max-width:48rem; }
.page-hero-content p { margin-top:1rem; font-size:1rem; color:rgba(255,255,255,.8); max-width:40rem; }
.breadcrumb { margin-top:1.5rem; font-size:.875rem; color:rgba(255,255,255,.6); }
.breadcrumb a { color:rgba(255,255,255,.6); }
.breadcrumb a:hover { color:var(--fire); }
.breadcrumb span { margin:0 .5rem; }

/* ── About Page ── */
.about-values { background:var(--muted); padding:5rem 0; }
.values-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.value-card { background:var(--card); border:1px solid var(--border); border-radius:.75rem; padding:2rem; box-shadow:var(--shadow-elegant); }
.value-card .icon { width:3rem; height:3rem; border-radius:.5rem; background:rgba(192,57,43,.1); color:var(--fire); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; }
.value-card h3 { font-size:1.25rem; }
.value-card p { margin-top:.75rem; color:var(--muted-fg); }
.about-promise { padding:5rem 0; text-align:center; max-width:48rem; margin-inline:auto; }
.about-promise h2 { font-size:clamp(1.875rem,4vw,2.5rem); }
.about-promise p { margin-top:1.25rem; color:var(--muted-fg); }

/* ── Services Page ── */
.services-page-grid { padding:5rem 0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }

/* ── Service Detail Page ── */
.service-detail { padding:5rem 0; display:grid; grid-template-columns:1.4fr 1fr; gap:3rem; }
.service-detail h2 { font-size:clamp(1.875rem,4vw,2.5rem); }
.service-detail .intro { margin-top:1.25rem; color:var(--muted-fg); font-size:1.125rem; line-height:1.7; }
.benefits-grid { margin-top:1.5rem; display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.benefit-item { display:flex; gap:.75rem; align-items:flex-start; }
.benefit-item svg { color:var(--fire); flex-shrink:0; margin-top:.15rem; }
.process-list { margin-top:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.process-step { display:flex; gap:1.25rem; background:var(--card); border:1px solid var(--border); border-radius:.75rem; padding:1.5rem; }
.step-num { width:2.5rem; height:2.5rem; border-radius:.5rem; background:var(--fire); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.service-sidebar { position:sticky; top:7rem; align-self:start; }
.sidebar-header { background:var(--charcoal); color:#fff; border-radius:.75rem; padding:1.5rem; margin-bottom:1.5rem; }
.sidebar-header h3 { font-size:1.25rem; }
.sidebar-header p { margin-top:.5rem; font-size:.875rem; color:rgba(255,255,255,.7); }

/* ── Contact Page ── */
.contact-grid { padding:5rem 0; display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; }
.contact-form-wrap h2 { font-size:clamp(1.875rem,4vw,2.5rem); }
.contact-form-wrap p { margin-top:1rem; color:var(--muted-fg); }
.contact-card { background:var(--card); border:1px solid var(--border); border-radius:.75rem; padding:1.5rem; margin-bottom:1rem; }
.contact-card h3 { font-size:1.125rem; font-weight:700; margin-bottom:1rem; }
.contact-list { display:flex; flex-direction:column; gap:1rem; }
.contact-list li { display:flex; align-items:flex-start; gap:.75rem; font-size:.875rem; }
.contact-list svg { color:var(--fire); flex-shrink:0; margin-top:.15rem; }
.contact-list .label { font-weight:600; }
.contact-list .val { color:var(--muted-fg); }
.contact-list a { color:var(--muted-fg); }
.contact-list a:hover { color:var(--fire); }
.contact-actions { margin-top:1.5rem; display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.emergency-card { background:var(--fire); color:#fff; border-radius:.75rem; padding:1.5rem; }
.emergency-card h3 { font-size:1.125rem; font-weight:700; margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem; }
.emergency-card p { font-size:.875rem; color:rgba(255,255,255,.9); }
.emergency-card a { margin-top:1rem; display:inline-flex; align-items:center; gap:.5rem; background:#fff; color:var(--fire); padding:.625rem 1rem; border-radius:var(--radius); font-weight:600; font-size:.875rem; }
.map-wrap { padding-bottom:5rem; }
.map-wrap .map-inner { border-radius:1rem; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-elegant); }
.map-wrap iframe { width:100%; height:400px; display:block; }

/* ── Contact Form ── */
.contact-form { display:grid; gap:1rem; background:var(--card); border:1px solid var(--border); border-radius:.75rem; padding:1.5rem; box-shadow:var(--shadow-elegant); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.contact-form input, .contact-form select, .contact-form textarea { width:100%; padding:.75rem 1rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); font-family:inherit; font-size:.875rem; color:var(--fg); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline:2px solid var(--fire); outline-offset:1px; }
.contact-form textarea { resize:vertical; }

/* ── FAQ Page ── */
.faq-page { padding:5rem 0; max-width:56rem; }
.faq-group { margin-bottom:3rem; }
.faq-group h2 { font-size:1.5rem; font-weight:700; margin-bottom:1.5rem; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns:1fr 1fr; }
  .industries-grid { grid-template-columns:repeat(3,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .service-detail { grid-template-columns:1fr; }
  .service-sidebar { position:static; }
}
@media (max-width: 768px) {
  main { padding-top:64px; }
  .header-inner { height:64px; }
  .main-nav { display:none; }
  .hamburger { display:block; }
  .mobile-nav.open { display:block; }
  .hero-stats { grid-template-columns:1fr 1fr; }
  .hero-content { grid-template-columns:1fr; }
  .hero-form-wrap { margin-top:1.5rem; }
  .trust-bar-inner { grid-template-columns:1fr 1fr; }
  .about-preview, .why-us { grid-template-columns:1fr; }
  .about-badge { display:none; }
  .services-grid, .services-page-grid { grid-template-columns:1fr; }
  .industries-grid { grid-template-columns:1fr 1fr; }
  .testimonials-grid { grid-template-columns:1fr; }
  .values-grid { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .cta-inner { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; }
  .benefits-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .floating-btns { right:.75rem; bottom:.75rem; }
  .float-btn { width:48px; height:48px; }
}