/* =========================================================
   Adness Solutions — brand stylesheet
   Navy #1F2A44 · Warm Beige #E8DCC8 · Soft Gold #C6A75E
   ========================================================= */

:root{
  --navy:#1F2A44;
  --navy-soft:#2A3757;
  --beige:#E8DCC8;
  --beige-light:#F4EDE1;
  --beige-page:#EFE7D9;
  --gold:#C6A75E;
  --gold-deep:#B08F45;
  --ink:#1B2338;
  --ink-muted:#5A6178;

  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Inter", "Segoe UI", Helvetica, Arial, sans-serif;
  --display:"Archivo", "Inter", "Segoe UI", Helvetica, Arial, sans-serif;

  --radius:18px;
  --radius-lg:26px;
  --gutter:clamp(1.15rem, 4vw, 3.25rem);
  --maxw:1180px;
  --header-h:76px;
}

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 24px);
}

body{
  margin:0;
  background:var(--beige-page);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;margin:0;letter-spacing:-0.01em;}
p{margin:0 0 1rem;}

/* ---------- shared bits ---------- */

.eyebrow{
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--gold-deep);
  margin:0 0 .9rem;
}

.section{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(3.5rem, 8vw, 6.5rem) var(--gutter);
}

.section__head{max-width:660px;margin-bottom:clamp(2rem, 5vw, 3.25rem);}
.section__title{font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);}
.section__intro{color:var(--ink-muted);margin-top:1rem;}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.6rem;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:500;
  line-height:1.2;
  cursor:pointer;
  transition:transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}

.btn--primary{background:var(--navy);color:var(--beige-light);}
.btn--primary:hover{background:var(--navy-soft);}

.btn--ghost{background:transparent;color:var(--navy);border-color:rgba(31,42,68,.28);}
.btn--ghost:hover{border-color:var(--navy);background:rgba(31,42,68,.05);}

.btn--card{
  margin-top:auto;
  align-self:stretch;
  width:100%;
  background:var(--navy);
  color:var(--beige);
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.85rem;
  padding-block:.4rem;
  padding-inline:1.6rem .4rem;
}
.btn--card:hover{background:var(--navy-soft);}

.btn--card .btn__icon{
  flex:none;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--beige);
  display:grid;
  place-items:center;
  transition:transform .18s ease;
}
.btn--card .btn__icon img{
  width:22px;
  height:22px;
  display:block;
}
.btn--card:hover .btn__icon{transform:translateX(4px);}

/* Facebook Ads card sits on a navy background already — keep its button
   in the original beige/navy treatment so it still reads against the card. */
.card--featured .btn--card{background:var(--beige);color:var(--navy);}
.card--featured .btn--card:hover{background:var(--beige-light);}
.card--featured .btn--card .btn__icon{background:var(--navy);width:46px;height:46px;}
.card--featured .btn--card .btn__icon img{width:18px;height:18px;filter:invert(1);}

.btn--block{width:100%;}

/* =========================================================
   INTRO SPLASH — the "a" mark types the brand name on load
   ========================================================= */

.intro{
  position:fixed;
  inset:0;
  z-index:200;
  background:var(--navy);
  display:none;                 /* shown via .is-on by the inline script */
  align-items:center;
  justify-content:center;
  transition:opacity .4s ease, visibility .4s ease;
}
.intro.is-on{display:flex;}
.intro.is-out{opacity:0;visibility:hidden;pointer-events:none;}

.intro__row{position:relative;padding-right:44px;}
.intro__text{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.5rem, 5.5vw, 2.4rem);
  letter-spacing:-.02em;
  color:var(--beige);
  white-space:nowrap;
}
.intro__text span{opacity:0;}
.intro__text span.is-typed{opacity:1;}
.intro__icon{
  position:absolute;
  left:0;
  top:50%;
  margin-top:-17px;
  width:34px;height:34px;
  max-width:34px;max-height:34px;
  will-change:transform;
  transition:transform .1s ease;
}

/* =========================================================
   LANGUAGE GATE — shown right after the intro splash
   ========================================================= */

