/* Home page: cover with the workflow animation (css/flow.css), approach scenes, work, sectors, steps, contact */

/* ---------- cover: text left, workflow animation right ---------- */
.cover{position:relative;min-height:min(100svh,920px);display:grid;grid-template-rows:1fr auto;color:#fff;overflow:hidden;isolation:isolate;
  background:radial-gradient(900px 520px at 72% 38%,#1a4270 0%,rgba(26,66,112,0) 70%),linear-gradient(180deg,#0f2a47 0%,#0b2240 100%)}
.cover::before{content:"";position:absolute;inset:0;z-index:0;opacity:.35;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 65% 45%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse at 65% 45%,#000 30%,transparent 78%)}
.cover-inner{position:relative;z-index:1;align-self:center;width:min(var(--wrap),100% - 2 * var(--pad));margin-inline:auto;display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:40px 40px;align-items:center;padding-top:calc(var(--header-h) + clamp(40px,6vh,72px));padding-bottom:clamp(36px,5vh,56px)}
.cover-text{max-width:470px}
.cover-intro{font-size:17px;font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.78);margin-bottom:22px}
.cover h1{color:#fff;font-size:clamp(40px,4.3vw,60px);line-height:1.04;letter-spacing:-.018em}
.cover h1 .line{display:block}
.cover-copy{font-size:clamp(18px,1.3vw,20px);line-height:1.5;color:rgba(255,255,255,.86);max-width:40ch;margin-top:24px}
.cover-actions{display:flex;flex-wrap:wrap;gap:14px 16px;margin-top:34px}
.cover-bottom{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;padding-top:22px;padding-bottom:26px;border-top:1px solid rgba(255,255,255,.12);font-size:15px;color:rgba(255,255,255,.72)}
.cover-flow{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.cover-flow .ico{width:14px;height:14px;color:var(--blue-light)}
.cover-end{position:absolute;left:0;right:0;bottom:0;height:1px}

/* cover text entrance */
.js .cover-intro,.js .cover h1 .line,.js .cover-copy,.js .cover-actions,.js .cover-bottom,.js .cover .flow{opacity:0;transform:translateY(28px);animation:rise 1.1s var(--ease) forwards}
.js .cover-intro{animation-delay:.15s}
.js .cover h1 .line:nth-child(1){animation-delay:.3s}
.js .cover h1 .line:nth-child(2){animation-delay:.42s}
.js .cover h1 .line:nth-child(3){animation-delay:.54s}
.js .cover-copy{animation-delay:.75s}
.js .cover-actions{animation-delay:.9s}
.js .cover-bottom{animation-delay:1.2s}
.js .cover .flow{animation-delay:.6s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- purpose ---------- */
.purpose{padding-top:var(--section)}
.purpose h2{font-size:clamp(36px,4vw,56px)}
.purpose .lead{font-size:clamp(20px,1.6vw,24px);margin-top:28px}
.purpose .lead + .lead{margin-top:18px}

/* ---------- sidecar (approach) ---------- */
.sidecar{display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);align-items:start}
.sidecar-media{position:sticky;top:0;height:100svh;z-index:1}
.sidecar-panels{display:flex;flex-direction:column;padding-right:clamp(24px,4vw,64px)}
.panel{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:12vh 0;max-width:520px;transition:opacity .6s var(--ease)}
.js [data-sidecar] .panel{opacity:.38}
.js [data-sidecar] .panel.is-active{opacity:1}
.panel-n{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px;color:var(--ink-2);margin-bottom:18px}
.panel-n b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-size:14px;font-weight:600;flex:none}
.panel h3{font-family:var(--serif);font-weight:500;font-size:clamp(28px,2.6vw,36px);line-height:1.12;letter-spacing:-.01em;margin-bottom:18px}
.panel > p:not(.panel-n):not(.deliverable){color:var(--ink-2)}
.panel ul{margin-top:18px}
.panel .deliverable{margin-top:22px;padding:14px 18px;border-radius:10px;background:var(--paper-2);color:var(--ink-2);font-size:16.5px}
.panel .deliverable strong{display:block;color:var(--ink);font-size:14px;letter-spacing:.02em;margin-bottom:2px}

/* ---------- approach: scene diagram ---------- */
.approach-head{margin-bottom:clamp(24px,3vw,40px)}
.approach .sidecar{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:0 clamp(40px,6vw,96px)}
.approach .sidecar-media{height:auto;top:calc(var(--header-h) + 20px);align-self:start}
.approach .sidecar-panels{padding-right:0}
.approach .panel{min-height:72svh;padding:7vh 0}
.approach .panel:first-child{padding-top:3vh}
.scene-shell{padding-top:12px}
.scene-controls{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);margin-bottom:18px}
.scene-controls a{padding:8px 16px;border-radius:999px;font-weight:600;font-size:15px;color:var(--ink-2);text-decoration:none;transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.scene-controls a:hover{color:var(--ink)}
.scene-controls a[aria-current="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(15,42,71,.08),0 6px 16px -10px rgba(15,42,71,.35)}
.scene{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:clamp(12px,1.5vw,20px);box-shadow:var(--shadow)}
.scene svg{width:100%;height:auto;font-family:var(--sans)}
.scene-caption{margin-top:22px;padding-left:18px;border-left:3px solid var(--blue)}
.scene-caption #scene-kicker{display:block;font-size:14px;font-weight:600;color:var(--blue-dark);margin-bottom:4px}
.scene-caption h4{font-size:22px;font-weight:600;margin-bottom:6px}
.scene-caption p{color:var(--ink-2);font-size:16.5px;max-width:52ch}
.visual-note{margin-top:14px;font-size:13.5px;color:var(--ink-3)}
/* diagram states: the chain always shows its direction; the active scene lights its part of the system,
   moves dashes along its pipes and sends pulses through it */
.sys .node rect{fill:#fff;stroke:#c9d2dc;stroke-width:1.2;rx:10;transition:stroke .5s var(--ease),fill .5s var(--ease)}
.sys .node text{font-size:15px;font-weight:600;fill:#8a96a3;transition:fill .5s var(--ease)}
.sys .node .sub{font-size:11.5px;font-weight:400}
.sys .pipe{fill:none;stroke:#d4dbe3;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#arr);transition:stroke .5s var(--ease),stroke-width .5s var(--ease)}
.sys marker path{fill:#c9d2dc}
.sys #arr-on path{fill:var(--blue)}
.sys .flow{fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:6 10;opacity:0;transition:opacity .5s var(--ease)}
.sys .pulse{fill:var(--blue);stroke:#fff;stroke-width:1.5;opacity:0;transition:opacity .4s;filter:drop-shadow(0 0 3px rgba(29,99,196,.55))}
.sys .side circle{fill:#fff;stroke:#c9d2dc;stroke-width:1.4;transition:stroke .5s var(--ease),fill .5s var(--ease)}
.sys .side .ring{fill:none;stroke:var(--blue);opacity:0;transform-box:fill-box;transform-origin:center}
.sys .side path{fill:none;stroke:#b4bfcb;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s var(--ease)}
.sys .side text{font-size:12px;font-weight:600;letter-spacing:.12em;fill:#8a96a3;transition:fill .5s var(--ease)}
@keyframes sys-dash{to{stroke-dashoffset:-16}}
@keyframes sys-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
@keyframes sys-draw{0%{stroke-dasharray:1;stroke-dashoffset:1}100%{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes sys-beat{0%{stroke-dashoffset:1;opacity:1}55%{stroke-dashoffset:0;opacity:1}80%{opacity:.3}100%{stroke-dashoffset:0;opacity:.3}}

/* which parts each scene lights */
.sys[data-active="plan"] .node rect,
.sys[data-active="build"] .n-svc rect,.sys[data-active="build"] .n-data rect,
.sys[data-active="use"] .n-team rect,.sys[data-active="use"] .n-apps rect,
.sys[data-active="support"] .n-svc rect,.sys[data-active="support"] .n-apps rect{stroke:var(--blue);fill:#f3f8ff}
.sys[data-active="plan"] .node text,
.sys[data-active="build"] .n-svc text,.sys[data-active="build"] .n-data text,
.sys[data-active="use"] .n-team text,.sys[data-active="use"] .n-apps text,
.sys[data-active="support"] .n-svc text,.sys[data-active="support"] .n-apps text{fill:var(--ink)}
.sys[data-active="plan"] .lp,.sys[data-active="plan"] .chain,
.sys[data-active="build"] .c3,
.sys[data-active="use"] .c1,.sys[data-active="use"] .c2,
.sys[data-active="support"] .ls,.sys[data-active="support"] .c2{stroke:#a9c7ee;stroke-width:2.2;marker-end:url(#arr-on)}
.sys[data-active="plan"] .f-lp1,.sys[data-active="plan"] .f-lp2,
.sys[data-active="build"] .f-c3,
.sys[data-active="use"] .f-c1,.sys[data-active="use"] .f-c2,
.sys[data-active="support"] .f-ls1,.sys[data-active="support"] .f-ls2{opacity:1;animation:sys-dash 1.1s linear infinite}
.sys[data-active="plan"] .pu-plan,.sys[data-active="build"] .pu-build,.sys[data-active="use"] .pu-use,.sys[data-active="support"] .pu-sup{opacity:1}
.sys[data-active="plan"] .s-plan circle,.sys[data-active="support"] .s-support circle{stroke:var(--blue);fill:#f3f8ff}
.sys[data-active="plan"] .s-plan path,.sys[data-active="support"] .s-support path{stroke:var(--blue)}
.sys[data-active="plan"] .s-plan text,.sys[data-active="support"] .s-support text{fill:var(--blue-dark)}
.sys[data-active="plan"] .s-plan .ring,.sys[data-active="support"] .s-support .ring{fill:none;animation:sys-ping 2.2s ease-out infinite}

/* scene entrances: plan sweeps the chain from the top, build draws the foundation, support traces the heartbeat */
.sys[data-active="plan"] .n-apps rect,.sys[data-active="plan"] .n-apps text{transition-delay:.15s}
.sys[data-active="plan"] .n-svc rect,.sys[data-active="plan"] .n-svc text{transition-delay:.3s}
.sys[data-active="plan"] .n-data rect,.sys[data-active="plan"] .n-data text{transition-delay:.45s}
.sys[data-active="plan"] .s-plan .ico-line{animation:sys-draw .5s var(--ease) both}
.sys[data-active="plan"] .s-plan .ico-line:nth-of-type(2){animation-delay:.15s}
.sys[data-active="plan"] .s-plan .ico-line:nth-of-type(3){animation-delay:.3s}
.sys[data-active="build"] .n-data rect{animation:sys-draw .9s var(--ease) both}
.sys[data-active="build"] .n-svc rect{animation:sys-draw .9s .35s var(--ease) both}
.sys[data-active="support"] .beat{stroke-dasharray:1;animation:sys-beat 1.8s var(--ease) infinite}

.chapter ul{list-style:none;padding:0;display:grid;gap:8px;color:var(--ink-2)}
.chapter li{position:relative;padding-left:20px}
.chapter li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--blue)}

/* ---------- work ---------- */
.section.work{background:var(--paper-2);padding-block:var(--section)}
.featured{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(24px,3.5vw,56px);align-items:center;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:clamp(14px,1.6vw,20px);transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.featured:hover{text-decoration:none;box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.featured-image{position:relative;border-radius:var(--r);overflow:hidden;background:#0b1e33}
.featured-image img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top left;transition:transform .9s var(--ease)}
.featured:hover .featured-image img{transform:scale(1.025)}
.featured-image figcaption{position:absolute;left:14px;bottom:14px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink-2);font-size:13px;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.featured-copy{padding:clamp(8px,1.5vw,24px) clamp(8px,1.5vw,24px) clamp(8px,1.5vw,24px) 0}
.featured-copy h3{font-family:var(--serif);font-weight:500;font-size:clamp(28px,2.6vw,38px);line-height:1.1;margin:12px 0 16px;letter-spacing:-.01em}
.featured-copy p:not(.cat){color:var(--ink-2);margin-bottom:22px}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,32px);margin-top:clamp(20px,2.6vw,32px)}
.work-card{display:grid;grid-template-rows:auto 1fr;background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:clamp(14px,1.6vw,18px);text-decoration:none;color:inherit;transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.work-card:hover{text-decoration:none;box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.work-card figure{border-radius:var(--r);overflow:hidden;background:var(--paper-2);border:1px solid var(--line-2)}
.work-card img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top left;transition:transform .9s var(--ease)}
.work-card:hover img{transform:scale(1.03)}
.work-card > div{padding:20px 8px 10px}
.work-card h3{font-size:clamp(21px,1.7vw,24px);margin:8px 0 14px}
.work-links{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:clamp(32px,4vw,48px)}

/* ---------- sectors: immersive ---------- */
.sectors{background:var(--navy-deep);color:#fff}
.immersive{position:relative}
.immersive-media{position:sticky;top:0;height:100svh;overflow:hidden;z-index:0}
.immersive-media .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity 1.4s var(--ease),transform 9s linear}
.immersive-media .bg.is-on{opacity:1;transform:scale(1)}
.immersive-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,30,54,.72),rgba(10,30,54,.55) 50%,rgba(10,30,54,.78))}
.immersive-intro{position:relative;z-index:1;margin-top:-100svh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:14vh}
.immersive-intro h2{color:#fff;font-size:clamp(38px,4.4vw,62px);max-width:14ch}
.immersive-intro .lead{color:rgba(255,255,255,.75);margin-top:20px}
.immersive-panels{position:relative;z-index:1;display:flex;flex-direction:column;gap:30vh;padding-bottom:30vh}
.float-card{background:#fff;color:var(--ink);border-radius:calc(var(--r) + 4px);padding:clamp(28px,3.4vw,44px);max-width:560px;box-shadow:var(--shadow-lg);margin-left:clamp(0px,6vw,120px)}
.float-card:nth-child(even){margin-left:auto;margin-right:clamp(0px,6vw,120px)}
.float-card h3{font-family:var(--serif);font-weight:500;font-size:clamp(28px,2.6vw,36px);line-height:1.12;letter-spacing:-.01em}
.float-card .cat{margin-top:10px}
.float-card > p:not(.cat){color:var(--ink-2);margin-top:14px}
.float-card ul{list-style:none;padding:0;margin-top:18px;display:grid;gap:8px;color:var(--ink-2)}
.float-card li{position:relative;padding-left:20px}
.float-card li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.float-card .text-link{margin-top:22px}
.js .float-card{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .float-card.in{opacity:1;transform:none}

/* ---------- engagement steps ---------- */
.engagement{padding-block:var(--section)}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px clamp(24px,3vw,48px);position:relative;counter-reset:s}
.steps::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:var(--line);z-index:0}
.steps::after{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:var(--blue);transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--ease) .2s;z-index:0}
.js .steps.in::after{transform:scaleX(1)}
.steps li{position:relative;z-index:1;padding-top:0}
.step-n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--blue);color:var(--blue-dark);font-weight:600;font-size:16px;margin-bottom:22px}
.steps h3{font-size:24px;margin-bottom:10px}
.steps p{color:var(--ink-2);max-width:34ch}

/* ---------- contact ---------- */
.section.contact{background:var(--paper-2);padding-block:var(--section)}
.page-home .site-footer{margin-top:0}
.contact-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start}
.contact-email{display:inline-block;margin-top:28px;font-family:var(--serif);font-size:clamp(22px,2vw,28px);font-weight:500;color:var(--ink);letter-spacing:-.01em;border-bottom:2px solid var(--blue);padding-bottom:2px;word-break:break-word}
.contact-email:hover{text-decoration:none;color:var(--blue-dark)}
.contact-note{margin-top:18px;color:var(--ink-3);font-size:16px}
.enquiry-form{background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:clamp(22px,3vw,36px);box-shadow:var(--shadow);display:grid;gap:18px}
.enquiry-form label{display:grid;gap:7px}
.enquiry-form label > span{font-weight:600;font-size:15px}
.enquiry-form input,.enquiry-form select,.enquiry-form textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;background:#fff;padding:12px 14px;font-size:17px;line-height:1.4;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.enquiry-form input:focus,.enquiry-form select:focus,.enquiry-form textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(29,99,196,.14)}
.enquiry-form ::placeholder{color:#8a96a3}
.enquiry-form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234a5664' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.enquiry-form textarea{resize:vertical;min-height:130px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.enquiry-help{font-size:14px;color:var(--ink-3)}
#enquiry-result:not([hidden]){padding:16px 18px;border-radius:10px;background:var(--blue-wash);display:grid;gap:10px;justify-items:start}
#enquiry-result p{font-size:15px;color:var(--ink-2)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .cover-inner{grid-template-columns:minmax(0,1fr);gap:36px}
  .cover-text{max-width:620px}
  .sidecar,.approach .sidecar{grid-template-columns:minmax(0,1fr)}
  .js [data-sidecar] .panel{opacity:1}
  .approach .sidecar-media{position:relative;top:auto;margin-bottom:24px}
  .approach .panel{min-height:0;padding:28px 0}
}
@media (max-width:860px){
  .cover h1{font-size:clamp(42px,12vw,64px)}
  .cover-bottom{display:none}
  .featured{grid-template-columns:1fr}
  .featured-copy{padding:8px 8px 10px}
  .work-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:28px}
  .steps::before,.steps::after{left:19px;right:auto;top:0;bottom:0;width:2px;height:auto;transform-origin:top}
  .js .steps.in::after{transform:scaleY(1)}
  .js .steps::after{transform:scaleY(0)}
  .steps li{display:grid;grid-template-columns:40px 1fr;gap:4px 18px}
  .steps li .step-n{grid-row:1/span 3;margin:0}
  .contact-layout{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .immersive-panels{gap:18vh;padding-bottom:18vh}
  .float-card,.float-card:nth-child(even){margin-left:0;margin-right:0;max-width:none}
  .immersive-intro h2{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .js [data-sidecar] .panel{opacity:1}
  .js .cover-intro,.js .cover h1 .line,.js .cover-copy,.js .cover-actions,.js .cover-bottom,.js .cover .flow{opacity:1;transform:none}
  .js .float-card{opacity:1;transform:none}
  .sys .flow,.sys .pulse,.sys .ring{animation:none!important;opacity:0!important}
  .sys .node rect,.sys .beat,.sys .ico-line{animation:none!important;stroke-dasharray:none!important}
  .sys *{transition-delay:0s!important}
  .js .steps::after{transform:none}
}

@media (max-width:520px){
  .enquiry-form select{font-size:16px;padding-left:12px;padding-right:34px;background-position:right 12px center}
}