/* John Jennings — cool navy + steel blue (original-site palette). */
:root{
  --bg:#0E1115; --bg-2:#15181E; --bg-3:#21242C;
  --ink:#E0DBD1; --ink-2:#7B8393; --ink-3:#4A515E;
  --rule:rgba(224,219,209,.13); --rule-2:rgba(224,219,209,.07);
  --accent:#8BA6C1; --accent-soft:rgba(139,166,193,.16);
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Archivo",-apple-system,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(20px,4.4vw,62px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:56px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* grit */
body::before{content:"";position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.34;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation:grain 6s steps(5) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}}
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 52%,rgba(0,0,0,.42))}
img{max-width:100%;display:block}
a{color:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--accent);color:#0E1115;padding:10px 14px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase}
main{position:relative;z-index:2}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:40;
  background:rgba(14,17,21,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 var(--pad)}
.nav a{text-decoration:none}
.sig{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav ul a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}
.nav ul a:hover{color:var(--accent)}
.burger{display:none;background:none;border:0;color:var(--ink);cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}

/* ── REEL SPLASH ── */
.splash{position:relative;padding:56px var(--pad) 0;border-bottom:1px solid var(--rule)}
.reel-shell{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 56px);
  overflow:hidden;background:#000;cursor:pointer;border:0;padding:0;display:block}
.reel-shell img{width:100%;height:100%;object-fit:cover;opacity:.88;
  transition:opacity .6s,transform 1.1s cubic-bezier(.2,.7,.3,1)}
.reel-shell:hover img{opacity:1;transform:scale(1.015)}
.reel-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reel-vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(75% 70% at 50% 45%,transparent 40%,rgba(7,8,11,.6))}
.reel-tag{position:absolute;left:22px;bottom:22px;color:#EFECE7;pointer-events:none;
  text-shadow:0 1px 10px rgba(0,0,0,.9)}
.reel-tag::after{content:" ▸"}
.playbtn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:88px;height:88px;border-radius:50%;border:1px solid rgba(239,236,231,.7);
  background:rgba(10,12,15,.42);backdrop-filter:blur(2px);
  display:grid;place-items:center;transition:.3s;pointer-events:none}
.reel-shell:hover .playbtn{background:var(--accent);border-color:var(--accent);
  transform:translate(-50%,-50%) scale(1.07)}
.playbtn::after{content:"";border-left:21px solid #EFECE7;border-top:13px solid transparent;
  border-bottom:13px solid transparent;margin-left:7px}
.reel-shell:hover .playbtn::after{border-left-color:#0E1115}

/* title band under the reel */
.titleband{padding:clamp(34px,5.5vh,66px) var(--pad) clamp(30px,5vh,58px)}
.titleband .kick{color:var(--accent);margin:0 0 16px}
.titleband h1{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.4rem,7.4vw,6.4rem);line-height:.95;letter-spacing:-.025em;
  margin:0;max-width:16ch}
.titleband h1 em{font-style:italic;color:var(--accent)}
.titleband .role{color:var(--ink-3);margin:20px 0 0}

/* strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--rule)}
.strip div{padding:24px var(--pad);border-right:1px solid var(--rule)}
.strip div:last-child{border-right:0}
.strip b{display:block;font-family:var(--mono);font-size:clamp(1.15rem,2.3vw,1.6rem);
  font-weight:500;letter-spacing:-.02em}
.strip span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-top:7px}

/* ── brand sections ── */
.brand{padding:clamp(56px,8vh,104px) 0;border-bottom:1px solid var(--rule)}
.brand-head{padding:0 var(--pad);display:grid;grid-template-columns:1fr 1.5fr;
  gap:var(--pad);align-items:start;margin-bottom:clamp(28px,4vh,48px)}
.brand-head .tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.brand-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,5.4vw,4rem);
  line-height:1;margin:0;letter-spacing:-.02em}
.brand-head h2 em{font-style:italic;color:var(--accent)}
.brand-head .blurb{margin:0;color:var(--ink-2);font-size:1.02rem;max-width:56ch}
.brand-head .blurb strong{color:var(--ink);font-weight:600}

/* carousel */
.stage{position:relative;margin:0 var(--pad);aspect-ratio:16/9;background:#000;
  overflow:hidden;border:1px solid var(--rule);cursor:pointer;padding:0;width:calc(100% - var(--pad)*2);display:block}
