/* ==========================================================================
   Lekkify Limited design system
   Warm editorial: wine + cream + gold + flame, soft serif display,
   house-silhouette motif.
   ========================================================================== */

:root{
  /* surfaces */
  --cream:#FAF6E9;
  --cream-2:#F5EFDD;
  --sand:#EFE8D4;
  --sand-2:#E7DEC5;
  --white:#FFFDF7;

  /* brand */
  --wine:#600031;
  --wine-deep:#4A0026;
  --wine-soft:#7B1B4B;
  --flame:#FC3E1C;        /* display sizes and fills only */
  --flame-ink:#C42403;    /* flame at body size, AA on cream and sand */
  --flame-btn:#D32C0B;    /* flame behind white text, AA */
  --flame-surf:#E32E0C;   /* flame card surface: white body copy hits 4.5:1 */
  --flame-2:#FF6238;
  --gold:#FDC822;
  --gold-2:#F0A93C;

  /* ink */
  --ink:#4A0026;
  --body:#5C4552;
  --muted:#755F6C;
  --on-wine:#F3E4D9;
  --on-wine-dim:#C9A6B5;

  /* system */
  --line:#E3D9C2;
  --line-wine:rgba(253,200,34,.20);
  --r-sm:10px;
  --r:18px;
  --r-lg:26px;
  --shadow:0 18px 44px -24px rgba(74,0,38,.34);
  --shadow-lift:0 30px 70px -30px rgba(74,0,38,.46);
  --wrap:1860px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --font-display:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,'Times New Roman',serif;
  --font-ui:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--cream);
  color:var(--body);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;display:block}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-variation-settings:'SOFT' 40,'WONK' 0;
  color:var(--ink);
  font-weight:400;
  letter-spacing:-.015em;
  line-height:1.08;
  margin:0;
}

h1{font-size:clamp(2.6rem,5.9vw,6.4rem)}
h2{font-size:clamp(2.05rem,4.3vw,4.9rem)}
h3{font-size:clamp(1.3rem,2.1vw,1.6rem);line-height:1.18}
h4{font-size:1.02rem;line-height:1.3}

p{margin:0}
a{color:inherit;text-decoration:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4.1vw,84px)}

section{padding:clamp(48px,5.6vw,128px) 0}

/* accent word inside a display heading */
.accent{color:var(--flame)}
.accent-gold{color:var(--gold)}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-ui);font-size:.95rem;font-weight:500;
  padding:9px 22px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--ease),background-color .25s var(--ease),
             color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-flame{background:var(--flame-btn);color:#fff;box-shadow:0 12px 26px -14px rgba(252,62,28,.85)}
.btn-flame:hover{background:var(--flame-2);box-shadow:0 18px 34px -14px rgba(252,62,28,.9)}

.btn-wine{background:var(--wine);color:var(--cream)}
.btn-wine:hover{background:var(--wine-deep)}

.btn-outline{border-color:var(--wine);color:var(--wine)}
.btn-outline:hover{background:var(--wine);color:var(--cream)}

.btn-cream{background:var(--cream);color:var(--wine)}
.btn-cream:hover{background:#fff}

.btn-lg{padding:12px 30px;font-size:.95rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--flame-ink);font-weight:500;font-size:.95rem;
  border-bottom:1px solid rgba(196,36,3,.34);padding-bottom:2px;
  transition:gap .25s var(--ease),border-color .25s var(--ease);
}
.link-arrow:hover{gap:13px;border-color:var(--flame)}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:80;
  background:rgba(250,246,233,.86);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--line)}

.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}

.logo{
  display:inline-flex;align-items:baseline;gap:1px;
  font-family:var(--font-display);font-variation-settings:'SOFT' 40;
  font-size:1.42rem;font-weight:600;color:var(--wine);letter-spacing:-.02em;
  line-height:1;
}
.logo .l-mark{color:var(--flame)}
.logo small{
  display:block;font-family:var(--font-ui);font-size:.62rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:3px;
}
.logo-stack{display:inline-flex;flex-direction:column;line-height:1}

.nav-links{display:flex;align-items:center;gap:34px}
/* `:not(.btn)` keeps these plain-link rules from overriding button padding/colour */
.nav-links > a:not(.btn){
  font-size:.94rem;color:var(--wine);position:relative;padding:4px 0;
  transition:color .2s var(--ease);
}
.nav-links > a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;
  background:var(--flame);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-links > a:not(.btn):hover::after,
