/* ============================================
   SECTIONS v3 — Philosophy, Process, Difference, CTA, Footer
   Live on index.html. New class names (.philo/.flow/.diff/.cta3/.foot3) so the
   old style.css rules for .philosophy/.process/.difference keep serving the
   backup/test pages untouched.
   Images: assets/sections/ (WebP derivatives made with PHP GD).
============================================ */

/* ---- Shared: kicker + display title (match .cases-head / .services-head) ---- */
.k3{
  display:flex; align-items:center; gap: 12px; margin-bottom: 18px;
  font-family: var(--font-display); font-size:.78rem; letter-spacing:.26em; text-transform:uppercase;
  color: rgba(244,244,239,.6);
}
.k3 span{ width:7px; height:7px; border-radius:50%; background: var(--accent); box-shadow: 0 0 10px rgba(198,255,62,.6); flex-shrink:0; }
.t3{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 5.4vw, 4.8rem); line-height: .98; letter-spacing: -.025em;
}
.t3 em{ font-style: italic; font-weight: 900; color: var(--accent); }

/* shared image frame: graded down on the dark page, full colour on hover */
.philo-media, .flow-media{
  position:relative; margin:0; overflow:hidden; border-radius: 6px; isolation:isolate;
  background:
    radial-gradient(70% 60% at 60% 40%, rgba(198,255,62,.12), transparent 70%),
    linear-gradient(160deg, #13150f, #0a0a0a 70%);
  outline: 1px solid var(--line-soft); outline-offset:-1px;
}
.philo-media img, .flow-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none;
  filter: saturate(.85) brightness(.88) contrast(1.04);
  transform: scale(1.04); transition: filter .8s var(--ease), transform 1.4s var(--ease);
}
.philo-media:hover img, .flow-media:hover img{ filter: saturate(1) brightness(1) contrast(1.02); transform: scale(1); }
.philo-media::after, .flow-media::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(0deg, rgba(5,5,5,.7) 0%, rgba(5,5,5,0) 40%);
}

/* glass chip (bottom-left of an image) */
.philo-chip, .flow-badge{
  position:absolute; z-index:2; left: 18px; bottom: 18px; right: 18px; width: fit-content; max-width: calc(100% - 36px);
  display:inline-flex; align-items:center; gap: 10px;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(8,8,8,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(244,244,239,.14);
  font-family: var(--font-display); font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.philo-chip i, .flow-badge i{ width:7px; height:7px; border-radius:50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); flex-shrink:0; }
.flow-badge b{ color: var(--accent); font-weight:600; }

/* ============================================
   PHILOSOPHY
============================================ */
.philo{ position:relative; padding: clamp(72px, 8vw, 120px) 0; border-top: 1px solid var(--line-soft); overflow:hidden; }
.philo::before{ /* soft lime bloom behind the copy */
  content:''; position:absolute; z-index:-1; right: -10%; top: 10%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(closest-side, rgba(198,255,62,.07), transparent);
  pointer-events:none;
}
.philo-inner{ display:grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 110px); align-items:center; }
.philo-media{ aspect-ratio: 4 / 5; box-shadow: 0 40px 90px -40px rgba(198,255,62,.28); }

.philo-lines{ display:flex; flex-direction:column; margin: 6px 0 clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.philo-line{
  display:flex; align-items:baseline; justify-content:space-between; gap: 20px;
  padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid var(--line);
}
.philo-say{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.7rem); line-height: 1.1; letter-spacing: -.02em;
}
.philo-say em{ font-style: italic; font-weight: 900; color: var(--accent); }
.philo-tag{
  flex-shrink:0; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line);
  font-family: var(--font-display); font-size:.6rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color: rgba(244,244,239,.66);
  transition: color .4s ease, border-color .4s ease;
}
.philo-line:hover .philo-tag{ color: var(--accent); border-color: rgba(198,255,62,.5); }
.philo-text{ color: var(--fg-muted); line-height: 1.75; max-width: 52ch; }
.philo-rail{ display:flex; flex-wrap:wrap; gap: 8px 22px; margin-top: 28px; }
.philo-rail span{ font-family: var(--font-display); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color: var(--fg-dim); }
.philo-rail span + span::before{ content:'/'; margin-right: 22px; color: var(--accent); }

