/* Eko icon layer — added by Claude, 6 October 2026.
   Loads after hybrid.css. Nothing in styles.css or hybrid.css is edited.
   Remove this file, enhance.js and the <svg class="ico"> tags to return to the previous build. */

/* ---------- Icon system ----------
   One 24px grid, one line weight, one filled "tally light" accent per icon.
   Line colour follows the text colour; the accent follows --ico-acc. */
.eko-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{display:inline-block;flex:none;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.i-dot{fill:var(--ico-acc,var(--orange));stroke:none}

/* Accent colour per background */
.services,.about-section,.map-contact{--ico-acc:var(--orange)}
.reel-section,.intro,.clients,.portfolio{--ico-acc:var(--cream)}
.process{--ico-acc:var(--orange)}
.contact{--ico-acc:var(--cream)}

/* ---------- Section labels ---------- */
.section-kicker .k-ico{width:17px;height:17px;margin-right:10px;vertical-align:-4px;stroke-width:1.7}

/* ---------- Services: icon takes the place of the row number ---------- */
.service-card{align-items:center}
.service-card>span{display:none}
.service-card .svc-ico{width:50px;height:50px;stroke-width:1.2;color:var(--navy);
  transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1)}
/* The icon draws itself in as its row arrives, then settles to a plain solid line */
.service-card.motion-ready.in-view .svc-ico{animation:ekoDraw 1.4s cubic-bezier(.3,.7,.2,1) .15s backwards}
@keyframes ekoDraw{from{stroke-dasharray:1 1.2;stroke-dashoffset:1.1}to{stroke-dasharray:1 1.2;stroke-dashoffset:0}}
.service-card h3{transition-delay:90ms}
@media(max-width:980px){.service-card{grid-template-columns:52px 1fr 1.2fr}.service-card .svc-ico{width:40px;height:40px}}
@media(max-width:680px){.service-card{grid-template-columns:40px 1fr;align-items:center}.service-card .svc-ico{width:34px;height:34px;stroke-width:1.35}}

/* ---------- Process: icons and an editing-timeline playhead ---------- */
.process-row{position:relative}
.process-step .step-ico{position:absolute;top:20px;right:2px;width:30px;height:30px;stroke-width:1.35;color:var(--cream)}
.process-step>*{transition:opacity .45s ease}
@media(max-width:680px){.process-step .step-ico{width:26px;height:26px;top:18px}}

/* Playhead only exists once enhance.js has added .has-playhead (desktop/tablet, motion allowed) */
.process-row.has-playhead{margin-top:34px}
.process-row.has-playhead::before{content:"";position:absolute;left:0;right:0;top:-12px;height:6px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(244,241,233,.28) 0 1px,transparent 1px 12px)}
.process-row.has-playhead .process-step::before{top:-2px;height:2px;transform:scaleX(var(--fill,0))!important;transition:none!important}
.process-row.has-playhead .process-step:not(.is-lit)>*{opacity:.38}
.process-playhead{position:absolute;top:-24px;left:calc(var(--p,0)*100%);width:0;height:0;z-index:3;pointer-events:none}
.process-playhead i{position:absolute;left:-1px;top:0;width:2px;height:58px;background:var(--orange);border-radius:1px}
.process-playhead i::before{content:"";position:absolute;left:-5px;top:-1px;width:12px;height:13px;background:var(--orange);
  clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}
.process-playhead b{position:absolute;left:13px;top:-3px;font-size:10px;font-weight:500;letter-spacing:.1em;line-height:1;white-space:nowrap;
  font-variant-numeric:tabular-nums;color:rgba(244,241,233,.62)}
.process-playhead.flip b{left:auto;right:13px}

/* ---------- Section 06: viewfinder frame ---------- */
.about-section .section-heading{position:relative;padding:60px 56px 58px!important;width:min(940px,100%)!important;max-width:940px!important;
  --fm:var(--navy);
  background:
    linear-gradient(var(--fm),var(--fm)) left top/30px 1.5px no-repeat,
    linear-gradient(var(--fm),var(--fm)) left top/1.5px 30px no-repeat,
    linear-gradient(var(--fm),var(--fm)) right top/30px 1.5px no-repeat,
    linear-gradient(var(--fm),var(--fm)) right top/1.5px 30px no-repeat,
    linear-gradient(var(--fm),var(--fm)) left bottom/30px 1.5px no-repeat,
    linear-gradient(var(--fm),var(--fm)) left bottom/1.5px 30px no-repeat,
    linear-gradient(var(--fm),var(--fm)) right bottom/30px 1.5px no-repeat,
    linear-gradient(var(--fm),var(--fm)) right bottom/1.5px 30px no-repeat}