.nav-links > a:not(.btn).is-active::after{transform:scaleX(1)}
.nav-links > a:not(.btn):hover{color:var(--flame)}
.nav-links .btn{margin-left:6px}

.burger{
  display:none;background:none;border:1px solid var(--line);border-radius:10px;
  width:42px;height:42px;color:var(--wine);font-size:1.1rem;cursor:pointer;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{padding-top:clamp(56px,7vw,96px);padding-bottom:0;overflow:hidden}

.hero h1{text-align:center;max-width:13ch;line-height:.98;margin-inline:auto;text-wrap:balance}

.hero-sub{
  text-align:center;max-width:60ch;margin:26px auto 0;
  font-size:clamp(1rem,1.15vw,1.22rem);color:var(--body);
}

.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* --- horizontal rail of feature cards --- */
.rail-head{display:flex;justify-content:flex-end;gap:10px;margin:clamp(20px,2.2vw,34px) 0 14px}

.rail-btn{
  width:32px;height:32px;border-radius:50%;position:relative;
  border:1px solid var(--flame);background:transparent;color:var(--flame);
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background-color .25s var(--ease),color .25s var(--ease),opacity .25s var(--ease);
}
.rail-btn:hover{background:var(--flame);color:#fff}
.rail-btn[disabled]{opacity:.3;cursor:default}
.rail-btn[disabled]:hover{background:transparent;color:var(--flame)}

.rail{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:8px;scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}

.rail-card{
  flex:0 0 calc((100% - 14px)/2);scroll-snap-align:start;
  display:grid;grid-template-columns:.8fr 1fr;aspect-ratio:870/333;
  background:var(--sand);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);
}

.rail-visual{
  position:relative;min-height:0;overflow:hidden;
}
.shot.v-wine{background:linear-gradient(150deg,#75023E 0%,var(--wine) 55%,var(--wine-deep) 100%)}
.shot.v-flame{background:linear-gradient(150deg,#FF7A56 0%,var(--flame) 58%,#D22C0D 100%)}
.shot.v-gold{background:linear-gradient(150deg,#FFE07A 0%,var(--gold) 55%,#E09B15 100%)}

.rail-visual .glyph{
  font-family:var(--font-display);font-size:4.6rem;line-height:1;
  font-variation-settings:'SOFT' 40;
}
.v-wine .glyph{color:var(--gold)}
.v-flame .glyph{color:#FFE9DF}
.v-gold .glyph{color:var(--wine)}

.rail-flag{
  position:absolute;top:14px;left:14px;width:34px;height:34px;border-radius:50%;
  background:rgba(250,246,233,.92);display:grid;place-items:center;font-size:1rem;
}

.rail-body{padding:14px 20px 10px;min-width:0}
.rail-card dl{margin:0}
.rail-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.rail-top h3{font-size:1.24rem;color:var(--wine)}

.pill{
  font-family:var(--font-ui);font-size:.74rem;font-weight:500;
  padding:6px 13px;border-radius:999px;white-space:nowrap;
}
.pill-flame{background:var(--flame-btn);color:#fff}
.pill-outline{border:1px solid var(--flame-ink);color:var(--flame-ink)}

.rail-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:7px 0;border-top:1px solid rgba(96,0,49,.10);font-size:.84rem;
}
.rail-row:first-of-type{border-top:0}
.rail-row dt{display:flex;align-items:center;gap:8px;color:var(--body)}
.rail-row dt i{font-style:normal;color:var(--flame);font-size:.9rem}
.rail-row dd{margin:0;color:var(--wine);font-weight:500;text-align:right}

/* --------------------------------------------------------------------------
   Wine band + accordion
   -------------------------------------------------------------------------- */
.band-wine{background:var(--wine);color:var(--on-wine)}
.band-wine h2,.band-wine h3,.band-wine h4{color:var(--cream)}

.wine-split{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5vw,72px);align-items:start}

.wine-lead{
  font-family:var(--font-display);font-variation-settings:'SOFT' 40;
  font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.32;color:var(--gold);
  margin-bottom:38px;
}

.acc-item{border-top:1px solid var(--line-wine)}
.acc-item:last-child{border-bottom:1px solid var(--line-wine)}

.acc-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:none;border:0;padding:18px 0;cursor:pointer;text-align:left;
  font-family:var(--font-ui);color:var(--cream);font-size:1.02rem;font-weight:500;
}
.acc-btn .acc-ico{
  flex:0 0 auto;width:19px;height:19px;border-radius:50%;
  border:1px solid rgba(253,200,34,.55);color:var(--gold);
  display:grid;place-items:center;font-size:.9rem;line-height:1;
  transition:transform .35s var(--ease),background-color .25s var(--ease),color .25s var(--ease);
}
.acc-item.open .acc-ico{background:var(--gold);color:var(--wine);transform:rotate(45deg)}

.acc-panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s var(--ease);
}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-panel > div{overflow:hidden}
.acc-panel p{
  color:var(--on-wine-dim);font-size:.95rem;max-width:62ch;
  padding-bottom:24px;
}

/* --------------------------------------------------------------------------
   House silhouette
   -------------------------------------------------------------------------- */
.house{position:relative;isolation:isolate}
.house-svg{
  position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  display:block;
}
.house-svg path{fill:currentColor;stroke:currentColor;stroke-width:24;stroke-linejoin:round}

/* --------------------------------------------------------------------------
   Tilted card rail  (Plan / Build / Ship / Run)
   -------------------------------------------------------------------------- */
.tilt-section{overflow:hidden}
.tilt-section h2{text-align:center;max-width:18ch;margin:0 auto clamp(34px,4vw,62px);text-wrap:balance}

/* one row that centres when it fits and scrolls when it does not */
.tilt-rail{
  display:flex;gap:clamp(22px,2.4vw,46px);flex-wrap:nowrap;
  width:fit-content;max-width:100%;margin-inline:auto;
  overflow-x:auto;padding:20px 6px 30px;
  scroll-snap-type:x mandatory;scrollbar-width:none;
}
.tilt-rail::-webkit-scrollbar{display:none}

/* `rotate` is an independent transform property, so the reveal animation
   (which drives `translate`) can compose with it instead of clobbering it. */
.tilt-card{
  flex:0 0 clamp(262px,17vw,336px);scroll-snap-align:center;
  border-radius:clamp(16px,1.4vw,22px);padding:22px 22px 24px;
  min-height:clamp(274px,20vw,392px);display:flex;flex-direction:column;
  box-shadow:var(--shadow);
  transition:translate .5s var(--ease),box-shadow .5s var(--ease),rotate .5s var(--ease);
}
.tilt-rail .tilt-card:hover{box-shadow:var(--shadow-lift);translate:0 -10px}

.tilt-card:nth-child(1){rotate:-4.5deg}
.tilt-card:nth-child(2){rotate:2.5deg}
.tilt-card:nth-child(3){rotate:-2deg}
.tilt-card:nth-child(4){rotate:4deg}

.tilt-card .t-ico{font-size:1.7rem;line-height:1;margin-bottom:auto}
.tilt-card h3{margin:26px 0 10px;font-size:1.45rem}
.tilt-card p{font-size:.88rem;line-height:1.56}

.c-gold{background:var(--gold)}
.c-gold h3{color:var(--wine)}
.c-gold p{color:#7A4A08}

.c-sand{background:var(--sand)}
.c-sand h3{color:var(--wine)}
.c-sand p{color:var(--body)}

.c-wine{background:var(--wine)}
.c-wine h3{color:var(--cream)}
.c-wine p{color:var(--on-wine-dim)}

.c-flame{background:var(--flame-surf)}
.c-flame h3{color:#fff}
.c-flame p{color:#fff}
.c-flame .btn{margin-top:18px;align-self:flex-start}

/* --------------------------------------------------------------------------
   Split feature section (mockup + list)
   -------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:center}
.split-narrow{grid-template-columns:1fr 1fr;align-items:start}

.eyebrow{
  display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--flame-ink);margin-bottom:18px;
}

.lede{color:var(--body);margin-top:20px;max-width:56ch}

.feats{margin-top:34px}
.feat{padding:20px 0;border-top:1px solid var(--line)}
.feat:first-of-type{border-top:0;padding-top:0}
.feat h4{
  display:flex;align-items:center;gap:10px;color:var(--flame-ink);
  font-family:var(--font-ui);font-weight:600;font-size:.98rem;margin-bottom:10px;
}
.feat p{font-size:.93rem;color:var(--body);max-width:52ch}

/* --- product UI mockup --- */
.mock{
  background:var(--sand);border-radius:var(--r);padding:16px;
  box-shadow:var(--shadow);
}
.mock-app{
  background:var(--white);border-radius:var(--r-sm);overflow:hidden;
  border:1px solid rgba(96,0,49,.08);
}
.mock-bar{
  display:flex;align-items:center;gap:8px;padding:11px 14px;
  background:var(--wine);
}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:rgba(243,228,217,.32);display:block}
.mock-bar span{
  margin-left:auto;font-size:.72rem;color:var(--on-wine-dim);letter-spacing:.04em;
}
.mock-body{padding:18px 16px;display:grid;gap:12px}

.chat-row{display:flex;gap:9px;align-items:flex-end}
.chat-row.out{justify-content:flex-end}
.chat-av{
  width:28px;height:28px;border-radius:50%;flex:0 0 auto;
  background:var(--sand-2);display:grid;place-items:center;font-size:.7rem;color:var(--wine);
}
.bubble{
  max-width:78%;padding:11px 14px;border-radius:16px;
  font-size:.85rem;line-height:1.45;background:var(--sand);color:var(--ink);
  border-bottom-left-radius:5px;
}
.bubble.out{
  background:var(--wine);color:var(--on-wine);
  border-bottom-left-radius:16px;border-bottom-right-radius:5px;
}
.bubble small{display:block;margin-top:6px;font-size:.68rem;opacity:.62}

.mock-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;
}
.mock-stat{
  background:var(--white);border-radius:var(--r-sm);padding:12px 13px;
  border:1px solid rgba(96,0,49,.08);
}
.mock-stat b{
  display:block;font-family:var(--font-display);font-variation-settings:'SOFT' 40;
  font-size:1.4rem;color:var(--flame);line-height:1;
}
.mock-stat span{font-size:.7rem;color:var(--muted);letter-spacing:.03em}

/* --------------------------------------------------------------------------
   Advantages: house cards + stats
   -------------------------------------------------------------------------- */
.adv-head{max-width:16ch;margin-bottom:clamp(32px,3.4vw,58px)}

.adv-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.15vw,22px);align-items:stretch;
}
.adv-card{
  min-height:0;aspect-ratio:425/419;display:flex;flex-direction:column;justify-content:flex-end;
  padding:38% 9% 7%;background:currentColor;clip-path:url(#houseCard);
}
.adv-card .a-ico{font-size:1.5rem;line-height:1;margin-bottom:auto}
.adv-card h4{font-family:var(--font-ui);font-weight:600;font-size:1.06rem;margin-bottom:10px}
.adv-card p{font-size:.86rem;line-height:1.55}

.adv-card.c-gold{color:var(--gold)}
.adv-card.c-gold h4{color:var(--wine)}
.adv-card.c-gold p{color:#7A4A08}
.adv-card.c-wine{color:var(--wine)}
.adv-card.c-wine h4{color:var(--cream)}
.adv-card.c-wine p{color:var(--on-wine-dim)}
.adv-card.c-flame{color:var(--flame-surf)}
.adv-card.c-flame h4{color:#fff}
.adv-card.c-flame p{color:#fff}
.adv-card.c-sand{color:var(--sand)}
.adv-card.c-sand h4{color:var(--wine)}
.adv-card.c-sand p{color:var(--body)}

.adv-card{position:relative}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,54px);
  margin-top:clamp(40px,4.4vw,74px);
}
.stat b{
  display:block;font-family:var(--font-display);font-variation-settings:'SOFT' 40;
  font-size:clamp(2.6rem,5vw,5.2rem);color:var(--flame);line-height:1;font-weight:400;
}
.stat hr{border:0;border-top:1px solid var(--line);margin:20px 0 16px}
.stat h4{font-family:var(--font-ui);font-weight:600;font-size:.95rem;margin-bottom:8px}
.stat p{font-size:.86rem;color:var(--muted);max-width:34ch}

/* --------------------------------------------------------------------------
   Products
   -------------------------------------------------------------------------- */
.product{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,3.4vw,56px);
  background:var(--sand);border-radius:var(--r-lg);
  padding:clamp(26px,2.9vw,42px);align-items:center;
}
.product + .product{margin-top:22px}
.product h3{font-size:clamp(1.7rem,2.8vw,2.2rem);margin:14px 0 14px;color:var(--wine)}
.product p{color:var(--body);font-size:.97rem;max-width:52ch}
.product .link-arrow{margin-top:22px}

.check-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.check-list li{
  display:flex;gap:11px;align-items:flex-start;font-size:.92rem;color:var(--wine);
}
.check-list li::before{
  content:"";flex:0 0 auto;width:18px;height:18px;border-radius:50%;margin-top:3px;
  background:var(--flame);
  -webkit-mask:no-repeat center/10px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1 6.2 4.4 9.6 11 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  mask:no-repeat center/10px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M1 6.2 4.4 9.6 11 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* --------------------------------------------------------------------------
   Definition lists (company / contact)
   -------------------------------------------------------------------------- */
.detail-list{margin:0;padding:0}
.detail-row{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:20px;
  padding:16px 0;border-top:1px solid var(--line);
}
.detail-row:first-child{border-top:0;padding-top:0}
.detail-row dt{color:var(--muted);font-size:.88rem}
.detail-row dd{margin:0;color:var(--wine);font-size:.94rem;font-weight:500}
.detail-row dd a{color:var(--flame-ink);border-bottom:1px solid rgba(196,36,3,.32)}
.detail-row dd a:hover{border-color:var(--flame)}

/* --------------------------------------------------------------------------
   CTA house
   -------------------------------------------------------------------------- */
.cta-section{background:var(--wine);padding-top:0;padding-bottom:0}
.cta-house{
  position:relative;color:var(--gold);background:currentColor;
  clip-path:url(#houseWide);aspect-ratio:1200/520;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(76px,8.4vw,168px) 24px clamp(40px,4.6vw,88px);
  text-align:center;
}
.cta-house .btn{
  padding:clamp(12px,1.05vw,20px) clamp(30px,3.2vw,58px);
  font-size:clamp(.95rem,1.15vw,1.2rem);
}
.cta-house h2{color:var(--wine);max-width:19ch;margin-inline:auto;text-wrap:balance}
.cta-house .btn{margin-top:34px}

.cta-proof{
  display:flex;align-items:center;gap:12px;justify-content:center;
  margin-top:40px;
}
.cta-proof div{text-align:center;color:var(--wine)}
.cta-proof b{display:block;font-size:.95rem;font-weight:600;line-height:1.2}
.cta-proof small{font-size:.78rem;opacity:.72}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer{background:var(--wine);color:var(--on-wine-dim);padding:clamp(56px,7vw,92px) 0 34px}
footer .logo{color:var(--cream)}
footer .logo small{color:var(--on-wine-dim)}

.foot-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px);
}
.foot-lead{
  font-family:var(--font-display);font-variation-settings:'SOFT' 40;
  color:var(--gold);font-size:1.14rem;line-height:1.4;margin:20px 0 28px;max-width:34ch;
}
.foot-col h4{
  font-family:var(--font-ui);font-size:.95rem;font-weight:600;color:var(--cream);
  margin-bottom:18px;
}
.foot-col a{
  display:block;font-size:.9rem;color:var(--on-wine-dim);padding:6px 0;
  transition:color .2s var(--ease);
}
.foot-col a:hover{color:var(--gold)}

.socials{display:flex;gap:10px;margin-top:6px}
.socials a{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line-wine);
  display:grid;place-items:center;color:var(--on-wine-dim);font-size:.85rem;
  transition:border-color .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease);
}
.socials a:hover{border-color:var(--gold);color:var(--wine);background:var(--gold)}

.foot-bottom{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(40px,5vw,64px);padding-top:26px;
  border-top:1px solid var(--line-wine);font-size:.82rem;
}
.foot-bottom a:hover{color:var(--gold)}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */
.legal{padding:clamp(56px,7vw,96px) 24px clamp(72px,9vw,120px);max-width:820px}
.legal h1{font-size:clamp(2.3rem,5vw,3.4rem);margin-bottom:12px}
.legal .updated{color:var(--muted);font-size:.88rem;margin-bottom:40px}
.legal h2{
  font-size:clamp(1.3rem,2.4vw,1.65rem);margin:48px 0 14px;
  padding-top:26px;border-top:1px solid var(--line);
}
.legal h3{font-size:1.1rem;margin:28px 0 10px;color:var(--wine)}
.legal p{margin:0 0 16px;color:var(--body)}
.legal ul,.legal ol{margin:0 0 18px;padding-left:22px;color:var(--body)}
.legal li{margin-bottom:9px}
.legal a{color:var(--flame-ink);border-bottom:1px solid rgba(196,36,3,.32)}
.legal a:hover{border-color:var(--flame)}
.legal strong{color:var(--wine);font-weight:600}
.legal table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.9rem}
.legal th,.legal td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.legal th{color:var(--wine);font-weight:600;background:var(--sand)}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.reveal{opacity:0;translate:0 26px;transition:opacity .8s var(--ease),translate .8s var(--ease)}
.reveal.in{opacity:1;translate:none}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
  .adv-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > div:first-child{grid-column:1/-1}
}

@media (max-width:860px){
  .nav-links{
    position:fixed;inset:74px 0 auto;flex-direction:column;align-items:stretch;
    gap:0;background:var(--cream);border-bottom:1px solid var(--line);
    padding:12px 24px 22px;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .25s var(--ease),transform .25s var(--ease);
  }
  .nav-links.open{opacity:1;transform:none;pointer-events:auto}
  .nav-links > a{padding:14px 0;border-bottom:1px solid var(--line)}
  .nav-links > a::after{display:none}
  .nav-links .btn{margin:16px 0 0;width:100%}
  .burger{display:block}

  .wine-split,.split,.split-narrow,.product{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:32px}
  .stat hr{margin:14px 0 12px}
  .rail-card{grid-template-columns:1fr}
  .rail-visual{min-height:150px}
}

@media (max-width:620px){
  .adv-grid{grid-template-columns:1fr;gap:18px}
  .adv-card{min-height:0}
  .tilt-card{flex:0 0 min(300px,88vw)}
  .tilt-card,.tilt-rail .tilt-card:hover{rotate:none;translate:none}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;gap:8px}
  .detail-row{grid-template-columns:1fr;gap:4px}
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */
:focus-visible{
  outline:2px solid var(--wine);outline-offset:2px;border-radius:4px;
  box-shadow:0 0 0 5px var(--cream);
}
.band-wine :focus-visible,footer :focus-visible,.c-wine :focus-visible{
  outline-color:var(--gold);box-shadow:0 0 0 5px var(--wine-deep);
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--wine);color:var(--cream);padding:12px 20px;border-radius:0 0 12px 0;
}
.skip:focus{left:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;translate:none}
}

