/* Torque Town Customs - main stylesheet */

:root { --ink:#071019; --navy:#0b1722; --navy-2:#112331; --orange:#ff4d16; --silver:#b9c4ca; --muted:#82909a; --line:rgba(213,225,230,.15); --white:#f4f5f2; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
.icon { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--white); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
button, input, select, textarea { font:inherit; }
.container { width:min(1180px, calc(100% - 48px)); margin:0 auto; }
.site-header { align-items:center; backdrop-filter:blur(16px); background:rgba(7,16,25,.78); border-bottom:1px solid var(--line); display:flex; height:78px; justify-content:space-between; left:0; padding:0 42px; position:absolute; right:0; top:0; z-index:10; }
.brand-logo { display:block; height:auto; max-width:310px; mix-blend-mode:screen; object-fit:contain; }
.brand-logo--compact { max-width:120px; }
.main-nav { align-items:center; display:flex; gap:30px; }
.main-nav > a:not(.button) { color:#b6c1c5; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; transition:color .2s; }
.main-nav > a:hover { color:var(--white); }
.menu-toggle { background:none; border:0; color:var(--white); display:none; }
.button { align-items:center; border:1px solid var(--line); display:inline-flex; font-size:11px; font-weight:800; gap:12px; letter-spacing:.13em; padding:16px 20px; text-transform:uppercase; transition:transform .2s, background .2s; }
.button:hover { transform:translateY(-2px); }
.button--small { padding:11px 15px; }
.button--orange { background:var(--orange); border-color:var(--orange); color:#fff; }
.hero { background:radial-gradient(circle at 75% 45%, rgba(39,75,99,.35), transparent 32%), linear-gradient(112deg, rgba(7,16,25,.97) 10%, rgba(7,16,25,.57) 65%, rgba(7,16,25,.85)), url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=2200&q=85') center/cover; min-height:720px; overflow:hidden; position:relative; }
.hero:after { background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); content:''; height:1px; left:0; position:absolute; right:0; top:51%; }
.hero-grid, .map-grid { background-image:linear-gradient(rgba(183,207,217,.06) 1px, transparent 1px),linear-gradient(90deg, rgba(183,207,217,.06) 1px, transparent 1px); background-size:50px 50px; inset:0; mask-image:linear-gradient(90deg, black, transparent 80%); opacity:.5; position:absolute; }
.hero-glow { background:var(--orange); border-radius:50%; filter:blur(120px); height:180px; opacity:.18; position:absolute; right:5%; top:35%; width:180px; }
.hero-inner { min-height:720px; padding-top:170px; position:relative; }
.hero-copy { max-width:640px; position:relative; z-index:1; }
.eyebrow, .section-label { color:var(--silver); font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow { align-items:center; display:flex; gap:10px; }
.pulse-dot { background:var(--orange); border-radius:50%; box-shadow:0 0 0 5px rgba(255,77,22,.15); height:7px; width:7px; }
h1, h2, h3, p { margin-top:0; }
h1 { font-size:clamp(54px,8vw,110px); letter-spacing:-.07em; line-height:.88; margin:26px 0; max-width:800px; text-transform:uppercase; }
h1 em, h2 span { color:var(--orange); font-style:normal; }
.hero-lede { color:#cad1d1; font-size:17px; line-height:1.6; max-width:420px; }
.hero-actions { align-items:center; display:flex; gap:26px; margin-top:35px; }
.text-link { align-items:center; color:var(--silver); display:inline-flex; font-size:11px; font-weight:800; gap:9px; letter-spacing:.1em; text-transform:uppercase; }
.text-link:hover, .card-link:hover { color:var(--orange); }
.hero-mark { opacity:.85; position:absolute; right:3%; top:160px; width:min(33vw,390px); }
.hero-mark .brand-logo { filter:drop-shadow(0 12px 30px rgba(0,0,0,.5)); width:100%; }
.vertical-caption { color:var(--muted); font-size:9px; letter-spacing:.2em; position:absolute; right:-38px; top:45%; transform:rotate(90deg); }
.hero-readout { bottom:80px; color:var(--muted); display:flex; font-size:9px; gap:30px; letter-spacing:.18em; position:absolute; }
.hero-bottom { align-items:center; bottom:25px; color:var(--muted); display:flex; font-size:9px; gap:18px; letter-spacing:.16em; position:absolute; right:42px; text-transform:uppercase; }
.scroll-line { background:var(--orange); height:1px; width:60px; }
.section-pad { padding:125px 0; }
.intro { background:var(--navy); }
.intro-grid, .section-heading, .band-grid, .booking-grid, .faq-grid, .contact-grid { display:grid; gap:60px; grid-template-columns:1fr 1fr; }
.section-label { align-items:center; display:flex; gap:12px; }
.label-line { background:var(--orange); display:inline-block; height:1px; width:28px; }
h2 { font-size:clamp(42px,5.5vw,78px); letter-spacing:-.07em; line-height:.91; margin:26px 0 0; text-transform:uppercase; }
.intro-body { align-self:end; max-width:460px; }
.large-copy { color:#c7d0d1; font-size:20px; line-height:1.55; margin-bottom:28px; }
.services { background:var(--ink); }
.section-heading { align-items:end; margin-bottom:58px; }
.section-heading > p { color:var(--muted); line-height:1.6; margin:0; max-width:330px; }
.service-grid { display:grid; gap:14px; grid-template-columns:repeat(4,1fr); }
.service-card { background:var(--navy); border:1px solid var(--line); transition:transform .25s, border-color .25s; }
.service-card:hover { border-color:rgba(255,77,22,.7); transform:translateY(-7px); }
.service-image { aspect-ratio:1/1.12; overflow:hidden; position:relative; }
.service-image:after { background:linear-gradient(0deg,rgba(7,16,25,.75),transparent 55%); content:''; inset:0; position:absolute; }
.service-image img { filter:saturate(.8); height:100%; object-fit:cover; transition:transform .5s; width:100%; }
.service-card:hover img { transform:scale(1.06); }
.service-number { color:var(--orange); font-size:11px; font-weight:800; left:18px; letter-spacing:.15em; position:absolute; top:18px; z-index:1; }
.service-content { padding:22px; }
.service-icon { color:var(--orange); margin-bottom:20px; }
.service-content h3 { font-size:18px; letter-spacing:-.03em; margin-bottom:10px; text-transform:uppercase; }
.service-content p { color:var(--muted); font-size:13px; line-height:1.55; min-height:62px; }
.card-link { align-items:center; color:var(--silver); display:flex; font-size:10px; font-weight:800; gap:8px; letter-spacing:.12em; text-transform:uppercase; }
.band { background:var(--navy-2); border-block:1px solid var(--line); padding:105px 0; }
.standard-list { align-self:end; }
.standard-list > div { border-top:1px solid var(--line); display:flex; gap:32px; padding:22px 0; }
.standard-list b { color:var(--orange); font-size:11px; letter-spacing:.1em; }
.standard-list span { display:flex; flex-direction:column; gap:5px; }
.standard-list strong { font-size:14px; letter-spacing:.05em; text-transform:uppercase; }
.standard-list small { color:var(--muted); font-size:13px; }
.booking { background:var(--white); color:var(--ink); }
.booking .section-label, .booking .muted-copy { color:#68757c; }
.booking-notes { border-top:1px solid #cbd1d0; margin-top:45px; max-width:430px; }
.booking-notes > div { align-items:flex-start; border-bottom:1px solid #cbd1d0; display:flex; gap:15px; padding:16px 0; }
.booking-notes svg { color:var(--orange); }
.booking-notes span { display:flex; flex-direction:column; gap:5px; }
.booking-notes strong { font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.booking-notes small { color:#69787e; font-size:12px; }
.request-form { background:#e8ecea; padding:34px; }
.request-form label { color:#526169; display:block; font-size:10px; font-weight:800; letter-spacing:.12em; margin-bottom:17px; text-transform:uppercase; }
.form-row { display:grid; gap:16px; grid-template-columns:1fr 1fr; }
.request-form input, .request-form select, .request-form textarea { background:transparent; border:0; border-bottom:1px solid #aab5b7; border-radius:0; color:var(--ink); display:block; margin-top:8px; outline:none; padding:10px 0; width:100%; }
.request-form input:focus, .request-form select:focus, .request-form textarea:focus { border-color:var(--orange); }
.request-form textarea { resize:vertical; }
  .request-form .button { margin-top:8px; }
  .request-form .button:disabled { cursor:wait; opacity:.65; }
  .website-field { height:1px; left:-9999px; overflow:hidden; position:absolute; top:auto; width:1px; }
  .form-error { color:#b42318; font-size:12px; line-height:1.5; margin:12px 0 0; }
  .form-note { color:#77858b; font-size:11px; line-height:1.5; margin:18px 0 0; }
.success-state { align-items:flex-start; display:flex; flex-direction:column; min-height:340px; justify-content:center; }
.success-state svg { color:var(--orange); }
.success-state h3 { font-size:30px; margin:20px 0 9px; text-transform:uppercase; }
.success-state p { color:#65737a; line-height:1.5; max-width:340px; }
.faq { background:var(--navy); }
.faq-list { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item button { align-items:center; background:none; border:0; color:var(--white); cursor:pointer; display:flex; font-size:15px; font-weight:700; justify-content:space-between; letter-spacing:.03em; padding:22px 0; text-align:left; width:100%; }
.faq-item p { color:var(--muted); font-size:14px; line-height:1.6; max-width:600px; padding:0 35px 22px 0; }
.chevron { transition:transform .2s; }
.chevron--open { color:var(--orange); transform:rotate(180deg); }
.contact { background:var(--navy-2); }
.contact-copy p { color:var(--silver); margin:32px 0 10px; }
.contact-copy address { color:var(--white); font-size:18px; font-style:normal; line-height:1.6; }
.contact-links { display:flex; flex-direction:column; gap:16px; margin-top:34px; }
.contact-links a { align-items:center; color:var(--silver); display:flex; font-size:12px; gap:10px; letter-spacing:.08em; text-transform:uppercase; }
.contact-links a:hover { color:var(--orange); }
.map-card { background:#1a303b; border:1px solid var(--line); min-height:390px; overflow:hidden; position:relative; } .map-card iframe { border:0; filter:saturate(.75) contrast(1.05); height:100%; min-height:390px; opacity:.88; width:100%; }
.map-grid { background-size:34px 34px; mask-image:none; opacity:.8; transform:rotate(-12deg) scale(1.3); }
.map-card:before, .map-card:after { border:1px solid rgba(255,255,255,.13); border-radius:50%; content:''; height:240px; left:50%; position:absolute; top:48%; transform:translate(-50%,-50%); width:380px; }
.map-card:after { height:160px; width:260px; }
.map-pin { align-items:center; color:var(--orange); display:flex; gap:12px; left:50%; position:absolute; top:45%; transform:translate(-50%,-50%); z-index:1; }
.map-pin span { color:var(--white); font-size:12px; font-weight:800; letter-spacing:.09em; line-height:1.3; text-transform:uppercase; }
.map-pin small { color:var(--muted); font-size:9px; font-weight:400; }
.map-coords { bottom:22px; color:var(--muted); font-size:9px; letter-spacing:.12em; line-height:1.6; position:absolute; right:25px; text-align:right; }
.map-action { align-items:center; background:var(--orange); bottom:22px; display:flex; font-size:10px; font-weight:800; gap:9px; left:22px; letter-spacing:.11em; padding:12px 14px; position:absolute; text-transform:uppercase; }
.site-footer { background:var(--ink); padding:54px 0 20px; }
.footer-top { align-items:center; display:grid; grid-template-columns:1fr 1fr auto; }
.footer-top p { color:var(--silver); font-size:12px; letter-spacing:.1em; line-height:1.5; margin:0; text-transform:uppercase; }
.footer-top p span { color:var(--orange); }
.footer-bottom { border-top:1px solid var(--line); color:var(--muted); display:flex; font-size:10px; justify-content:space-between; letter-spacing:.12em; margin-top:50px; padding-top:18px; text-transform:uppercase; }
.footer-bottom a:hover { color:var(--white); }
@media (max-width: 900px) { .site-header { padding:0 24px; } .main-nav { display:none; } .main-nav--open { align-items:stretch; background:var(--navy); display:flex; flex-direction:column; gap:0; left:0; padding:20px 24px 28px; position:absolute; right:0; top:77px; } .main-nav--open > a:not(.button) { border-bottom:1px solid var(--line); padding:18px 0; } .nav-cta { margin-top:18px; justify-content:center; } .menu-toggle { display:block; } .hero-inner { min-height:680px; padding-top:145px; } .hero-mark { opacity:.22; right:-10%; top:180px; width:350px; } .hero-copy { max-width:570px; } .service-grid { grid-template-columns:repeat(2,1fr); } .intro-grid, .section-heading, .band-grid, .booking-grid, .faq-grid, .contact-grid { gap:40px; grid-template-columns:1fr; } .section-heading { align-items:start; } .standard-list { margin-top:20px; } }
@media (max-width: 560px) { .container { width:min(100% - 34px,1180px); } .site-header { height:68px; } .brand-logo--compact { max-width:90px; } .hero { min-height:690px; } .hero-inner { min-height:690px; padding-top:125px; } h1 { font-size:54px; } .hero-lede { font-size:15px; max-width:310px; } .hero-actions { align-items:flex-start; flex-direction:column; gap:22px; } .hero-readout { bottom:70px; gap:12px; } .hero-bottom { bottom:20px; left:17px; right:auto; } .section-pad { padding:82px 0; } h2 { font-size:52px; } .service-grid { gap:10px; grid-template-columns:1fr 1fr; } .service-content { padding:15px; } .service-content h3 { font-size:14px; } .service-content p { font-size:12px; min-height:100px; } .service-image { aspect-ratio:1/1; } .form-row { grid-template-columns:1fr; } .request-form { padding:23px; } .footer-top { align-items:start; gap:22px; grid-template-columns:1fr; } .footer-bottom { flex-wrap:wrap; gap:12px; } .band { padding:82px 0; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { scroll-behavior:auto!important; transition:none!important; } }

/* =====================================================================
   ADDITIONS: phone link, mobile call bar, service pages, footer links
   ===================================================================== */
.intro-extra { color:var(--muted); font-size:15px; line-height:1.7; margin:0 0 26px; max-width:560px; }
.service-content h3 a:hover { color:var(--orange); }
.card-links { display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; }

/* Phone link in the header */
.main-nav > a.nav-phone { align-items:center; color:var(--white); display:inline-flex; gap:8px; letter-spacing:.08em; }
.main-nav > a.nav-phone .icon { color:var(--orange); }
@media (max-width: 1180px) { .nav-phone__text { display:none; } .main-nav > a.nav-phone { border:1px solid var(--line); height:40px; justify-content:center; width:40px; } }

/* Fixed call / quote bar on phones */
.mobile-cta { display:none; }
.mobile-cta a { align-items:center; display:flex; font-size:11px; font-weight:800; gap:10px; justify-content:center; letter-spacing:.13em; padding:15px 10px; text-transform:uppercase; }
.mobile-cta__call { border:1px solid var(--line); color:var(--white); }
.mobile-cta__book { background:var(--orange); color:#fff; }
@media (max-width: 900px) {
  .mobile-cta { background:rgba(7,16,25,.96); backdrop-filter:blur(14px); border-top:1px solid var(--line); bottom:0; display:grid; gap:10px; grid-template-columns:1fr 1fr; left:0; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); position:fixed; right:0; z-index:40; }
  body { padding-bottom:78px; }
  .main-nav--open > a.nav-phone { border:0; border-bottom:1px solid var(--line); display:flex; height:auto; justify-content:flex-start; width:auto; }
  .main-nav--open .nav-phone__text { display:inline; }
}

/* Footer service links */
.footer-links { border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:44px; padding-top:26px; }
.footer-links a { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; transition:color .2s; }
.footer-links a:hover { color:var(--white); }
.footer-links + .footer-bottom { margin-top:26px; }

/* ---------- Service pages ---------- */
.page-hero { background:radial-gradient(circle at 78% 30%, rgba(39,75,99,.38), transparent 36%), var(--ink); overflow:hidden; padding:140px 0 80px; position:relative; }
.page-hero-inner { position:relative; z-index:1; }
.breadcrumbs { align-items:center; color:var(--muted); display:flex; flex-wrap:wrap; font-size:10px; font-weight:800; gap:10px; letter-spacing:.14em; margin-bottom:36px; text-transform:uppercase; }
.breadcrumbs a:hover { color:var(--white); }
.breadcrumbs [aria-current] { color:var(--silver); }
.page-grid { align-items:center; display:grid; gap:60px; grid-template-columns:1.25fr .75fr; }
.page-hero h1 { font-size:clamp(36px,5vw,68px); line-height:.96; margin:22px 0 24px; max-width:none; }
.page-hero h1 em { color:var(--orange); font-style:normal; }
.page-hero .hero-lede { max-width:600px; }
.page-hero .hero-actions { flex-wrap:wrap; margin-top:34px; }
.page-figure { border:1px solid var(--line); margin:0; max-height:560px; overflow:hidden; position:relative; }
.page-figure:after { background:linear-gradient(180deg, transparent 55%, rgba(7,16,25,.55)); content:""; inset:0; pointer-events:none; position:absolute; }
.page-figure img { display:block; height:100%; max-height:560px; object-fit:cover; width:100%; }

.page-body { background:var(--ink); }
.prose-grid { align-items:start; display:grid; gap:70px; grid-template-columns:1.4fr .6fr; }
.prose h2 { font-size:clamp(24px,3vw,36px); line-height:1; margin:52px 0 16px; }
.prose h2:first-child { margin-top:0; }
.prose p { color:#bcc6ca; font-size:16px; line-height:1.75; margin:0; max-width:680px; }
.check-list { display:grid; gap:12px; list-style:none; margin:0; padding:0; }
.check-list li { align-items:center; border-bottom:1px solid var(--line); color:var(--white); display:flex; font-size:15px; gap:14px; padding:0 0 12px; }
.check-list .icon { color:var(--orange); }
.side-card { background:var(--navy); border:1px solid var(--line); display:grid; gap:14px; padding:30px; position:sticky; top:100px; }
.side-card h3 { font-size:20px; letter-spacing:-.03em; line-height:1.1; margin:0; text-transform:uppercase; }
.side-card p { color:var(--muted); font-size:14px; line-height:1.6; margin:0; }
.side-card .button { justify-content:center; }
.side-card address { border-top:1px solid var(--line); color:var(--silver); font-size:13px; font-style:normal; line-height:1.7; margin-top:6px; padding-top:18px; }

.qa-section { background:var(--navy); }
.qa-grid { display:grid; gap:80px; grid-template-columns:.8fr 1.2fr; }
.qa-section h2 { font-size:clamp(34px,5vw,64px); line-height:.92; margin-top:22px; }
.qa-section h2 span { color:var(--orange); }
.qa-item { border-top:1px solid var(--line); }
.qa-item:last-child { border-bottom:1px solid var(--line); }
.qa-item summary { align-items:center; cursor:pointer; display:flex; font-size:15px; font-weight:700; gap:20px; justify-content:space-between; list-style:none; padding:22px 0; }
.qa-item summary::-webkit-details-marker { display:none; }
.qa-item summary .icon { color:var(--orange); transition:transform .2s; }
.qa-item[open] summary .icon { transform:rotate(180deg); }
.qa-item p { color:#aeb9be; font-size:15px; line-height:1.7; margin:0; max-width:620px; padding:0 0 24px; }

.related { background:var(--ink); }
.related-grid { display:grid; gap:14px; grid-template-columns:repeat(3,1fr); margin-top:28px; }
.related-card { align-items:center; background:var(--navy); border:1px solid var(--line); display:flex; gap:16px; padding:22px; transition:border-color .2s, transform .2s; }
.related-card:hover { border-color:var(--orange); transform:translateY(-2px); }
.related-card b { color:var(--orange); font-size:12px; }
.related-card span { flex:1; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

@media (max-width: 900px) {
  .page-hero { padding:112px 0 56px; }
  .page-grid, .prose-grid, .qa-grid { gap:36px; grid-template-columns:1fr; }
  .page-figure, .page-figure img { max-height:300px; }
  .side-card { position:static; }
  .related-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px) { .related-grid { grid-template-columns:1fr; } .page-hero .hero-actions .button { justify-content:center; width:100%; } }

/* Header logo sized to fit inside the header bar; hero text width */
.brand-logo--compact { height:58px; max-width:none; width:auto; }
@media (max-width: 560px) { .brand-logo--compact { height:50px; max-width:none; } }
.hero-copy .hero-lede { max-width:520px; }
@media (max-width: 560px) { .hero-copy .hero-lede { max-width:310px; } }
@media (min-width: 901px) { .hero-inner { min-height:880px; } }
