@font-face{font-family:'DM Sans';font-style:italic;font-weight:700 800;font-display:swap;src:url(/assets/fonts/dm-sans-italic-700-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:700 800;font-display:swap;src:url(/assets/fonts/dm-sans-italic-700-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-sans-regular-400-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/dm-sans-regular-400-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600 900;font-display:swap;src:url(/assets/fonts/dm-sans-regular-400-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-sans-regular-400-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/dm-sans-regular-400-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600 900;font-display:swap;src:url(/assets/fonts/dm-sans-regular-400-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-italic-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-italic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-regular-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-regular-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-regular-400-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/jetbrains-mono-regular-400-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrains-mono-regular-400-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/jetbrains-mono-regular-400-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--i-cknit:url(/assets/v3/cknit.webp);--i-cshoes:url(/assets/v3/cshoes.webp);--i-cski:url(/assets/v3/cski.webp);--i-cskin:url(/assets/v3/cskin.webp);--i-hbox:url(/assets/v3/hbox.webp);}
/* Layout: SumUp grammar (flat surfaces, 12px buttons, 32px panels, crushed serif display, product shown as 3D
   objects that move as you scroll) in Morse Autumn: 70% linen/paper/oat, 20% wood, 10% wine/yolk/cornflower.
   Single light look by design; every colour is set explicitly. */
:root{
  color-scheme: light;
  --linen:#F2ECE0; --paper:#FAF6EE; --oat:#DCCBAE; --divider:#E6DCCB;
  --wine:#6B2333; --wine-dk:#561B29; --yolk:#E2A62C; --cornflower:#3E77C0; --powder:#AFC7DC;
  --oak:#C48D4F; --teak:#8E4B2C; --cocoa:#4B2F24; --sage:#8B9572; --plaster:#77736E;
  --ink:#2E231E; --night:#1E1714;
  --display:"Instrument Serif", Georgia, "Times New Roman", serif;
  --body:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --r-btn:12px; --r-media:16px; --r-card:24px; --r-panel:32px;
  --shadow:0 1px 2px rgba(46,35,30,.06),0 24px 60px rgba(46,35,30,.16);
  --container:1200px; --ease:.12s ease-in-out; --navh:68px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--linen);color:var(--ink);font:400 1.0625rem/1.45 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font-family:inherit}
img{display:block;max-width:100%}
.wrap{max-width:var(--container);margin:0 auto;padding-right:max(16px,env(safe-area-inset-left,0px));padding-left:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(3rem,7vw,5.4rem);line-height:.9}
h2{font-size:clamp(2.4rem,5.4vw,4rem);line-height:.93}
h3{font-size:clamp(1.8rem,3.2vw,2.5rem);line-height:.98}
h1 em,h2 em,h3 em{color:var(--wine)}
p{margin:0}
.eyebrow{font:500 .72rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--plaster)}
.eyebrow.dash::before{content:"";display:inline-block;width:22px;height:6px;border-radius:99px;background:var(--cornflower);margin-left:10px;vertical-align:middle}
.lede{font-size:1.2rem;line-height:1.5;max-width:40ch}
.muted{color:var(--plaster)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
section{padding-block:104px}
.head{display:grid;gap:18px;margin-bottom:52px;max-width:800px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.todo{font:500 .7em var(--mono);background:#F6E6C3;color:#7A5410;border-radius:4px;padding:1px 6px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--r-btn);border:1px solid transparent;font:500 1rem/1 var(--body);text-decoration:none;cursor:pointer;transition:background-color var(--ease),border-color var(--ease),transform var(--ease);white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-wine{background:var(--wine);color:var(--paper)} .btn-wine:hover:not(:disabled){background:var(--wine-dk)}
.btn-ink{background:var(--ink);color:var(--paper)} .btn-ink:hover:not(:disabled){background:var(--cocoa)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)} .btn-line:hover:not(:disabled){background:var(--paper)}
.btn-sm{height:38px;padding:0 14px;border-radius:10px;font-size:.9rem}
.textlink{font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.textlink:hover{color:var(--wine)}
:focus-visible{outline:2px solid var(--wine);outline-offset:2px}

/* Logo */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo svg{width:30px;height:30px;flex:none}
.logo span{font:600 1.45rem/1 var(--body);letter-spacing:-.02em}

/* Promo + nav */
.promo{background:var(--wine);color:var(--paper);font-size:.92rem;text-align:center}
.promo .wrap{padding-block:9px}
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--linen) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--divider)}
.nav .wrap{display:flex;align-items:center;gap:22px;height:var(--navh)}
.menu-btn{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 10px 0 14px;border-radius:999px;border:1px solid var(--oat);background:var(--paper);cursor:pointer;font:500 .9rem var(--body);color:var(--ink)}
.menu-btn i{display:grid;gap:4px;width:16px} .menu-btn i b{display:block;height:2px;background:var(--ink);border-radius:2px}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 12px 0 0;padding:0;font-size:.95rem}
.nav ul a{text-decoration:none} .nav ul a:hover{color:var(--wine)}
.nav .right{margin-right:auto;display:flex;align-items:center;gap:12px}
.lang{display:flex;border:1px solid var(--oat);border-radius:999px;padding:3px;font:500 .7rem var(--mono)}
.lang span{padding:5px 8px;border-radius:999px} .lang span:first-child{background:var(--ink);color:var(--paper)}
@media (max-width:1100px){.nav ul,.lang{display:none}}
@media (max-width:520px){.menu-btn span{display:none}.nav .right .btn{padding:0 12px}}

/* Drawer */
.scrim{position:fixed;inset:0;background:rgba(30,23,20,.4);z-index:40;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--paper);z-index:41;transform:translateX(102%);transition:transform .35s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding:calc(20px + env(safe-area-inset-top,0px)) max(28px,env(safe-area-inset-left,0px)) calc(28px + env(safe-area-inset-bottom,0px)) 28px;overflow:auto}
.drawer.open{transform:none}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.x{width:40px;height:40px;border-radius:50%;border:1px solid var(--oat);background:var(--linen);cursor:pointer;font-size:1.1rem;color:var(--ink)}
.drawer nav{display:grid}
.drawer nav a{display:flex;justify-content:space-between;align-items:baseline;padding:13px 4px;border-bottom:1px solid var(--divider);text-decoration:none;font:400 2rem/1 var(--display)}
.drawer nav a small{font:500 .68rem var(--mono);letter-spacing:.1em;color:var(--plaster)}
.drawer nav a:hover{color:var(--wine)}
.drawer .ticks{margin-top:auto;height:80px;border-radius:18px;background:repeating-linear-gradient(90deg,transparent 0 18px,var(--wine) 18px 20px,transparent 20px 24px,var(--wine) 24px 26px,transparent 26px 44px),var(--linen)}
.drawer .wa{margin:22px 0 18px;font-size:.95rem}

.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(30,23,20,.45)}
.modal form{width:min(420px,100%);background:var(--paper);border-radius:var(--r-panel);padding:30px;display:grid;gap:14px;box-shadow:var(--shadow)}

/* ===== HERO ===== */
.hero{position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:end;padding-block:52px 0}
.hero-copy{display:grid;gap:24px;min-width:0;padding-bottom:80px;align-self:center}
.hero .ticks{position:absolute;left:0;top:0;bottom:0;width:120px;background:repeating-linear-gradient(90deg,transparent 0 16px,var(--wine) 16px 18px,transparent 18px 23px,var(--wine) 23px 25px,transparent 25px 40px)}
.trust-row{display:flex;flex-wrap:wrap;gap:22px;font-size:.88rem}
.trust-row div{display:flex;gap:8px;align-items:center}
.trust-row svg{width:20px;height:20px;color:var(--wine)}
.doors-wrap{position:relative;perspective:1400px;z-index:1}
.doors{position:relative;display:grid;grid-template-columns:1fr 1fr;border-radius:260px 260px 0 0;overflow:hidden;min-height:640px;box-shadow:0 30px 60px rgba(46,35,30,.12)}
.door{position:relative;padding:clamp(110px,13vw,140px) clamp(30px,5vw,54px) 0 22px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--ink);overflow:hidden;perspective:900px}
.door.need{padding-right:22px;padding-left:clamp(30px,5vw,54px)}
.door.have{background:var(--yolk)} .door.need{background:var(--sage)}
.door h2{font-size:clamp(2.2rem,3.5vw,3.2rem);line-height:.92}
.door p{font-size:.95rem;max-width:24ch}
.door .go{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:500}
.door .go i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-style:normal;color:var(--paper);transition:transform .3s}
.door:hover .go i{transform:translateX(-4px)}
.door.have .go i{background:var(--wine)} .door.need .go i{background:var(--ink)}
.seam{position:absolute;top:0;bottom:0;right:50%;width:6px;margin-right:-3px;background:var(--cocoa);z-index:2}
/* 3D photo cards */
.pcard{border-radius:18px;overflow:hidden;box-shadow:0 30px 50px rgba(30,23,20,.35),0 0 0 6px var(--paper);background:var(--paper);transform-style:preserve-3d;transition:transform .25s ease-out}
.pcard img{width:100%;height:100%;object-fit:cover}
.door .pcard{margin-top:auto;margin-bottom:-24px;height:250px;width:118%;transform:rotateX(calc(14deg + var(--my,0) * -6deg)) rotateY(calc(var(--door-ry) + var(--mx,0) * 8deg)) rotateZ(var(--door-rz)) translateZ(20px)}
.door.have .pcard{--door-ry:-16deg;--door-rz:-3deg;margin-right:-6%}
.door.need .pcard{--door-ry:16deg;--door-rz:3deg;margin-right:-12%}
.door:hover .pcard{--door-rz:0deg}
.float{position:absolute;z-index:4;width:clamp(150px,15vw,210px);aspect-ratio:3/2;animation:bob 6s ease-in-out infinite}
.float .pcard{width:100%;height:100%;transform:rotateY(calc(var(--fy) + var(--mx,0) * 14deg)) rotateX(calc(var(--fx) + var(--my,0) * -10deg)) rotateZ(var(--fz))}
.float.f1{right:-8%;bottom:110px;--fy:24deg;--fx:8deg;--fz:-6deg}
.float.f2{left:-4%;top:110px;--fy:-22deg;--fx:10deg;--fz:7deg;animation-delay:-3s}
.float .tag{position:absolute;right:10px;bottom:10px;background:var(--paper);border-radius:8px;padding:5px 8px;font:500 .6rem/1.3 var(--mono);letter-spacing:.06em;transform:translateZ(30px)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.float{animation:none}.pcard{transition:none}}
.cta-row{display:grid;gap:14px}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr}.hero-copy{padding-bottom:0}.doors{min-height:560px;border-radius:200px 200px 0 0}.hero .ticks{display:none}.float.f1{right:-2%}.float.f2{left:-2%}}
@media (max-width:560px){.doors{grid-template-columns:1fr;border-radius:150px 150px 0 0}.seam{display:none}.door{padding:120px 28px 0 24px}.door.need{padding:56px 28px 0 24px}.door .pcard{height:200px;width:110%}.float{display:none}}