.lang-gate{
  position:fixed;
  inset:0;
  z-index:190;
  background:var(--beige-page);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .4s ease, visibility .4s ease;
}
.lang-gate.is-on{opacity:1;visibility:visible;pointer-events:auto;}
.lang-gate.is-out{opacity:0;visibility:hidden;pointer-events:none;}

.lang-gate__inner{
  text-align:center;
  padding:0 1.5rem;
}
.lang-gate__title{
  font-family:var(--serif);
  font-size:clamp(1.15rem,1rem + .6vw,1.4rem);
  color:var(--navy);
  margin:0 0 clamp(1.75rem,4vw,2.25rem);
  line-height:1.4;
}
.lang-gate__title span{
  display:block;
  font-size:.78em;
  color:var(--ink-muted);
}

.lang-gate__options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.85rem;
  max-width:min(360px,100%);
  margin:0 auto;
}
.lang-gate__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.9rem 1rem;
  border:1.5px solid var(--navy);
  border-radius:999px;
  background:transparent;
  color:var(--navy);
  font-family:var(--sans);
  font-size:.92rem;
  font-weight:600;
  cursor:pointer;
  transition:transform .18s ease, background-color .18s ease;
}
.lang-gate__btn:hover{background:rgba(31,42,68,.06);transform:translateY(-2px);}
.lang-gate__flag{width:20px;height:14px;object-fit:cover;border-radius:2px;flex:none;}

/* =========================================================
   HEADER — floating navy bar, inset from top/left/right
   ========================================================= */

.header{
  position:sticky;
  top:clamp(.65rem, 1.6vw, 1.15rem);
  z-index:60;
  padding-inline:var(--gutter);
  margin-bottom:clamp(.5rem,2vw,1.5rem);
}

.nav{
  max-width:1360px;
  margin-inline:auto;
  background:var(--navy);
  border-radius:var(--radius);
  padding:1.1rem clamp(1.25rem, 3vw, 2.5rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(1rem,3vw,2.5rem);
  box-shadow:0 14px 40px -22px rgba(27,35,56,.75);
  position:relative;
}

/* brand */
.brand{display:flex;align-items:center;flex:none;}
.brand__logo{height:clamp(30px,3vw,38px);width:auto;flex:none;}

/* menu — centered between brand and right-hand actions */
.nav__menu{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(1.5rem,3vw,2.75rem);
}
.nav__menu a{
  color:var(--beige);
  font-size:.95rem;
  font-weight:400;
  opacity:.85;
  transition:opacity .18s ease, color .18s ease;
}
.nav__menu a:hover{opacity:1;color:var(--gold);}
.nav__menu-extra{display:none;}
.nav__menu-lang{display:none;}

/* right-hand actions: secondary link + primary button + burger */
.nav__right{display:flex;align-items:center;gap:clamp(1rem,2vw,1.85rem);flex:none;}

/* primary — "Contact us" solid button */
.nav__cta{
  background:var(--gold);
  color:var(--navy);
  font-size:.92rem;
  font-weight:600;
  padding:.6rem 1.2rem;
  border-radius:999px;
  white-space:nowrap;
  transition:background-color .18s ease;
}
.nav__cta:hover{background:var(--beige);}

/* secondary — "I'm a media buyer" underlined link with arrow */
.nav__cta--arrow{
  background:none;
  color:var(--beige);
  font-weight:500;
  padding:0;
  border-radius:0;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  text-decoration:underline;
  text-decoration-color:var(--gold);
  text-underline-offset:5px;
  transition:color .18s ease, text-decoration-color .18s ease;
}
.nav__cta--arrow:hover{background:none;color:var(--gold);text-decoration-color:var(--beige);}
.nav__arrow{
  display:inline-block;
  transition:transform .18s ease;
}
.nav__cta--arrow:hover .nav__arrow{transform:translateX(3px);}

/* burger */
.nav__toggle{
  display:none;
  width:44px;height:44px;
  border:0;background:transparent;
  padding:10px;
  margin:-10px;
  cursor:pointer;
  flex-direction:column;
  justify-content:space-between;
}
.nav__toggle span{
  display:block;height:2px;width:100%;
  background:var(--beige);border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg);}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}