/* ==========================================================================
   Icons  (replaces the emoji set)
   ========================================================================== */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

.ico{width:18px;height:18px;flex:0 0 auto;display:block;overflow:visible}
.ico-inline{width:15px;height:15px;display:inline-block;vertical-align:-2px}
.ico-bullet{width:11px;height:11px}

.rail-btn .ico{width:14px;height:14px}
/* the ring stays small like the reference; the hit area does not */
.rail-btn::before{content:"";position:absolute;inset:-8px;border-radius:50%}

.burger .ico{width:20px;height:20px;margin-inline:auto}
.socials a .ico{width:17px;height:17px}
.chat-av .ico{width:15px;height:15px;stroke-width:1.8}
.acc-ico .ico{width:11px;height:11px;stroke-width:2}
.rail-flag .ico{width:17px;height:17px}
.rail-row dt .ico{color:var(--flame-ink)}
.feat h4 .ico{width:13px;height:13px}

/* card marks: a touch heavier so they hold their own against the reference's
   solid glyphs, and sized from the card rather than from the root font */
.tilt-card .t-ico .ico,
.adv-card .a-ico .ico{width:clamp(26px,2.1vw,34px);height:clamp(26px,2.1vw,34px);stroke-width:1.5}
.tilt-card .t-ico,.adv-card .a-ico{margin-bottom:auto;line-height:0}

