/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root{
  --night:      #12101C;   /* ground: indigo-violet night, never flat black */
  --night-deep: #0C0A14;   /* recessed bands */
  --raised:     #1B1729;   /* cards and surfaces */
  --veil:       #2A2340;   /* hairlines and edges */
  --ivory:      #F2EEE6;   /* primary text, warm — not pure white */
  --muted:      #A79FB8;   /* secondary text, cool lilac-grey */
  --dawn:       #E9C48B;   /* the light entering: CTAs, rules, marks */
  --dawn-deep:  #C9A167;
  --iris:       #9F8CD8;   /* the wing: small marks, hover states */

  --display: "Marcellus", "Times New Roman", serif;
  --body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --band: clamp(5rem, 11vw, 9.5rem);
  --rail: 92px;                       /* left thread gutter, desktop only */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--night);
  color:var(--muted);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .25vw,1.115rem);
  line-height:1.78;
  font-weight:400;
  letter-spacing:.004em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{
  font-family:var(--display);
  font-weight:400;
  color:var(--ivory);
  margin:0;
  line-height:1.12;
  letter-spacing:-.005em;
}
p{margin:0 0 1.35em}
p:last-child{margin-bottom:0}

::selection{background:var(--dawn);color:var(--night)}

:focus-visible{
  outline:2px solid var(--dawn);
  outline-offset:4px;
  border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--dawn);color:var(--night);
  padding:.75rem 1.25rem;font-weight:600;
  font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
}
.skip:focus{left:1rem;top:1rem}


/* Fine grain — kills gradient banding on the dark ground */
.grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.band{padding-block:var(--band);position:relative;scroll-margin-top:5.5rem}
.band--tight{padding-block:clamp(3.5rem,7vw,5.5rem)}
.band--sunken{background:var(--night-deep)}
.band--edged{border-top:1px solid var(--veil)}

.eyebrow{
  font-family:var(--body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--dawn);
  margin:0 0 1.5rem;
  display:flex;
  align-items:center;
  gap:.85rem;
}
.eyebrow::before{
  content:"";
  width:34px;height:1px;
  background:linear-gradient(90deg,var(--dawn),transparent);
  flex:none;
}
.eyebrow--center{justify-content:center}
.eyebrow--center::after{
  content:"";width:34px;height:1px;
  background:linear-gradient(270deg,var(--dawn),transparent);
  flex:none;
}
.eyebrow--center::before{background:linear-gradient(90deg,transparent,var(--dawn))}

/* ==========================================================================
   4. The thread — the signature element.
   A single taut line down the page that warms from cool to light as you
   descend. It is the "cord" from the copy, redrawn as a passage.
   ========================================================================== */
.thread{
  position:fixed;
  left:calc(var(--rail) / 2);
  top:0;bottom:0;
  width:2px;
  z-index:40;
  display:none;
}
.thread__track{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent,var(--veil) 12%,var(--veil) 88%,transparent);
}
.thread__fill{
  position:absolute;left:0;top:0;width:100%;height:0;
  background:linear-gradient(180deg,var(--iris),var(--dawn));
  box-shadow:0 0 14px rgba(233,196,139,.45);
  transform-origin:top;
}
.thread__nodes{
  position:absolute;
  left:50%;top:26vh;bottom:22vh;
  transform:translateX(-50%);
  display:flex;flex-direction:column;justify-content:space-between;
  align-items:center;
}
.thread__node{
  position:relative;
  width:26px;height:26px;
  display:grid;place-items:center;
}
.thread__node::after{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--night);
  border:1px solid var(--veil);
  transition:all .45s var(--ease);
}
.thread__node:hover::after{border-color:var(--dawn);transform:scale(1.25)}
.thread__node.is-active::after{
  background:var(--dawn);
  border-color:var(--dawn);
  box-shadow:0 0 0 4px rgba(233,196,139,.14);
  transform:scale(1.15);
}
.thread__label{
  position:absolute;left:26px;top:50%;
  transform:translate(-6px,-50%);
  white-space:nowrap;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--ivory);
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.thread__node:hover .thread__label,
.thread__node:focus-visible .thread__label{opacity:1;transform:translate(0,-50%)}

@media (min-width:1320px){.thread{display:block}}