/* =========================================================
   HERO
   ========================================================= */

.hero{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(3rem, 8vw, 6rem) var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
  text-align:center;
}

.hero__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.35rem, 1.1rem + 5.6vw, 4.9rem);
  line-height:.98;
  letter-spacing:-.035em;
  max-width:15ch;
  margin-inline:auto;
}
.hero__title em{font-style:normal;color:var(--gold-deep);}

.hero__lead{
  font-family:var(--serif);
  font-size:clamp(1.15rem, 1rem + .8vw, 1.55rem);
  color:var(--navy);
  margin:1.4rem auto 0;
  max-width:34ch;
}

.hero__sub{
  color:var(--ink-muted);
  max-width:58ch;
  margin:1.25rem auto 0;
  font-size:1rem;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
  justify-content:center;
  margin-top:2.1rem;
}

/* =========================================================
   TRUST — client logo strip
   ========================================================= */

.trust{
  max-width:none;
  margin:0 auto;
  padding:clamp(1.5rem,4vw,2.5rem) 0 clamp(2.5rem,5vw,3.75rem);
  text-align:center;
}
.trust__title{
  font-size:.95rem;
  font-weight:600;
  font-family:var(--sans);
  color:var(--ink-muted);
  letter-spacing:.02em;
  margin:0 0 clamp(1.75rem,3.5vw,2.5rem);
}

.trust__viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.trust__logos{
  display:flex;
  align-items:center;
  width:max-content;
  gap:clamp(3rem,6vw,5rem);
  animation:trustScroll 34s linear infinite;
}
.trust__viewport:hover .trust__logos{animation-play-state:paused;}
.trust__logos li{display:flex;align-items:center;justify-content:center;flex:none;}

@keyframes trustScroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

.trust__logo{
  height:38px;
  width:auto;
  max-width:230px;
  object-fit:contain;
  display:block;
}
.trust__logo--durable{height:29px;}

.trust__wordmark{
  font-family:var(--sans);
  font-weight:700;
  font-size:1.75rem;
  letter-spacing:-.01em;
  line-height:1;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:.3em;
}
.trust__wordmark--seed{
  font-weight:600;
  text-transform:lowercase;
  color:#2f3d2b;
  align-items:flex-end;
  gap:.15em;
}
.trust__wordmark--seed i{
  width:6px;height:6px;border-radius:50%;
  background:#2f3d2b;
  display:inline-block;
  margin-bottom:.22em;
  font-style:normal;
}
.trust__wordmark--hellofresh{color:#7ab800;}
.trust__wordmark--bloom{font-family:var(--serif);font-weight:500;color:#3f7a3d;font-size:2rem;}

.trust__wordmark--mira{
  color:#2f8f5b;
  text-transform:lowercase;
}
.trust__wordmark--mira::before{
  content:"m";
  width:24px;height:24px;
  border-radius:8px;
  background:#3fae6a;
  color:#fff;
  font-size:.62em;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
}

.trust__wordmark--momcozy{
  color:#1b2338;
  font-weight:600;
  text-transform:lowercase;
  letter-spacing:.01em;
}

@media (max-width:600px){
  .trust__logo{height:28px;}
  .trust__logo--durable{height:21px;}
  .trust__wordmark{font-size:1.3rem;}
  .trust__wordmark--bloom{font-size:1.5rem;}
  .trust__logos{gap:2.25rem;animation-duration:24s;}
}

@media (prefers-reduced-motion:reduce){
  .trust__logos{animation:none;}
}

/* =========================================================
   SERVICES
   ========================================================= */

/* progress bar + snackbar are mobile-carousel-only UI, hidden by default */
.services__progress{display:none;}
.services__snackbar{display:none;}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1rem,2.2vw,1.6rem);
}

.card{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  background:var(--beige-light);
  border:1.5px solid var(--navy);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.15rem);
}

