/*
Theme Name: Thurcroft Freelancer Cinematic Mobile
Theme URI: https://thurcroftfreelancer.co.uk/
Author: Thurcroft Freelancer
Description: Responsive cinematic business theme with a clean, button-free hero image and editable WordPress sections.
Version: 4.4.0
Requires PHP: 7.4
Text Domain: tfcm
*/
:root{--bg:#060b23;--panel:#101936;--cyan:#42caff;--purple:#d144ff;--ink:#f8fbff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif}a{color:inherit}img{max-width:100%}.wrap{max-width:1440px;margin:auto;padding:0 25px}.site-header{background:#060b1deF;border-bottom:1px solid #366ca8;position:relative;z-index:5}.topbar{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:12px;padding-bottom:12px}.brand{display:flex;align-items:center;gap:15px;text-decoration:none;font-size:clamp(17px,2vw,28px);font-weight:900;line-height:1.05;letter-spacing:.03em}.mark{border:2px solid #8b49ff;border-radius:16px;padding:11px;font-style:italic;color:#72dbff;font-size:30px;box-shadow:0 0 16px #812aff70}.brand small{display:block;font-size:10px;color:#a9c7ed;font-weight:600;letter-spacing:.13em;margin-top:7px}.contact-line{display:flex;gap:20px;flex-wrap:wrap;font-size:14px;color:#c4d9fa}.contact-line a{text-decoration:none}.nav-shell{border-top:1px solid #23375b}.nav-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.main-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0}.main-nav a{display:block;padding:16px 13px;text-decoration:none;font-weight:650}.main-nav a:hover,.main-nav .current-menu-item a{color:#6fdbff}.quote{display:inline-block;padding:12px 20px;border-radius:10px;background:linear-gradient(110deg,#7422c9,#c03de8);border:1px solid #e4a0ff;text-decoration:none;font-weight:800;box-shadow:0 0 14px #a22dff80;white-space:nowrap}.menu-toggle{display:none}.hero{overflow:hidden;background:#080d29}.hero-art{display:block;width:100%;height:auto;max-height:640px;object-fit:cover}.mobile-hero-title{display:none}.section{padding:56px 0}.section h2{text-align:center;font-size:clamp(28px,4vw,42px);margin:0 0 30px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.service{background:linear-gradient(150deg,#101e45,#100d35);border:1px solid #45caff;border-bottom-color:#d245f8;border-radius:20px;padding:28px 22px;box-shadow:0 9px 30px #0005,0 0 15px #6226d633;transition:transform .25s,box-shadow .25s;text-decoration:none;display:block}.service:hover,.service:focus-visible{transform:translateY(-5px);box-shadow:0 12px 35px #0008,0 0 22px #5b9aff80}.service-icon{font-size:36px;margin-bottom:14px}.service h3{margin:0 0 10px;font-size:22px}.service p{margin:0;color:#c3d2ed;line-height:1.55}.featurebar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:22px;border:1px solid #6073c6;border-radius:18px;margin:0 auto 50px;background:#0c1532}.feature{text-align:center;font-weight:700}.feature span{display:block;color:#8cdbff;font-size:13px;margin-top:5px}.intro{text-align:center;max-width:820px;margin:0 auto 30px;color:#c5d4ee;line-height:1.6}.content{max-width:900px;margin:auto;padding:50px 25px;min-height:45vh;line-height:1.7}.content a{color:#8bdfff}.footer{padding:32px 0;border-top:1px solid #334977;text-align:center;color:#c3cde0}.footer a{color:#8bdfff}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.project{background:#121d3a;padding:24px;border:1px solid #3858a0;border-radius:16px;text-decoration:none}.project h3{margin-top:0}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:10px;top:10px;z-index:999;background:white;color:black;padding:10px}@media(max-width:900px){.contact-line{display:none}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-grid{grid-template-columns:1fr 1fr}.main-nav a{padding:12px 8px}.quote{padding:10px}}@media(max-width:650px){.wrap{padding:0 16px}.topbar{padding-top:10px;padding-bottom:10px}.brand{font-size:17px}.mark{font-size:23px;padding:8px}.brand small{font-size:8px}.menu-toggle{display:block;border:1px solid #5d8fd1;color:white;background:#141f47;padding:10px 14px;border-radius:8px;font-size:16px}.nav-row{display:block}.main-nav{display:none}.nav-row.open .main-nav{display:block}.main-nav ul{display:block}.main-nav a{padding:12px;border-bottom:1px solid #23385b}.nav-row .quote{display:none}.nav-row.open .quote{display:inline-block;margin:12px 0}.mobile-hero-title{display:block;padding:25px 18px 12px;text-align:center}.mobile-hero-title h1{font-size:clamp(28px,7vw,40px);line-height:1.08;margin:0 0 10px}.mobile-hero-title h1 em{font-style:normal;color:#6ed9ff}.mobile-hero-title p{font-size:14px;color:#c6d6ef;line-height:1.5;margin:0}.hero-art{width:190%;max-width:none;transform:translateX(-46%);height:auto;margin-top:10px}.section{padding:36px 0}.cards,.portfolio-grid{grid-template-columns:1fr}.service{padding:22px}.featurebar{grid-template-columns:1fr 1fr;gap:22px}.feature{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* v4.1: Display-only service cards, editable project previews, live camera. */
.service{cursor:default}.service:hover{transform:none;box-shadow:0 9px 30px #0005,0 0 15px #6226d633}
.project{min-width:0}.project-image,.project-placeholder{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:11px;display:block;margin-bottom:18px;background:#090e24;border:1px solid #335da0}.project-placeholder,.camera-placeholder{display:flex;align-items:center;justify-content:center;text-align:center;color:#a9bfdf;font-size:13px;padding:16px}.project-link{display:inline-block;margin-top:8px;color:#8bdfff;text-decoration:underline;text-underline-offset:3px}.camera-frame{width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid #4378bc;border-radius:12px;background:#040817}.camera-frame iframe{display:block;width:100%;height:100%;border:0}.camera-placeholder{height:100%}.camera-caption{font-size:14px;color:#b6c9e8}

/* v4.3: Equal Selected Projects preview frames and aligned cards. */
.portfolio-grid{align-items:stretch}
.portfolio-grid>.project{display:flex;flex-direction:column;min-width:0;height:100%}
.project-preview{width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid #4378bc;border-radius:12px;background:#040817;margin-bottom:18px;flex:none;position:relative}
.project-preview>.project-image,.project-preview>.project-placeholder,.project-preview>.camera-frame{display:block;width:100%;height:100%;aspect-ratio:auto;margin:0;border:0;border-radius:0}
.project-preview>.project-image{object-fit:cover}
.project-preview>.project-placeholder{display:flex}
.project-preview>.camera-frame{overflow:hidden}
.project-preview iframe{display:block;width:100%;height:100%;border:0}
.portfolio-grid>.project h3{margin:0 0 14px;line-height:1.35}
.portfolio-grid>.project .project-link{margin-top:auto;padding-top:8px}
.portfolio-grid>.project .camera-caption{margin:0;color:#b6c9e8;line-height:1.5}