/* ==========================================================================
   5. Masthead
   ========================================================================== */
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding-block:1.35rem;
  transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.masthead.is-stuck{
  background:rgba(18,16,28,.86);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--veil);
  padding-block:.85rem;
}
.masthead__inner{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--gutter);
}
.wordmark{display:flex;flex-direction:column;line-height:1.1}
.wordmark__name{
  font-family:var(--display);
  font-size:1.06rem;color:var(--ivory);letter-spacing:.06em;
}
.wordmark__aim{
  font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--dawn);margin-top:.32rem;font-weight:600;
}
.nav{display:none;align-items:center;gap:2.4rem}
.nav a{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--muted);
  position:relative;padding-block:.35rem;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--dawn);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav a:hover{color:var(--ivory)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
@media (min-width:900px){.nav{display:flex}}

/* Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--body);
  font-size:.78rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:1rem 1.7rem;
  border-radius:999px;
  border:1px solid transparent;
  transition:all .4s var(--ease);
  cursor:pointer;
  line-height:1;
  text-align:center;
}
.btn--solid{background:var(--dawn);color:var(--night-deep);border-color:var(--dawn)}
.btn--solid:hover{background:var(--ivory);border-color:var(--ivory);transform:translateY(-2px)}
.btn--ghost{color:var(--ivory);border-color:var(--veil)}
.btn--ghost:hover{border-color:var(--dawn);color:var(--dawn);transform:translateY(-2px)}
.btn--sm{padding:.72rem 1.25rem;font-size:.7rem}
.btn__arrow{transition:transform .4s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.masthead .btn{flex:none}
@media (max-width:540px){
  .masthead__inner{gap:1rem}
  .wordmark__name{font-size:.94rem}
  .wordmark__aim{display:none}
  .masthead .btn--sm{padding:.68rem 1.05rem;font-size:.64rem;letter-spacing:.12em}
}

/* ==========================================================================
   6. Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  text-align:center;
  padding-block:9rem 5rem;
  overflow:hidden;
  scroll-margin-top:0;
}
/* the aperture: light entering the dark */
.hero::before{
  content:"";
  position:absolute;
  top:38%;left:50%;
  width:min(140vw,1150px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side,rgba(233,196,139,.15),rgba(159,140,216,.10) 46%,transparent 72%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:38vh;
  background:linear-gradient(180deg,transparent,var(--night));
  pointer-events:none;
}
.hero__inner{position:relative;z-index:3;max-width:900px}
.hero__logo{
  width:min(320px,64vw);
  margin:0 auto clamp(2rem,4vw,2.8rem);
}
.hero__aim{
  font-size:clamp(.62rem,1.6vw,.75rem);
  letter-spacing:.42em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--dawn);
  margin:0 0 clamp(1.6rem,3vw,2.2rem);
  padding-left:.42em;
}
.hero__title{
  font-size:clamp(2.25rem,6vw,4.35rem);
  line-height:1.08;
  letter-spacing:-.012em;
  margin:0 0 1.5rem;
  text-wrap:balance;
}
.hero__title em{font-style:normal;color:var(--dawn)}
.hero__sub{
  max-width:34rem;margin:0 auto clamp(2.4rem,5vw,3.2rem);
  color:var(--muted);
  font-size:clamp(1rem,1.4vw,1.16rem);
}
.hero__actions{
  display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;
}
.hero__scroll{
  position:absolute;left:50%;bottom:2.4rem;transform:translateX(-50%);
  z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  font-weight:600;color:var(--muted);
  transition:color .3s var(--ease);
}
.hero__scroll:hover{color:var(--dawn)}
.hero__scroll span.line{
  width:1px;height:52px;
  background:linear-gradient(180deg,var(--dawn),transparent);
  animation:drop 2.6s var(--ease) infinite;
}
@keyframes drop{
  0%{transform:scaleY(.35);transform-origin:top;opacity:0}
  40%{opacity:1}
  100%{transform:scaleY(1);transform-origin:top;opacity:0}
}

/* ==========================================================================
   7. Narrative
   ========================================================================== */
.narrative{
  display:grid;
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:start;
}
@media (min-width:960px){
  .narrative{grid-template-columns:minmax(280px,.85fr) 1.15fr}
}
.narrative__head{position:relative}
@media (min-width:960px){
  .narrative__head{position:sticky;top:8rem}
}
.narrative__title{
  font-size:clamp(1.95rem,3.6vw,2.9rem);
  line-height:1.14;
  text-wrap:balance;
}
.narrative__title em{font-style:normal;color:var(--dawn)}
.narrative__rule{
  width:64px;height:1px;background:var(--veil);
  margin-top:2rem;
}
.narrative__body p:first-child{
  font-size:clamp(1.1rem,1.6vw,1.28rem);
  line-height:1.66;
  color:var(--ivory);
}
.narrative__body .em{color:var(--ivory);font-style:italic}

/* Pull quote — the client's own thesis line */
.thesis{
  margin:clamp(3rem,6vw,4.5rem) 0 0;
  padding:clamp(2rem,4vw,2.75rem) 0 0;
  border-top:1px solid var(--veil);
}
.thesis__line{
  font-family:var(--display);
  font-size:clamp(1.6rem,3.4vw,2.5rem);
  line-height:1.22;
  color:var(--ivory);
  margin:0 0 1.4rem;
  text-wrap:balance;
}
.thesis__line b{font-weight:400;color:var(--dawn)}

/* ==========================================================================
   8. AIM triad
   ========================================================================== */
.triad{
  display:grid;
  gap:1px;
  background:var(--veil);
  border-block:1px solid var(--veil);
}
@media (min-width:820px){.triad{grid-template-columns:repeat(3,1fr)}}
.triad__cell{
  background:var(--night);
  padding:clamp(2.2rem,3.6vw,3rem) clamp(1.5rem,2.6vw,2.4rem);
  transition:background .5s var(--ease);
}
.triad__cell:hover{background:var(--raised)}
.triad__mark{
  font-family:var(--display);
  font-size:2.6rem;
  color:var(--dawn);
  line-height:1;
  display:block;
  margin-bottom:1.1rem;
}
.triad__name{
  font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;
  font-weight:600;color:var(--ivory);
  margin:0 0 1rem;
}
.triad__cell p{font-size:.98rem;line-height:1.7;margin:0}

/* ==========================================================================
   9. Rumi bands
   ========================================================================== */
.rumi{text-align:center}
.rumi__ornament{
  width:min(560px,78vw);
  margin:0 auto clamp(2rem,4vw,2.8rem);
  opacity:.85;
}
.rumi__quote{
  font-family:var(--display);
  font-size:clamp(1.25rem,2.5vw,1.95rem);
  line-height:1.5;
  color:var(--ivory);
  max-width:52rem;
  margin:0 auto;
  text-wrap:balance;
}
.rumi--short .rumi__quote{font-size:clamp(1.5rem,3.4vw,2.6rem)}
.rumi__attr{
  display:block;
  margin-top:1.8rem;
  font-family:var(--body);
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
  font-weight:600;color:var(--dawn);
}

/* ==========================================================================
   10. Explore cards
   ========================================================================== */
.explore__head{
  display:flex;flex-wrap:wrap;gap:1.5rem;
  align-items:flex-end;justify-content:space-between;
  margin-bottom:clamp(2.5rem,4vw,3.5rem);
}
.explore__title{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.explore__note{max-width:26rem;margin:0;font-size:.98rem}
.cards{display:grid;gap:clamp(1.25rem,2.4vw,2rem)}
@media (min-width:860px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  display:block;
  background:var(--raised);
  border:1px solid var(--veil);
  border-radius:3px;
  overflow:hidden;
  transition:transform .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease);
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--dawn-deep);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.9);
}
.card__frame{overflow:hidden;background:var(--night-deep)}
.card__frame img{
  width:100%;aspect-ratio:800/267;object-fit:cover;
  transition:transform .8s var(--ease);
}
.card:hover .card__frame img{transform:scale(1.035)}
.card__body{padding:1.6rem 1.5rem 1.7rem}
.card__title{
  font-size:1.3rem;margin:0 0 .6rem;
  transition:color .4s var(--ease);
}
.card:hover .card__title{color:var(--dawn)}
.card__text{font-size:.94rem;line-height:1.65;margin:0 0 1.35rem;color:var(--muted)}
.card__more{
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--dawn);
  display:inline-flex;align-items:center;gap:.55rem;
}
.card__more span{transition:transform .4s var(--ease)}
.card:hover .card__more span{transform:translateX(5px)}

