/* ============================================================
   AI-INCLUDED.CO.UK — SHARED STYLESHEET
   Carried over from the _template.html prototype, plus
   components for service cards, the services hub and
   coming-soon placeholders. Amber-on-coal.
   ============================================================ */

:root{
  --amber:#D49010; --amber-light:#E8A020; --amber-pale:#F0C060; --amber-text:#E8A020;
  --cream:#EDE4D0; --coal:#0D0B08; --charcoal:#161410;
  /* --smoke retired 2026-06-15: faint grey was hard to read; secondary text now uses --cream */
  --panel:#1A1714; --panel-lighter:#221E1A;
  --border:rgba(200,134,10,0.25); --border-bright:rgba(200,134,10,0.5);
  --rail-w:228px; --shell-max:1440px; --pad:40px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--coal); color:var(--cream);
  font-family:'DM Sans',system-ui,sans-serif; font-size:18px; line-height:1.6; min-height:100vh;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 80% 50% at 18% 15%, rgba(200,134,10,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 85%, rgba(200,134,10,0.03) 0%, transparent 60%);
}
a{color:inherit;}

/* ── TOP BAR ── */
.topbar{position:sticky; top:0; z-index:100; background:rgba(13,11,8,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border);}
.topbar-inner{max-width:var(--shell-max); margin:0 auto; padding:0 var(--pad); height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.nav-logo{text-decoration:none; display:flex; flex-direction:column; line-height:1;}
.logo-line{display:flex; align-items:stretch;}
.nav-logo .l{font-family:Arial,sans-serif; font-size:11px; font-weight:400; color:var(--cream); display:flex; align-items:center; justify-content:center; width:14px; height:14px;}
.nav-logo .l.hi{background:#C00000; color:#fff; font-weight:700;}
.logo-julian{padding-left:28px;}
.burger{display:none; background:none; border:none; cursor:pointer; padding:6px; color:var(--cream);}
.burger svg{display:block;}
.utils{display:flex; align-items:center; gap:4px;}
.util-btn{background:none; border:none; cursor:pointer; color:var(--cream); width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:3px; transition:color .2s, background .2s; text-decoration:none;}
.util-btn:hover{color:var(--amber); background:rgba(200,134,10,0.08);}
.util-btn svg{width:19px; height:19px; display:block;}
.util-sep{width:1px; height:22px; background:var(--border); margin:0 6px;}

/* ── DOMAIN BAR ── */
.domain-bar{background:var(--amber); position:sticky; top:64px; z-index:99;}
.domain-inner{max-width:var(--shell-max); margin:0 auto; padding:0 var(--pad); height:22px; display:flex; justify-content:flex-end; align-items:center;}
.db-letter{font-family:Arial,sans-serif; font-size:11px; font-weight:700; color:var(--coal); width:16px; text-align:center;}
.db-sep{font-family:Arial,sans-serif; font-size:11px; color:var(--coal); width:9px; text-align:center;}

/* ── SHELL: RAIL + CONTENT ── */
.shell{max-width:var(--shell-max); margin:0 auto; display:grid; grid-template-columns:var(--rail-w) 1fr;}
.rail{position:sticky; top:86px; align-self:start; height:calc(100vh - 86px); padding:36px 24px; border-right:1px solid var(--border); overflow-y:auto;}
.rail-label{font-family:'Inter',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--amber-text); opacity:.8; margin:0 12px 14px;}
.rail-nav{list-style:none; display:flex; flex-direction:column; gap:2px;}
.rail-nav a{display:block; font-family:'Inter',sans-serif; font-size:13px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; color:var(--cream); text-decoration:none; padding:11px 12px; border-left:2px solid transparent; transition:color .2s, border-color .2s, background .2s;}
.rail-nav a:hover{color:var(--amber); background:rgba(200,134,10,0.05);}
.rail-nav a.active{color:var(--amber); border-left-color:var(--amber); background:rgba(200,134,10,0.07);}
.rail-cta{margin-top:24px; padding:0 12px;}
.rail-cta a{display:block; text-align:center; padding:12px 14px; background:var(--amber); color:var(--coal); font-family:'Inter',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; text-decoration:none; transition:background .2s;}
.rail-cta a:hover{background:var(--amber-light);}

/* ── CONTENT ── */
.content{padding:56px var(--pad) 96px; min-width:0; position:relative; z-index:1;}
.page-label{font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber-text); margin-bottom:18px;}
.content h1{font-size:clamp(34px,4.2vw,50px); font-weight:700; line-height:1.1; margin-bottom:18px; max-width:16ch;}
.lede{font-size:19px; color:var(--cream); max-width:60ch; margin-bottom:8px;}
.measure{max-width:68ch;}
.measure p{margin:22px 0; color:var(--cream);}
.measure h2{font-size:24px; font-weight:600; margin:44px 0 6px;}
.media{margin:40px 0; max-width:none; background:var(--panel); border:1px solid var(--border); border-radius:3px; aspect-ratio:16/8; display:flex; align-items:center; justify-content:center; color:var(--cream); font-family:'Inter',sans-serif; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;}
.note{display:inline-block; margin-top:8px; padding:3px 10px; background:rgba(200,134,10,0.1); border:1px solid var(--border); border-radius:2px; font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--amber-text);}