/* `color` on these cards drives the house silhouette, so an inherited
   currentColor icon would be invisible. Set each pairing explicitly. */
.tilt-card.c-gold  .t-ico,.adv-card.c-gold  .a-ico{color:var(--wine)}
.tilt-card.c-sand  .t-ico,.adv-card.c-sand  .a-ico{color:var(--flame)}
.tilt-card.c-wine  .t-ico,.adv-card.c-wine  .a-ico{color:var(--gold)}
.tilt-card.c-flame .t-ico,.adv-card.c-flame .a-ico{color:#FFF3EC}
.rail-flag{color:var(--wine)}

/* ==========================================================================
   Image slots
   A slot always paints a brand-coloured ground, so a photograph that has not
   been supplied yet reads as a deliberate panel rather than a broken image.
   ========================================================================== */
.shot{
  position:relative;overflow:hidden;width:100%;height:100%;
  background:linear-gradient(145deg,var(--sand-2) 0%,var(--sand) 60%,var(--sand-2) 100%);
}
.shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .35s var(--ease);
}
/* the image only paints once it has actually decoded, so a slot with no file
   yet shows its label rather than a broken-image glyph or stray alt text */
.shot.is-loaded img{opacity:1}
.shot:not(.is-loaded)::after{
  content:attr(data-label);
  position:absolute;inset:0;display:grid;place-items:center;padding:14px;
  font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;color:rgba(74,0,38,.62);pointer-events:none;
}
.shot.v-wine:not(.is-loaded)::after,
.band-photo .shot:not(.is-loaded)::after,
.shot-house:not(.is-loaded)::after,
.band-wine .shot-wide:not(.is-loaded)::after{color:rgba(250,246,233,.72)}