/* ===== Backed by EWOR (the brand strip until 7 Nov 2026) ===== */
.brands{background:var(--paper);border-block:1px solid var(--divider);padding-block:28px;overflow:hidden}
.brands .wrap{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-bottom:18px;flex-wrap:wrap}
.backed .wrap{justify-content:center;align-items:center;margin-bottom:0;gap:20px} .sell{align-self:start} .two.wide{grid-template-columns:2.2fr 1fr} .ewor{display:inline-flex;color:var(--ink)} .ewor svg{height:26px;width:auto;display:block}   /* Backed by EWOR, where the brand strip was (7 Nov 2026) */

/* ===== PROBLEM (merged) ===== */
.move{background:var(--paper);padding:0;height:240vh;position:relative}
.move-stick{position:sticky;top:var(--navh);height:calc(100vh - var(--navh));display:grid;align-items:center;overflow:hidden}
.move .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center;width:100%}
.move-copy{position:relative;min-height:400px;min-width:0}
.phase{position:absolute;inset:0;display:grid;gap:18px;align-content:center;opacity:0;transform:translateY(16px);transition:opacity .45s,transform .45s;pointer-events:none}
.phase.on{opacity:1;transform:none;pointer-events:auto}
.phase p{max-width:44ch}
.speed{display:flex;flex-wrap:wrap;gap:8px}
.speed span{font:500 .7rem var(--mono);letter-spacing:.08em;border:1px solid var(--oat);border-radius:999px;padding:7px 12px;background:var(--linen)}
.speed span.all{background:var(--wine);color:var(--paper);border-color:var(--wine)}
.scene3d{height:min(560px,62vh);perspective:1300px;position:relative}
.world{position:absolute;right:50%;top:58%;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(-34deg)}
.belt{position:absolute;right:-420px;top:0;width:840px;height:220px;transform:rotateX(90deg) translateZ(-2px);transform-origin:50% 0;background:repeating-linear-gradient(90deg,#CBB894 0 3px,#E3D6BC 3px 26px);border-radius:12px;opacity:.9}
.box{position:absolute;right:0;top:0;width:var(--s);height:var(--s);transform-style:preserve-3d;--s:96px}
.box .fc{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:6px;border:1px solid #A97638;backface-visibility:hidden}
.box .fr{background:var(--oak);transform:translateZ(calc(var(--s)/2))}
.box .rt{background:#B07A40;transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.box .lf{background:#B07A40;transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.box .bk{background:#B57F43;transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.box .tp{background:#D4A167;transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.box .fr b{font:500 .62rem/1.25 var(--mono);letter-spacing:.06em;color:var(--cocoa)}
.box .fr b em{display:block;font:400 1.15rem var(--display);font-style:normal;color:var(--wine);letter-spacing:0;margin-top:2px}
.box.goods .fr{background:var(--teak);border-color:#6E3A22}.box.goods .fr b{color:var(--paper)}.box.goods .fr b em{color:var(--yolk)}
.box.goods .tp{background:#A65A37}.box.goods .rt,.box.goods .lf{background:#7A4026}
.wrapbox{--s:250px}
.wrapbox .fc{background:rgba(196,141,79,.18);border:2px solid var(--wine)}
.wrapbox .tp{background:repeating-linear-gradient(90deg,rgba(250,246,238,.3) 0 40%,var(--wine) 40% 42%,rgba(250,246,238,.3) 42% 46%,var(--wine) 46% 48%,rgba(250,246,238,.3) 48% 100%)}
.wrapbox .fr{background:rgba(250,246,238,.55)}
.wrapbox .fr b{font:400 2rem/1 var(--display);color:var(--wine)}
.wrapbox .fr b small{display:block;font:500 .66rem var(--mono);letter-spacing:.12em;color:var(--ink);margin-top:8px}
.progress-rail{position:absolute;right:0;left:0;bottom:22px;display:flex;justify-content:center;gap:8px}
.progress-rail i{width:28px;height:4px;border-radius:99px;background:var(--oat)}
.progress-rail i.on{background:var(--wine)}
@media (max-width:900px){.move{height:220vh}.move .wrap{grid-template-columns:1fr;gap:0}.move-copy{min-height:270px}.scene3d{height:42vh}.world{transform:rotateX(-22deg) rotateY(-34deg) scale(.66)}}
@media (prefers-reduced-motion:reduce){.phase{transition:none}}

/* Spotlight */
.spot{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.spot div{border-top:2px solid var(--ink);padding-top:16px;display:grid;gap:6px}
.spot b{font:400 2.6rem/1 var(--display)}
.spot span{font-size:.92rem;color:var(--plaster)}
@media (max-width:760px){.spot{grid-template-columns:1fr}}

/* ===== WHAT WE DO: laptop roadmap ===== */
.lanes{padding:0;transition:background-color .6s ease;background:var(--yolk)}
.lanes[data-step="1"]{background:var(--powder)}
.lanes[data-step="2"]{background:var(--sage)}
.lanes-intro{padding-block:96px 24px}
.lanes-intro .eyebrow{color:var(--ink)}
.lanes-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px}
.step{min-height:92vh;display:grid;align-content:center;gap:18px;padding-block:40px;opacity:.35;transition:opacity .4s}
.step.on{opacity:1}
.step .eyebrow{color:var(--ink)}
.step .num{font:400 5rem/1 var(--display);opacity:.25}
.step p{max-width:40ch}
.step .tail{font:400 1.5rem/1 var(--display);font-style:italic}
.roadmap{display:flex;gap:6px;margin-top:18px;max-width:420px}
.roadmap i{height:4px;flex:1;border-radius:99px;background:rgba(46,35,30,.18)}
.roadmap i.on{background:var(--ink)}
.laptop-col{position:sticky;top:calc(var(--navh) + 4vh);height:calc(92vh - var(--navh));display:grid;align-items:center;perspective:1800px}
.laptop{width:100%;transform-style:preserve-3d;transform:rotateX(calc(var(--lt,0) * 22deg)) rotateY(calc(var(--lt,0) * -10deg));transform-origin:50% 100%}
.lid{background:var(--night);border-radius:22px 22px 8px 8px;padding:14px 14px 18px;box-shadow:0 40px 80px rgba(30,23,20,.35)}
.lid .cam{width:6px;height:6px;border-radius:50%;background:#3B302A;margin:0 auto 8px}
.screen{position:relative;aspect-ratio:16/10;background:var(--paper);border-radius:6px;overflow:hidden;font-size:.78rem}
.base{height:16px;margin:0 -5%;background:linear-gradient(180deg,#CFC3AE,#A99D88);border-radius:0 0 18px 18px;position:relative}
.base::before{content:"";position:absolute;right:42%;left:42%;top:0;height:6px;background:#8F846F;border-radius:0 0 8px 8px}
.scr{position:absolute;inset:0;display:grid;grid-template-columns:130px 1fr;opacity:0;transform:scale(.98);transition:opacity .45s,transform .45s}
.scr.on{opacity:1;transform:none}
.urlbar{position:absolute;top:0;right:0;left:0;height:26px;background:var(--linen);border-bottom:1px solid var(--divider);display:flex;align-items:center;padding:0 10px;font:500 .62rem var(--mono);color:var(--plaster);z-index:2}
.scr .sb{background:var(--linen);border-left:1px solid var(--divider);padding:36px 8px 8px;display:grid;gap:2px;align-content:start}
.scr .sb span{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:7px;font-size:.7rem}
.scr .sb span.on{background:var(--wine);color:var(--paper)}
.scr .sb .lg{font-weight:600;font-size:.8rem;padding:0 6px 10px}
.scr .sb .lg svg{width:16px;height:16px}
.scr .mn{padding:38px 14px 12px;display:grid;gap:10px;align-content:start;min-width:0}
.scr .t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.scr .t b{font:400 1.35rem/1 var(--display)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpis div{background:var(--linen);border-radius:10px;padding:8px 10px;display:grid;gap:2px}
.kpis small{font:500 .56rem var(--mono);letter-spacing:.08em;color:var(--plaster);text-transform:uppercase}
.kpis b{font:400 1.25rem/1 var(--display);font-variant-numeric:tabular-nums}
.mt{width:100%;border-collapse:collapse;font-size:.68rem}
.mt th{font:500 .54rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--plaster);text-align:right;padding:4px 6px;border-bottom:1px solid var(--divider)}
.mt td{padding:6px;border-bottom:1px solid var(--divider);font-variant-numeric:tabular-nums}
.pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font:500 .62rem var(--mono);white-space:nowrap;background:var(--linen);color:var(--plaster)}
.p-live{background:#E4E7D7;color:#4F5A3A}
.p-wait{background:#F6E6C3;color:#7A5410}
.p-rev{background:#E3EAF1;color:#25528A}
.p-wine{background:#EFD9DC;color:var(--wine)}
.ck{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 12px;font-size:.66rem}
.ck span::before{content:"✓ ";color:#4F5A3A;font-weight:700}
.shot{border-radius:10px;height:74px;background-size:cover;background-position:center}
.wa-screen{grid-template-columns:150px 1fr}
.wa-list{background:var(--linen);border-left:1px solid var(--divider);padding:34px 8px 8px;display:grid;gap:4px;align-content:start}
.wa-list div{padding:7px 8px;border-radius:8px;font-size:.66rem;display:grid;gap:1px}
.wa-list div.on{background:var(--paper)}
.wa-list small{color:var(--plaster)}
.wa-chat{padding:36px 14px 12px;display:flex;flex-direction:column;gap:7px;background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(139,149,114,.06) 14px 15px),var(--paper)}
.wa-chat .b{max-width:78%;padding:7px 10px;border-radius:12px;font-size:.7rem;line-height:1.35;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
.wa-chat .b.show{opacity:1;transform:none}
.wa-chat .b.me{align-self:flex-end;background:var(--sage);color:var(--night);border-bottom-right-radius:4px}
.wa-chat .b.st{align-self:flex-start;background:var(--linen);border-bottom-left-radius:4px}
.wa-chat .b small{display:block;font:500 .54rem var(--mono);opacity:.7;margin-bottom:2px}
@media (max-width:900px){.lanes-grid{grid-template-columns:1fr;gap:0}.laptop-col{order:-1;top:var(--navh);height:auto;padding-block:12px;z-index:2}.step{min-height:70vh}.scr{grid-template-columns:1fr}.scr .sb,.wa-list{display:none}}
@media (prefers-reduced-motion:reduce){.laptop{transform:none!important}.lanes{transition:none}}

/* ===== Deal room ===== */
.deal{background:var(--cornflower);color:var(--paper);overflow:hidden}
.deal .eyebrow{color:var(--powder)}
.deal h2 em{color:var(--paper);font-style:italic}
.deal .lede{color:var(--paper)}
.role{display:inline-flex;background:rgba(250,246,238,.16);border-radius:999px;padding:4px;gap:4px;margin-bottom:22px}
.role button{height:42px;padding:0 20px;border-radius:999px;border:0;background:transparent;color:var(--paper);font:500 .95rem var(--body);cursor:pointer}
.role button[aria-pressed=true]{background:var(--paper);color:var(--ink)}
.stage3d{perspective:1800px}
[data-tilt]{transform-style:preserve-3d;transform:rotateX(calc(var(--t,1) * 14deg)) translateY(calc(var(--t,1) * 30px)) scale(calc(1 - var(--t,1) * .05));transform-origin:50% 100%}
@media (prefers-reduced-motion:reduce){[data-tilt]{transform:none!important}}
.win{background:var(--paper);border:1px solid var(--oat);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;font-size:.86rem;color:var(--ink)}
.win-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--divider);background:var(--linen)}
.win-bar i{width:10px;height:10px;border-radius:50%;background:var(--oat)}
.win-bar b{margin-right:8px;font:500 .72rem var(--mono);color:var(--plaster);letter-spacing:.06em}
.dr{display:grid;grid-template-columns:220px 1fr;min-height:470px}
.dr-steps{background:var(--linen);border-left:1px solid var(--divider);padding:18px 12px}
.dr-steps ol{margin:0;padding:0;display:grid;gap:4px}
.dr-steps li{list-style:none;display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:center;padding:9px 8px;border-radius:10px;font-size:.86rem;color:var(--plaster)}
.dr-steps li i{width:26px;height:26px;border-radius:50%;border:2px solid var(--oat);display:grid;place-items:center;font:500 .66rem var(--mono);font-style:normal;background:var(--paper)}
.dr-steps li.now{background:var(--paper);color:var(--ink);font-weight:600}
.dr-steps li.now i{border-color:var(--wine);color:var(--wine)}
.dr-steps li.done{color:var(--ink)}
.dr-steps li.done i{background:var(--wine);border-color:var(--wine);color:var(--paper)}
.dr-main{padding:22px;display:grid;gap:16px;align-content:start;min-width:0}
.dr-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.dr-top h4{margin:4px 0 0;font:400 1.8rem/1 var(--display)}
.panel{display:grid;gap:14px;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lot{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;background:var(--linen);border-radius:16px;padding:12px}
.lot .ph{height:96px;border-radius:12px;background-size:cover;background-position:center}
.lot b{display:block;font:400 1.4rem/1.05 var(--display)}
.lot small{color:var(--plaster);font-size:.82rem}
.stepper-q{display:inline-flex;align-items:center;border:1px solid var(--oat);border-radius:10px;overflow:hidden;background:var(--paper)}
.stepper-q button{width:36px;height:36px;border:0;background:transparent;font-size:1.1rem;cursor:pointer;color:var(--ink)}
.stepper-q span{min-width:86px;text-align:center;font:500 .9rem var(--mono)}
.kvs{display:grid;gap:6px}
.kvs div{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;padding:4px 0;border-bottom:1px dashed var(--divider)}
.kvs div span:first-child{color:var(--plaster)}
.kvs .tot{font-weight:600;border-bottom:0}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice button{border:1px solid var(--oat);background:var(--paper);border-radius:14px;padding:14px;text-align:right;cursor:pointer;display:grid;gap:4px;color:var(--ink)}
.choice button b{font-size:.95rem}
.choice button span{font-size:.8rem;color:var(--plaster)}
.choice button[aria-pressed=true]{border:2px solid var(--wine);padding:13px}
.checks{display:grid;gap:2px}
.chk{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:center;font-size:.86rem;padding:6px 0}
.chk .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--oat);display:grid;place-items:center;transition:all .3s}
.chk.ok .dot{background:var(--sage);border-color:var(--sage)}
.chk.ok .dot::after{content:"✓";color:var(--paper);font-size:.7rem;font-weight:700}
.chk.run .dot{border-color:var(--wine);border-top-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;height:120px}
.gallery span{border-radius:12px;background-size:cover;background-position:center}
.route{position:relative;height:130px;border-radius:14px;background:repeating-linear-gradient(0deg,transparent 0 23px,var(--divider) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--divider) 23px 24px),var(--linen);overflow:hidden}
.route svg{position:absolute;inset:0;width:100%;height:100%}
.ship{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--wine);border:3px solid var(--paper);box-shadow:0 0 0 4px rgba(107,35,51,.2);transform:translate(-50%,-50%);transition:left 2.4s cubic-bezier(.4,0,.2,1),top 2.4s cubic-bezier(.4,0,.2,1)}
.port{position:absolute;font:500 .66rem var(--mono);background:var(--paper);border-radius:6px;padding:3px 6px}
.note{background:var(--ink);color:var(--paper);border-radius:12px;padding:12px 14px;font-size:.86rem}
.note.warn{background:#F6E6C3;color:#7A5410}
.done-card{text-align:center;display:grid;gap:10px;justify-items:center;padding:20px 0}
.done-card .seal2{width:76px;height:76px;border-radius:50%;background:var(--wine);color:var(--paper);display:grid;place-items:center;font-size:1.8rem}
.done-card b{font:400 2.2rem/1 var(--display)}
.holder{display:grid;grid-template-columns:1fr 2fr 1fr;gap:8px}
.holder span{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:999px;background:var(--linen);color:var(--plaster);font-size:.95rem;transition:background .4s,color .4s;text-align:center;padding:0 10px}
.holder span::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.6;flex:none}
.holder span.on{background:var(--ink);color:var(--paper)}
.holder span.on::before{background:var(--yolk);opacity:1}
.dr .holder span{height:40px;font-size:.82rem}
.deal-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;font-size:.92rem}
.deal-foot button{background:transparent;color:var(--paper);border:1px solid var(--powder)}
.deal-foot button:hover{background:rgba(250,246,238,.12)}
@media (max-width:860px){.dr{grid-template-columns:1fr}.dr-steps ol{display:flex;overflow-x:auto;gap:4px}.dr-steps li{white-space:nowrap}.choice{grid-template-columns:1fr}.lot{grid-template-columns:90px 1fr}}

/* ===== Safe hands: follow the money ===== */
.safe .top{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:44px}
.flowcard{background:var(--paper);border:1px solid var(--oat);border-radius:var(--r-panel);padding:44px 44px 36px}
.track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.track .line{position:absolute;right:10%;left:10%;top:22px;height:3px;background:repeating-linear-gradient(90deg,var(--oat) 0 6px,transparent 6px 10px)}
.track .fill{position:absolute;right:10%;top:22px;height:3px;background:var(--wine);width:0;transition:width .7s cubic-bezier(.4,0,.2,1)}
.node{display:grid;justify-items:center;text-align:center;gap:10px;position:relative;z-index:1}
.node .c{width:46px;height:46px;border-radius:50%;border:2px solid var(--oat);background:var(--paper);display:grid;place-items:center;color:var(--paper);font-size:.9rem;transition:all .4s}
.node.done .c{background:var(--cornflower);border-color:var(--cornflower)}
.node.done .c::after{content:"✓"}
.node .k{font:500 .68rem var(--mono);letter-spacing:.14em;color:var(--plaster)}
.node b{font:400 1.6rem/1.02 var(--display);transition:opacity .4s}
.node p{font-size:.9rem;color:var(--plaster);max-width:22ch;transition:opacity .4s}
.node:not(.done):not(.now) b,.node:not(.done):not(.now) p{opacity:.45}
.coin{position:absolute;top:-6px;right:10%;width:58px;height:58px;margin-right:-29px;border-radius:50%;background:var(--yolk);color:var(--ink);display:grid;place-items:center;font:400 1.6rem var(--display);box-shadow:0 0 0 6px var(--paper),0 10px 24px rgba(46,35,30,.25);transition:left .7s cubic-bezier(.4,0,.2,1);z-index:2}
.holder-wrap{border-top:1px solid var(--divider);margin-top:34px;padding-top:24px;display:grid;gap:14px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.facts div{font-size:.9rem;color:var(--plaster);border-top:1px solid var(--oat);padding-top:12px}
.facts b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}
@media (max-width:900px){.safe .top{grid-template-columns:1fr}.flowcard{padding:28px 18px}.track{grid-template-columns:1fr;gap:18px}.track .line,.track .fill,.coin{display:none}.node{grid-template-columns:46px 1fr;justify-items:start;text-align:right;align-items:center;column-gap:14px}.node .k,.node b,.node p{grid-column:2}.node .c{grid-row:1/4}.node.now .c{background:var(--yolk);border-color:var(--yolk)}.facts{grid-template-columns:1fr 1fr}.holder{grid-template-columns:1fr}}

/* ===== Pricing ===== */
.price{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:stretch}
.price .big{background:var(--ink);color:var(--paper);border-radius:var(--r-panel);padding:40px;display:grid;gap:18px;align-content:space-between}
.price .big p{font:400 clamp(2rem,4vw,3rem)/1 var(--display)}
.price .big p em{color:var(--yolk)}
.price .side2{background:var(--paper);border-radius:var(--r-panel);padding:32px;display:grid;gap:14px;align-content:start}
.price .side2 div{border-bottom:1px solid var(--divider);padding-bottom:12px;font-size:.95rem}
.price .side2 b{display:block;font-weight:600}
@media (max-width:860px){.price{grid-template-columns:1fr}}

/* ===== Categories ===== */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;perspective:1200px}
.cat{position:relative;border-radius:var(--r-card);overflow:hidden;text-decoration:none;color:var(--paper);display:flex;flex-direction:column;background:var(--c);transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.cat:hover{transform:rotateX(4deg) rotateY(-6deg) translateY(-6px);box-shadow:0 30px 50px rgba(46,35,30,.22)}
.cat .ph{aspect-ratio:4/5;background-size:cover;background-position:center}
.cat .cap{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding:16px 18px 18px}
.cat b{display:block;font:400 1.7rem/1 var(--display);margin-bottom:4px}
.cat span{font-size:.85rem;opacity:.85}
.cat i{width:36px;height:36px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font-style:normal;flex:none}
.cat.dark{color:var(--ink)}
@media (max-width:960px){.cats{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.cats{grid-template-columns:1fr}}

/* ===== Forms ===== */
.forms{display:grid;grid-template-columns:1fr 1fr;gap:20px}
form,.sell{border-radius:var(--r-panel);padding:30px;display:grid;gap:14px;align-content:start;min-width:0;background:var(--linen)}
.field{display:grid;gap:6px}
.l{font:500 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--plaster)}
input[type=text],input[type=email],input[type=number],input[type=password],select{height:48px;border-radius:var(--r-btn);border:1px solid var(--oat);background:var(--paper);color:var(--ink);font:400 1rem var(--body);padding:0 14px;width:100%}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.roles{display:flex;flex-wrap:wrap;gap:8px}
.roles button{height:40px;padding:0 14px;border-radius:10px;border:1px solid var(--oat);background:var(--paper);font-size:.95rem;color:var(--ink);cursor:pointer}
.roles button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.small{font-size:.88rem;color:var(--plaster)}
.sent{color:#4F5A3A;font-weight:500}
@media (max-width:860px){.forms{grid-template-columns:1fr}.two,.two.wide{grid-template-columns:1fr}}

/* ===== About ===== */
.about{background:var(--paper)}
.back{display:inline-block;margin-bottom:40px;font-size:.95rem}
.page{min-height:100vh}
.about-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:end;margin-bottom:72px}
.about-hero h2{font-size:clamp(2.8rem,6.4vw,5.2rem);line-height:.9}
.prose{display:grid;gap:18px;font-size:1.08rem;line-height:1.6;max-width:62ch}
.prose .sign{font:400 1.8rem/1 var(--display);font-style:italic;color:var(--wine)}
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.founders{position:sticky;top:100px;display:grid;grid-template-columns:1.25fr 1fr;gap:14px;align-items:end}
.portrait{position:relative;border-radius:200px 200px 24px 24px;overflow:hidden;aspect-ratio:3/4;background:var(--linen);margin:0}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.portrait::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(transparent,rgba(30,23,20,.55))}
.who{position:absolute;right:16px;left:16px;bottom:14px;z-index:1;color:var(--paper)}
.who b{display:block;font:400 1.4rem/1.05 var(--display)}
.who span{font:500 .62rem var(--mono);letter-spacing:.1em}
.mystery{position:relative;border-radius:24px 24px 200px 200px;aspect-ratio:3/4.6;background:var(--ink);overflow:hidden;display:grid;place-items:center}
.mystery svg.sil{width:70%;color:#3B302A;margin-top:30%}
.mystery .q{position:absolute;top:30%;right:50%;transform:translateX(50%);font:italic 400 4.4rem var(--display);color:var(--yolk)}
.mystery .who{top:16px;bottom:auto}
.chapters{display:grid;gap:56px}
.chapter .eyebrow{display:block;margin-bottom:14px;line-height:1.5}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--oat);border:1px solid var(--oat);border-radius:var(--r-card);overflow:hidden;margin-top:88px}
.values div{background:var(--paper);padding:22px;display:grid;gap:8px;align-content:start;transition:background .3s}
.values div:hover{background:var(--linen)}
.values b{font:400 1.45rem/1.02 var(--display)}
.values p{font-size:.9rem;color:var(--plaster)}
.values div.hl{background:var(--wine);color:var(--paper)} .values div.hl p{color:#E7C6CC}
@media (max-width:980px){.about-hero,.story{grid-template-columns:1fr}.founders{position:static}.values{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.values{grid-template-columns:1fr}}

/* ===== Contact + FAQ ===== */
.contact{padding:0;background:var(--linen)}
.c-top{display:grid;grid-template-columns:.95fr 1.05fr;border-bottom:1px solid var(--wine);min-height:620px}
.c-copy{padding:72px max(16px,calc((100vw - var(--container))/2 + 16px)) 56px max(16px,env(safe-area-inset-left,0px));display:grid;gap:22px;align-content:center;min-width:0}
.c-copy h2{font-size:clamp(3rem,6vw,5rem);line-height:.9}
.c-copy h2 em{display:block}
.c-copy .intro-p{max-width:46ch;color:var(--ink)}
.reach{display:grid;border-top:1px solid var(--oat);max-width:470px}
.reach a,.reach .r{display:grid;grid-template-columns:40px 1fr auto;gap:18px;align-items:center;padding:18px 2px;border-bottom:1px solid var(--oat);text-decoration:none;color:var(--ink)}
.reach svg.ic{width:30px;height:30px;color:var(--wine)}
.reach b{display:block;font-weight:500;font-size:1.05rem}
.reach span.s{color:var(--plaster);font-size:.92rem}
.reach .arr{color:var(--wine);font-size:1.3rem;transition:transform .2s}
.reach a:hover .arr{transform:translateX(-5px)}
.copy{border:1px solid var(--oat);background:var(--paper);border-radius:8px;height:30px;padding:0 10px;font:500 .72rem var(--mono);cursor:pointer;color:var(--ink)}
.arches{position:relative;overflow:hidden;background:linear-gradient(180deg,#E9DFCD,#DCCBAE);perspective:1000px}
.arches::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--linen) 0,rgba(242,236,224,0) 18%)}
.floor{position:absolute;right:0;left:0;bottom:0;height:26%;background:linear-gradient(180deg,#D8CCB6,#CDBFA6)}
.rails{position:absolute;right:28%;bottom:0;width:60%;height:26%;transform:perspective(400px) rotateX(55deg);transform-origin:50% 100%;background:repeating-linear-gradient(90deg,transparent 0 8px,var(--wine) 8px 10px,transparent 10px 14px,var(--wine) 14px 16px,transparent 16px 100%);background-size:100% 100%;opacity:.85;-webkit-mask:linear-gradient(transparent,#000 40%);mask:linear-gradient(transparent,#000 40%)}
.arch{position:absolute;bottom:26%;width:34%;aspect-ratio:3/4.6;border-radius:999px 999px 0 0;padding:16px 16px 0;box-shadow:inset -18px 0 30px rgba(30,23,20,.18);transform:translateZ(0) rotateY(var(--r,0deg));transition:transform .4s}
.arch .in{width:100%;height:100%;border-radius:999px 999px 0 0;background-size:cover;background-position:center;box-shadow:inset 0 30px 40px rgba(30,23,20,.25)}
.arch.a1{right:16%;background:var(--yolk);--r:8deg}
.arch.a2{left:6%;background:var(--sage);--r:-8deg}
.arches:hover .arch{--r:0deg}
.pillar{position:absolute;right:54%;top:0;bottom:26%;width:22px;background:repeating-linear-gradient(90deg,var(--wine) 0 3px,transparent 3px 9px,var(--wine) 9px 12px,transparent 12px 22px)}
.pillar svg{position:absolute;right:50%;top:32%;width:64px;height:64px;margin-right:-32px;background:#E5DACA;border-radius:50%;padding:10px}
.faqwrap{display:grid;grid-template-columns:300px 1fr;gap:56px;padding-block:56px 104px}
.faq-side{position:sticky;top:96px;align-self:start;display:grid;gap:18px;border-left:1px solid var(--oat);padding-left:28px}
.search{position:relative}
.search input{height:44px;border-radius:999px;padding:0 18px 0 44px;background:var(--paper)}
.search svg{position:absolute;left:16px;top:12px;width:20px;height:20px;color:var(--ink)}
.cats-f{display:grid;gap:2px}
.cats-f button{display:flex;justify-content:space-between;align-items:center;border:0;background:none;padding:8px 16px 8px 0;font:400 1rem var(--body);color:var(--ink);cursor:pointer;border-right:3px solid transparent;text-align:right}
.cats-f button small{font:500 .7rem var(--mono);color:var(--plaster)}
.cats-f button[aria-pressed=true]{border-right-color:var(--wine);color:var(--wine);font-weight:600}
.cats-f button[aria-pressed=true] small{color:var(--wine)}
.grp{display:flex;align-items:baseline;gap:18px;border-bottom:2px solid var(--ink);padding:34px 0 12px}
.grp:first-child{padding-top:0}
.grp small{font:500 .72rem var(--mono);color:var(--plaster)}
.grp b{font:400 clamp(2rem,3.4vw,2.8rem)/1 var(--display)}
.faq details{border-bottom:1px solid var(--oat)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 0;font-size:1.08rem;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";width:32px;height:32px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font:400 1.1rem var(--body);flex:none;transition:background .2s,color .2s}
.faq details[open] summary::after{content:"−";background:var(--wine);color:var(--paper)}
.faq details p{padding:0 38px 20px 48px;max-width:72ch;color:var(--ink);line-height:1.6}
.faq .empty{padding:24px 0;color:var(--plaster)}
@media (max-width:960px){.c-top{grid-template-columns:1fr}.c-copy{padding:56px max(16px,env(safe-area-inset-left,0px))}.arches{min-height:420px}.faqwrap{grid-template-columns:1fr;gap:28px}.faq-side{position:static;border-left:0;padding-left:0}.faq details p{padding:0 0 20px}}

/* Footer */
.knit{height:30px;background:repeating-linear-gradient(90deg,var(--cocoa) 0 16px,transparent 16px 44px),var(--linen)}
footer{background:var(--night);color:var(--linen)}
footer .wrap{padding-block:72px 32px;display:grid;gap:56px}
.f-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
footer h4{margin:0 0 14px;font:500 .72rem var(--mono);letter-spacing:.12em;color:var(--oak)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{text-decoration:none;color:var(--linen)} footer a:hover{color:var(--yolk)}
.f-big{font:400 clamp(2.2rem,5vw,3.4rem)/.94 var(--display);margin-top:18px}
.f-legal{margin:-42px 0 0;font-size:.75rem;line-height:1.5;color:var(--plaster)}   /* UK trading disclosures: name, number, where registered, registered office */
.f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font:500 .7rem var(--mono);letter-spacing:.1em;color:var(--plaster);border-top:1px solid var(--cocoa);padding-top:20px}
@media (max-width:760px){.f-top{grid-template-columns:1fr 1fr}}

/* Added for the live site (tools/build_v3.py), her styles untouched above. */
.todo{display:none}
.hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}   /* the forms' honeypot */
/* the language menu: a flag and the code, the list with flags on click (Ayoub, 21 Oct 2026) */
.lang{position:relative;border:0;padding:0;font:500 .72rem var(--mono)}
.lang-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 8px 0 10px;border-radius:999px;border:1px solid var(--oat);background:var(--paper);color:var(--ink);cursor:pointer;font:inherit;letter-spacing:.04em}
.lang-btn .chev{width:10px;height:6px;flex:none;transition:transform .2s} .lang-btn[aria-expanded=true] .chev{transform:rotate(180deg)}
.fl{width:21px;height:14px;border-radius:2px;flex:none;box-shadow:inset 0 0 0 1px rgba(46,35,30,.22)}   /* an inner edge, so the white parts of a flag stop at its border */
.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:172px;background:var(--paper);border:1px solid var(--oat);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:5;display:grid}
.lang-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--ink);font:500 .9rem var(--body);white-space:nowrap}
.lang-menu a:hover{background:var(--linen)} .lang-menu a.on{background:var(--ink);color:var(--paper)}
.drawer .langs a{display:inline-flex;align-items:center;gap:8px}
.noanim *,.noanim *::before,.noanim *::after{transition:none!important;animation-duration:0s!important}   /* while the language changes */
.nav .book{margin-left:-4px}
@media (max-width:640px){.nav .book{display:none}}
.drawer-foot{display:grid;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid var(--divider)}
.drawer .langs{display:flex;flex-wrap:wrap;gap:6px} .drawer .langs a{padding:7px 12px;border-radius:999px;border:1px solid var(--oat);text-decoration:none;font:500 .8rem var(--mono)} .drawer .langs a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.logo svg path{transition:fill .5s ease}
textarea{border-radius:var(--r-btn);border:1px solid var(--oat);background:var(--paper);color:var(--ink);font:400 1rem/1.45 var(--body);padding:12px 14px;width:100%;resize:vertical;min-height:88px}
.modal .modal-done{width:min(420px,100%);background:var(--paper);border-radius:var(--r-panel);padding:30px;display:grid;gap:14px;box-shadow:var(--shadow)}
.modal form{max-height:calc(100vh - 32px);overflow:auto}
.err{color:var(--wine);font-weight:500}
.sent{color:#4F5A3A;font-weight:500}
/* Ayoub's round of 21 Oct 2026: a shade inside the doors, the two-tone wordmark, the bar in the deal room's blue, the
   big box's faces fading instead of the box, the laptop and the phone in 3D, the founders' doors at one size, the
   legal pages in her type. */
.door::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 40px 0 50px -24px rgba(30,23,20,.32),inset -40px 0 50px -24px rgba(30,23,20,.32)}
.logo .wm{color:var(--top,#6B2333);transition:color .5s ease} .logo .wm b{font-weight:inherit;color:var(--bot,#C48D4F);transition:color .5s ease}
.nav ul a{white-space:nowrap} @media (max-width:1240px){.nav ul{display:none}}   /* five links plus her pill and two buttons need the width; her 1100px rule hides the pill */
.lang a[lang=ar],.langs a[lang=ar]{font-family:system-ui,sans-serif}   /* the one Arabic word of the pill must not pull the Arabic face onto every page */
/* the seam passes behind the photo cards (Ayoub, 21 Oct 2026): the two colours and the seam are painted on the
   container, the doors go transparent and let their cards cross the middle over it; her one-column phone layout keeps
   her own rules */
@media (min-width:561px){.doors{background:linear-gradient(90deg,var(--yolk) 0 calc(50% - 3px),var(--cocoa) calc(50% - 3px) calc(50% + 3px),var(--sage) calc(50% + 3px))}
.door.have,.door.need{background:transparent;overflow:visible} .door.have{clip-path:inset(0 -40% 0 0)} .door.need{clip-path:inset(0 0 0 -40%)} .seam{display:none}}
.roadmap{display:none}   /* her step bars lit up out of sight and the text above them never changes, so they go (Ayoub, 21 Oct 2026) */
.lanes{overflow-x:clip}   /* the lid's near corners poke past the edge on phones and small laptops */
/* phones (Ayoub, 22 Oct 2026, "catastrophic on my phone"): nothing may widen the page (iOS pans sideways even with her
   body rule), the bar fits 360 px, the sticky scenes use the small viewport so their bottom is never under the browser
   chrome, and the deal room stacks its step rail above the panel instead of being cut on the right */
input[type=text].hp{width:1px}   /* never clip html: that makes body the scroll container and every sticky block stops sticking */
@media (max-width:900px){header.nav{transition:transform .3s ease,background-color .5s ease}header.nav.hide{transform:translateY(-100%)}
.move-stick,.laptop-col{transition:top .3s ease}header.nav.hide~main .move-stick,header.nav.hide~main .laptop-col{top:0}}   /* the scenes take the bar's place while it is away */
@media (max-width:400px){.logo span{font-size:1.25rem}.nav .wrap{gap:12px}.nav .right .btn{font-size:.84rem;padding:0 10px;height:36px}}
@media (max-width:900px){.move{height:220svh}.move-stick{height:calc(100svh - var(--navh))}.step{min-height:70svh}}
/* the box scene on phones (Ayoub, 22 Oct 2026, from his 356 x 656 screen): the three texts share one block at the top,
   sized by the tallest of them in any language, and the boxes live in the block left below, smaller, never over the
   words and never past the sides */
@media (max-width:900px){.move-stick{align-items:stretch}.move .wrap{display:flex;flex-direction:column;padding-top:16px;padding-bottom:44px;height:100%}
.move-copy{min-height:0;display:grid;flex:none}.phase{position:relative;inset:auto;grid-area:1/1;align-content:start;gap:12px;visibility:hidden;transition:opacity .45s,transform .45s,visibility 0s .45s}.phase.on{visibility:visible;transition-delay:0s}
.scene3d{flex:1;height:auto;min-height:140px;perspective-origin:50% 80%}.world{top:80%;transform:rotateX(-22deg) rotateY(-34deg) scale3d(.6,.6,.6)}}   /* the stack rises above its origin, so the origin sits low; scale3d, not scale: a 2D scale leaves the depth alone and the cubes become tunnels */
@media (max-width:480px){.move .phase h2{font-size:2rem}.move .phase p{font-size:.95rem;line-height:1.4}.move .speed span{font-size:.62rem;padding:5px 9px}.scene3d{perspective-origin:50% 89%}.world{top:89%;transform:rotateX(-22deg) rotateY(-34deg) scale3d(.5,.5,.5)}}
/* the laptop on phones: an opaque column so the step text vanishes behind it instead of showing around it, and a
   closer view of the screen, its edges past the sides, so the words on it can be read */
@media (max-width:900px){.lanes{--c:var(--yolk)}.lanes[data-step="1"]{--c:var(--powder)}.lanes[data-step="2"]{--c:var(--sage)}
.laptop-col{background:var(--c);transition:background-color .6s ease,top .3s ease}}
/* the laptop screen shows exactly what it shows on a desktop, scaled to fit (zoom by --k = screen width over the
   644 px of the desktop screen, set by the script); the model stays inside the frame and turns round on phones too */
/* the laptop is laid out once, at its desktop size (672 px wide, screen 644), and the whole model is zoomed to the
   column by the script, so every bezel, edge, strip and the phone keep their desktop proportions on a phone */
@media (max-width:900px){.scr{grid-template-columns:130px 1fr}.scr .sb,.wa-list{display:grid}}
@media (max-width:640px){.dr{grid-template-columns:1fr;min-height:0}.dr-steps{border-left:0;border-bottom:1px solid var(--divider);display:flex;gap:4px;overflow-x:auto;padding:10px 8px}.dr-steps li{flex:none}}
header.nav{transition:background-color .5s ease,border-color .5s ease}
header.nav.tint{background:color-mix(in srgb,var(--cornflower) 94%,transparent);border-bottom-color:transparent;color:var(--paper)}
header.nav.tint ul a:hover{color:var(--powder)}
header.nav.tint .lang-btn{background:rgba(250,246,238,.14);border-color:rgba(250,246,238,.55);color:var(--paper)}
header.nav.tint .btn-line{color:var(--paper);border-color:var(--paper)} header.nav.tint .btn-line:hover:not(:disabled){background:rgba(250,246,238,.14)}
.wrapbox .fc{opacity:var(--o,1)}
/* The laptop and the phone as solid objects: each part is a slab, a face in front, a face behind and an edge of folded
   strips (the <i> elements, from rim() in the build). The eye is 60 px above the floor under the laptop (perspective()
   in the transform, around her transform-origin), so the deck reads as her strip under the screen. Her entrance tilt
   turns the other way (-22deg), which shows the deck from above; tilting back would show the base from below. The turn
   goes round the middle of the base and the laptop moves back as it turns, so its back comes no closer than its front.
   --d is the depth of the deck, 60% of the lid's height, from the width of the column (cqw). */
.laptop-col{perspective:none;container-type:inline-size}
.laptop{position:relative;--d:calc(37.5cqw + 17px);--zc:calc(var(--d) / 2 - 10px);transform:translateY(-60px) perspective(1800px) translateY(60px) translateZ(calc(var(--zc) * (1 - 2 * var(--flip,0)))) rotateX(calc(var(--lt,0) * -22deg)) rotateY(calc(var(--lt,0) * -10deg + var(--flip,0) * 180deg)) translateZ(calc(var(--zc) * -1))}
.lidx{position:relative;transform-style:preserve-3d;transform-origin:50% 100% -4px;transform:rotateX(10deg)}   /* opened 100 degrees */
.lid,.lid-back,.deck,.pf,.pk{backface-visibility:hidden}
.lid{box-shadow:0 40px 80px rgba(30,23,20,calc(.35 - var(--flip,0) * 1.4))}   /* her shadow lies in the lid's plane: gone once the turn starts */
.lidx>i,.deckx>i,.phone>i{position:absolute;backface-visibility:hidden}
.lidx>i:nth-of-type(1){inset:-8px auto auto 21.5px;width:calc(100% - 43px);height:8px;transform-origin:50% 100%;transform:rotateX(90deg);background:#3F332C}
.lidx>i:nth-of-type(2){inset:21.5px auto auto 100%;width:8px;height:calc(100% - 29px);transform-origin:0 50%;transform:rotateY(90deg);background:#171110}
.lidx>i:nth-of-type(3){inset:21.5px auto auto -8px;width:8px;height:calc(100% - 29px);transform-origin:100% 50%;transform:rotateY(-90deg);background:#171110}
.lidx>i:nth-of-type(4){inset:22.49px auto auto calc(100% + 0.10px);width:9.58px;height:8px;transform-origin:0 0;transform:rotateZ(-101.2deg) rotateX(-90deg);background:#1C1514}
.lidx>i:nth-of-type(5){inset:14.00px auto auto calc(100% - 1.40px);width:9.58px;height:8px;transform-origin:0 0;transform:rotateZ(-123.8deg) rotateX(-90deg);background:#261E1A}
.lidx>i:nth-of-type(6){inset:6.72px auto auto calc(100% - 6.03px);width:9.58px;height:8px;transform-origin:0 0;transform:rotateZ(-146.2deg) rotateX(-90deg);background:#302622}
.lidx>i:nth-of-type(7){inset:1.77px auto auto calc(100% - 13.09px);width:9.58px;height:8px;transform-origin:0 0;transform:rotateZ(-168.8deg) rotateX(-90deg);background:#3A2F28}
.lidx>i:nth-of-type(8){inset:-0.10px auto auto 22.49px;width:9.58px;height:8px;transform-origin:0 0;transform:rotateZ(168.8deg) rotateX(-90deg);background:#3A2F28}
.lidx>i:nth-of-type(9){inset:1.40px auto auto 14.00px;width:9.58px;height:8px;transform-origin:0 0;transform:rotateZ(146.2deg) rotateX(-90deg);background:#302622}
.lidx>i:nth-of-type(10){inset:6.03px auto auto 6.72px;width:9.58px;height:8px;transform-origin:0 0;transform:rotateZ(123.8deg) rotateX(-90deg);background:#261E1A}
.lidx>i:nth-of-type(11){inset:13.09px auto auto 1.77px;width:9.58px;height:8px;transform-origin:0 0;transform:rotateZ(101.2deg) rotateX(-90deg);background:#1C1514}
.lidx>i:nth-of-type(12){inset:calc(100% - 8.46px) auto auto -0.19px;width:7.12px;height:8px;transform-origin:0 0;transform:rotateZ(67.5deg) rotateX(-90deg);background:#16100E}
.lidx>i:nth-of-type(13){inset:calc(100% - 2.53px) auto auto 1.88px;width:7.12px;height:8px;transform-origin:0 0;transform:rotateZ(22.5deg) rotateX(-90deg);background:#120D0C}
.lidx>i:nth-of-type(14){inset:calc(100% + 0.19px) auto auto calc(100% - 8.46px);width:7.12px;height:8px;transform-origin:0 0;transform:rotateZ(-22.5deg) rotateX(-90deg);background:#120D0C}
.lidx>i:nth-of-type(15){inset:calc(100% - 1.88px) auto auto calc(100% - 2.53px);width:7.12px;height:8px;transform-origin:0 0;transform:rotateZ(-67.5deg) rotateX(-90deg);background:#16100E}
.deckx>i:nth-of-type(1){inset:-13px auto auto -0.5px;width:calc(100% - -1px);height:13px;transform-origin:50% 100%;transform:rotateX(90deg);background:#2B221E}
.deckx>i:nth-of-type(2){inset:-0.5px auto auto 100%;width:13px;height:calc(100% - 15px);transform-origin:0 50%;transform:rotateY(90deg);background:#958974}
.deckx>i:nth-of-type(3){inset:100% auto auto 15.5px;width:calc(100% - 31px);height:13px;transform-origin:50% 0;transform:rotateX(-90deg);background:#BCB09B}
.deckx>i:nth-of-type(4){inset:-0.5px auto auto -13px;width:13px;height:calc(100% - 15px);transform-origin:100% 50%;transform:rotateY(-90deg);background:#958974}
.deckx>i:nth-of-type(5){inset:calc(100% - 16.48px) auto auto -0.13px;width:9.28px;height:13px;transform-origin:0 0;transform:rotateZ(75.0deg) rotateX(-90deg);background:#9C907A}
.deckx>i:nth-of-type(6){inset:calc(100% - 8.35px) auto auto 1.79px;width:9.28px;height:13px;transform-origin:0 0;transform:rotateZ(45.0deg) rotateX(-90deg);background:#A89C88}
.deckx>i:nth-of-type(7){inset:calc(100% - 2.27px) auto auto 7.52px;width:9.28px;height:13px;transform-origin:0 0;transform:rotateZ(15.0deg) rotateX(-90deg);background:#B6AA94}
.deckx>i:nth-of-type(8){inset:calc(100% + 0.13px) auto auto calc(100% - 16.48px);width:9.28px;height:13px;transform-origin:0 0;transform:rotateZ(-15.0deg) rotateX(-90deg);background:#B6AA94}
.deckx>i:nth-of-type(9){inset:calc(100% - 1.79px) auto auto calc(100% - 8.35px);width:9.28px;height:13px;transform-origin:0 0;transform:rotateZ(-45.0deg) rotateX(-90deg);background:#A89C88}
.deckx>i:nth-of-type(10){inset:calc(100% - 7.52px) auto auto calc(100% - 2.27px);width:9.28px;height:13px;transform-origin:0 0;transform:rotateZ(-75.0deg) rotateX(-90deg);background:#9C907A}
.phone>i:nth-of-type(1){inset:-9px auto auto 25.5px;width:calc(100% - 51px);height:9px;transform-origin:50% 100%;transform:rotateX(90deg);background:#6E5E52}
.phone>i:nth-of-type(2){inset:25.5px auto auto 100%;width:9px;height:calc(100% - 51px);transform-origin:0 50%;transform:rotateY(90deg);background:#4E4139}
.phone>i:nth-of-type(3){inset:100% auto auto 25.5px;width:calc(100% - 51px);height:9px;transform-origin:50% 0;transform:rotateX(-90deg);background:#3A2F29}
.phone>i:nth-of-type(4){inset:25.5px auto auto -9px;width:9px;height:calc(100% - 51px);transform-origin:100% 50%;transform:rotateY(-90deg);background:#4E4139}
.phone>i:nth-of-type(5){inset:26.49px auto auto calc(100% + 0.10px);width:11.14px;height:9px;transform-origin:0 0;transform:rotateZ(-101.2deg) rotateX(-90deg);background:#52453C}
.phone>i:nth-of-type(6){inset:16.47px auto auto calc(100% - 1.70px);width:11.14px;height:9px;transform-origin:0 0;transform:rotateZ(-123.8deg) rotateX(-90deg);background:#5A4C42}
.phone>i:nth-of-type(7){inset:7.89px auto auto calc(100% - 7.20px);width:11.14px;height:9px;transform-origin:0 0;transform:rotateZ(-146.2deg) rotateX(-90deg);background:#625349}
.phone>i:nth-of-type(8){inset:2.08px auto auto calc(100% - 15.56px);width:11.14px;height:9px;transform-origin:0 0;transform:rotateZ(-168.8deg) rotateX(-90deg);background:#6A5A4F}
.phone>i:nth-of-type(9){inset:-0.10px auto auto 26.49px;width:11.14px;height:9px;transform-origin:0 0;transform:rotateZ(168.8deg) rotateX(-90deg);background:#6A5A4F}
.phone>i:nth-of-type(10){inset:1.70px auto auto 16.47px;width:11.14px;height:9px;transform-origin:0 0;transform:rotateZ(146.2deg) rotateX(-90deg);background:#625349}
.phone>i:nth-of-type(11){inset:7.20px auto auto 7.89px;width:11.14px;height:9px;transform-origin:0 0;transform:rotateZ(123.8deg) rotateX(-90deg);background:#5A4C42}
.phone>i:nth-of-type(12){inset:15.56px auto auto 2.08px;width:11.14px;height:9px;transform-origin:0 0;transform:rotateZ(101.2deg) rotateX(-90deg);background:#52453C}
.phone>i:nth-of-type(13){inset:calc(100% - 26.49px) auto auto -0.10px;width:11.14px;height:9px;transform-origin:0 0;transform:rotateZ(78.8deg) rotateX(-90deg);background:#4C3F37}
.phone>i:nth-of-type(14){inset:calc(100% - 16.47px) auto auto 1.70px;width:11.14px;height:9px;transform-origin:0 0;transform:rotateZ(56.2deg) rotateX(-90deg);background:#463A33}
.phone>i:nth-of-type(15){inset:calc(100% - 7.89px) auto auto 7.20px;width:11.14px;height:9px;transform-origin:0 0;transform:rotateZ(33.8deg) rotateX(-90deg);background:#42362F}
.phone>i:nth-of-type(16){inset:calc(100% - 2.08px) auto auto 15.56px;width:11.14px;height:9px;transform-origin:0 0;transform:rotateZ(11.2deg) rotateX(-90deg);background:#3C312B}
.phone>i:nth-of-type(17){inset:calc(100% + 0.10px) auto auto calc(100% - 26.49px);width:11.14px;height:9px;transform-origin:0 0;transform:rotateZ(-11.2deg) rotateX(-90deg);background:#3C312B}
.phone>i:nth-of-type(18){inset:calc(100% - 1.70px) auto auto calc(100% - 16.47px);width:11.14px;height:9px;transform-origin:0 0;transform:rotateZ(-33.8deg) rotateX(-90deg);background:#42362F}
.phone>i:nth-of-type(19){inset:calc(100% - 7.20px) auto auto calc(100% - 7.89px);width:11.14px;height:9px;transform-origin:0 0;transform:rotateZ(-56.2deg) rotateX(-90deg);background:#463A33}
.phone>i:nth-of-type(20){inset:calc(100% - 15.56px) auto auto calc(100% - 2.08px);width:11.14px;height:9px;transform-origin:0 0;transform:rotateZ(-78.8deg) rotateX(-90deg);background:#4C3F37}
.lid-back{position:absolute;inset:0;display:grid;place-items:center;transform:translateZ(-8px) rotateY(180deg);border-radius:22px 22px 8px 8px;background:radial-gradient(60% 50% at 50% 42%,#3A2E28,#1E1714);--top:#F2ECE0;--bot:#C48D4F}
.lid-back svg{width:8%;aspect-ratio:192/194;opacity:.85}
.base{height:13px;margin:0;background:none;border-radius:0;transform-style:preserve-3d}
.base::before{inset:100% -14% auto;height:calc(var(--d) + 240px);border-radius:0;background:radial-gradient(closest-side,rgba(30,23,20,.28),rgba(30,23,20,0));transform-origin:50% 0;transform:translateZ(-200px) rotateX(90deg) translateZ(-1px)}   /* the shadow on the floor */
.deckx{position:absolute;inset:0 auto auto 0;width:100%;height:var(--d);transform-style:preserve-3d;transform-origin:50% 0;transform:translateZ(-10px) rotateX(90deg)}
.deck{position:absolute;inset:0;border-radius:0 0 16px 16px;background:linear-gradient(rgba(30,23,20,0) 9px,#2B221E 10px 13px,rgba(30,23,20,0) 16px),linear-gradient(#C4B8A3,#D2C7B3)}   /* the dark line is the hinge, just in front of the lid */
.deck::before{content:"";position:absolute;inset:12% 7% 45%;border-radius:5px;background:repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 calc(100% / 14 - 3px),#A99D88 0 calc(100% / 14)),repeating-linear-gradient(rgba(0,0,0,0) 0 calc(100% / 6 - 3px),#A99D88 0 calc(100% / 6)),#B9AD98;box-shadow:0 0 0 3px #A99D88}   /* keys */
.deck::after{content:"";position:absolute;inset:61% 33% 8%;border-radius:7px;background:linear-gradient(#D8CEBC,#CEC3AF);box-shadow:inset 0 0 0 1px rgba(143,132,111,.6)}   /* trackpad */
.deckx>i:nth-of-type(3){background:radial-gradient(8% 6px at 50% 0,#8F846F 98%,rgba(143,132,111,0)),linear-gradient(#CFC3AE,#A99D88)}   /* her strip and its notch, now the front edge */
.phone{position:absolute;inset:auto auto 0 66%;height:calc(50cqw + 23px);aspect-ratio:9/19;transform-style:preserve-3d;transform-origin:50% 100%;transform:translate3d(-50%,0,-160px) rotateY(198deg)}
.pf{position:absolute;inset:0;padding:8px;border-radius:26px;background:var(--night);box-shadow:inset 0 0 0 1px #4A3D35}
.pk{position:absolute;inset:0;border-radius:26px;transform:translateZ(-9px) rotateY(180deg);background:linear-gradient(155deg,#2E2420,#1A1311)}
.pk::before{content:"";position:absolute;inset:16px auto auto 16px;width:26%;aspect-ratio:1;border-radius:30%;background:radial-gradient(circle,#55473E 0 18%,#0D0908 22% 32%,#261D19 35%);box-shadow:inset 0 0 0 1px #3F332C}   /* camera */
.pscreen{height:100%;background:var(--paper);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;font-size:.66rem}
.wa-top{display:flex;align-items:center;gap:8px;padding:12px 10px 9px;background:var(--linen);border-bottom:1px solid var(--divider)}
.wa-top i{width:24px;height:24px;border-radius:50%;background:var(--wine);display:grid;place-items:center;flex:none;--top:#FAF6EE;--bot:#E2A62C} .wa-top i svg{width:13px;height:13px}
.wa-top b{display:block;font-size:.66rem;line-height:1.2} .wa-top small{font:500 .5rem var(--mono);color:var(--plaster)}
.phone .wa-chat{flex:1;padding:12px 9px} .phone .wa-chat .b{max-width:86%;font-size:.64rem}
@media (prefers-reduced-motion:reduce){.lid-back,.phone{display:none}}
.laptop{width:672px;max-width:none;margin-inline:auto;--d:269px}   /* the desktop size, fixed; the whole model is zoomed to the column by the script */
.phone{height:380px}   /* room for the French chat */
.founders{grid-template-columns:1fr 1fr} .mystery{aspect-ratio:3/4}
.legal{padding-block:72px 104px} .legal .wrap{max-width:760px}
.legal h1{font-size:clamp(2.6rem,5vw,4rem);margin:14px 0 10px}
.legal .date{font:500 .7rem var(--mono);letter-spacing:.12em;color:var(--plaster);margin:0 0 40px;text-transform:uppercase}
.legal h2{font:500 1.25rem/1.3 var(--body);margin:40px 0 10px}
.legal p,.legal li{margin:0 0 14px} .legal ul{margin:0 0 14px;padding-right:22px}
.legal .caps{font-size:.9rem;line-height:1.6} .legal a{color:var(--wine)}
.legal .va-optout{background:none;border:0;padding:0;font:inherit;color:var(--wine);text-decoration:underline;text-underline-offset:2px;cursor:pointer} .legal .va-state{color:var(--plaster)}   /* the Vercel Analytics opt-out in the privacy policy */
.consent{position:fixed;bottom:16px;inset-inline-end:16px;z-index:45;width:min(400px,calc(100vw - 32px));background:var(--paper);border:1px solid var(--oat);border-radius:var(--r-card);box-shadow:var(--shadow);padding:20px;display:grid;gap:12px;font-size:.92rem;line-height:1.5}
.consent p{margin:0;color:var(--cocoa)} .consent .textlink{white-space:nowrap}
.ck-head{display:flex;align-items:center;gap:10px;font-size:1.05rem;padding-inline-end:118px} .ck-head b{font-weight:500}
.ck-ic{width:26px;height:26px;flex:none;color:var(--oak)}
.ck-skip{position:absolute;top:17px;inset-inline-end:18px;max-width:118px;background:none;border:0;padding:2px 0;font:500 .76rem/1.25 var(--body);color:var(--plaster);text-decoration:underline;text-underline-offset:3px;text-align:end;cursor:pointer}
.ck-skip:hover{color:var(--ink)}
.ck-row,.ck-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ck-panel{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--paper);border-radius:var(--r-card);box-shadow:var(--shadow)}
.ck-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--divider)}
.ck-top h2{font:500 1.1rem/1.3 var(--body);letter-spacing:0}
.ck-body{display:grid;gap:18px;padding:18px 22px 22px}
.ck-intro{margin:0;font-size:.92rem;color:var(--plaster)}
.ck-cat{display:flex;justify-content:space-between;align-items:flex-start;gap:16px} .ck-cat b{font-weight:500} .ck-cat label{cursor:pointer}
.ck-cat p{margin:4px 0 0;font-size:.86rem;line-height:1.45;color:var(--plaster)}
.ck-req{margin-inline-start:8px;padding:3px 7px;border-radius:6px;background:var(--linen);font:500 .6rem var(--mono);letter-spacing:.1em;color:var(--plaster);vertical-align:2px}
.ck-cat input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--ink);cursor:pointer}
.ck-foot{padding:16px 22px 20px;border-top:1px solid var(--divider);background:var(--linen)}
@media (max-width:420px){.ck-row .btn,.ck-foot .btn{padding:0 8px}}
/* About and Contact open on an h1 since 23 Oct 2026, in the size her h2 had */
.about-hero h1{font-size:clamp(2.8rem,6.4vw,5.2rem);line-height:.9} .c-copy h1{font-size:clamp(3rem,6vw,5rem);line-height:.9} .c-copy h1 em{display:block}
/* Insights (Ayoub, 23 Oct 2026): the hub and the articles in her type and on her surfaces; a card wears the colour of
   its category (yolk sells, sage buys, powder for trade and customs, oak for markets) */
.ins{padding-block:72px 104px}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.icard{position:relative;display:grid;align-content:start;gap:14px;padding:30px 28px 26px;border-radius:var(--r-card);background:var(--paper);border:1px solid var(--divider);color:var(--ink);text-decoration:none;overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.icard::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--c)}
.icard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.icard h2,.icard h3{font-size:clamp(1.9rem,3vw,2.5rem);line-height:1}
.icard p{margin:0;color:var(--plaster)} .icard .more{font-weight:500;margin-top:4px}
.icard-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-media);margin-bottom:4px;background:var(--oat)}
.tag{display:inline-flex;align-items:center;gap:9px} .tag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.filters:not([hidden]){display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px} .icard[hidden]{display:none}   /* Insights filter: a chip per category and tag in use */
.filters button{flex:none;font:500 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:10px 14px;border-radius:999px;border:1px solid var(--divider);background:var(--paper);color:var(--ink);cursor:pointer}
.filters button:hover{border-color:var(--ink)} .filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media (max-width:760px){.filters:not([hidden]){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}}   /* one swipeable row on a phone */
.ins-more:not([hidden]){display:flex;margin:32px auto 0}   /* Insights: a page of articles at a time */
.ins .posts{display:block;columns:3 300px;column-gap:16px} .ins .icard{break-inside:avoid;margin-bottom:16px}   /* Insights: columns of cards of different heights, pictures never cropped (29 Oct 2026) */
.ins .icard h2{font-size:clamp(1.6rem,2.2vw,2rem)} .icard .tag{flex-wrap:wrap;row-gap:4px;white-space:nowrap}   /* the line wraps between category, date and reading time, never inside them */
.icard-extra{display:none} .icard-extra img{display:block;width:100%;height:auto;border-radius:var(--r-media);background:var(--oat)}
.ins [data-shape=two] .icard-extra,.ins [data-shape=three] .icard-extra{display:grid;gap:8px;margin-top:-6px} .ins [data-shape=three] .icard-extra{grid-template-columns:1fr 1fr} .ins [data-shape=two] .icard-extra img+img{display:none}
.ins [data-shape=text] .icard-img{display:none} .ins [data-shape=text] h2{font-size:clamp(1.9rem,2.8vw,2.5rem)}
.ins [data-shape=pic] p,.ins [data-shape=pic] .icard-tags{display:none}
.ins [data-shape=hero]{column-span:all;padding:44px 40px 36px} .ins [data-shape=hero] h2{font-size:clamp(2.4rem,4.6vw,3.6rem);max-width:20ch} .ins [data-shape=hero] p{max-width:62ch;font-size:1.1rem}   /* the newest article: big, across the columns */
@media (min-width:900px){.ins [data-shape=hero]{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:40px;align-items:center}
.ins [data-shape=hero] .icard-img{grid-column:1;grid-row:1/span 5;margin:0} .ins [data-shape=hero]>:not(.icard-img){grid-column:2}}   /* picture beside the words */
@media (max-width:760px){.ins [data-shape=hero]{padding:30px 22px 24px}}
.ins [data-shape=two] p,.ins [data-shape=three] p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.icard-tags,.post-tags{display:flex;flex-wrap:wrap;gap:6px} .post-tags{margin:36px 0 0} .post-tags .pill:hover{color:var(--ink)}
.post{padding-block:44px 64px} .post .wrap{max-width:760px}
.crumbs{display:flex;gap:10px;font:500 .72rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--plaster);margin-bottom:36px}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--ink)}
.post h1{font-size:clamp(2.7rem,6vw,4.6rem);line-height:.95;margin:16px 0 20px}
.standfirst{font-size:1.25rem;line-height:1.5;color:var(--cocoa);margin:0 0 28px}
.byline{display:flex;align-items:center;gap:14px;padding:16px 0;border-block:1px solid var(--divider);margin-bottom:32px}
.byline img,.author img{border-radius:50%;object-fit:cover;object-position:50% 18%;flex:none}
.byline b,.author b{font-weight:500} .byline b{display:block} .byline span{font-size:.88rem;color:var(--plaster)}
.toc{margin:28px 0 8px;padding:18px 0 16px;border-block:1px solid var(--divider)}
.toc ol{margin:10px 0 0;padding-inline-start:20px;display:grid;gap:6px;font-size:1rem;line-height:1.45} .post .toc a{text-decoration:none;color:var(--ink)} .post .toc a:hover{text-decoration:underline}
.post-body{font-size:1.125rem;line-height:1.7}
.post-body h2{font-size:clamp(2rem,3.6vw,2.6rem);line-height:1;margin:56px 0 18px;scroll-margin-top:90px}
.post-body h3{font:500 1.2rem/1.35 var(--body);margin:32px 0 10px}
.post-body p,.post-body ul,.post-body ol{margin:0 0 18px} .post-body li{margin-bottom:6px}
.post-body a{color:var(--wine)} .post-body strong{font-weight:600}
.inshort{background:var(--paper);border:1px solid var(--divider);border-radius:var(--r-card);padding:22px 26px;margin:0 0 8px}
.inshort .eyebrow{display:block;margin-bottom:8px} .inshort>:last-child{margin-bottom:0}
.post-fig{margin:32px 0} .post-fig img{width:100%;height:auto;border-radius:var(--r-media);background:var(--oat)}
.pull{font:400 clamp(1.7rem,3vw,2.2rem)/1.15 var(--display);color:var(--wine);margin:36px 0;padding-inline-start:20px;border-inline-start:3px solid var(--yolk)}
.tablewrap{overflow-x:auto;margin:0 0 24px;border:1px solid var(--divider);border-radius:var(--r-media);background:var(--paper)}
.post-body table{border-collapse:collapse;width:100%;font-size:.98rem;line-height:1.45}
.post-body th,.post-body td{padding:12px 14px;text-align:start;vertical-align:top;border-bottom:1px solid var(--divider)}
.post-body th{font:500 .7rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--plaster);background:var(--linen)}
.post-body tr:last-child td{border-bottom:0}
.checklist{list-style:none;padding:0} .checklist li{position:relative;padding-inline-start:32px}
.checklist li::before{content:"✓";position:absolute;inset-inline-start:0;top:.2em;width:20px;height:20px;border-radius:6px;background:var(--sage);color:var(--paper);font:600 .8rem/20px var(--body);text-align:center}
.author{display:flex;gap:18px;align-items:flex-start;margin:56px 0 0;padding-top:28px;border-top:1px solid var(--divider)}
.author p{margin:0;font-size:1rem;line-height:1.6;color:var(--cocoa)}
.post-cta{display:grid;gap:14px;margin:40px 0 0;padding:36px;border-radius:var(--r-panel);background:var(--paper);border:1px solid var(--divider)}
.post-cta h2{font-size:clamp(2.1rem,4vw,3rem);line-height:.95} .post-cta p{margin:0;color:var(--cocoa);max-width:52ch}
.related{padding-block:8px 104px} .related .wrap{max-width:1000px} .related .eyebrow{display:block;margin-bottom:18px}
@media (max-width:760px){.posts{grid-template-columns:minmax(0,1fr)}.ins{padding-block:48px 72px}.icard{padding:26px 22px 22px}
.post-body{font-size:1.06rem}.standfirst{font-size:1.12rem}.post-cta{padding:26px 22px}.author{flex-direction:column;gap:12px}.inshort{padding:20px}}
/* Arabic: her three families get an Arabic face from IBM Plex Sans Arabic for Arabic letters only (assets/fonts, OFL). */
@font-face{font-family:'DM Sans';font-weight:400;src:url(/assets/fonts/plex-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC}
@font-face{font-family:'DM Sans';font-weight:500;src:url(/assets/fonts/plex-arabic-500.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC}
@font-face{font-family:'DM Sans';font-weight:600 900;src:url(/assets/fonts/plex-arabic-600.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC}
@font-face{font-family:'Instrument Serif';font-weight:400;src:url(/assets/fonts/plex-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC}
@font-face{font-family:'Instrument Serif';font-weight:400;font-style:italic;src:url(/assets/fonts/plex-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC}
@font-face{font-family:'JetBrains Mono';font-weight:400;src:url(/assets/fonts/plex-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC}
@font-face{font-family:'JetBrains Mono';font-weight:500 700;src:url(/assets/fonts/plex-arabic-500.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC}
html[lang=ar] *{letter-spacing:0!important}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{line-height:1.15}

/* right to left extras */
.hero .ticks{right:auto;left:0}
.eyebrow.dash::before{margin-right:0;margin-left:10px}
.door .go i,.reach .arr,.cat i{transform:scaleX(-1)}
.door:hover .go i{transform:scaleX(-1) translateX(4px)}
.world{left:50%;right:auto}.belt{left:-420px;right:auto}.box{left:0;right:auto}
.door.have .pcard{--door-ry:16deg;--door-rz:3deg}.door.need .pcard{--door-ry:-16deg;--door-rz:-3deg}
.float.f1{--fy:-24deg;--fz:6deg}.float.f2{--fy:22deg;--fz:-7deg}
@media (min-width:561px){.doors{background:linear-gradient(90deg,var(--sage) 0 calc(50% - 3px),var(--cocoa) calc(50% - 3px) calc(50% + 3px),var(--yolk) calc(50% + 3px))}.door.have{clip-path:inset(0 0 0 -40%)}.door.need{clip-path:inset(0 -40% 0 0)}}