.card--featured{background:var(--navy);border-color:var(--navy);color:var(--beige);}
.card--featured .card__title{color:var(--beige-light);}
.card--featured .card__tag{color:var(--gold);}
.card--featured .card__list li{color:rgba(232,220,200,.9);}
.card--featured .card__list li::before{background:var(--gold);}
.card--featured .card__note{color:rgba(232,220,200,.75);border-top-color:rgba(232,220,200,.2);}
.card--featured .card__note strong{color:var(--gold);}
.card--featured .card__body{color:rgba(232,220,200,.9);}

.card__tag{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--gold-deep);margin:0;
}
.card__head{display:flex;align-items:center;gap:.8rem;}
.card__icon{
  width:40px;height:40px;
  max-width:40px;max-height:40px;   /* hard cap — never blows up, stale CSS or not */
  flex:none;
  object-fit:contain;
}
.card__title{font-size:clamp(1.35rem,1.1rem + .8vw,1.75rem);}
.card__body{margin:0;font-size:.95rem;color:var(--ink-muted);}

.card__list{display:flex;flex-direction:column;gap:.6rem;margin:.2rem 0 0;}
.card__list li{
  position:relative;
  padding-inline-start:1.4rem;
  font-size:.95rem;
  color:var(--ink);
}
.card__list li::before{
  content:"";
  position:absolute;inset-inline-start:0;top:.62em;
  width:7px;height:7px;border-radius:50%;
  background:var(--gold);
}

.card__note{
  margin:0;
  font-size:.87rem;
  color:var(--ink-muted);
  border-top:1px solid rgba(31,42,68,.12);
  padding-top:.9rem;
}
.card__note strong{color:var(--navy);font-weight:600;}

/* =========================================================
   PHILOSOPHY
   ========================================================= */

.philosophy__grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:center;
}

/* philosophy title writer strip — mobile only, see media query */
.philo-anim{display:none;}

.photo{margin:0;}
.photo__img{
  width:100%;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:var(--radius-lg);
  border:1.5px solid var(--navy);
  display:block;
}
.photo__placeholder{
  aspect-ratio:16/10;
  width:100%;
  border-radius:var(--radius-lg);
  background:
    repeating-linear-gradient(135deg, rgba(31,42,68,.05) 0 14px, transparent 14px 28px),
    var(--beige);
  border:1px dashed rgba(31,42,68,.28);
  display:grid;
  place-items:center;
}
.photo__placeholder span{
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-muted);
}

.philosophy__text p{color:var(--ink-muted);}
.philosophy__text .section__title{margin-bottom:1.25rem;}

.philosophy__points{
  display:flex;flex-direction:column;gap:.75rem;
  margin-top:1.5rem;border-top:1px solid rgba(31,42,68,.14);padding-top:1.5rem;
}
.philosophy__points li{font-size:.95rem;color:var(--ink-muted);}
.philosophy__points strong{color:var(--navy);font-weight:600;}

/* =========================================================
   PORTFOLIO
   ========================================================= */

.portfolio{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(1rem,2.4vw,1.75rem);
}

.work{
  background:var(--beige-light);
  border:1px solid rgba(31,42,68,.1);
  border-radius:var(--radius-lg);
  overflow:hidden;
  padding-bottom:1.5rem;
  transition:transform .22s ease, box-shadow .22s ease;
}
.work:hover{transform:translateY(-4px);box-shadow:0 22px 50px -34px rgba(27,35,56,.8);}

.work__thumb{
  aspect-ratio:4/3;
  background:
    repeating-linear-gradient(135deg, rgba(31,42,68,.05) 0 14px, transparent 14px 28px),
    var(--beige);
  display:grid;place-items:center;
  border-bottom:1px solid rgba(31,42,68,.1);
}
.work__thumb span{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted);
}

.work h3{font-size:1.25rem;margin:1.25rem 1.5rem .35rem;}
.work__meta{margin:0 1.5rem .7rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);}
.work p:last-child{margin:0 1.5rem;font-size:.93rem;color:var(--ink-muted);}

/* =========================================================
   CONTACT
   ========================================================= */