/* ==========================================================================
   11. Invitation
   ========================================================================== */
.invite{text-align:center;position:relative;overflow:hidden}
.invite::before{
  content:"";position:absolute;top:50%;left:50%;
  width:min(120vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(233,196,139,.11),transparent 70%);
  pointer-events:none;
}
.invite__inner{position:relative;z-index:2}
.chip{
  width:92px;height:92px;border-radius:50%;
  display:grid;place-items:center;
  margin:0 auto 2rem;
  background:rgba(242,238,230,.05);
  border:1px solid var(--veil);
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.chip img{width:52px;height:auto}
.invite:hover .chip{border-color:var(--dawn-deep)}
.invite__title{
  font-size:clamp(1.9rem,4vw,3.1rem);
  margin:0 0 1.2rem;
  text-wrap:balance;
}
.invite__text{max-width:38rem;margin:0 auto 2.6rem}
.invite__meta{
  display:flex;flex-wrap:wrap;gap:.7rem 2.2rem;justify-content:center;
  margin-top:2.8rem;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--muted);
}
.invite__meta a{transition:color .3s var(--ease)}
.invite__meta a:hover{color:var(--dawn)}

/* ==========================================================================
   12. Footer
   ========================================================================== */
.footer{
  background:var(--night-deep);
  border-top:1px solid var(--veil);
  padding-block:clamp(3.5rem,6vw,5rem) 2rem;
}
.footer__grid{
  display:grid;gap:2.75rem;
  padding-bottom:3rem;
}
@media (min-width:760px){
  .footer__grid{grid-template-columns:minmax(0,1.45fr) minmax(240px,.75fr);gap:3rem}
}
.footer__logo{width:170px;margin-bottom:1.5rem}
.footer__tag{font-size:.92rem;max-width:24rem;margin:0}
.footer h3{
  font-family:var(--body);
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--dawn);
  margin:0 0 1.35rem;
}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.footer li{font-size:.95rem;line-height:1.5}
.footer a{transition:color .3s var(--ease)}
.footer a:hover{color:var(--dawn)}
.footer__bottom{
  border-top:1px solid var(--veil);
  padding-top:2rem;
  display:flex;flex-wrap:wrap;gap:1.75rem;
  align-items:center;justify-content:space-between;
}
.social{display:flex;gap:.7rem;align-items:center}
.social a{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--veil);
  background:rgba(242,238,230,.03);
  transition:border-color .4s var(--ease),transform .4s var(--ease),background .4s var(--ease);
}
.social a:hover{border-color:var(--dawn-deep);transform:translateY(-3px);background:rgba(233,196,139,.07)}
.social img{width:20px;height:20px}
.footer__legal{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;
  font-size:.76rem;letter-spacing:.05em;
}
.totop{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:var(--muted);
  transition:color .3s var(--ease);
}
.totop img{width:34px;height:34px;transition:transform .45s var(--ease)}
.totop:hover{color:var(--dawn)}
.totop:hover img{transform:translateY(-4px)}
.recaptcha{
  font-size:.72rem;line-height:1.6;color:#857D9C;
  margin:2rem 0 0;max-width:44rem;
}
.recaptcha a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.recaptcha a:hover{color:var(--dawn)}

