/* WEAVRA marketing site. Colours and type live in tokens.css (--bg, --ink, --mute, --line, --card, --acc).
   The fallbacks in var() only apply when tokens.css is not served.
   Home = a sequence of full viewport sections that alternate black and white in BOTH themes (SANDOW manner).
   The nav and the footer follow the theme. Inner pages (pricing, owner, geo, mills) keep the theme surfaces. */
:root{--pill:var(--btn,var(--ink,#fff));--pillink:var(--btnink,var(--bg,#000));--soft:color-mix(in srgb,var(--ink,#fff) 78%,var(--bg,#000));--k:color-mix(in srgb,var(--card,#141414) 70%,var(--bg,#000));--site-radius:16px;--navh:64px}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark light}
html[data-theme="light"]{color-scheme:light} html[data-theme="light"] body{background:#F2F0EB}
body{background:#060606;color:var(--ink,#fff);font-family:var(--font,"Helvetica Neue",Helvetica,Arial,sans-serif);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{padding-inline:20px;max-width:1440px;margin:0 auto}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--navh);gap:8px}
.nav .wm{height:11px;color:var(--ink,#fff);display:block;flex:none} .nav .wm svg{height:100%;width:auto;display:block}
.nav .r{display:flex;align-items:center;gap:6px;min-width:0;flex:none}
.lang{display:inline-flex;align-items:center;border:1px solid var(--line,#262626);border-radius:999px;height:34px;padding:0 3px;flex:none}
.lang button,.lang a{height:26px;padding:0 6px;border:0;background:transparent;border-radius:999px;font-size:10px;letter-spacing:.08em;font-weight:500;color:var(--mute,#8c8c8c);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;text-transform:uppercase}
.lang [aria-pressed="true"],.lang [aria-current="page"]{color:var(--pillink);background:var(--pill)}
.tg{width:34px;height:34px;border-radius:999px;border:1px solid var(--line,#262626);background:transparent;color:var(--ink,#fff);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none} .tg svg{width:17px;height:17px;display:block}
.tg .moon{display:none} html[data-theme="light"] .tg .sun{display:none} html[data-theme="light"] .tg .moon{display:block}
.pill{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 12px;border-radius:999px;background:var(--pill);color:var(--pillink);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;border:1px solid var(--pill);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.pill:hover{background:transparent;color:var(--ink,#fff)}
.pill.o{background:transparent;color:var(--ink,#fff);border:1px solid var(--ink,#fff)}
.pill.o:hover{background:var(--pill);color:var(--pillink)}
.lab{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--mute,#8c8c8c);display:block}
h1{font-size:clamp(38px,10vw,112px);line-height:1.02;font-weight:500;letter-spacing:-.03em;max-width:12ch;text-wrap:balance}

/* intro */
#intro{position:fixed;inset:0;z-index:60;background:#000;overflow:hidden;transition:opacity .5s ease} #intro.out{opacity:0;pointer-events:none} #intro.gone{display:none}
#intro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0} #intro img.on{opacity:1}
#intro .iw{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff} #intro .iw svg{width:86vw;max-width:1200px;height:auto;display:block}
#intro .il,#intro .ir{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom,0px));font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:#fff;max-width:45vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #intro .il{left:20px} #intro .ir{right:20px;text-align:right}
#intro .ie{position:absolute;left:0;right:0;bottom:calc(40px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;color:#fff;opacity:0;transition:opacity .4s} #intro .ie svg{height:10px;width:auto} #intro.end .ie{opacity:1} #intro.end .il,#intro.end .ir{opacity:0}

/* home v3 (Sarah, 2026-09-20): one statement per screen, near absolute black (#060606) and an off white (#F2F0EB) that is
   not clinical, in both themes. Acid green only on the crop of the selected textile, the ticks of the edit and focus rings.
   No cards, no carousel, no floating percentages. One animation at a time: a section fades in once, nothing else moves. */
.home{display:block;--kbg:var(--k-bg,#000);--kink:var(--k-ink,#F2F0EB);--wbg:var(--w-bg,#F2F0EB);--wink:var(--w-ink,#060606);--kmute:var(--k-mute,#8c8c8c);--wmute:var(--w-mute,#808080)}
/* no forced full screens (Sarah: luxury is not giant titles on empty screens): each screen carries a fabric, an answer or a document */
.s{display:flex;flex-direction:column;justify-content:center;padding:88px 20px}
.s.first{min-height:calc(82svh - var(--navh));padding-top:40px}
.s.conv{padding-top:0}
.s.k{background:var(--kbg);color:var(--kink)} .s.w{background:var(--wbg);color:var(--wink)}
.s.last{padding-block:72px}
.s .in{width:100%;max-width:1440px;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start}
.s .lab{margin-bottom:22px} .s.k .lab{color:var(--kmute)} .s.w .lab{color:var(--wmute)}
.hd2{font-size:clamp(32px,6.4vw,96px);font-weight:700;letter-spacing:-.035em;line-height:.94;text-transform:uppercase;max-width:100%;overflow-wrap:normal}
.hd2.small{font-size:clamp(22px,3.4vw,52px)}
.hd2.lines{line-height:1.02}
.s .one{font-size:clamp(17px,2vw,26px);line-height:1.42;max-width:40ch;margin-top:28px;font-weight:400}
.s.k .one{color:color-mix(in srgb,var(--kink) 86%,var(--kbg))} .s.w .one{color:color-mix(in srgb,var(--wink) 86%,var(--wbg))}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.s .pill{height:52px;padding:0 26px;font-size:16px;text-transform:uppercase;letter-spacing:.04em;font-weight:500}
.s.k .pill{background:var(--kink);color:var(--kbg);border-color:var(--kink)} .s.w .pill{background:var(--wink);color:var(--wbg);border-color:var(--wink)}
.s.k .pill.o{background:transparent;color:var(--kink)} .s.w .pill.o{background:transparent;color:var(--wink)}
.s.k .pill:hover{background:transparent;color:var(--kink)} .s.w .pill:hover{background:transparent;color:var(--wink)}
.s.k .pill.o:hover{background:var(--kink);color:var(--kbg)} .s.w .pill.o:hover{background:var(--wink);color:var(--wbg)}
/* the conversation: her brief in quotation, Neith's answer, three real results */
.brief{font-size:clamp(24px,3.6vw,54px);line-height:1.12;font-weight:400;letter-spacing:-.02em;max-width:22ch;margin-top:8px}
.brief .q{color:var(--kmute)}
.answer{margin-top:26px;font-size:clamp(16px,1.6vw,21px);line-height:1.45;max-width:52ch;color:color-mix(in srgb,var(--kink) 82%,var(--kbg))} .answer b{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.8em;margin-inline-end:6px}
.note{margin-top:34px;font-size:12px;letter-spacing:.04em;line-height:1.5;color:var(--kmute);max-width:60ch}
/* the count */
.big{font-size:clamp(26px,4.2vw,64px);font-weight:700;letter-spacing:-.035em;line-height:1;text-transform:uppercase;font-variant-numeric:tabular-nums}
.big b{font-weight:700} .count .lab{margin:18px 0 0}
/* text beside a figure */
.in.two{gap:40px} .in.two .txt{display:flex;flex-direction:column;align-items:flex-start;width:100%}
.frame{position:relative;width:100%;max-width:520px;aspect-ratio:4/5;overflow:hidden;background:var(--w-card,#e6e6e6);margin:0}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame .crop{position:absolute;left:22%;top:34%;width:36%;height:30%;border:1.5px solid var(--acc,#87E64B);box-shadow:0 0 0 9999px rgba(6,6,6,.28)}
.frame .crop i{position:absolute;left:0;bottom:calc(100% + 8px);font-style:normal;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--acc,#87E64B);background:var(--k-bg,#000);padding:3px 6px;white-space:nowrap} /* a black chip under the label: 12:1 whatever the photograph (audit 2026-09-20, measured 1.25:1 on the placeholder) */
.a4{width:100%;max-width:440px;margin:0;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.08),0 30px 60px -30px rgba(0,0,0,.35)} .a4 img{width:100%;height:auto;display:block}
/* results: three, image and one observation each, rules not cards */
.results{list-style:none;width:100%;display:grid;gap:34px;margin-top:44px;counter-reset:r}
.results li{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto auto;gap:4px 18px;padding-top:22px;border-top:1px solid var(--k-line,#262626);min-width:0}
.results img{grid-row:1/4;width:96px;height:96px;object-fit:cover;display:block;background:var(--k-card,#141414)}
.results b{font-size:15px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;line-height:1.2}
.results small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--kmute)}
.results p{font-size:15px;line-height:1.45;color:color-mix(in srgb,var(--kink) 80%,var(--kbg));max-width:56ch}
/* the edit: six, ticked in acid green, the only green on the page apart from the crop */
.edit{list-style:none;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px;margin-top:44px}
.edit li{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0} /* min-width:0: a nowrap <small> can no longer widen its column past the viewport (audit 2026-09-20: 414 px at 390, 1155 px at 820) */
.edit img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--k-card,#141414)}
.edit .tick{position:absolute;top:10px;left:10px;width:22px;height:22px;background:var(--acc,#87E64B)} .edit .tick:after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)}
.edit b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin-top:6px;line-height:1.2}
.edit small{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--kmute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* reveal, once */
.s .in{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease} .s.in .in{opacity:1;transform:none}
.s.first .in{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){.s .in{opacity:1;transform:none;transition:none}}

/* footer, shared by every marketing page */
.foot{padding-block:52px 56px;display:flex;flex-wrap:wrap;gap:26px 40px;align-items:flex-start;justify-content:space-between;border-top:1px solid var(--line,#262626)}
.foot .wm{height:12px;color:var(--ink,#fff)} .foot .wm svg{height:100%;width:auto;display:block}
.foot ul{display:flex;flex-wrap:wrap;gap:14px 22px;list-style:none;max-width:100%} .foot li{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute,#8c8c8c)} .foot li a{color:inherit;text-decoration:none} .foot li a:hover{color:var(--ink,#fff)}
.desc{height:9px;color:var(--mute,#8c8c8c);margin-top:12px} .desc svg{height:100%;width:auto;display:block}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc,#87E64B);outline-offset:3px}

/* inner pages: pricing, owner, geo, mills */
.page{padding-block:28px 10px}
.page h1{font-size:clamp(34px,7vw,84px);max-width:16ch}
.page .lab{margin-bottom:16px}
.page .intro{margin-top:22px;font-size:17px;line-height:1.55;color:var(--soft);max-width:60ch}
.plans{display:grid;gap:16px;margin-top:40px}
.plan{background:var(--card,#141414);border-radius:20px;padding:26px 22px;display:flex;flex-direction:column;gap:14px}
.plan h2{font-size:30px;font-weight:500;letter-spacing:-.025em}
.plan .price{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ink,#fff);padding:12px 0;border-top:1px solid var(--line,#262626);border-bottom:1px solid var(--line,#262626)}
.plan p{font-size:15px;line-height:1.5;color:var(--soft)}
.plan ul{list-style:none;display:grid;gap:10px;font-size:15px;line-height:1.45}
.plan li{display:flex;gap:10px;align-items:flex-start} .plan li:before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--acc,#87E64B);margin-top:8px}
.plan .pill{align-self:flex-start;margin-top:auto;height:44px;padding:0 20px;font-size:15px}
.note{margin-top:28px;font-size:13px;line-height:1.5;color:var(--mute,#8c8c8c);max-width:60ch}
.stats{display:grid;gap:12px;margin-top:34px;grid-template-columns:repeat(2,1fr)}
.stat{background:var(--card,#141414);border-radius:16px;padding:20px 18px;min-height:112px;display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.stat .v{font-size:34px;font-weight:500;letter-spacing:-.03em;line-height:1;word-break:break-word} .stat .v.nm{font-size:15px;color:var(--mute,#8c8c8c);letter-spacing:0;text-transform:none}
.h2{font-size:26px;font-weight:500;letter-spacing:-.02em;margin-top:52px}
.tw{overflow-x:auto;margin-top:18px;-webkit-overflow-scrolling:touch;border:1px solid var(--line,#262626);border-radius:12px}
table.reg{border-collapse:collapse;width:100%;min-width:760px;font-size:13px;line-height:1.45}
table.reg th,table.reg td{text-align:start;padding:12px 14px;border-bottom:1px solid var(--line,#262626);vertical-align:top}
table.reg th{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--mute,#8c8c8c);white-space:nowrap}
table.reg tr:last-child td{border-bottom:0}
.src{margin-top:12px;font-size:12px;color:var(--mute,#8c8c8c)}
.geo .text{margin-top:30px;display:grid;gap:18px;font-size:17px;line-height:1.6;color:var(--soft);max-width:66ch}
.geo .cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}
.geo .cta .pill{height:48px;padding:0 22px;font-size:15px}
.geo .facts{margin-top:40px;display:grid;gap:14px}
.geo .fact{background:var(--card,#141414);border-radius:16px;padding:20px 18px} .geo .fact h3{font-size:22px;font-weight:500;letter-spacing:-.02em;margin-bottom:8px} .geo .fact p{font-size:14px;line-height:1.5;color:var(--soft)}
.cities{display:grid;gap:10px;margin-top:30px;grid-template-columns:repeat(2,1fr)}
.cities .city{display:block;background:var(--card,#141414);border-radius:14px;padding:16px;font-size:15px;line-height:1.3} .cities .city a{text-decoration:none} .cities .city .n{display:block} .cities .city small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute,#8c8c8c);margin-top:6px} .cities .city small a:hover,.cities .city .n:hover{color:var(--acc,#87E64B)}
.cities .rg{grid-column:1/-1;margin-top:18px}

/* mills page: one line per mill, square rules, no cards */
.mg{margin-top:44px}
.mg .h2{margin-top:0}
.ml{list-style:none;margin-top:16px;border-top:1px solid var(--line,#262626)}
.ml li{display:grid;grid-template-columns:1fr;gap:6px 24px;padding:20px 0;border-bottom:1px solid var(--line,#262626);font-size:15px;line-height:1.45}
.ml b{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1;display:flex;align-items:center;gap:10px}
.ml b:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--acc,#87E64B)}
.ml .city{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--mute,#8c8c8c);align-self:center}
.ml .what{color:var(--soft);max-width:60ch}
.ml .cnt{color:var(--mute,#8c8c8c);font-variant-numeric:tabular-nums}

/* Arabic: connected script keeps its natural spacing */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] .hd,[dir="rtl"] .num b,[dir="rtl"] .list b,[dir="rtl"] .ml b{letter-spacing:0}
[dir="rtl"] .lab,[dir="rtl"] .num span,[dir="rtl"] .foot li,[dir="rtl"] .plan .price,[dir="rtl"] .cities a small,[dir="rtl"] .ml .city{letter-spacing:0}
[dir="rtl"] .lang button,[dir="rtl"] .lang a{letter-spacing:.06em}
[data-lang="fr"] .hd2{font-size:clamp(30px,6.4vw,110px)}
[data-lang="fr"] .hd2,[data-lang="fr"] .hd2.lines{line-height:1.08} /* accented capitals (É, È, À, Ç) touched the line above at .94 */
[dir="rtl"] .hd2,[dir="rtl"] .big,[dir="rtl"] .results b,[dir="rtl"] .edit b{letter-spacing:0}

@media (min-width:760px){
 :root{--navh:88px}
 .wrap{padding-inline:40px} .nav{gap:18px} .nav .wm{height:18px} .nav .r{gap:14px} .pill{height:48px;padding:0 22px;font-size:16px} .tg{width:42px;height:42px} .lang{height:42px;padding:0 4px} .lang button,.lang a{height:32px;padding:0 10px;font-size:11px;letter-spacing:.12em}
 .s{padding:120px 40px} .s.first{padding-top:60px} .s .lab{margin-bottom:28px} .s .one{margin-top:36px} .ctas{margin-top:44px;gap:14px} .s .pill{height:56px;padding:0 30px;font-size:17px}
 .in.two{flex-direction:row;align-items:center;justify-content:space-between;gap:60px} .in.two .txt{flex:1 1 52%} .frame{flex:0 0 min(38%,520px)} .a4{flex:0 0 min(34%,440px)}
 .results{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px} .results li{grid-template-columns:1fr;grid-template-rows:auto;padding-top:0;border-top:0} .results img{grid-row:auto;width:100%;height:auto;aspect-ratio:1;margin-bottom:14px}
 .edit{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px} .edit .tick{width:26px;height:26px} .edit .tick:after{left:9px;top:4px;width:7px;height:13px}
 .list li{padding:32px 0;gap:8px 32px}
 .foot{padding-block:64px 72px}
 .plans{grid-template-columns:repeat(3,1fr);gap:22px} .plan{padding:36px 30px} .stats{grid-template-columns:repeat(3,1fr)} .stat{padding:26px 24px;min-height:140px} .stat .v{font-size:44px}
 .geo .facts{grid-template-columns:repeat(3,1fr)} .cities{grid-template-columns:repeat(3,1fr)}
 .page{padding-block:48px 10px}
 .ml li{grid-template-columns:minmax(180px,.8fr) 2.4fr;grid-template-areas:"name what" "city cnt";gap:8px 32px;align-items:start;padding:24px 0}
 .ml b{grid-area:name} .ml .city{grid-area:city;align-self:start} .ml .what{grid-area:what} .ml .cnt{grid-area:cnt}
}
@media (min-width:1000px){
 .nums{grid-template-columns:auto auto auto;justify-content:space-between;gap:40px 60px}
 .num b{font-size:clamp(96px,9.4vw,144px)}
}
@media (min-width:1100px){
 .ml li{grid-template-columns:minmax(180px,.9fr) minmax(120px,.5fr) 2.2fr minmax(210px,.9fr);grid-template-areas:"name city what cnt";align-items:baseline}
 .ml .cnt{text-align:end}
}
@media (min-width:1200px){ .stats{grid-template-columns:repeat(5,1fr)} .cities{grid-template-columns:repeat(4,1fr)} }
/* rtl, voyant 2026-09-24 */
[dir="rtl"] .frame .crop i,[dir="rtl"] .edit small,[dir="rtl"] .plan li,[dir="rtl"] .btn,[dir="rtl"] .cta a{letter-spacing:0}
[dir="rtl"] .results p,[dir="rtl"] .edit small,[dir="rtl"] .conv q,[dir="rtl"] .conv p{unicode-bidi:plaintext}

/* failure study C, 2026-10-01. Safari and the iOS app draw letter-spaced Arabic (WebKit) with its letters pulled apart, and
   Chrome spreads it: every tracked or tightened style that can carry Arabic is reset in the Arabic pages (the pills of the nav
   and of the home, the notes, the brief, the cards of the city pages, the plan names, the owner figures and table heads) */
[dir="rtl"] .pill,[dir="rtl"] .note,[dir="rtl"] .answer b,[dir="rtl"] .brief,[dir="rtl"] .geo .fact h3,[dir="rtl"] .plan h2,[dir="rtl"] .stat .v,[dir="rtl"] table.reg th{letter-spacing:0}
/* the city pages: the mills at launch, the label on its line then the names apart (they read "LibraryPierre FreyUltrafabrics") */
.geo .mills{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin-top:40px;font-size:17px;line-height:1.45;color:var(--ink,#fff)}
.geo .mills span{flex-basis:100%;margin-bottom:4px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--mute,#8c8c8c)}
[dir="rtl"] .geo .mills span{letter-spacing:0;font-size:13px}
/* the iOS app sells nothing (Apple guideline 3.1.1): marked data-native by the head of the page, the Pricing link of the
   footers (data-web-only) is never drawn in it, as in app.css */
[data-native] [data-web-only]{display:none !important}