.about-section .section-heading::before{content:"";position:absolute;top:20px;left:22px;width:9px;height:9px;border-radius:50%;background:var(--orange)}
@media(max-width:680px){.about-section .section-heading{padding:44px 22px 40px!important}.about-section .section-heading::before{top:14px;left:15px;width:8px;height:8px}}

/* ---------- Small touches ---------- */
/* Portfolio filters carry the same icons as the matching services */
.filter{display:inline-flex;align-items:center;gap:8px;--ico-acc:currentColor}
.filter .f-ico{width:15px;height:15px;stroke-width:1.7}
/* Watch reel */
.btn .b-ico{width:18px;height:18px;margin-right:9px;stroke-width:1.6;--ico-acc:currentColor}
/* Direct contact lines */
.direct-contact .c-ico{width:19px;height:19px;margin-right:11px;vertical-align:-4px;stroke-width:1.6}

@media(prefers-reduced-motion:reduce){
  .service-card .svc-ico{animation:none!important;transition:none!important}
  .process-step>*{transition:none}
}

/* ---------- Statement ("Good stories. Well told."): small bar waveform — added 7 October 2026 ----------
   Rounded vertical bars of uneven height, centred above the heading. No photograph in this section.
   Sits in the section's existing top padding, out of the text flow, so the heading and paragraph do not move.
   Width is 26% of the screen (30% at 900px and under, where every other bar is dropped so the bars stay distinct).
   The bars rise one after another, left to right, once, when main.js marks .statement-inner as in view.
   To remove: delete this block and the <span class="statement-wave"> in index.html. */
.statement-inner{position:relative}
.statement-wave{position:absolute;left:50%;bottom:100%;width:26vw;height:clamp(16px,1.7vw,24px);margin:0 0 clamp(16px,1.5vw,22px) -13vw;pointer-events:none}
.statement-wave svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--navy);stroke-width:clamp(2px,.21vw,3px);stroke-linecap:round}
.statement-wave line{vector-effect:non-scaling-stroke;transform-origin:0 20px}
.statement-inner.motion-ready.in-view .statement-wave line{animation:ekoBar .55s cubic-bezier(.2,.7,.2,1) calc(.1s + var(--i,0)*17ms) backwards}
@keyframes ekoBar{from{opacity:0;transform:scaleY(.04)}to{opacity:1;transform:scaleY(1)}}
@media(max-width:900px){
  .statement-wave{width:30vw;margin-left:-15vw}
  .statement-wave line:nth-child(odd){display:none}
}
@media(prefers-reduced-motion:reduce){.statement-wave line{animation:none!important}}

/* ---------- 02 / Meet Eko: editing-timeline photograph with parallax — added 7 October 2026 ----------
   The photo in midnight-blue monotone, knocked back behind the text and outside the text flow, so nothing moves.
   Strength = the opacity value below (lower = fainter).
   Parallax: enhance.js moves the photo at 16% of the scroll speed, the same rate as the hero.
   --spare is the extra picture kept above and below the section so the movement never shows an edge.
   Like the hero, parallax is off on phones (680px and under) and with reduced motion: the photo then sits still.
   To remove: delete this block, the "Section photograph" part of enhance.js and the <img class="sec-photo"> line. */
.sec-photo{--spare:120px;position:absolute;left:0;top:calc(var(--spare)*-1);z-index:-1;width:100%;height:calc(100% + var(--spare)*2);max-width:none;
  object-fit:cover;pointer-events:none;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.intro-photo{object-position:50% 50%;opacity:.42}
@media(max-width:680px){.sec-photo{--spare:0px;will-change:auto}}

/* ---------- Footer: company details line — added 7 October 2026 ----------
   The legally required company details, in small type on their own row under the logo and name.
   On phones and tablets the right-hand padding keeps the text clear of the floating Call button.
   To remove: delete this block and the <div class="container footer-legal"> in index.html. */
.footer-legal{margin-top:18px}
.footer-legal p{margin:0;font-size:12px;line-height:1.6;color:var(--cream);opacity:.62}
@media(max-width:980px){.footer-legal p{padding-right:96px}}