.contact__grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:start;
}
.contact__intro p{color:var(--ink-muted);}
.contact__intro .section__title{margin-bottom:1.25rem;}
.contact__direct a{
  color:var(--navy);font-weight:500;
  border-bottom:1px solid var(--gold);padding-bottom:2px;
}

.form{
  background:var(--navy);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3.2vw,2.4rem);
  display:flex;flex-direction:column;gap:1.05rem;
}
.field{display:flex;flex-direction:column;gap:.45rem;}
.field label{
  font-size:.82rem;letter-spacing:.06em;
  color:var(--beige);font-weight:500;
}
.field .opt{color:rgba(232,220,200,.55);font-weight:400;}

.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--sans);
  font-size:.95rem;
  color:var(--beige-light);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(232,220,200,.22);
  border-radius:12px;
  padding:.8rem .95rem;
  transition:border-color .18s ease, background-color .18s ease;
}
.field textarea{resize:vertical;min-height:120px;}
.field select option{color:var(--ink);background:var(--beige-light);}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--gold);
  background:rgba(255,255,255,.1);
}
.field input.is-invalid,
.field textarea.is-invalid{border-color:#E88A7D;}

.form .btn--primary{background:var(--gold);color:var(--navy);font-weight:600;}
.form .btn--primary:hover{background:var(--beige);}

.form__status{margin:0;font-size:.88rem;min-height:1.2em;color:var(--gold);}
.form__status.is-error{color:#F0A99D;}

/* =========================================================
   FOOTER
   ========================================================= */

.footer{
  background:var(--navy);
  color:var(--beige);
  margin-top:clamp(2rem,6vw,4rem);
}
.footer__inner{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(2rem,4vw,2.75rem) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  gap:1.25rem;flex-wrap:wrap;
}
.footer__copy{margin:0;font-size:.85rem;color:rgba(232,220,200,.6);}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:900px){
  .philosophy__grid,
  .contact__grid{grid-template-columns:1fr;}
  .philosophy__grid .photo{order:-1;}
}

@media (max-width:760px){
  .nav__toggle{display:flex;}

  .nav__menu{
    position:absolute;
    top:calc(100% + .6rem);
    left:0;right:0;
    background:var(--navy);
    border-radius:var(--radius);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:.5rem;
    box-shadow:0 20px 44px -26px rgba(27,35,56,.9);

    display:none;
  }
  .nav__menu.is-open{display:flex;}
  .nav__menu li{width:100%;}
  .nav__menu a{
    display:block;
    padding:.85rem 1rem;
    font-size:1rem;
    border-radius:12px;
  }

  .nav__cta--desktop-only{display:none;}

  .nav__menu-extra{
    display:block;
    margin-top:.4rem;
    padding-top:.6rem;
    border-top:1px solid rgba(232,220,200,.15);
  }

  .nav__menu-lang{
    display:block;
    margin-top:.6rem;
    padding-top:.6rem;
    border-top:1px solid rgba(232,220,200,.15);
  }
  .nav__lang-options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.6rem;
    padding:.4rem .25rem 0;
  }
  .nav__lang-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    padding:.7rem .5rem;
    border:1px solid rgba(232,220,200,.28);
    border-radius:999px;
    background:rgba(232,220,200,.08);
    color:var(--beige);
    font-family:var(--sans);
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
    transition:border-color .18s ease, background-color .18s ease, color .18s ease;
  }
  .nav__lang-btn:hover{border-color:var(--gold);}
  .nav__lang-btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);}
  .nav__lang-flag{width:18px;height:18px;object-fit:contain;flex:none;}

  .lang-switch{display:none;}

  .nav__right{gap:.9rem;}
  .nav__cta{font-size:.85rem;}
  .brand__logo{height:28px;}


  /* ---- services: horizontal peek carousel ---- */
  .services{padding-bottom:6.5rem;} /* room for the snackbar */

  .services__progress{
    display:block;
    height:4px;
    background:rgba(31,42,68,.12);
    border-radius:999px;
    overflow:hidden;
    margin-bottom:1.25rem;
  }
  .services__progress-fill{
    height:100%;
    width:0%;
    background:var(--gold);
    border-radius:999px;
  }

  .cards{
    display:flex;
    gap:1rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:0 calc(-1 * var(--gutter));
    /* side padding = (100vw - card width) / 2, so the active card sits
       centered while the next card's border peeks in from the edge */
    padding:0 9vw .5rem;
  }
  .cards::-webkit-scrollbar{display:none;}

  .cards .card{
    flex:0 0 82vw;
    scroll-snap-align:center;
  }

  @keyframes servicesNudge{
    0%,100%{transform:translateX(0);}
    35%{transform:translateX(-16px);}
    60%{transform:translateX(4px);}
    80%{transform:translateX(-6px);}
  }
  .cards.is-nudging{animation:servicesNudge .9s ease-in-out 1;}

  .services__snackbar{
    display:flex;
    align-items:center;
    gap:.6rem;
    position:fixed;
    left:50%;
    bottom:1.25rem;
    transform:translate(-50%, 16px);
    opacity:0;
    pointer-events:none;
    z-index:70;
    background:var(--navy);
    color:var(--beige);
    border:none;
    border-radius:999px;
    padding:.85rem 1.4rem;
    font-family:var(--sans);
    font-size:.9rem;
    font-weight:600;
    box-shadow:0 18px 40px -18px rgba(27,35,56,.85);
    transition:opacity .25s ease, transform .25s ease;
  }
  .services__snackbar.is-visible{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%, 0);
  }
  .services__snackbar-arrow{
    display:inline-block;
    color:var(--gold);
    transition:transform .18s ease;
  }
  .services__snackbar.is-last .services__snackbar-arrow{transform:rotate(180deg);}

  /* ---- philosophy: the "a" mark walks in and types the title ---- */
  .philo-anim{
    display:block;
    position:relative;
    height:44px;
    margin-bottom:1.1rem;
    overflow:hidden;
  }
  .philo-anim__text{
    position:absolute;
    left:44px;                     /* room for the mark to park at the start */
    top:50%;
    transform:translateY(-50%);
    font-size:.9rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--gold-deep);
    white-space:nowrap;
  }
  /* chars visible by default (no-JS fallback); hidden once JS arms the strip */
  .philo-anim.is-armed .philo-anim__text span{opacity:0;transition:opacity .15s ease;}
  .philo-anim.is-armed .philo-anim__text span.is-typed{opacity:1;}
  .philo-anim__icon{
    position:absolute;
    top:50%;
    left:0;
    margin-top:-15px;
    width:30px;height:30px;
    max-width:30px;max-height:30px;
    opacity:0;                     /* shown only while the animation runs */
    will-change:transform;
  }
  .philo-anim.is-armed .philo-anim__icon{opacity:1;}
  .philo-anim.is-done .philo-anim__icon{opacity:0;transition:opacity .4s ease .3s;}
  /* the animated strip replaces the static eyebrow on mobile */
  .philosophy .philosophy__text .eyebrow{display:none;}
}