.band-photo .shot,.shot-house,.band-wine .shot-wide{
  background:linear-gradient(145deg,var(--wine-soft) 0%,var(--wine) 55%,var(--wine-deep) 100%);
}

/* full-bleed photographic band, the reference's structural breather */
.band-photo{padding:0;width:100%}
.band-photo .shot{aspect-ratio:16/5;max-height:58vh}

/* contained landscape image (the Lagos bridge) */
.shot-wide{
  aspect-ratio:16/6;border-radius:var(--r-lg);
  margin-top:clamp(30px,3.4vw,54px);
}

/* ==========================================================================
   Services figure: a photograph clipped to the house silhouette, swapped
   by the accordion beside it
   ========================================================================== */
.wine-figure{
  position:relative;color:var(--sand);
  min-height:0;display:block;
  width:min(21.5vw,380px);justify-self:start;align-self:start;
  margin:0;
}
.shot-house{
  aspect-ratio:4/5;
  clip-path:url(#houseTall);
  transition:opacity .22s var(--ease);
}
.shot-house.is-swapping{opacity:0}

.fig-cap{
  margin-top:16px;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);text-align:center;line-height:1.4;
}

@media (max-width:860px){
  .rail-card{aspect-ratio:auto;flex:0 0 min(520px,86vw);grid-template-columns:1fr}
  .rail-visual{aspect-ratio:16/9}
  .band-photo .shot{aspect-ratio:16/8}
  .shot-wide{aspect-ratio:16/9}
  .adv-card{aspect-ratio:auto;min-height:250px;padding:34% 8% 8%}
}