/* ==========================================================================
   13. Reveal motion
   ========================================================================== */
.rise{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rise.in{opacity:1;transform:none}
.rise[data-delay="1"]{transition-delay:.1s}
.rise[data-delay="2"]{transition-delay:.2s}
.rise[data-delay="3"]{transition-delay:.3s}
.rise[data-delay="4"]{transition-delay:.4s}
.rise[data-delay="5"]{transition-delay:.5s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rise{opacity:1;transform:none}
  .thread__fill{box-shadow:none}
}

/* ==========================================================================
   Floating home / back-to-top control
   ========================================================================== */

.floating-home {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 50;

  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

  opacity: .58;

  transition:
    opacity .3s var(--ease),
    transform .3s var(--ease);
}

.floating-home img {
  width: 100%;
  height: auto;
}

.floating-home:hover {
  opacity: 1;
  transform: translateY(-4px) scale(1.05);
}

@media (max-width: 540px) {
  .floating-home {
    width: 46px;
    height: 46px;
    right: .85rem;
    bottom: .85rem;
  }
}

/* ==========================================================================\n   14. Process page\n   ========================================================================== */
.process-hero{position:relative;min-height:78svh;display:grid;place-items:center;padding-block:9rem 5rem;overflow:hidden;text-align:center}
.process-hero::before{content:"";position:absolute;top:36%;left:50%;width:min(120vw,1000px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(233,196,139,.13),rgba(159,140,216,.08) 48%,transparent 74%);pointer-events:none}
.process-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30vh;background:linear-gradient(180deg,transparent,var(--night));pointer-events:none}
.process-hero__inner{position:relative;z-index:3;max-width:900px}
.process-hero__image{width:min(680px,88vw);margin:0 auto clamp(2rem,4vw,3rem);border:1px solid var(--veil);border-radius:4px;box-shadow:0 28px 65px -45px rgba(0,0,0,.95)}
.process-hero__title{font-size:clamp(2.25rem,6vw,4rem);margin-bottom:1.2rem;text-wrap:balance}
.process-hero__title em{font-style:normal;color:var(--dawn)}
.process-hero__sub{max-width:44rem;margin:0 auto;font-size:clamp(1rem,1.5vw,1.18rem);color:var(--muted)}
.process-intro{max-width:850px;margin-inline:auto}
.process-intro__lead{font-family:var(--display);font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.35;color:var(--ivory);margin-bottom:1.75rem;text-wrap:balance}
.process-intro__program{color:var(--dawn);font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;margin-bottom:1.2rem}
.process-phases{display:grid;gap:1px;background:var(--veil);border-block:1px solid var(--veil)}
.process-phase{background:var(--night)}
.process-phase:nth-child(even){background:var(--night-deep)}
.process-phase__inner{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(4rem,8vw,7rem)}
@media (min-width:900px){.process-phase__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.process-phase:nth-child(even) .process-phase__media{order:2}}
.process-phase__media{overflow:hidden;border-radius:4px;border:1px solid var(--veil);background:var(--raised)}
.process-phase__media img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .75s var(--ease)}
.process-phase:hover .process-phase__media img{transform:scale(1.025)}
.process-phase__number{display:block;margin-bottom:.9rem;color:var(--dawn);font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.process-phase__title{font-size:clamp(1.8rem,3.5vw,2.75rem);margin-bottom:.8rem}
.process-phase__weeks{margin:0 0 1.4rem;color:var(--iris);font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.process-phase__copy{color:var(--muted)}
.process-phase__value{margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--veil)}
.process-phase__value strong{color:var(--ivory);font-weight:600}
.process-quote{text-align:center}
.process-quote__line{max-width:52rem;margin:0 auto;font-family:var(--display);font-size:clamp(1.55rem,3.2vw,2.5rem);line-height:1.45;color:var(--ivory);text-wrap:balance}
.process-quote__line em{font-style:normal;color:var(--dawn)}

/* ==========================================================================
   15. Testimonials page
   ========================================================================== */

.testimonials-hero{
  position:relative;
  min-height:72svh;
  display:grid;
  place-items:center;
  padding-block:9rem 5rem;
  overflow:hidden;
  text-align:center;
}

.testimonials-hero::before{
  content:"";
  position:absolute;
  top:34%;
  left:50%;
  width:min(120vw,1000px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(
      closest-side,
      rgba(233,196,139,.12),
      rgba(159,140,216,.08) 48%,
      transparent 74%
    );
  pointer-events:none;
}

.testimonials-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:28vh;
  background:linear-gradient(180deg,transparent,var(--night));
  pointer-events:none;
}

.testimonials-hero__inner{
  position:relative;
  z-index:3;
  max-width:900px;
}

.testimonials-hero__image{
  width:min(680px,88vw);
  margin:0 auto clamp(2rem,4vw,3rem);
  border:1px solid var(--veil);
  border-radius:4px;
  box-shadow:0 28px 65px -45px rgba(0,0,0,.95);
}

.testimonials-hero__title{
  font-size:clamp(2.3rem,6vw,4rem);
  margin-bottom:1.2rem;
  text-wrap:balance;
}

.testimonials-hero__title em{
  font-style:normal;
  color:var(--dawn);
}

.testimonials-hero__sub{
  max-width:44rem;
  margin:0 auto;
  font-size:clamp(1rem,1.5vw,1.18rem);
  color:var(--muted);
}

.testimonials-intro{
  text-align:center;
  max-width:760px;
  margin-inline:auto;
}

.testimonials-coming{
  width:min(500px,82vw);
  margin:0 auto;
  opacity:.88;
}

.testimonial-grid{
  display:grid;
  gap:clamp(1.25rem,2.5vw,2rem);
  margin-top:clamp(3rem,6vw,5rem);
}

@media (min-width:760px){
  .testimonial-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

.testimonial-card{
  overflow:hidden;
  background:var(--raised);
  border:1px solid var(--veil);
  border-radius:4px;
  transition:
    transform .45s var(--ease),
    border-color .45s var(--ease),
    box-shadow .45s var(--ease);
}

.testimonial-card:hover{
  transform:translateY(-5px);
  border-color:var(--dawn-deep);
  box-shadow:0 24px 50px -32px rgba(0,0,0,.9);
}

.testimonial-card__media{
  background:var(--night-deep);
  overflow:hidden;
}

.testimonial-card__media img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  transition:transform .7s var(--ease);
}

.testimonial-card:hover .testimonial-card__media img{
  transform:scale(1.025);
}

.testimonial-card__body{
  padding:clamp(1.5rem,3vw,2rem);
}

.testimonial-card__name{
  font-size:clamp(1.35rem,2.5vw,1.75rem);
  margin-bottom:.45rem;
}

.testimonial-card__role{
  margin:0 0 1.25rem;
  color:var(--dawn);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.testimonial-card__quote{
  margin:0;
  color:var(--muted);
  font-family:var(--display);
  font-size:clamp(1.08rem,2vw,1.3rem);
  line-height:1.55;
}

.testimonials-quote{
  text-align:center;
}

.testimonials-quote__line{
  max-width:50rem;
  margin:0 auto;
  font-family:var(--display);
  font-size:clamp(1.55rem,3.2vw,2.5rem);
  line-height:1.5;
  color:var(--ivory);
  text-wrap:balance;
}

.testimonials-quote__line em{
  font-style:normal;
  color:var(--dawn);
}

/* ==========================================================================
   16. About page
   ========================================================================== */

.about-hero{
  position:relative;
  min-height:74svh;
  display:grid;
  place-items:center;
  padding-block:9rem 5rem;
  overflow:hidden;
  text-align:center;
}
.about-hero::before{
  content:"";
  position:absolute;
  top:34%;left:50%;
  width:min(120vw,1000px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(233,196,139,.13),rgba(159,140,216,.08) 48%,transparent 74%);
  pointer-events:none;
}
.about-hero::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:28vh;
  background:linear-gradient(180deg,transparent,var(--night));
  pointer-events:none;
}
.about-hero__inner{position:relative;z-index:3;max-width:920px}
.about-hero__image{
  width:min(700px,88vw);
  margin:0 auto clamp(2rem,4vw,3rem);
  border:1px solid var(--veil);
  border-radius:4px;
  box-shadow:0 28px 65px -45px rgba(0,0,0,.95);
}
.about-hero__title{
  font-size:clamp(2.35rem,6vw,4.1rem);
  margin-bottom:1.2rem;
  text-wrap:balance;
}
.about-hero__title em{font-style:normal;color:var(--dawn)}
.about-hero__sub{
  max-width:46rem;
  margin:0 auto;
  font-size:clamp(1rem,1.5vw,1.18rem);
  color:var(--muted);
}

.about-story{
  display:grid;
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:start;
}
@media (min-width:960px){
  .about-story{grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr)}
  .about-story__head{position:sticky;top:8rem}
}
.about-story__title{
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.15;
  margin-bottom:1.2rem;
  text-wrap:balance;
}
.about-story__lead{
  color:var(--ivory);
  font-family:var(--display);
  font-size:clamp(1.25rem,2.2vw,1.6rem);
  line-height:1.55;
}
.about-story__body{max-width:760px}
.about-story__body p{margin-bottom:1.5rem}