.stage img{width:100%;height:100%;object-fit:cover;transition:opacity .45s,transform .9s}
.stage:hover img{opacity:.78;transform:scale(1.015)}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.stage .sgrad{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(5,6,8,.93) 0%,rgba(5,6,8,.55) 26%,transparent 58%)}
.stage .scopy{position:absolute;left:0;right:0;bottom:0;padding:22px clamp(18px,3vw,30px);
  text-align:left;pointer-events:none}
.stage .scopy h3{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,2.8vw,2.1rem);line-height:1.12;margin:0;color:#EFECE7}
.stage .scopy .sm{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(239,236,231,.85);margin-top:10px;
  display:flex;gap:16px;flex-wrap:wrap}
.stage .spill{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;border:1px solid rgba(239,236,231,.75);
  background:rgba(10,12,15,.5);backdrop-filter:blur(2px);
  display:grid;place-items:center;pointer-events:none;transition:.3s}
.stage:hover .spill{background:var(--accent);border-color:var(--accent)}
.stage .spill::after{content:"";border-left:15px solid #EFECE7;border-top:10px solid transparent;
  border-bottom:10px solid transparent;margin-left:4px}
.stage:hover .spill::after{border-left-color:#0E1115}

.railwrap{position:relative;margin-top:16px;padding:0 var(--pad)}
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:10px;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--rule)}
.thumb{flex:0 0 clamp(128px,15vw,186px);scroll-snap-align:start;cursor:pointer;
  background:none;border:0;padding:0;text-align:left;opacity:.5;transition:opacity .3s}
.thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(1) contrast(1.05);
  border:1px solid var(--rule);transition:filter .35s,border-color .3s}
.thumb .tt{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-top:8px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thumb:hover{opacity:.85}
.thumb[aria-current="true"]{opacity:1}
.thumb[aria-current="true"] img{filter:none;border-color:var(--accent)}
.thumb[aria-current="true"] .tt{color:var(--ink)}

/* ── testimonials ── */


.q blockquote{margin:0 0 22px;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.12rem,1.9vw,1.42rem);line-height:1.44;color:var(--ink)}
.q .by{display:flex;align-items:center;gap:14px}
.av{width:44px;height:44px;border-radius:50%;flex:0 0 44px;display:grid;place-items:center;
  background:var(--bg-3);border:1px solid var(--rule);font-family:var(--mono);
  font-size:13px;letter-spacing:.04em;color:var(--accent);text-transform:lowercase}
.q .who b{display:block;font-size:14.5px;font-weight:600}
.q .who span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}

/* ── about ── */
.about{padding:clamp(56px,8vh,104px) var(--pad);display:grid;
  grid-template-columns:.85fr 1.7fr;gap:var(--pad);align-items:start;
  border-bottom:1px solid var(--rule)}
.about img{filter:grayscale(1) contrast(1.06);border:1px solid var(--rule)}
.about .copy p{font-family:var(--serif);font-size:clamp(1.14rem,2vw,1.5rem);
  line-height:1.46;margin:0 0 .95em;color:var(--ink)}
.about .copy p:first-child::first-letter{font-size:3.3em;float:left;line-height:.82;
  padding:.06em .1em 0 0;color:var(--accent)}

/* ── contact ── */
.contact{padding:clamp(56px,8vh,104px) var(--pad)}
.mailto{display:block;font-family:var(--serif);font-size:clamp(1.7rem,6.4vw,4.8rem);
  line-height:1.05;text-decoration:none;letter-spacing:-.02em;word-break:break-word;
  border-bottom:1px solid var(--rule);padding-bottom:clamp(22px,3.4vh,42px);
  margin-bottom:clamp(22px,3.4vh,42px)}
.mailto:hover{color:var(--accent)}
.cmeta{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--pad)}
.cmeta h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 12px;font-weight:500}
.cmeta a{display:block;text-decoration:none;padding:5px 0;font-size:.98rem}
.cmeta a:hover{color:var(--accent)}
.cmeta p{margin:0;color:var(--ink-2);font-size:.96rem}

footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px var(--pad);border-top:1px solid var(--rule);color:var(--ink-3);position:relative;z-index:2}

