/* ==========================================================
   Content sections — services, process, solutions, about,
   FAQ, contact, footer.

   Everything here reads the theme tokens from styles.css, so
   the light sections invert on their own. The two dark bands
   (.band) are painted like the catalog panel: permanently
   dark, whatever the site theme is.
   ========================================================== */
.sec{
  max-width:var(--shop-max);
  margin:0 auto;
  padding:92px 30px;
}

/* ---------- shared section heading ---------- */
.sec-head{text-align:center;max-width:720px;margin:0 auto 52px;}
.sec-title{
  margin:0;
  font-family:"Noto Sans Georgian","Plus Jakarta Sans",sans-serif;
  font-weight:800;letter-spacing:-.04em;line-height:1.1;
  font-size:clamp(28px,3.2vw,44px);
}
.sec-title .l1,.sec-title .l2{display:block;}
/* a section that needs a sentence under the title rather than a second line */
.sec-lead{margin:14px auto 0;max-width:56ch;font-size:14.5px;line-height:1.7;color:var(--text-muted);}
.sec-title .l1{color:var(--text);}
.sec-title .l2{
  margin-top:.24em;
  font-size:.58em;font-weight:700;letter-spacing:-.02em;line-height:1.25;
  color:var(--text-muted);
}

/* headings that sit on a dark band */
.sec-head--light .sec-title .l1{color:var(--panel-ink);}
.band .sec-title .l1{color:var(--panel-ink);}
.band .sec-title .l2{color:var(--panel-ink-soft);}
.band .sec-title .l2-accent{
  background:linear-gradient(90deg,var(--blue) 0%,var(--amber-light) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ==========================================================
   STAGE — the corridor with the copy inside it

   The corridor is a backdrop layer (.stage-bg) rather than a
   block of its own, so the section's height comes from the copy
   and the projection simply fills whatever box that makes. The
   steps sit in the throat, the part of the corridor that is
   otherwise empty ground between the two rails.
   ========================================================== */
.stage{
  position:relative;overflow:hidden;
  padding:104px 30px 96px;
  /* with only the steps inside, the copy alone is too short to give the
     projection room — hold a floor so the corridor still reads as depth */
  min-height:min(86vh,820px);
  display:flex;flex-direction:column;justify-content:center;
}

.stage-bg{
  position:absolute;inset:0;pointer-events:none;
  /* every length inside the corridor is a cqw, so this layer is the container */
  container-type:inline-size;
  /* soften the top and bottom cut so the corridor does not draw a hard line
     across the page. Left and right stay hard — that edge is the viewport's own. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
/* Text over flying photographs needs a ground. The scrim is built from the
   page colour itself, so it works in both themes: near-solid down the middle
   where the copy sits, gone at the far edges where the cards are largest. */
.stage-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(var(--page-bg-rgb),0) 0%,
      rgba(var(--page-bg-rgb),.7) 15%,
      rgba(var(--page-bg-rgb),.7) 85%,
      rgba(var(--page-bg-rgb),0) 100%),
    radial-gradient(66% 56% at 50% 50%,
      rgba(var(--page-bg-rgb),.82) 0%,
      rgba(var(--page-bg-rgb),0) 100%);
}

.corr-stage{position:absolute;inset:0;}
.corr-depth{position:absolute;inset:0;transform-style:preserve-3d;}
.corr-card{
  position:absolute;left:50%;overflow:hidden;
  backface-visibility:hidden;
  box-shadow:0 2cqw 5cqw rgba(1,6,20,.34);
}
.corr-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* the same grade the hero slider applies, so one photo set reads as one look */
  filter:saturate(.72) contrast(1.06) brightness(.86);
}

/* ---------- copy sitting on top ---------- */
.stage-body{position:relative;z-index:1;max-width:1180px;margin:0 auto;}
.stage-body .sec-head{margin:0 auto 52px;}

/* the heading is the only thing standing between the two rails now, so it
   carries more weight here than in an ordinary section */
.stage .sec-title{font-size:clamp(34px,4.8vw,64px);}
.stage .sec-title .l2{font-size:.42em;color:var(--amber-dark);}
:root[data-theme="dark"] .stage .sec-title .l2{color:var(--amber-light);}

/* ==========================================================
   PROCESS
   ========================================================== */