@media (max-width:420px){
  .hero__actions .btn{width:100%;}
}

/* =========================================================
   PORTFOLIO — small thumbnails, infinite scroll, no blur
   ========================================================= */

.portfolio-showcase{
  position:relative;
  overflow:hidden;
  padding:60px 0;
  background:var(--navy);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  --marquee-shift: -1184px;
}

/* Edge fades */
.portfolio-fade{
  position:absolute;
  top:0;
  bottom:0;
  width:180px;
  z-index:3;
  pointer-events:none;
}
.portfolio-fade-left{
  left:0;
  background:linear-gradient(to right, var(--navy) 0%, transparent 100%);
}
.portfolio-fade-right{
  right:0;
  background:linear-gradient(to left, var(--navy) 0%, transparent 100%);
}

/* Rows */
.portfolio-row{
  width:100%;
  height:180px;
  overflow:hidden;
  position:relative;
}

.portfolio-track{
  display:flex;
  gap:16px;
  width:max-content;
}

.portfolio-row-top .portfolio-track{
  animation:portfolioScrollRight 40s linear infinite;
}
.portfolio-row-bottom .portfolio-track{
  animation:portfolioScrollLeft 40s linear infinite;
}

@keyframes portfolioScrollRight{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(var(--marquee-shift)); }
}
@keyframes portfolioScrollLeft{
  0%{ transform:translateX(var(--marquee-shift)); }
  100%{ transform:translateX(0); }
}