/* ==========================================================================
   Resilience and mobile behaviour
   ========================================================================== */

/* Without JavaScript nothing would ever add .in or .is-loaded, so the page
   would render as empty colour bands. Both fallbacks below make the CSS
   self-sufficient; the script only enhances. */
@media (scripting: none){
  .reveal{opacity:1;translate:none}
  .shot img{opacity:1}
}
html:not(.js) .reveal{opacity:1;translate:none}

/* The services figure must stay on screen while the rows below it are tapped,
   otherwise the image swap has no visible effect on a phone. */
@media (max-width:860px){
  /* Taking the split out of grid gives the sticky figure the whole section as
     its containing block, so it stays in view while the rows below are tapped.
     As a grid item it could only ever move within its own row, which is what
     made it clip under the header and collide with the lead paragraph. */
  .wine-split{display:block}

  /* On a phone the figure becomes a compact bar pinned under the header: a
     small house thumbnail beside the service name. It keeps an opaque wine
     ground so the accordion scrolls cleanly behind it, and it stays on screen
     while the rows below are tapped, which is the whole point of the swap. */
  .wine-figure{
    position:sticky;top:73px;z-index:3;
    width:auto;display:flex;align-items:center;gap:16px;
    background:var(--wine);
    margin:0 calc(-1 * clamp(20px,4.1vw,84px)) 26px;
    padding:12px clamp(20px,4.1vw,84px) 16px;
    border-bottom:1px solid var(--line-wine);
  }
  .wine-figure .shot-house{flex:0 0 auto;width:88px}
  .wine-figure .fig-cap{
    margin:0;text-align:left;font-size:.8rem;letter-spacing:.1em;line-height:1.35;
  }
  .wine-lead{margin-bottom:26px}
  .cta-house{aspect-ratio:auto;padding:clamp(70px,20vw,110px) 20px clamp(34px,7vw,52px)}
  .tilt-card{min-height:274px}
}