@media (max-width:900px){
  .brand-head,.about,.cmeta{grid-template-columns:1fr}
  .brand-head{gap:18px}.about{gap:26px}
  .about img{max-width:200px}
  .strip{grid-template-columns:1fr 1fr}
  .strip div:nth-child(2){border-right:0}
  .strip div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .nav ul{display:none}
  .nav ul.open{display:flex;position:fixed;top:56px;left:0;right:0;background:var(--bg-2);
    flex-direction:column;gap:0;border-bottom:1px solid var(--rule);padding:6px var(--pad) 14px}
  .nav ul.open li{padding:12px 0;border-bottom:1px solid var(--rule)}
  .burger{display:block}
  .reel-shell{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  body::before{animation:none}
}

/* ── section subheads reused outside brand sections ── */
.secsub{padding:0 var(--pad);margin-bottom:clamp(24px,3.5vh,42px)}
#words,#about,.contact{padding:clamp(56px,8vh,104px) 0;border-bottom:1px solid var(--rule)}
#words{padding-bottom:clamp(40px,5vh,64px)}
.contact{border-bottom:0}


/* avatars */
img.av{width:44px;height:44px;border-radius:50%;flex:0 0 44px;object-fit:cover;
  border:1px solid var(--rule);background:var(--bg-3)}

/* about grid */
.aboutgrid{padding:0 var(--pad);display:grid;grid-template-columns:.8fr 1.7fr;
  gap:var(--pad);align-items:start}
.aboutgrid img{filter:grayscale(1) contrast(1.05);border:1px solid var(--rule)}
.aboutgrid .copy p{font-family:var(--serif);font-size:clamp(1.14rem,2vw,1.5rem);
  line-height:1.46;margin:0 0 .95em;color:var(--ink)}
.aboutgrid .copy p:first-child::first-letter{font-size:3.3em;float:left;line-height:.82;
  padding:.06em .1em 0 0;color:var(--accent)}

/* carousel arrows + counter */
.stagewrap{position:relative;margin:0 var(--pad);width:calc(100% - var(--pad)*2)}
.stagewrap .stage{margin:0;width:100%}
.navbtn{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:52px;
  background:rgba(10,12,15,.55);border:1px solid rgba(224,219,209,.25);cursor:pointer;
  display:grid;place-items:center;transition:.22s;backdrop-filter:blur(3px);z-index:3;padding:0}
.navbtn:hover{background:var(--accent);border-color:var(--accent)}
.navbtn::after{content:"";width:11px;height:11px;border-top:1.5px solid var(--ink);
  border-right:1.5px solid var(--ink);display:block}
.navbtn:hover::after{border-color:#0E1115}
.navbtn.prev{left:-2px}
.navbtn.prev::after{transform:rotate(-135deg);margin-left:4px}
.navbtn.next{right:-2px}
.navbtn.next::after{transform:rotate(45deg);margin-right:4px}
.counter{position:absolute;top:14px;right:14px;z-index:3;color:#EFECE7;
  background:rgba(10,12,15,.6);padding:6px 10px;backdrop-filter:blur(3px);
  border:1px solid rgba(224,219,209,.2)}

/* ── contact form ── */
.cwrap{padding:0 var(--pad);display:grid;grid-template-columns:1.5fr .85fr;gap:var(--pad);
  align-items:start}
.cform label{display:block;margin-bottom:16px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.cform label span{text-transform:none;letter-spacing:.02em}
.cform .f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform input,.cform textarea{display:block;width:100%;margin-top:8px;background:var(--bg-2);
  border:1px solid var(--rule);color:var(--ink);padding:12px 14px;font-family:var(--sans);
  font-size:15px;letter-spacing:normal;text-transform:none;border-radius:0;transition:border-color .2s}
.cform input:focus,.cform textarea:focus{border-color:var(--accent);outline:none}
.cform textarea{resize:vertical;min-height:120px}
.send{background:var(--accent);color:#0E1115;border:0;padding:14px 30px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;transition:.2s}
.send:hover{background:#AECFE0}
.fnote{margin:14px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);min-height:16px}
.cside h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 12px;font-weight:500}
.cside a{display:block;text-decoration:none;padding:5px 0;font-size:.98rem}
.cside a:hover{color:var(--accent)}
.cside p{margin:0;color:var(--ink-2);font-size:.96rem}

@media (max-width:900px){
  .cwrap,.cform .f2{grid-template-columns:1fr}
  .navbtn{width:38px;height:58px}
}


/* ── rail arrows (on the thumbnail row, not the player) ── */
.railwrap{position:relative}
.railnav{position:absolute;top:calc(50% - 14px);transform:translateY(-50%);
  width:32px;height:52px;background:rgba(10,12,15,.82);border:1px solid var(--rule);
  cursor:pointer;display:grid;place-items:center;transition:.2s;z-index:4;padding:0}
.railnav:hover{background:var(--accent);border-color:var(--accent)}
.railnav::after{content:"";width:9px;height:9px;border-top:1.5px solid var(--ink);
  border-right:1.5px solid var(--ink);display:block}
.railnav:hover::after{border-color:#0E1115}
.railnav.rprev{left:calc(var(--pad) - 10px)}
.railnav.rprev::after{transform:rotate(-135deg);margin-left:3px}
.railnav.rnext{right:calc(var(--pad) - 10px)}
.railnav.rnext::after{transform:rotate(45deg);margin-right:3px}

/* ── about: photo height-matched to the story block ── */
.aboutgrid{display:grid;grid-template-columns:minmax(240px,.62fr) 1fr;
  gap:clamp(24px,3.4vw,54px);padding:0 var(--pad);align-items:stretch}
.aboutgrid img{grid-column:1;grid-row:1 / span 2;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:center 22%;margin:0;
  filter:grayscale(1) contrast(1.05);border:1px solid var(--rule)}
.aboutgrid .copy{grid-column:2;grid-row:1}
.aboutgrid .copy p{font-family:var(--serif);font-size:clamp(1.14rem,1.95vw,1.52rem);
  line-height:1.5;margin:0 0 .9em;color:var(--ink)}
.cvline{grid-column:2;grid-row:2;align-self:start;margin:30px 0 0}
.cvbtn{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  border:1px solid var(--rule);padding:13px 26px;transition:.2s}
.cvbtn:hover{background:var(--accent);border-color:var(--accent);color:#0E1115}

@media (max-width:900px){
  .aboutgrid{grid-template-columns:1fr;gap:26px}
  .aboutgrid img{grid-column:1;grid-row:auto;width:min(100%,420px);height:auto;
    max-height:none;object-fit:contain}
  .aboutgrid .copy,.cvline{grid-column:1;grid-row:auto}
  .cvline{margin-top:22px}
}

.railnav[disabled]{opacity:.22;pointer-events:none}

/* ── testimonial carousel ── */
.qcar{position:relative;padding:0 calc(var(--pad) + 46px);
  border-top:1px solid var(--rule);padding-top:clamp(32px,4.5vh,54px)}
/* The quotes ride one continuous track; .qview clips it so the neighbouring
   quotes stay half-visible at both edges. Panel widths are set in JS. */
.qview{min-height:clamp(230px,26vh,290px);display:flex;align-items:center;overflow:hidden}
.qtrack{display:flex;align-items:center;gap:clamp(28px,4vw,56px);will-change:transform}
.q{flex:0 0 auto;opacity:.26;transition:opacity .5s ease}
.q.on{opacity:1}
/* Only present while an arrow/dot snap is animating; drift sets transform per frame. */
.qcar.snapping .qtrack{transition:transform .55s cubic-bezier(.4,0,.2,1)}
.q blockquote{max-width:64ch;font-size:clamp(1.18rem,2.1vw,1.72rem)!important;line-height:1.46}
.qnav{position:absolute;top:calc(50% + 8px);transform:translateY(-50%);width:34px;height:54px;
  background:rgba(10,12,15,.8);border:1px solid var(--rule);cursor:pointer;display:grid;
  place-items:center;transition:.2s;z-index:3;padding:0}
.qnav:hover{background:var(--accent);border-color:var(--accent)}
.qnav::after{content:"";width:9px;height:9px;border-top:1.5px solid var(--ink);
  border-right:1.5px solid var(--ink);display:block}
.qnav:hover::after{border-color:#0E1115}
.qprev{left:calc(var(--pad) - 4px)}
.qprev::after{transform:rotate(-135deg);margin-left:3px}
.qnext{right:calc(var(--pad) - 4px)}
.qnext::after{transform:rotate(45deg);margin-right:3px}
.qdots{display:flex;gap:9px;margin-top:26px}
.qdots button{width:28px;height:2px;background:var(--rule);border:0;padding:0;cursor:pointer;
  transition:.25s}
.qdots button:hover{background:var(--ink-3)}
.qdots button[aria-selected="true"]{background:var(--accent)}
@media (max-width:640px){
  .qcar{padding-left:var(--pad);padding-right:var(--pad)}
  .qnav{top:auto;bottom:-6px;transform:none;width:30px;height:40px}
  .qprev{left:var(--pad)} .qnext{left:calc(var(--pad) + 38px);right:auto}
  .qdots{margin-top:60px;justify-content:flex-end}
}