/* ============================================
   PROCESS
============================================ */
.flow{ position:relative; padding: clamp(72px, 8vw, 120px) 0; border-top: 1px solid var(--line-soft); }
.flow-head{
  display:grid; grid-template-columns: 1fr minmax(260px, 380px); align-items:end; gap: 40px;
  padding-bottom: clamp(28px, 3vw, 44px); margin-bottom: clamp(36px, 4vw, 56px);
  border-bottom: 1px solid var(--line-soft);
}
.flow-intro{ color: var(--fg-muted); line-height: 1.7; }

.flow-grid{ display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 5vw, 90px); align-items:stretch; }
.flow-media{ min-height: 460px; }

.flow-steps{ position:relative; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-between; gap: 10px; }
/* rail runs through the node centres; its lime fill is scrubbed by js/sections-v3.js via --p */
.flow-rail{ position:absolute; left: 25px; top: 26px; bottom: 26px; width: 1px; background: var(--line); }
.flow-rail span{
  position:absolute; inset:0; background: var(--accent); box-shadow: 0 0 12px rgba(198,255,62,.6);
  transform-origin: top; transform: scaleY(var(--p, 1));
}
.flow-step{ position:relative; display:grid; grid-template-columns: 52px 1fr; gap: 26px; align-items:start; padding: 18px 0; }
.flow-node{
  position:relative; z-index:1; width: 52px; height: 52px; border-radius: 50%;
  display:grid; place-items:center; background: var(--bg);
  border: 1px solid var(--line);
  font-family: var(--font-display); font-size:.72rem; font-weight:600; letter-spacing:.1em; color: var(--fg-muted);
  transition: border-color .5s ease, color .5s ease, box-shadow .5s ease, background-color .5s ease;
}
.flow-step.is-on .flow-node{ border-color: var(--accent); color: var(--accent); box-shadow: 0 0 22px -4px rgba(198,255,62,.55); }
.flow-step h3{ font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.75rem); letter-spacing:-.01em; margin: 10px 0 8px; }
.flow-step p{ color: var(--fg-muted); font-size: .94rem; line-height: 1.65; max-width: 40ch; }

/* ============================================
   DIFFERENCE
============================================ */
.diff{ padding: 0 var(--gutter) clamp(72px, 8vw, 120px); }
.diff-card{
  position:relative; overflow:hidden; isolation:isolate; border-radius: 10px;
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto;
  min-height: clamp(520px, 72vh, 760px);
  display:flex; align-items:flex-end;
  outline: 1px solid var(--line-soft); outline-offset:-1px;
}
.diff-bg{ position:absolute; inset: -8% 0; z-index:-2; }
/* background: wireframe → finished product (Canva AI), product sits right of centre */
.diff-bg img{ width:100%; height:100%; object-fit:cover; object-position: 60% 50%; max-width:none; }
.diff-card::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(0deg, rgba(6,7,5,.92) 0%, rgba(6,7,5,.45) 34%, rgba(6,7,5,0) 58%),
    linear-gradient(90deg, rgba(6,7,5,.55), rgba(6,7,5,0) 50%);
}
.diff-body{ width:100%; padding: clamp(28px, 5vw, 72px); }
.diff-title{
  font-family: var(--font-display); font-weight: 800; max-width: 17ch;
  font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -.025em;
}
.diff-title em{ font-style: italic; font-weight: 900; color: var(--accent); }
.diff-foot{
  /* kept in the left column so the product on the right stays clear */
  display:flex; flex-direction:column; align-items:flex-start; gap: 22px; max-width: 600px;
  margin-top: clamp(28px, 3vw, 44px); padding-top: clamp(20px, 2.4vw, 30px); border-top: 1px solid rgba(244,244,239,.14);
}
.diff-pills{ display:flex; flex-wrap:wrap; gap: 8px; list-style:none; margin:0; padding:0; }
.diff-pills li{
  padding: 8px 14px; border-radius: 999px;
  background: rgba(8,8,8,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(244,244,239,.16);
  font-family: var(--font-display); font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.diff-text{ color: rgba(244,244,239,.75); font-size:.95rem; line-height: 1.65; max-width: 44ch; }
.diff-text strong{ display:block; margin-top: 8px; font-family: var(--font-display); font-style: italic; font-weight: 800; color: var(--accent); }

/* ============================================
   FINAL CTA
============================================ */
.cta3{ position:relative; padding: clamp(8px, 2vw, 40px) 0 clamp(72px, 8vw, 120px); overflow:hidden; }
.cta3-inner{ display:grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items:center; }
.cta3-title{ font-size: clamp(2.6rem, 6.4vw, 5.8rem); }
.cta3-text{ color: var(--fg-muted); line-height: 1.7; max-width: 44ch; margin: 26px 0 36px; }
.cta3-actions{ display:flex; align-items:center; gap: 18px 30px; flex-wrap:wrap; }
.cta3-mail{
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--fg);
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat; padding-bottom: 4px;
  transition: background-size .5s var(--ease), color .3s ease;
}
.cta3-mail:hover{ background-size: 100% 1px; color: var(--accent); }

.cta3-art{ position:relative; display:grid; place-items:center; aspect-ratio: 1 / 1; }
.cta3-glow{
  position:absolute; inset: 8%; border-radius:50%;
  background: radial-gradient(closest-side, rgba(198,255,62,.28), rgba(198,255,62,.06) 60%, transparent);
  filter: blur(20px); animation: cta3Pulse 6s ease-in-out infinite;
}
.cta3-crystal{
  position:relative; width: 92%; height:auto;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.7));
  animation: cta3Float 7s ease-in-out infinite;
}
@keyframes cta3Float{ 0%,100%{ transform: translateY(0) rotate(-3deg); } 50%{ transform: translateY(-16px) rotate(2deg); } }
@keyframes cta3Pulse{ 0%,100%{ opacity:.75; transform: scale(.94); } 50%{ opacity:1; transform: scale(1.04); } }