/* end CTA band */
.cta-band{margin:64px 0 0; padding:40px var(--pad); background:var(--panel); border:1px solid var(--border); border-radius:3px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cta-band p{font-size:20px; font-weight:600; color:var(--cream); max-width:34ch;}
.cta-primary{display:inline-block; padding:14px 28px; background:var(--amber); color:var(--coal); font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; transition:background .2s; white-space:nowrap;}
.cta-primary:hover{background:var(--amber-light);}

/* ── HERO (Home) ── */
.hero{padding:24px 0 8px;}
.hero h1{font-size:clamp(40px,5.2vw,64px); max-width:18ch;}
.hero .promise{color:var(--amber-text);}
.hero-sub{font-size:21px; color:var(--cream); max-width:54ch; margin:8px 0 28px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.btn-secondary{display:inline-block; padding:14px 26px; border:1px solid var(--border-bright); color:var(--cream); font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; transition:border-color .2s, background .2s;}
.btn-secondary:hover{border-color:var(--amber); background:rgba(200,134,10,0.06);}

/* ── INTAKE TEASER ── */
.intake{margin:48px 0 0; padding:32px var(--pad); background:linear-gradient(180deg,var(--panel),var(--charcoal)); border:1px solid var(--border-bright); border-radius:4px;}
.intake h2{font-size:24px; font-weight:600; margin-bottom:8px;}
.intake p{color:var(--cream); max-width:54ch; margin-bottom:18px;}
.intake-doors{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px;}
.door{display:block; padding:14px 16px; background:var(--coal); border:1px solid var(--border); border-radius:3px; text-decoration:none; color:var(--cream); font-size:15px; transition:border-color .2s, background .2s;}
.door:hover{border-color:var(--amber); background:rgba(200,134,10,0.05);}

/* ── SERVICE CARDS / HUB ── */
.audience-block{margin:40px 0;}
.audience-block > h2{font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber-text); margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid var(--border);}
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;}
.card{position:relative; display:flex; flex-direction:column; padding:22px; background:var(--panel); border:1px solid var(--border); border-radius:4px; text-decoration:none; color:var(--cream); transition:border-color .2s, transform .15s, background .2s;}
.card:hover{border-color:var(--amber); transform:translateY(-2px); background:var(--panel-lighter);}
.card.hero-card{border-color:var(--border-bright); background:linear-gradient(180deg,rgba(200,134,10,0.08),var(--panel));}
.card h3{font-size:20px; font-weight:600; margin-bottom:8px; padding-right:90px;}
.card p{font-size:15px; color:var(--cream); flex:1;}
.card .price{margin-top:16px; font-family:'Inter',sans-serif; font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--amber-text);}
.badge{position:absolute; top:18px; right:18px; font-family:'Inter',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:4px 9px; border-radius:2px;}
.badge.live{background:rgba(120,200,120,0.14); color:#8FD89A; border:1px solid rgba(120,200,120,0.35);}
.badge.soon{background:rgba(200,134,10,0.12); color:var(--amber-text); border:1px solid var(--border);}

/* ── CONTACT FORM ── */
.contact-form{max-width:46rem; margin:32px 0 8px;}
.contact-form .field{margin-bottom:18px; display:flex; flex-direction:column;}
.contact-form label{font-family:'Inter',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--amber-text); margin-bottom:7px;}
.contact-form input,
.contact-form select,
.contact-form textarea{
  font-family:'DM Sans',system-ui,sans-serif; font-size:16px; color:var(--cream);
  background:var(--panel); border:1px solid var(--border); border-radius:3px;
  padding:12px 14px; width:100%; transition:border-color .2s, background .2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{outline:none; border-color:var(--amber); background:var(--panel-lighter);}
.contact-form textarea{resize:vertical; min-height:120px;}
.contact-form select{appearance:none; cursor:pointer;}
.contact-form button{margin-top:6px; border:none; cursor:pointer;}
/* honeypot — visually and from AT, but present in the DOM for bots */
.contact-form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
/* placeholder: clearly legible, just lighter weight than typed text */
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:#B7AC95; opacity:1;}

/* ── CONTACT: form + contact-card aside ── */
.contact-layout{display:grid; grid-template-columns:1fr 260px; gap:40px; align-items:start; margin-top:24px;}
.contact-card{background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:22px; position:sticky; top:110px;}
.contact-card h2{font-size:15px; font-family:'Inter',sans-serif; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--amber-text); margin-bottom:14px;}
.contact-card .qr{background:#fff; border-radius:6px; padding:12px; display:block;}
.contact-card .qr img,.contact-card .qr svg{display:block; width:100%; height:auto;}
.contact-card .qr-cap{font-size:13px; color:var(--cream); margin:12px 0 18px; text-align:center;}
.vcard-btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px 16px; background:var(--amber); color:var(--coal); font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; text-decoration:none; border-radius:3px; transition:background .2s;}
.vcard-btn:hover{background:var(--amber-light);}
.vcard-btn svg{width:16px; height:16px;}
@media (max-width:860px){
  .contact-layout{grid-template-columns:1fr;}
  .contact-card{position:static; max-width:320px;}
}