.about-device{
  background:var(--night-deep);
  border-block:1px solid var(--veil);
}
.about-device__intro{
  max-width:860px;
  margin-inline:auto;
  text-align:center;
}
.about-device__title{
  font-size:clamp(2rem,4.5vw,3.2rem);
  margin-bottom:1.2rem;
}
.about-device__lead{
  max-width:48rem;
  margin:0 auto 1.75rem;
  color:var(--ivory);
  font-family:var(--display);
  font-size:clamp(1.2rem,2.3vw,1.6rem);
  line-height:1.55;
}

.device-modes{
  display:grid;
  gap:1px;
  background:var(--veil);
  border-block:1px solid var(--veil);
}
.device-mode{background:var(--night)}
.device-mode:nth-child(even){background:var(--night-deep)}
.device-mode__inner{
  display:grid;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
  padding-block:clamp(4rem,8vw,7rem);
}
@media (min-width:900px){
  .device-mode__inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .device-mode:nth-child(even) .device-mode__media{order:2}
}
.device-mode__media{
  overflow:hidden;
  border:1px solid var(--veil);
  border-radius:4px;
  background:var(--raised);
}
.device-mode__media img{
  width:100%;
  aspect-ratio:25/18;
  object-fit:cover;
  transition:transform .75s var(--ease);
}
.device-mode:hover .device-mode__media img{transform:scale(1.025)}
.device-mode__number{
  display:block;
  margin-bottom:.9rem;
  color:var(--dawn);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.device-mode__title{
  font-size:clamp(1.85rem,3.5vw,2.75rem);
  margin-bottom:1.2rem;
}
.device-mode__copy{color:var(--muted)}

.about-quote{text-align:center}
.about-quote__line{
  max-width:52rem;
  margin:0 auto;
  font-family:var(--display);
  font-size:clamp(1.5rem,3vw,2.35rem);
  line-height:1.5;
  color:var(--ivory);
  text-wrap:balance;
}
.about-quote__attr{
  display:block;
  margin-top:1.5rem;
  color:var(--dawn);
  font-family:var(--body);
  font-size:.7rem;
  font-style:normal;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
}


/* ==========================================================================
   17. Reach Out / Contact page
   ========================================================================== */
.contact-page{position:relative;min-height:100svh;padding-block:9rem 5rem;overflow:hidden}
.contact-page::before{content:"";position:absolute;top:18%;left:50%;width:min(125vw,1050px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(233,196,139,.12),rgba(159,140,216,.08) 48%,transparent 74%);pointer-events:none}
.contact-page__inner{position:relative;z-index:3;max-width:920px}
.contact-head{max-width:720px;margin:0 auto clamp(3rem,6vw,4.5rem);text-align:center}
.contact-head__title{font-size:clamp(2.4rem,6vw,4.2rem);margin-bottom:1.2rem;text-wrap:balance}
.contact-head__title em{font-style:normal;color:var(--dawn)}
.contact-head__sub{max-width:42rem;margin:0 auto;font-size:clamp(1rem,1.5vw,1.18rem)}
.contact-card{max-width:820px;margin-inline:auto;padding:clamp(1.5rem,4vw,3rem);background:rgba(27,23,41,.78);border:1px solid var(--veil);border-radius:6px;box-shadow:0 30px 70px -48px rgba(0,0,0,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.contact-form{display:grid;gap:1.2rem}.form-grid{display:grid;gap:1.2rem}
@media (min-width:700px){.form-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.form-field{display:grid;gap:.5rem}.form-field label,.form-label{color:var(--ivory);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.form-field input{width:100%;min-width:0;padding:1rem 1.05rem;border:1px solid var(--veil);border-radius:4px;background:rgba(12,10,20,.72);color:var(--ivory);font:inherit;line-height:1.3;transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.form-field input::placeholder{color:#777085}.form-field input:hover{border-color:#4a405f}.form-field input:focus{outline:none;border-color:var(--dawn-deep);background:var(--night-deep);box-shadow:0 0 0 3px rgba(233,196,139,.08)}
.form-consent{display:grid;gap:.85rem;margin-top:.5rem;padding-top:1.4rem;border-top:1px solid var(--veil)}
.form-checkbox{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;color:var(--muted);font-size:.9rem;line-height:1.5}.form-checkbox input{width:1rem;height:1rem;margin-top:.2rem;accent-color:var(--dawn)}
.form-links{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;font-size:.82rem}.form-links a{color:var(--dawn);text-decoration:underline;text-underline-offset:3px}.form-links a:hover{color:var(--ivory)}
.form-actions{display:flex;align-items:center;justify-content:flex-start;gap:1rem;margin-top:.4rem}.form-submit[disabled]{cursor:wait;opacity:.7;transform:none}
.form-honeypot{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.grecaptcha-badge{visibility:hidden}
.contact-recaptcha{margin-top:1.25rem;color:#857d9c;font-size:.72rem;line-height:1.55}
.contact-modal{display:none;position:fixed;inset:0;z-index:200;padding:20vh 1.25rem 2rem;background:rgba(0,0,0,.64)}.contact-modal.is-open{display:block}
.contact-modal__card{position:relative;width:min(100%,540px);margin:0 auto;padding:clamp(1.5rem,4vw,2.25rem);background:var(--raised);border:1px solid var(--veil);border-radius:6px;box-shadow:0 24px 70px rgba(0,0,0,.42)}
.contact-modal__card::before{content:"";position:absolute;top:0;bottom:0;left:0;width:5px;border-radius:6px 0 0 6px;background:var(--dawn)}
.contact-modal__title{margin:0 0 .85rem;font-size:clamp(1.5rem,3vw,2rem)}.contact-modal__body{margin:0 0 1.5rem;white-space:pre-line}.contact-modal__actions{display:flex;justify-content:flex-end}.contact-modal__close{min-width:110px}
@media (max-width:540px){.contact-card{padding:1.25rem}.contact-page{padding-top:7.5rem}.form-actions{align-items:stretch}.form-submit{width:100%;justify-content:center}}

/* ========================================================================== 
   18. Privacy page
   ========================================================================== */
.legal-page{position:relative;min-height:100svh;padding-block:9rem 5rem;overflow:hidden}
.legal-page::before{content:"";position:absolute;top:10%;left:50%;width:min(120vw,1000px);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(233,196,139,.10),rgba(159,140,216,.06) 48%,transparent 74%);pointer-events:none}
.legal-page__inner{position:relative;z-index:3;max-width:920px}
.legal-head{max-width:760px;margin:0 auto clamp(3rem,6vw,4.5rem);text-align:center}
.legal-head__title{font-size:clamp(2.4rem,6vw,4rem);margin-bottom:1rem}
.legal-head__meta{margin:0;color:var(--dawn);font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.legal-card{padding:clamp(1.5rem,4vw,3rem);background:rgba(27,23,41,.82);border:1px solid var(--veil);border-radius:6px;box-shadow:0 30px 70px -48px rgba(0,0,0,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.legal-card > p:first-of-type{color:var(--ivory);font-size:clamp(1.05rem,1.5vw,1.16rem)}
.legal-card h2{margin-top:clamp(2.6rem,5vw,3.5rem);margin-bottom:1rem;padding-top:clamp(2rem,4vw,2.7rem);border-top:1px solid var(--veil);font-size:clamp(1.45rem,3vw,2rem);line-height:1.25}
.legal-card h2:first-of-type{margin-top:2rem}
.legal-card h3{margin-top:1.8rem;margin-bottom:.8rem;color:var(--dawn);font-family:var(--body);font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.legal-card p,.legal-card li{line-height:1.75}
.legal-card ul{margin:1rem 0 1.5rem;padding-left:1.35rem}
.legal-card li + li{margin-top:.7rem}
.legal-card strong{color:var(--ivory);font-weight:600}
.legal-card a{color:var(--dawn);text-decoration:underline;text-underline-offset:3px;transition:color .3s var(--ease)}
.legal-card a:hover{color:var(--ivory)}
@media (max-width:540px){.legal-page{padding-top:7.5rem}.legal-card{padding:1.25rem}}

/* ==========================================================================
   Compact footer refinement
   ========================================================================== */

.footer {
  padding-block: 2.4rem 1.2rem;
}

/* Upper footer */
.footer__grid {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem;
  padding-bottom: 1.6rem;
}

/* Brand / butterfly block */
.footer__grid > div:first-child {
  width: min(100%, 320px);
  text-align: center;
}

.footer__logo {
  width: 130px;
  margin: 0 auto .8rem;
}

.footer__tag {
  max-width: 320px;
  margin: 0 auto;
  font-size: .86rem;
  line-height: 1.5;
  text-align: center;
}

/* Contact block */
.footer h3 {
  margin-bottom: .75rem;
}

.footer ul {
  gap: .35rem;
}

.footer li {
  font-size: .88rem;
  line-height: 1.4;
}

/* Lower bar */
.footer__bottom {
  padding-top: 1.1rem;
  gap: 1rem 1.5rem;
}

/* Smaller social buttons */
.social {
  gap: .5rem;
}

.social a {
  width: 38px;
  height: 38px;
}

.social img {
  width: 18px;
  height: 18px;
}

.footer__legal {
  font-size: .7rem;
  gap: .5rem 1rem;
}

/* Mobile */
@media (max-width: 759px) {

  .footer {
    padding-block: 2rem 1rem;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    text-align: center;
  }

  .footer__grid > div:first-child {
    justify-self: center;
  }

  .footer__grid > div:nth-child(2) {
    text-align: center;
  }

  .footer__bottom {
    justify-content: center;
    text-align: center;
  }

  .social {
    justify-content: center;
  }

  .footer__legal {
    justify-content: center;
  }
}