.proc{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin:0;padding:0;list-style:none;
}
.proc-step{
  position:relative;padding:26px 22px 24px;
  border-top:2px solid var(--border);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), background .25s ease;
}
/* an amber rule that wipes across the grey one, rather than recolouring it */
.proc-step::before{
  content:"";position:absolute;top:-2px;left:0;right:0;height:2px;
  background:var(--amber);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.proc-step:hover::before{transform:scaleX(1);}
.proc-step:hover .proc-num{transform:translateX(4px);}

/* ---------- entrance ----------
   Armed by sections.js, never by the stylesheet: without the script the
   steps are simply visible, rather than stuck at opacity 0. The fill mode
   is "backwards" and not "both", so the animation stops governing transform
   once it ends and the hover lift can take over. */
.proc.is-staged .proc-step{opacity:0;}
.proc.is-staged .proc-step.is-in{
  opacity:1;
  animation:procIn .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms) backwards;
}
@keyframes procIn{
  from{opacity:0;transform:translateY(22px);}
  to{opacity:1;transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .proc.is-staged .proc-step{opacity:1;}
  .proc.is-staged .proc-step.is-in{animation:none;}
}
.proc-num{
  display:block;margin-bottom:14px;
  font-size:13px;font-weight:800;letter-spacing:.16em;color:var(--amber);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.proc-name{
  margin:0 0 9px;
  font-family:"Noto Sans Georgian","Plus Jakarta Sans",sans-serif;
  font-size:16.5px;font-weight:800;letter-spacing:-.03em;color:var(--text);
}
.proc-text{margin:0;font-size:13.5px;line-height:1.62;color:var(--text-muted);}

/* On the stage each step gets its own pane: a muted grey over flying
   photographs is unreadable no matter how strong the scrim behind it is. */
.stage .proc-step{
  background:rgba(var(--page-bg-rgb),.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:0 0 14px 14px;
  padding:22px 20px 22px;
}
.stage .proc-step:hover{transform:translateY(-5px);background:rgba(var(--page-bg-rgb),.84);}
.stage .proc-name{font-size:17.5px;}
.stage .proc-text{color:var(--text);opacity:.74;}

/* ==========================================================
   DARK BANDS (solutions + contact)
   ========================================================== */
.band{
  position:relative;overflow:hidden;
  margin:0 10px 10px;border-radius:var(--radius);
  padding:78px 30px;
  background:
    radial-gradient(62% 46% at 22% 26%, rgba(28,74,190,.34) 0%, rgba(28,74,190,0) 70%),
    radial-gradient(54% 44% at 80% 84%, rgba(220,152,69,.12) 0%, rgba(220,152,69,0) 70%),
    linear-gradient(160deg,#02071a 0%,#04102f 30%,#061a4d 58%,#030f2c 84%,#010613 100%);
}
/* dark site, light band — the same inversion the hero performs */
:root[data-theme="dark"] .band{
  background:
    radial-gradient(62% 46% at 22% 26%, rgba(47,94,180,.16) 0%, rgba(47,94,180,0) 70%),
    radial-gradient(54% 44% at 80% 84%, rgba(220,152,69,.14) 0%, rgba(220,152,69,0) 70%),
    linear-gradient(160deg,#f5f7fc 0%,#eef1fa 30%,#e6ebf7 58%,#eef1fa 82%,#f5f7fc 100%);
}
.band-inner{max-width:var(--shop-max);margin:0 auto;}

/* ---------- solutions ---------- */
.sol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.sol{
  background:var(--panel-fill);border:1px solid var(--panel-line);border-radius:16px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:24px 22px;
  display:flex;flex-direction:column;
  box-shadow:0 22px 40px var(--panel-shadow);
  transition:transform .25s cubic-bezier(.22,.61,.36,1), background .25s ease, border-color .25s ease;
}
.sol:hover{transform:translateY(-4px);background:var(--panel-fill-hi);border-color:rgba(220,152,69,.4);}
.sol-name{
  margin:0 0 10px;
  font-family:"Noto Sans Georgian","Plus Jakarta Sans",sans-serif;
  font-size:16px;font-weight:800;letter-spacing:-.03em;color:var(--panel-ink);line-height:1.3;
}
.sol-text{margin:0 0 18px;font-size:13px;line-height:1.6;color:var(--panel-ink-soft);}
.sol-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;}
.sol-chips li{
  padding:5px 11px;border-radius:999px;
  background:rgba(220,152,69,.14);border:1px solid rgba(220,152,69,.28);
  font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--panel-accent);
}

/* ==========================================================
   ABOUT + STATS
   ========================================================== */
/* ==========================================================
   FAQ
   ========================================================== */
.faq{max-width:820px;margin:0 auto;}
.faq-item{
  border-bottom:1px solid var(--border);
  transition:border-color .2s ease;
}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:16px;
  padding:22px 2px;
  font-family:"Noto Sans Georgian","Plus Jakarta Sans",sans-serif;
  font-size:15.5px;font-weight:700;letter-spacing:-.02em;color:var(--text);
  transition:color .2s ease;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--blue);}
.faq-item summary:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:6px;}
/* the chevron is drawn in CSS so the markup stays plain <summary> text */
.faq-item summary::after{
  content:"";flex:0 0 auto;margin-left:auto;
  width:10px;height:10px;
  border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.faq-item[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px);}