/* ============================================
   FOOTER
============================================ */
.foot3{ border-top: 1px solid var(--line-soft); padding: clamp(56px, 6vw, 88px) 0 28px; }
.foot3-top{
  display:grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px;
  padding-bottom: clamp(40px, 5vw, 64px);
}
.foot3-brand img{ height: 46px; width:auto; }
.foot3-line{
  margin-top: 26px; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem); line-height: 1.1; letter-spacing: -.02em;
}
.foot3-line em{ font-style: italic; font-weight: 900; color: var(--accent); }
.foot3-col{ display:flex; flex-direction:column; align-items:flex-start; gap: 4px; }
.foot3-col a{ padding: 5px 0; }  /* ≥ 24px tap targets */
.foot3-col h2{
  margin-bottom: 6px; font-family: var(--font-display); font-size:.66rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color: var(--fg-dim);
}
.foot3-col a{ color: var(--fg-muted); font-size: .92rem; transition: color .3s ease, transform .4s var(--ease); }
.foot3-col a:hover{ color: var(--accent); transform: translateX(4px); }
.foot3-bottom{
  display:flex; align-items:center; justify-content:space-between; gap: 12px 24px; flex-wrap:wrap;
  padding-top: 24px; border-top: 1px solid var(--line-soft); font-size:.78rem; color: var(--fg-dim);
}
.foot3-top-link{ display:inline-flex; align-items:center; gap: 8px; padding: 6px 0; color: var(--fg-muted); transition: color .3s ease; }
.foot3-top-link:hover{ color: var(--accent); }
.foot3-top-link svg{ transition: transform .4s var(--ease); }
.foot3-top-link:hover svg{ transform: translateY(-3px); }

/* ============================================
   Responsive
============================================ */
@media (max-width: 1080px){
  .foot3-top{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot3-brand{ grid-column: 1 / -1; }
}
@media (max-width: 900px){
  .philo-inner, .flow-grid, .cta3-inner{ grid-template-columns: 1fr; }
  .philo-media{ max-width: 520px; }
  .flow-head{ grid-template-columns: 1fr; gap: 18px; }
  .flow-media{ min-height: 0; aspect-ratio: 4 / 3; }
  .cta3-art{ order:-1; width: min(70vw, 380px); margin: 0 auto -10px; }
}
@media (max-width: 560px){
  .philo-line{ flex-direction:column; align-items:flex-start; gap: 10px; }
  .flow-step{ grid-template-columns: 44px 1fr; gap: 18px; }
  .flow-node{ width: 44px; height: 44px; }
  .flow-rail{ left: 21px; }
  .diff{ padding-left: 12px; padding-right: 12px; }
  .diff-card{ min-height: 560px; }
  /* phones: product as a band above the copy instead of behind it */
  .diff-card{ flex-direction:column; align-items:stretch; min-height:0; }
  .diff-bg{ position:relative; inset:auto; height: 250px; margin-bottom: -60px; }
  .diff-bg img{ object-position: 72% 50%; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
  .diff-card::before{ background: none; }
  .philo-rail{ display:none; }
  .foot3-top{ grid-template-columns: 1fr 1fr; }
  .foot3-bottom{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce){
  .cta3-crystal, .cta3-glow{ animation:none; }
  .philo-media img, .flow-media img{ transform:none; transition:none; }
}