/* The "what sets us apart" beat sits on wine like the reference, so the
   feature list has to invert with it. */
.band-wine .eyebrow{color:var(--gold)}
.band-wine .lede{color:var(--on-wine-dim)}
.band-wine .feat{border-top-color:var(--line-wine)}
.band-wine .feat h4{color:var(--gold)}
.band-wine .feat p{color:var(--on-wine-dim)}
.band-wine .feat h4 .ico{color:var(--gold)}

/* ==========================================================================
   Photo treatment
   The supplied photography is black and white, which reads cold beside the
   wine and gold. A duotone pass carries the palette into the image while
   keeping its original tonal range. To switch it off site-wide, add the class
   "no-photo-tint" to the <html> element; nothing else depends on it.
   ========================================================================== */
.shot img{filter:grayscale(1) sepia(.42) saturate(1.5) hue-rotate(-14deg) contrast(1.06)}

html.no-photo-tint .shot img{filter:none}

/* ==========================================================================
   Project grid  (the work beyond the flagship product)
   ========================================================================== */
.proj-head{
  font-size:clamp(1.15rem,1.5vw,1.5rem);color:var(--wine);
  margin:clamp(44px,4.4vw,76px) 0 clamp(20px,2vw,30px);
}

.proj-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.15vw,22px);
}

