/* "Front of house" layer: photography-led sections. Loaded after site.css and uses its tokens.
   See CREATIVE-RESEARCH-2026-11-10.md. No inline styles anywhere (the site's CSP forbids them). */

/* ---------- hero: the room first */
.fh-hero{position:relative;isolation:isolate;display:grid;align-items:end;min-height:min(92vh,880px);background:var(--ink);color:#fff;overflow:hidden}
.fh-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 55%;z-index:-2;animation:fh-drift 28s ease-out both}
.fh-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(11,18,32,.94) 0%,rgba(11,18,32,.78) 34%,rgba(11,18,32,.18) 72%,rgba(11,18,32,.05) 100%),
  linear-gradient(0deg,rgba(11,18,32,.88) 0%,rgba(11,18,32,0) 42%)}
.fh-hero__in{padding:clamp(96px,14vh,160px) 0 clamp(40px,7vh,72px)}
.fh-hero h1{font-size:clamp(2.9rem,7.4vw,6.2rem);line-height:.98;letter-spacing:-.025em;max-width:13ch;margin-bottom:.35em;color:#fff}
.fh-hero h1 span{display:block;color:var(--teal-l)}
.fh-hero__lede{font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.5;max-width:44ch;color:#dbe3ee;margin-bottom:1.6em}
.fh-hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.fh-hero .btn--ghost{background:rgba(11,18,32,.55);border-color:rgba(255,255,255,.45);color:#fff}
.fh-hero__where{position:absolute;right:max(16px,calc((100% - 1160px)/2));bottom:20px;margin:0;font-size:.85rem;color:#dbe3ee;text-align:right;max-width:26ch;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.fh-hero__where b{display:block;color:#fff;font-weight:600}
@keyframes fh-drift{from{transform:scale(1.08)}to{transform:scale(1)}}

/* ---------- proof: two real venues */
.fh-proof{background:var(--paper);padding:clamp(64px,10vw,128px) 0}
.fh-proof__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:center}
.fh-proof h2{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.04;letter-spacing:-.02em;max-width:13ch}
.fh-proof p{font-size:1.15rem;color:var(--pmute);max-width:44ch}
.fh-venues{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.fh-venue{margin:0;position:relative;border-radius:18px;overflow:hidden;background:var(--ink);box-shadow:var(--shadow)}
.fh-venue:nth-child(2){margin-top:56px}
.fh-venue img{width:100%;aspect-ratio:4/5;object-fit:cover}
.fh-venue figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 18px 16px;color:#fff;background:linear-gradient(0deg,rgba(11,18,32,.92),rgba(11,18,32,0))}
.fh-venue figcaption b{display:block;font:600 1.2rem/1.2 var(--serif)}
.fh-venue figcaption span{font-size:.9rem;color:#dbe3ee}

/* ---------- product: big enough to read */
.fh-product{background:var(--ink);color:var(--text);padding:clamp(64px,9vw,120px) 0 clamp(56px,8vw,104px)}
.fh-product__head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(24px,4vw,44px)}
.fh-product h2{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.04;letter-spacing:-.02em;color:#fff;margin:0;max-width:14ch}
.fh-product__head p{font-size:1.15rem;color:#c3ccdb;margin:0}
.fh-product .tabs__bar{justify-content:flex-start}
.fh-product .tabs__body img{border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.55);border:1px solid var(--line)}
.fh-product__foot{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-top:28px}
.fh-product__foot span{color:var(--mute)}

/* ---------- costs: editorial list, not cards */
.fh-costs{background:var(--paper2);padding:clamp(64px,9vw,120px) 0}
.fh-costs h2{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.04;letter-spacing:-.02em;max-width:16ch;margin-bottom:clamp(28px,5vw,56px)}
.fh-costs__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(32px,6vw,88px)}
.fh-cost{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 22px;padding:28px 0;border-top:2px solid var(--ptext)}
.fh-cost__n{grid-row:span 3;font:600 clamp(2.6rem,5vw,4rem)/1 var(--serif);color:var(--teal-d)}
.fh-cost h3{font-size:clamp(1.4rem,2.2vw,1.8rem);margin:0}
.fh-cost p{margin:0;color:var(--pmute)}
.fh-cost__fix{color:var(--ptext);font-weight:600}

/* ---------- journey with the guest's phone */
.fh-flow{background:var(--paper);padding:clamp(64px,9vw,120px) 0}
.fh-flow h2{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.04;letter-spacing:-.02em;max-width:14ch}
.fh-flow__in{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(28px,6vw,80px);align-items:center;margin-top:clamp(24px,4vw,40px)}
.fh-phone{margin:0;justify-self:center;width:min(300px,78vw);padding:12px;border-radius:38px;background:var(--ink);box-shadow:var(--shadow)}
.fh-phone img{width:100%;border-radius:28px}
.fh-flow .journey{margin-top:0;background:var(--paper2)}

/* ---------- photo break */
.fh-break{position:relative;isolation:isolate;display:grid;align-items:center;min-height:min(78vh,720px);background:var(--ink);color:#fff;overflow:hidden}
.fh-break img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;z-index:-2}
.fh-break::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,18,32,.25) 0%,rgba(11,18,32,.82) 62%,rgba(11,18,32,.92) 100%)}
.fh-break__in{display:grid;justify-items:end}
.fh-break blockquote{margin:0;max-width:19ch;font:600 clamp(2rem,4.6vw,3.8rem)/1.06 var(--serif);letter-spacing:-.02em}
.fh-break p{margin:1.2em 0 0;max-width:36ch;color:#dbe3ee;font-size:1.1rem;justify-self:end}

/* ---------- closing call over the room */
.fh-close{position:relative;isolation:isolate;background:var(--ink);color:#fff;padding:clamp(72px,11vw,140px) 0;overflow:hidden;text-align:center}
.fh-close img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.fh-close::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,18,32,.8)}
.fh-close h2{font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.02;letter-spacing:-.02em;color:#fff;max-width:14ch;margin-inline:auto}
.fh-close p{color:#dbe3ee;font-size:1.15rem}
.fh-close .btn--ghost{background:rgba(11,18,32,.55);border-color:rgba(255,255,255,.45);color:#fff}

.fh-hero :focus-visible,.fh-product :focus-visible,.fh-break :focus-visible,.fh-close :focus-visible{outline-color:var(--teal-l)}

@media (max-width:900px){
  .fh-hero::after{background:linear-gradient(0deg,rgba(11,18,32,.96) 0%,rgba(11,18,32,.82) 48%,rgba(11,18,32,.3) 100%)}
  .fh-hero__img{object-position:70% 40%}
  .fh-hero__where{position:static;text-align:left;max-width:none;margin:0;padding:0 16px 24px}
  .fh-proof__in,.fh-product__head,.fh-costs__list,.fh-flow__in{grid-template-columns:minmax(0,1fr)}
  .fh-break::after{background:rgba(11,18,32,.78)}
  .fh-break__in{justify-items:start}
  .fh-break p{justify-self:start}
}
@media (max-width:520px){
  .fh-venue:nth-child(2){margin-top:28px}
  .fh-cost{gap:6px 16px}
}
@media (prefers-reduced-motion:reduce){
  .fh-hero__img{animation:none}
}

/* ---------- inner pages: same photography-led language */
.fh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.fh-head{position:relative;isolation:isolate;overflow:hidden;padding:clamp(96px,16vw,200px) 0 clamp(40px,6vw,72px)}
.fh-head::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(11,18,32,.95) 0%,rgba(11,18,32,.72) 55%,rgba(11,18,32,.45) 100%)}
.fh-head h1{font-size:clamp(2.4rem,5.6vw,4.6rem);line-height:1;letter-spacing:-.02em;max-width:16ch}
.fh-head .lede{font-size:clamp(1.1rem,1.6vw,1.3rem);color:#dbe3ee;max-width:46ch;margin:0}

.fh-feat{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,4vw,56px)}
.fh-feat article{background:none;border:0;border-top:2px solid var(--ptext);border-radius:0;padding:22px 0 30px}
.fh-feat h2{font-size:1.45rem}

.fh-form{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff;display:grid;align-items:center}
.fh-form::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,18,32,.93) 0%,rgba(11,18,32,.8) 55%,rgba(11,18,32,.6) 100%)}
.fh-form h1{color:#fff;font-size:clamp(2.4rem,5vw,4rem);line-height:1.02;letter-spacing:-.02em}
.fh-form .sub,.fh-form .ticks li{color:#dbe3ee}
.fh-form .wrap>div>p>a{color:var(--teal-l)}
.fh-form .card{color:var(--ptext)}
.fh-form .card h1{color:var(--ptext);font-size:2rem}
.fh-form .card .sub{color:var(--pmute)}
.fh-form :focus-visible{outline-color:var(--teal-l)}
.fh-form .card :focus-visible{outline-color:var(--ink)}

/* ---------- baseline corrections applied site-wide */
.eyebrow{text-transform:none;letter-spacing:0;font-size:1rem}
.btn--teal{box-shadow:0 6px 18px rgba(5,10,22,.28)}
@media (max-width:900px){.fh-feat{grid-template-columns:minmax(0,1fr)}}

/* ---------- 2026-11-11: header matched to agentichorizon.co.uk, text face, graphics, hero video */
@font-face{font-family:"Hanken Grotesk";font-weight:100 900;font-display:swap;src:url(/static/fonts/hanken-grotesk-var.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(/static/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(/static/fonts/inter-700.woff2) format("woff2")}
:root{--sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--head:"Inter",system-ui,"Segoe UI",sans-serif}
body{font-size:17.5px}

/* header: same bar, lockup size, link and button type as the Agentic Horizon site */
.nav{background:rgba(11,18,32,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #1f3047;font-family:var(--head)}
.nav__in{min-height:84px}
.brand--lockup img{height:62px;width:auto}
.brand--foot img{height:52px}
.nav__links{gap:4px}
.nav__links>a:not(.btn){font:400 .93rem var(--head);color:var(--mute);padding:.5rem .75rem}
.nav__links>a:not(.btn):hover{background:none;color:var(--text)}
.nav__links>a[aria-current]{background:none;color:var(--teal-l)}
.nav .btn{font:700 .9rem var(--head);padding:9px 18px;border-radius:10px;margin-left:6px}
.nav .btn--teal{color:#042f2e;box-shadow:none}

/* hero video sits over the still and fades in once it is playing */
.fh-hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 55%;z-index:-2;opacity:0;transition:opacity 1.2s ease}
.fh-hero__vid.on{opacity:1}

/* graphics */
.fh-costs__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,6vw,88px);align-items:center;margin-bottom:clamp(28px,5vw,56px)}
.fh-costs__head h2{margin:0}
.fh-costs__head img{width:100%;max-width:460px;justify-self:end}
.fh-cost__ico{grid-row:span 3;width:clamp(48px,6vw,64px);height:auto;margin-top:2px}
.fh-still{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;margin-top:28px;box-shadow:var(--shadow)}
.fh-price{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) auto;padding:0;overflow:hidden;background:var(--ink);border-color:var(--ink);color:var(--text)}
.fh-price>div{padding:clamp(24px,4vw,44px) 0}
.fh-price>.cta-card__act{padding-right:clamp(24px,4vw,44px)}
.fh-price h2{color:#fff}
.fh-price p{color:#c3ccdb}
.fh-price .link{color:var(--teal-l)}
.fh-price__img{width:100%;height:100%;min-height:260px;object-fit:cover}
.fh-price :focus-visible{outline-color:var(--teal-l)}
.fh-product{background:var(--ink) url(/static/img/g-horizon.svg?v=2) no-repeat right -120px top -60px/620px auto}
.foot{background-image:url(/static/img/g-horizon.svg?v=2);background-repeat:no-repeat;background-position:right -140px bottom -150px;background-size:560px auto}
@media (max-width:900px){
  .nav__in{min-height:70px}
  .brand--lockup img{height:40px}
  .brand--foot img{height:44px}
  .nav__links{top:70px}
  .nav__links>a:not(.btn){font-size:1rem;padding:.7rem .4rem}
  .nav .btn{margin-left:0;margin-top:6px;padding:12px 18px}
  .fh-costs__head,.fh-price{grid-template-columns:minmax(0,1fr)}
  .fh-costs__head img{justify-self:start;max-width:340px}
  .fh-price>div{padding:8px clamp(20px,5vw,32px)}
  .fh-price>.cta-card__act{padding:0 clamp(20px,5vw,32px) 28px}
  .fh-price__img{max-height:240px;min-height:0}
  .fh-product{background-size:420px auto;background-position:right -160px top -40px}
}
.nav__links a{white-space:nowrap}
@media (min-width:901px) and (max-width:1180px){.brand--lockup:not(.brand--foot) img{height:46px}.nav__links>a:not(.btn){padding:.5rem .5rem}}
.band.fh-form:not(.band--paper):not(.band--ink):not(.band--teal){background:var(--ink)}
.fh-form .card a:not(.btn){color:var(--teal-d)}
.video{background-image:none}

/* ---------- hero title: a signwriter's lockup that runs the full width, over a tailor's tape.
   site.js sets the font size so the line fits its container exactly; the vw sizes are the fallback. */
@font-face{font-family:"Big Shoulders Display";font-weight:800;font-display:swap;src:url(/static/fonts/big-shoulders-display-800.woff2) format("woff2")}
@font-face{font-family:"Mr Dafoe";font-weight:400;font-display:swap;src:url(/static/fonts/mr-dafoe-400.woff2) format("woff2")}
.fh-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,18,32,.9) 0%,rgba(11,18,32,.55) 26%,rgba(11,18,32,0) 46%)}
.fh-title{display:flex;align-items:baseline;gap:.26em;width:max-content;max-width:none;margin:0;white-space:nowrap;font:800 3.75vw/1 "Big Shoulders Display","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.035em;color:#fff7e8}
.fh-title span{display:block}
.fh-title__b{font:400 1.32em/1 "Mr Dafoe","Brush Script MT",cursive;text-transform:none;letter-spacing:0;color:#ffc66b;transform:rotate(-4deg) translateY(.06em);padding:0 .12em;
  text-shadow:0 0 .05em #fff3d6,0 0 .16em #ff9d2e,0 0 .5em rgba(255,140,30,.75),0 0 1.3em rgba(255,110,20,.5);animation:fh-neon 2.4s steps(1,end) 1 both}
.fh-title__c{color:transparent;-webkit-text-stroke:.028em #fff7e8;text-stroke:.028em #fff7e8}
@keyframes fh-neon{0%{opacity:1}6%{opacity:.2}10%{opacity:1}13%{opacity:.3}17%{opacity:1}40%{opacity:1}42%{opacity:.45}45%{opacity:1}100%{opacity:1}}
.fh-tape{height:20px;margin:clamp(12px,1.6vw,22px) 0 clamp(22px,3.4vw,44px);border-radius:3px;background:
  repeating-linear-gradient(90deg,#16202e 0 2px,transparent 2px 60px) left top/100% 100% no-repeat,
  repeating-linear-gradient(90deg,#16202e 0 1px,transparent 1px 12px) left top/100% 45% no-repeat,
  #f3cf7a;box-shadow:0 6px 18px rgba(0,0,0,.45);transform:rotate(-.6deg);transform-origin:left center}
.fh-hero{grid-template-columns:minmax(0,1fr)}
.fh-hero__in{min-width:0;padding:clamp(40px,6vh,72px) 0 clamp(32px,5vh,56px)}
.fh-hero h1{font-size:clamp(2.6rem,6vw,5rem)}
.fh-hero__lede{margin-bottom:1.3em}
@media (max-width:760px){
  .fh-title{display:block;width:auto;font-size:11.6vw;line-height:.95}
  .fh-title span{width:max-content}
  .fh-title__b{font-size:17vw;margin:.02em 0 .1em;transform:rotate(-4deg)}
  .fh-title__c{font-size:18vw;-webkit-text-stroke-width:.022em}
  .fh-tape{height:16px}
}
@media (prefers-reduced-motion:reduce){.fh-title__b{animation:none}}

/* "by Agentic Horizon": the small second line of the lockup is its own link to the Agentic Horizon site */
.brandset{position:relative;display:inline-block;line-height:0}
.brandset .brand{display:block}
.brandset__by{position:absolute;left:19%;top:50%;width:76%;height:50%;border-radius:3px}
.brandset__by:hover{background:rgba(94,234,212,.14)}
.brandset__by:focus-visible{outline:2px solid var(--teal-l);outline-offset:1px}
.nav .brandset .brand--lockup img{height:62px}
@media (max-width:900px){.nav .brandset .brand--lockup img{height:48px}.brand--foot img{height:48px}}