.faq-body{padding:0 40px 24px 2px;}
.faq-body p{margin:0;font-size:14px;line-height:1.75;color:var(--text-muted);}

/* ==========================================================
   CONTACT
   ========================================================== */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.contact-copy .sec-head{text-align:left;margin:0;}
.contact-lead{margin:22px 0 0;font-size:14.5px;line-height:1.7;color:var(--panel-ink-soft);max-width:44ch;}

.contact-list{display:flex;flex-direction:column;gap:16px;margin:34px 0 0;padding:0;list-style:none;}
.contact-list li{display:flex;align-items:center;gap:13px;font-size:14px;color:var(--panel-ink-mid);}
.contact-list a{color:inherit;transition:color .2s ease;}
.contact-list a:hover{color:var(--panel-accent);}
.contact-ico{
  flex:0 0 auto;width:36px;height:36px;border-radius:11px;
  background:var(--panel-fill);border:1px solid var(--panel-line);
  display:grid;place-items:center;
}
.contact-ico svg{
  width:17px;height:17px;
  fill:none;stroke:var(--panel-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- form ---------- */
.cform{
  background:var(--panel-fill);border:1px solid var(--panel-line);border-radius:20px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:30px;
  display:flex;flex-direction:column;gap:16px;
  box-shadow:0 26px 52px var(--panel-shadow);
}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.cf-field{display:flex;flex-direction:column;gap:8px;}
.cf-field > span{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--panel-ink-faint);
}
.cf-field input,
.cf-field select,
.cf-field textarea{
  font:inherit;font-size:14px;
  width:100%;padding:13px 15px;border-radius:12px;
  background:var(--panel-input);border:1px solid var(--panel-input-line);
  color:var(--panel-ink);
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.cf-field textarea{resize:vertical;min-height:104px;}
.cf-field input::placeholder,
.cf-field textarea::placeholder{color:var(--panel-ink-faint);}
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus{
  outline:none;
  border-color:rgba(220,152,69,.6);background:var(--panel-input-hi);
  box-shadow:0 0 0 3px rgba(220,152,69,.15);
}
/* a native <option> list is painted by the OS, so it needs its own colours */
.cf-field select option{background:var(--panel-option);color:var(--panel-ink);}
.cf-field.is-invalid input{border-color:#e2685c;box-shadow:0 0 0 3px rgba(226,104,92,.16);}
/* off-screen rather than display:none — a bot that skips hidden fields still
   fills this one, and a visitor never reaches it (tabindex -1, aria-hidden) */
.cf-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.cf-actions{display:flex;gap:12px;margin-top:4px;flex-wrap:wrap;}
.cf-submit{flex:1 1 190px;justify-content:center;padding:15px 26px;border:0;cursor:pointer;font-family:inherit;}
/* WhatsApp's own green, on a button that is plainly the second way out */
.cf-wa{
  flex:0 1 auto;justify-content:center;padding:15px 22px;cursor:pointer;font-family:inherit;
  color:#fff;background:#25d366;border:0;
}
.cf-wa:hover{background:#1fb855;}
.cf-note{margin:0;min-height:19px;font-size:12.5px;font-weight:600;color:var(--panel-ink-soft);}
.cf-note.is-ok{color:#6ddba0;}
.cf-note.is-err{color:#f19a90;}

/* ==========================================================
   FOOTER
   ========================================================== */
.foot{
  margin:0 10px 10px;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(165deg,#02081d 0%,#04102f 55%,#010613 100%);
  color:var(--panel-ink-mid);
}
:root[data-theme="dark"] .foot{
  background:linear-gradient(165deg,#f5f7fc 0%,#e9edf7 55%,#f5f7fc 100%);
}
.foot-inner{
  max-width:var(--shop-max);margin:0 auto;
  padding:62px 30px 48px;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);gap:56px;
}
.foot-brand .brand{color:var(--panel-ink);}
.foot-brand .brand-mark{height:72px;}
.foot-brand .brand-text{height:42px;}
.foot-text{margin:18px 0 0;max-width:34ch;font-size:13.5px;line-height:1.7;color:var(--panel-ink-faint);}

.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.foot-col h3{
  margin:0 0 16px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--panel-ink);
}
.foot-col ul{display:flex;flex-direction:column;gap:11px;}
.foot-col li{font-size:13.5px;color:var(--panel-ink-soft);line-height:1.4;}
.foot-col a{transition:color .2s ease;}
.foot-col a:hover{color:var(--panel-accent);}

.foot-bar{
  max-width:var(--shop-max);margin:0 auto;
  padding:20px 30px 26px;
  border-top:1px solid var(--panel-line);
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;
  font-size:12.5px;color:var(--panel-ink-faint);
}
.foot-legal{display:flex;gap:22px;}
.foot-legal a:hover{color:var(--panel-accent);}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1180px){
  .proc,.sol-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .sec{padding:66px 18px;}
  .band{padding:56px 18px;}
  .stage{padding:72px 18px 66px;}
  .stage-body .sec-head{margin-top:56px;margin-bottom:34px;}
  .sec-head{margin-bottom:38px;}
  .contact{grid-template-columns:1fr;gap:38px;}
  .contact-lead{max-width:none;}
  .foot-inner{grid-template-columns:1fr;gap:38px;padding:48px 18px 36px;}
  .foot-bar{padding:20px 18px 24px;}
  .cform{padding:24px 20px;}
}
@media (max-width:620px){
  .proc,.sol-grid{grid-template-columns:1fr;}
  .cf-row{grid-template-columns:1fr;}
  .cf-actions{flex-direction:column;}
  .cf-submit,.cf-wa{flex:1 1 auto;width:100%;}
  .foot-cols{grid-template-columns:1fr;gap:26px;}
  .faq-body{padding-right:0;}
}


/* ==========================================================
   SHOWREEL

   Portrait phone footage (480x640), so the cards are 3:4 and the video
   fills them. Three across on a desktop, and the row simply wraps rather
   than shrinking the clips past the point where the equipment in them
   is recognisable.
   ========================================================== */
.reel-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  max-width:840px;margin:0 auto;
}
.reel-card{margin:0;}
.reel-media{
  position:relative;aspect-ratio:3/4;overflow:hidden;
  border-radius:16px;background:var(--navy-deep);
  border:1px solid var(--border);
  box-shadow:0 22px 44px rgba(1,8,31,.28);
}
.reel-media video{
  display:block;width:100%;height:100%;object-fit:cover;
  /* the clips were shot on a phone under mixed light; a light, uniform
     grade keeps the three of them from reading as three different days */
  filter:saturate(.88) contrast(1.04);
}
/* the middle clip is badly underexposed on its own — lift that one alone
   rather than grading the whole set to its level */
.reel-card[data-i="2"] .reel-media video{filter:saturate(.9) contrast(1.1) brightness(1.5);}

.reel-sound{
  position:absolute;right:10px;bottom:10px;z-index:2;
  width:38px;height:38px;display:grid;place-items:center;
  border-radius:999px;cursor:pointer;
  background:rgba(2,8,26,.6);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.reel-sound:hover{background:rgba(2,8,26,.8);transform:translateY(-1px);}
.reel-sound.is-on{background:var(--amber);border-color:var(--amber);color:var(--on-amber);}
.reel-sound svg{
  width:18px;height:18px;fill:currentColor;
  stroke:currentColor;stroke-width:1.7;stroke-linecap:round;
}
.reel-sound svg path:nth-child(2){fill:none;}

.reel-cap{display:flex;flex-direction:column;gap:2px;padding:12px 4px 0;}
.reel-cap b{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--text);}
.reel-cap span{font-size:12.5px;line-height:1.5;color:var(--text-muted);}

@media (max-width:760px){
  .reel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:460px;}
  /* the third clip would sit alone in a half-width column; let it span */
  .reel-card:last-child:nth-child(odd){grid-column:1 / -1;max-width:50%;margin:0 auto;}
}
@media (max-width:420px){
  .reel-grid{grid-template-columns:1fr;max-width:280px;}
  .reel-card:last-child:nth-child(odd){max-width:none;}
}

/* ==========================================================
   RESPONSIVE — phone
   ========================================================== */
@media (max-width:620px){
  /* the wordmark is 1406x212: at 42px it is 278px wide and, with the mark
     beside it, runs off a 375px footer. */
  .foot-brand .brand{max-width:100%;}
  .foot-brand .brand-mark{height:56px;}
  .foot-brand .brand-text{height:30px;}
  /* the dock rests at the foot of the viewport here (dock.css), so the last
     line of the page needs room to scroll out from under it */
  .foot-bar{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));}
  .contact-list li{align-items:flex-start;}
  .contact-list li span,.contact-list li a{overflow-wrap:anywhere;}
}