/* Individual images — small thumbnails */
.portfolio-img{
  width:280px;
  min-width:280px;
  max-width:280px;
  height:180px;
  min-height:180px;
  max-height:180px;
  object-fit:cover;
  -o-object-fit:cover;
  border-radius:12px;
  flex-shrink:0;
  display:block;
}

/* Centered floating button */
.portfolio-unlock-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:clamp(6px, 1.5vw, 10px);
  padding:clamp(10px, 2.5vw, 16px) clamp(16px, 5vw, 36px);
  border-radius:999px;
  background:var(--navy);
  border:1px solid rgba(232,220,200,0.25);
  color:var(--beige-light);
  font-family:var(--display);
  font-size:clamp(12px, 3vw, 15px);
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  letter-spacing:0.3px;
  max-width:calc(100vw - 2rem);
  box-shadow:0 12px 30px rgba(0,0,0,0.6);
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.portfolio-unlock-btn:hover{
  transform:translate(-50%, -50%) translateY(-3px);
  box-shadow:0 18px 40px rgba(0,0,0,0.8);
  border-color:var(--gold);
}

.portfolio-unlock-btn:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

.portfolio-unlock-btn .arrow{
  transition:transform 0.2s ease;
}
.portfolio-unlock-btn:hover .arrow{
  transform:translateX(4px);
}

/* Responsive */
@media (max-width:600px){
  .portfolio-img{
    width:200px;
    min-width:200px;
    max-width:200px;
    height:130px;
    min-height:130px;
    max-height:130px;
  }
  .portfolio-fade{ width:80px; }
  .portfolio-row{ height:130px; }
  .portfolio-showcase{ padding:40px 0; --marquee-shift: -864px; }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;}
  .btn:hover,.work:hover{transform:none;}
  .portfolio-track{animation:none!important;}
}

/* =========================================================
   LANGUAGE SWITCHER
   ========================================================= */

.lang-switch{position:relative;flex:none;}

.lang-switch__btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:rgba(232,220,200,.1);
  border:1px solid rgba(232,220,200,.28);
  color:var(--beige);
  font-size:.75rem;
  padding:.5rem .7rem;
  border-radius:999px;
  cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease;
}
.lang-switch__btn:hover{border-color:var(--gold);}
.lang-switch__btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}

.lang-switch__caret{
  line-height:1;
  transition:transform .18s ease;
}
.lang-switch__btn[aria-expanded="true"] .lang-switch__caret{transform:rotate(180deg);}

.lang-switch__menu{
  position:absolute;
  inset-inline-end:0;
  top:calc(100% + .5rem);
  min-width:9rem;
  background:var(--navy);
  border:1px solid rgba(232,220,200,.18);
  border-radius:14px;
  padding:.4rem;
  box-shadow:0 20px 44px -22px rgba(27,35,56,.9);
  display:none;
  flex-direction:column;
  gap:.15rem;
  z-index:80;
}
.lang-switch__menu.is-open{display:flex;}

.lang-switch__option{
  display:block;
  padding:.6rem .8rem;
  border-radius:10px;
  font-size:.92rem;
  color:var(--beige);
  text-align:start;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease;
}
.lang-switch__option:hover{background:rgba(232,220,200,.1);}
.lang-switch__option[aria-selected="true"]{color:var(--gold);font-weight:600;}

.lang-switch__current-flag{
  width:20px;height:14px;
  object-fit:cover;
  border-radius:3px;
  display:block;
}
.lang-switch__flag{
  width:18px;height:18px;
  object-fit:contain;
  vertical-align:middle;
  margin-inline-end:.4rem;
}

@media (max-width:760px){
  .lang-switch__btn{padding:.45rem .6rem;}
}