/* coming-soon page block */

/* coming-soon page block */
.soon-block{margin:32px 0; padding:36px var(--pad); background:var(--panel); border:1px dashed var(--border-bright); border-radius:4px; text-align:center;}
.soon-block .tag{font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber-text);}
.soon-block h2{font-size:26px; font-weight:600; margin:10px 0 8px;}
.soon-block p{color:var(--cream); max-width:52ch; margin:0 auto;}

/* ── FOOTER ── */
footer{position:relative; z-index:1; max-width:var(--shell-max); margin:0 auto; padding:0 var(--pad) 48px;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; padding-top:32px; border-top:1px solid var(--border); gap:20px; flex-wrap:wrap;}
.footer-name{font-family:'Inter',sans-serif; font-size:13px; color:var(--cream);}
.footer-name strong{color:var(--cream); font-weight:500;}
.footer-links{display:flex; gap:26px; flex-wrap:wrap;}
.footer-links a{font-family:'Inter',sans-serif; font-size:12px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--cream); text-decoration:none; transition:color .2s;}
.footer-links a:hover{color:var(--amber);}

/* ── MOBILE DRAWER ── */
.drawer{position:fixed; inset:0; z-index:200; display:none;}
.drawer.open{display:block;}
.drawer-scrim{position:absolute; inset:0; background:rgba(0,0,0,0.55);}
.drawer-panel{position:absolute; top:0; left:0; bottom:0; width:280px; max-width:82vw; background:var(--charcoal); border-right:1px solid var(--border); padding:20px 0; transform:translateX(-100%); transition:transform .25s ease; overflow-y:auto;}
.drawer.open .drawer-panel{transform:translateX(0);}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:0 18px 16px; border-bottom:1px solid var(--border);}
.drawer-head .lab{font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber-text);}
.drawer-close{background:none; border:none; color:var(--cream); cursor:pointer; padding:4px; display:flex;}
.drawer-nav{list-style:none; padding:8px 0;}
.drawer-nav a{display:block; font-family:'Inter',sans-serif; font-size:14px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; color:var(--cream); text-decoration:none; padding:13px 22px; border-left:2px solid transparent;}
.drawer-nav a.active{color:var(--amber); border-left-color:var(--amber); background:rgba(200,134,10,0.07);}

/* ── RESPONSIVE ── */
@media (max-width:768px){
  :root{--pad:22px;}
  .burger{display:flex;}
  .shell{grid-template-columns:1fr;}
  .rail{display:none;}
  .content{padding:36px var(--pad) 72px;}
  .util-desktop{display:none;}
  .cta-band{padding:28px var(--pad);}
  .footer-inner{flex-direction:column; text-align:center; align-items:center;}
}
@media (min-width:769px){
  .util-mobile-only{display:none;}
}