.proj{
  background:var(--sand);border-radius:var(--r);
  padding:clamp(20px,1.7vw,30px);
  display:flex;flex-direction:column;gap:10px;
}
.proj-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.proj h4{
  font-family:var(--font-display);font-variation-settings:'SOFT' 40;
  font-size:clamp(1.15rem,1.4vw,1.42rem);font-weight:500;color:var(--wine);
}
.proj p{font-size:.92rem;line-height:1.5;color:var(--body)}
.proj-meta{
  margin-top:auto;padding-top:12px;font-size:.76rem;letter-spacing:.06em;
  color:var(--muted);border-top:1px solid rgba(96,0,49,.10);
}
.proj-quiet{background:transparent;border:1px dashed var(--line)}

@media (max-width:960px){ .proj-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .proj-grid{grid-template-columns:1fr} }

/* ==========================================================================
   Marks that stand in for photography
   The hero cards and the services figure both carry a single centred mark on
   a flat brand ground. On the services figure the mark changes with the open
   accordion row, so the swap reads even before any photograph is supplied,
   and it fades out once a real image loads.
   ========================================================================== */
.rail-visual{display:grid;place-items:center;padding:16px}
.rail-visual.v-wine{background:linear-gradient(150deg,#75023E 0%,var(--wine) 55%,var(--wine-deep) 100%)}
.rail-visual.v-flame{background:linear-gradient(150deg,#FF7A56 0%,var(--flame-surf) 58%,#B32409 100%)}
.rail-visual.v-gold{background:linear-gradient(150deg,#FFE07A 0%,var(--gold) 55%,#E09B15 100%)}

.rail-mark,.fig-mark{
  display:grid;place-items:center;border-radius:50%;
  width:clamp(64px,5.2vw,96px);aspect-ratio:1;
  background:rgba(250,246,233,.14);
  border:1px solid rgba(250,246,233,.30);
}
.rail-mark svg,.fig-mark svg{
  width:46%;height:46%;fill:none;stroke:var(--cream);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.v-gold .rail-mark{background:rgba(74,0,38,.10);border-color:rgba(74,0,38,.28)}
.v-gold .rail-mark svg{stroke:var(--wine)}

/* the services figure: mark centred in the house, hidden once a photo lands */
.fig-mark{
  position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);z-index:2;
  width:clamp(72px,6vw,108px);
  transition:opacity .22s var(--ease);
}
.shot-house.is-loaded .fig-mark{opacity:0}
.shot-house:not(.is-loaded)::after{content:none}