/* Tera Textiles - site styles. Tokens come from the brand's own logo and posts. */
@layer base, layout, parts, pages, motion;

@layer base {
  :root {
    --ink: #363739;
    --ink-deep: #2a2b2d;
    --paper: #edf1f2;
    --paper-2: #e2e7e9;
    --thread: #f0d030;
    --thread-deep: #c9a60a;
    --muted: #6a6e72;
    --line: rgba(54, 55, 57, .18);
    --line-light: rgba(237, 241, 242, .28);
    --gutter: clamp(20px, 5.2vw, 84px);
    --max: 1280px;
    --ease: cubic-bezier(.16, 1, .3, 1);
    --display: "Archivo", "Alexandria", "Noto Sans SC", system-ui, sans-serif;
    --body: "Archivo", "Alexandria", "Noto Sans SC", system-ui, sans-serif;
    --mono: "IBM Plex Mono", "Alexandria", "Noto Sans SC", ui-monospace, monospace;
    --hdr: 76px;
  }
  html[lang="ar"] { --display: "Alexandria", "Archivo", sans-serif; --body: "Alexandria", "Archivo", sans-serif; --mono: "Alexandria", "IBM Plex Mono", sans-serif; }
  html[lang="zh"] { --display: "Noto Sans SC", "Archivo", sans-serif; --body: "Noto Sans SC", "Archivo", sans-serif; --mono: "IBM Plex Mono", "Noto Sans SC", monospace; }

  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden; position: relative; }
  html[lang="ar"] body { line-height: 1.85; }
  html[lang="zh"] body { line-height: 1.8; font-size: 1.09rem; }
  img, video, svg { display: block; max-width: 100%; }
  a { color: inherit; }
  h1, h2, h3, p, ul, ol, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  :focus-visible { outline: 3px solid var(--thread); outline-offset: 3px; border-radius: 2px; }
  ::selection { background: var(--thread); color: var(--ink); }
  .vh { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
  .skip { position: absolute; inset-inline-start: 12px; top: -80px; z-index: 100; background: var(--thread); color: var(--ink); padding: 10px 16px; font-weight: 700; }
  .skip:focus { top: 12px; }
}

@layer layout {
  .wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
  .sec { padding-block: clamp(64px, 9vw, 132px); }
  .sec--tight { padding-block: clamp(44px, 6vw, 84px); }
  .dark { background: var(--ink); color: var(--paper); }
  .grid-2 { display: grid; gap: clamp(28px, 5vw, 80px); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  @media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
}

@layer parts {
  /* ---- type */
  .display { font-family: var(--display); font-weight: 760; font-stretch: 112%; line-height: 1.02; letter-spacing: -.022em; font-size: clamp(2.5rem, 7vw, 6.1rem); text-wrap: balance; }
  html[lang="ar"] .display { line-height: 1.32; letter-spacing: 0; font-weight: 700; font-size: clamp(2.2rem, 6vw, 5rem); }
  html[lang="zh"] .display { line-height: 1.22; letter-spacing: .01em; font-weight: 900; font-size: clamp(2.2rem, 6vw, 5rem); }
  .h2 { font-family: var(--display); font-weight: 720; font-stretch: 108%; line-height: 1.08; letter-spacing: -.016em; font-size: clamp(1.9rem, 4.2vw, 3.5rem); text-wrap: balance; }
  html[lang="ar"] .h2 { line-height: 1.4; letter-spacing: 0; }
  html[lang="zh"] .h2 { line-height: 1.3; letter-spacing: .01em; }
  .h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.25; }
  html[lang="ar"] .h3 { line-height: 1.6; }
  .lead { font-size: clamp(1.12rem, 1.55vw, 1.4rem); line-height: 1.5; max-width: 40em; }
  html[lang="ar"] .lead { line-height: 1.85; }
  html[lang="zh"] .lead { line-height: 1.8; max-width: 30em; }
  .muted { color: var(--muted); }
  .dark .muted { color: rgba(237, 241, 242, .7); }
  .hl { background: linear-gradient(transparent 64%, var(--thread) 64%, var(--thread) 92%, transparent 92%); }

  /* ---- sewn label */
  .tag { display: inline-flex; align-items: center; gap: .6em; font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: .5em .9em; border: 1px dashed currentColor; border-radius: 2px; }
  html[lang="ar"] .tag, html[lang="zh"] .tag { letter-spacing: .04em; font-size: .86rem; }
  .tag::before { content: ""; width: .5em; height: .5em; background: var(--thread); border-radius: 50%; flex: none; }

  /* ---- buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 52px; padding: .8em 1.5em; font-weight: 700; font-size: 1rem; text-decoration: none; border-radius: 2px; transition: transform .35s var(--ease), background .25s, color .25s, box-shadow .25s; }
  .btn--y { background: var(--thread); color: var(--ink); box-shadow: inset 0 0 0 0 var(--ink); }
  .btn--y:hover { box-shadow: inset 0 -4px 0 0 var(--ink); transform: translateY(-2px); }
  .btn--line { box-shadow: inset 0 0 0 1.5px currentColor; }
  .btn--line:hover { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--paper); }
  .paperbg .btn--line:hover, .btn--ink:hover { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
  .btn .arr { width: 1.1em; height: 1.1em; flex: none; transition: transform .35s var(--ease); }
  [dir="rtl"] .arr { transform: scaleX(-1); }
  .btn:hover .arr { transform: translateX(5px); }
  [dir="rtl"] .btn:hover .arr { transform: scaleX(-1) translateX(5px); }
  .btns { display: flex; flex-wrap: wrap; gap: 14px; }
  .link { display: inline-flex; align-items: center; gap: .6em; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--thread); padding-bottom: 3px; }
  .link .arr { width: 1em; height: 1em; transition: transform .35s var(--ease); }
  .link:hover .arr { transform: translateX(5px); }
  [dir="rtl"] .link:hover .arr { transform: scaleX(-1) translateX(5px); }

  /* ---- header */
  .hdr { position: fixed; inset-inline: 0; top: 0; z-index: 60; height: var(--hdr); display: flex; align-items: center; gap: 24px; padding-inline: var(--gutter); color: var(--paper); transition: background .3s, color .3s, box-shadow .3s; }
  /* dark fade behind the bar so light text stays readable over bright video frames */
  .hdr::before { content: ""; position: absolute; inset: 0 0 auto; height: 200%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(22, 23, 25, .66) 0%, rgba(22, 23, 25, .48) 50%, rgba(22, 23, 25, 0) 100%); transition: opacity .3s; }
  .hdr.is-solid::before, .hdr--paper::before { opacity: 0; }
  .hdr.is-solid, .hdr--paper { background: rgba(237, 241, 242, .94); color: var(--ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
  .hdr__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
  .bird { display: block; height: auto; }
  .hdr__logo .bird { width: 98px; }
  @media (max-width: 560px) { .hdr__logo .bird { width: 80px; } }
  .hdr__name { font-family: "Archivo", sans-serif; font-weight: 600; letter-spacing: .16em; font-size: .78rem; text-transform: uppercase; }
  .nav { display: flex; gap: 2px; margin-inline-start: auto; flex: none; }
  .nav__item { position: relative; }
  .nav__btn { display: flex; align-items: center; gap: .4em; min-height: 44px; padding: 10px 12px; font-weight: 600; font-size: .95rem; border-radius: 2px; white-space: nowrap; }
  .nav__btn svg { width: .7em; height: .7em; flex: none; transition: transform .25s; }
  .nav__item.is-open .nav__btn svg { transform: rotate(180deg); }
  .nav__panel { position: absolute; top: 100%; inset-inline-start: -8px; min-width: 250px; padding: 10px; background: var(--paper); color: var(--ink); box-shadow: 0 18px 50px rgba(0, 0, 0, .18); border-top: 3px solid var(--thread); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .25s var(--ease), visibility .2s; }
  .nav__item.is-open .nav__panel { opacity: 1; visibility: visible; transform: none; }
  /* open on hover only where there is a mouse; on touch a tap opens and a tap closes */
  @media (hover: hover) and (pointer: fine) {
    .nav__item:hover .nav__panel { opacity: 1; visibility: visible; transform: none; }
    .nav__item:hover .nav__btn svg { transform: rotate(180deg); }
  }
  .nav__panel a { display: block; padding: 9px 12px; text-decoration: none; font-weight: 500; font-size: .98rem; border-radius: 2px; }
  .nav__panel a:hover, .nav__panel a[aria-current] { background: var(--paper-2); }
  .nav__panel a[aria-current] { box-shadow: inset 3px 0 0 var(--thread); }
  [dir="rtl"] .nav__panel a[aria-current] { box-shadow: inset -3px 0 0 var(--thread); }
  .hdr__end { display: flex; align-items: center; gap: 14px; flex: none; }
  .lang { display: flex; align-items: center; gap: 2px; font-size: .86rem; font-weight: 500; }
  /* 44px touch area; the underline is drawn as a background so it stays close to the text */
  .lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 9px; text-decoration: none; line-height: 1.2; background: linear-gradient(var(--thread), var(--thread)) no-repeat center calc(50% + 1.08em) / 0 2px; transition: background-size .25s var(--ease); }
  .lang a:hover { background-size: calc(100% - 18px) 2px; }
  .lang a[aria-current] { font-weight: 700; background-size: calc(100% - 18px) 2px; }
  .lang a[lang="ar"] { font-family: "Alexandria", sans-serif; }
  /* The two-character Chinese label uses the device's own Chinese font on the other languages, so they never
     download our Chinese font file. (Do not give one family several font files: see prepare_fonts.py.) */
  .lang a[lang="zh"] { font-family: system-ui, sans-serif; }
  html[lang="zh"] .lang a[lang="zh"] { font-family: "Noto Sans SC", sans-serif; }
  .hdr .btn { min-height: 44px; padding: .55em 1.1em; font-size: .92rem; white-space: nowrap; }
  .burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
  .burger span { display: block; width: 24px; height: 2px; background: currentColor; box-shadow: 0 7px 0 currentColor, 0 -7px 0 currentColor; }
  /* The full menu needs a different width in each language. Measured with qa_navfit.py (six menu items):
     English 1348 px, Arabic 1236 px, Chinese 1028 px without the wordmark; 1496 / 1384 / 1180 px with it.
     Below the first width the bar is logo + languages + quote button + menu button. */
  @media (max-width: 1043px) {
    .nav { display: none; }
    .hdr__end { margin-inline-start: auto; }
    .burger { display: flex; }
  }
  @media (max-width: 1251px) {
    :root[lang="ar"] .nav { display: none; }
    :root[lang="ar"] .hdr__end { margin-inline-start: auto; }
    :root[lang="ar"] .burger { display: flex; }
  }
  @media (max-width: 1363px) {
    :root[lang="en"] .nav { display: none; }
    :root[lang="en"] .hdr__end { margin-inline-start: auto; }
    :root[lang="en"] .burger { display: flex; }
  }
  /* full menu showing, but no room yet for the wordmark beside the logo */
  @media (min-width: 1044px) and (max-width: 1195px) { :root[lang="zh"] .hdr__name { display: none; } }
  @media (min-width: 1252px) and (max-width: 1399px) { :root[lang="ar"] .hdr__name { display: none; } }
  @media (min-width: 1364px) and (max-width: 1511px) { :root[lang="en"] .hdr__name { display: none; } }
  @media (max-width: 719px) { .hdr .btn { display: none; } }
  @media (max-width: 540px) { .hdr__name { display: none; } }
  @media (max-width: 420px) { :root { --hdr: 66px; } }
  @media (max-width: 359px) { .hdr { gap: 12px; } .hdr__end { gap: 8px; } .hdr__logo .bird { width: 72px; } .hdr .lang a { min-width: 40px; padding: 0 6px; } }

  /* ---- mobile menu */
  .mnav { position: fixed; inset: 0; z-index: 80; background: var(--ink); color: var(--paper); padding: 20px var(--gutter) 40px; overflow-y: auto; transform: translateY(-102%); transition: transform .5s var(--ease); visibility: hidden; }
  .mnav.is-open { transform: none; visibility: visible; }
  .mnav__top { display: flex; align-items: center; justify-content: space-between; height: 46px; margin-bottom: 20px; }
  .mnav__top .bird { width: 82px; }
  .mnav__x { width: 44px; height: 44px; font-size: 1.8rem; line-height: 1; }
  .mnav details { border-bottom: 1px solid var(--line-light); }
  .mnav summary { list-style: none; padding: 18px 0; font-family: var(--display); font-size: 1.5rem; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
  .mnav summary::-webkit-details-marker { display: none; }
  .mnav summary::after { content: "+"; font-weight: 400; color: var(--thread); }
  .mnav details[open] summary::after { content: "\2212"; }
  .mnav details a { display: block; padding: 11px 0 11px; padding-inline-start: 16px; text-decoration: none; font-size: 1.08rem; opacity: .9; }
  .mnav details a:last-child { margin-bottom: 14px; }
  .mnav .btn { width: 100%; margin-top: 28px; }
  .mnav .lang { margin-top: 26px; font-size: 1.05rem; gap: 10px; }
  /* tablet and wider: every group visible side by side, no accordions (site.js opens them) */
  @media (min-width: 700px) {
    .mnav { padding-top: 15px; }
    .mnav__top { margin-bottom: 34px; }
    .mnav__top .bird { width: 98px; }
    .mnav__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 56px); align-items: start; }
    .mnav details { border-bottom: 0; }
    .mnav summary { padding: 0 0 12px; margin-bottom: 8px; font-size: 1.2rem; cursor: default; pointer-events: none; border-bottom: 2px solid var(--thread); }
    .mnav summary::after, .mnav details[open] summary::after { content: none; }
    .mnav details a { display: flex; align-items: center; min-height: 44px; padding: 4px 0; font-size: 1.02rem; }
    .mnav details a:last-child { margin-bottom: 0; }
    .mnav__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line-light); }
    .mnav .btn { width: auto; margin-top: 0; }
    .mnav .lang { margin-top: 0; }
  }
  @media (min-width: 1000px) { .mnav__groups { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px clamp(20px, 2.6vw, 44px); } }

  /* ---- video backgrounds */
  .vb { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-deep); color: var(--paper); }
  .vb__media { position: absolute; inset: 0; z-index: -2; }
  .vb__media video, .vb__media img { width: 100%; height: 100%; object-fit: cover; }
  .vb__media video { opacity: 0; transition: opacity .9s; }
  .vb__media video.is-on { opacity: 1; }
  .vb__media img { position: absolute; inset: 0; }
  .vb__media video { position: absolute; inset: 0; z-index: 1; }
  .vb::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(28, 29, 31, .84) 0%, rgba(28, 29, 31, .5) 42%, rgba(28, 29, 31, .06) 78%), linear-gradient(0deg, rgba(28, 29, 31, .42), transparent 40%); }
  [dir="rtl"] .vb::after { background: linear-gradient(270deg, rgba(28, 29, 31, .84) 0%, rgba(28, 29, 31, .5) 42%, rgba(28, 29, 31, .06) 78%), linear-gradient(0deg, rgba(28, 29, 31, .42), transparent 40%); }
  .vb--soft::after, [dir="rtl"] .vb--soft::after { background: linear-gradient(0deg, rgba(28, 29, 31, .78), rgba(28, 29, 31, .26)); }
  .vb--deep::after, [dir="rtl"] .vb--deep::after { background: rgba(36, 37, 39, .86); }
  .vtoggle { position: absolute; z-index: 3; inset-inline-end: var(--gutter); bottom: 22px; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-light); display: grid; place-items: center; color: var(--paper); backdrop-filter: blur(6px); }
  .vtoggle svg { width: 14px; height: 14px; }
  .vtoggle .i-play { display: none; }
  .vtoggle.is-paused .i-play { display: block; }
  .vtoggle.is-paused .i-pause { display: none; }

  /* ---- page head */
  .phead { min-height: min(74vh, 720px); display: flex; align-items: flex-end; padding-top: calc(var(--hdr) + 60px); padding-bottom: clamp(44px, 7vw, 96px); }
  .phead__in { display: grid; gap: 22px; max-width: 60rem; }
  .phead--paper { min-height: 0; background: var(--paper); color: var(--ink); padding-top: calc(var(--hdr) + clamp(56px, 9vw, 120px)); padding-bottom: clamp(30px, 5vw, 60px); }
  .phead--band { min-height: 0; padding-top: calc(var(--hdr) + 46px); padding-bottom: 46px; }
  .crumb { display: flex; flex-wrap: wrap; gap: .5em; font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
  html[lang="ar"] .crumb, html[lang="zh"] .crumb { letter-spacing: .02em; font-size: .88rem; }
  .crumb a { text-decoration: none; border-bottom: 1px solid currentColor; }

  /* ---- stitched divider */
  .stitch { height: 0; border: 0; border-top: 2px dashed var(--line); margin: 0; }
  .dark .stitch { border-top-color: var(--line-light); }

  /* ---- CTA band */
  .cta { padding-block: clamp(70px, 10vw, 140px); }
  .cta__in { display: grid; gap: 22px; max-width: 46rem; }

  /* ---- footer */
  .ftr { background: var(--ink-deep); color: var(--paper); padding-block: clamp(56px, 7vw, 96px) 34px; position: relative; z-index: 6; }
  .ftr__top { display: grid; gap: 44px; grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(0, 1fr)); }
  .ftr__logo { display: grid; justify-items: start; gap: 8px; margin-bottom: 24px; }
  .ftr__logo .bird { width: 190px; }
  .ftr__word { font-family: "Archivo", sans-serif; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: 1.02rem; margin-top: 6px; }
  .ftr__est { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
  html[lang="ar"] .ftr__est, html[lang="zh"] .ftr__est { letter-spacing: .04em; font-size: .86rem; }
  .ftr__brand p { max-width: 24em; font-size: .98rem; opacity: .86; }
  .ftr__founder { margin-top: 18px; padding-top: 18px; border-top: 2px dashed var(--line-light); font-size: .95rem; }
  .ftr h2 { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--thread); margin-bottom: 14px; }
  html[lang="ar"] .ftr h2, html[lang="zh"] .ftr h2 { letter-spacing: .03em; font-size: .9rem; }
  .ftr li a { display: inline-block; padding: 5px 0; text-decoration: none; opacity: .86; font-size: .97rem; }
  .ftr li a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--thread); text-underline-offset: 5px; }
  .ftr__contact p { font-size: .97rem; opacity: .9; margin-bottom: 10px; }
  .ftr__contact a { text-decoration: none; border-bottom: 1px solid var(--line-light); }
  .ftr__bot { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line-light); display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; justify-content: space-between; font-size: .88rem; }
  .ftr__bot .lang a { opacity: .8; }
  @media (max-width: 900px) { .ftr__top { grid-template-columns: 1fr 1fr; } .ftr__brand { grid-column: 1 / -1; } }
  @media (max-width: 520px) { .ftr__top { grid-template-columns: 1fr; } }

  /* ---- the thread */
  /* top + bottom: the thread is exactly as tall as the page and can never extend it (see site.js) */
  .thread { position: absolute; top: 0; bottom: 0; inset-inline-start: calc(var(--gutter) / 2 - 20px); width: 40px; z-index: 5; pointer-events: none; overflow: hidden; }
  .thread svg { display: block; width: 40px; height: 100%; }
  .thread path { fill: none; stroke-linecap: round; }
  .thread__shade { stroke: rgba(30, 31, 33, .26); stroke-width: 4.5; }
  .thread__line { stroke: var(--thread); stroke-width: 2.6; }
  .thread circle { fill: var(--paper); stroke: var(--thread); stroke-width: 2.4; transition: fill .4s; }
  .thread circle.is-done { fill: var(--thread); }
  @media (max-width: 560px) { .thread { inset-inline-start: -11px; } .thread__line { stroke-width: 2.2; } }

  /* ---- forms */
  .form { display: grid; gap: 18px; }
  .field { display: grid; gap: 7px; }
  .field label, .field legend { font-weight: 600; font-size: .95rem; }
  .field input, .field textarea, .field select { width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 2px; padding: 13px 14px; min-height: 52px; }
  .field textarea { min-height: 130px; resize: vertical; }
  .field input:focus, .field textarea:focus, .field select:focus { outline: 3px solid var(--thread); outline-offset: 0; border-color: var(--ink); }
  .row-2 { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
  @media (max-width: 620px) { .row-2 { grid-template-columns: 1fr; } }
  .chips { display: flex; flex-wrap: wrap; gap: 10px; }
  .chip { position: relative; }
  .chip input { position: absolute; opacity: 0; inset: 0; }
  .chip span { display: inline-flex; align-items: center; min-height: 48px; padding: .5em 1.1em; border: 1.5px solid var(--line); border-radius: 2px; background: #fff; font-weight: 600; cursor: pointer; }
  .chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: inset 0 -4px 0 var(--thread); }
  .chip input:focus-visible + span { outline: 3px solid var(--thread); outline-offset: 2px; }
  .form__note { font-size: .9rem; color: var(--muted); border-inline-start: 3px solid var(--thread); padding-inline-start: 12px; }
  .form__done { display: none; padding: 30px; background: var(--ink); color: var(--paper); border-top: 4px solid var(--thread); }
  .form.is-sent > *:not(.form__done) { display: none; }
  .form.is-sent .form__done { display: grid; gap: 10px; }
}

@layer pages {
  /* ---- home hero */
  .hero { min-height: 100svh; display: flex; align-items: flex-end; padding-top: calc(var(--hdr) + 40px); padding-bottom: clamp(56px, 8vw, 110px); }
  .hero__in { display: grid; gap: 26px; max-width: 66rem; }
  .hero .lead { max-width: 36em; }

  .proof { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 2px dashed var(--line); }
  .proof__i { padding: clamp(26px, 4vw, 52px) clamp(14px, 2.4vw, 34px); display: grid; gap: 6px; align-content: start; }
  .proof__i + .proof__i { border-inline-start: 2px dashed var(--line); }
  .proof__n { font-family: "Archivo", sans-serif; font-stretch: 122%; font-weight: 800; font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: .95; letter-spacing: -.03em; }
  .proof__t { font-size: .98rem; max-width: 16em; }
  @media (max-width: 700px) { .proof { grid-template-columns: 1fr; } .proof__i + .proof__i { border-inline-start: 0; border-top: 2px dashed var(--line); } .proof__i { grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding-inline: 0; } }

  /* ---- founder band + page */
  .fband { position: relative; overflow: hidden; }
  .fband__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(30px, 6vw, 96px); align-items: center; }
  .fname-ar span { display: block; white-space: nowrap; }
  .fname-ar { font-family: "Aref Ruqaa", "Alexandria", serif; font-weight: 700; font-size: clamp(3rem, 8.4vw, 7.6rem); line-height: 1.3; color: var(--thread); direction: rtl; text-align: start; }
  [dir="ltr"] .fname-ar { text-align: end; }
  .fband__name { font-family: var(--display); font-weight: 700; font-stretch: 108%; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.2; }
  .fband__txt { display: grid; gap: 20px; }
  .fband__meta { font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--thread); }
  html[lang="ar"] .fband__meta, html[lang="zh"] .fband__meta { letter-spacing: .03em; font-size: .92rem; }
  @media (max-width: 860px) { .fband__grid { grid-template-columns: 1fr; } [dir="ltr"] .fname-ar { text-align: start; direction: rtl; } }

  .fpage { min-height: 100svh; padding-top: calc(var(--hdr) + clamp(50px, 8vw, 110px)); padding-bottom: clamp(70px, 9vw, 130px); }
  .fpage__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
  .fpage .fname-ar { font-size: clamp(3.4rem, 9.6vw, 9rem); position: sticky; top: calc(var(--hdr) + 30px); }
  .fpage__name { font-family: var(--display); font-weight: 760; font-stretch: 112%; font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.08; letter-spacing: -.015em; }
  html[lang="ar"] .fpage__name, html[lang="zh"] .fpage__name { line-height: 1.4; letter-spacing: 0; }
  .fpage__body { display: grid; gap: 26px; }
  .fpage__body .fp { font-size: clamp(1.1rem, 1.5vw, 1.34rem); line-height: 1.65; max-width: 34em; }
  html[lang="ar"] .fpage__body .fp { line-height: 2; }
  .fpage__body .fp--first { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.25; }
  html[lang="ar"] .fpage__body .fp--first, html[lang="zh"] .fpage__body .fp--first { line-height: 1.6; }
  .rahma { font-family: "Aref Ruqaa", serif; font-size: 1.6rem; color: var(--thread); }
  @media (max-width: 860px) { .fpage__grid { grid-template-columns: 1fr; } .fpage .fname-ar { position: static; } }

  /* ---- roof band */
  .roof { padding-block: clamp(80px, 11vw, 160px); }
  .roof__in { display: grid; gap: 26px; max-width: 54rem; }
  .stagechips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
  .stagechips li { display: flex; }
  .stagechips a { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; padding: .55em 1em; background: rgba(237, 241, 242, .12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--line-light); border-radius: 2px; font-weight: 600; color: inherit; text-decoration: none; transition: background .25s, border-color .25s, box-shadow .25s, transform .3s var(--ease); }
  .stagechips a:hover, .stagechips a:focus-visible { background: rgba(237, 241, 242, .24); border-color: var(--thread); box-shadow: inset 0 -3px 0 var(--thread); }
  .stagechips a:active { transform: translateY(1px); }
  .stagechips b { font-family: var(--mono); font-weight: 500; color: var(--thread); font-size: .82em; }

  /* ---- steps */
  .steps { display: grid; }
  .step { display: grid; grid-template-columns: clamp(64px, 9vw, 128px) 1fr; gap: clamp(14px, 3vw, 40px); padding-block: clamp(22px, 3vw, 36px); border-top: 2px dashed var(--line); align-items: start; }
  .step:last-child { border-bottom: 2px dashed var(--line); }
  .step__n { font-family: "Archivo", sans-serif; font-stretch: 122%; font-weight: 800; font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
  .step:hover .step__n { color: var(--thread); -webkit-text-stroke-color: var(--ink); }
  .step__t { display: grid; gap: 8px; padding-top: .3em; }
  .how__head { position: sticky; top: calc(var(--hdr) + 28px); display: grid; gap: 20px; }
  @media (max-width: 860px) { .how__head { position: static; } }

  /* ---- product accordion */
  .acc { display: flex; min-height: clamp(420px, 60vh, 640px); gap: 4px; background: var(--ink); }
  .acc__p { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--paper); text-decoration: none; display: flex; align-items: flex-end; isolation: isolate; transition: flex-grow .7s var(--ease); }
  .acc__p:hover, .acc__p:focus-visible { flex-grow: 2.6; }
  .acc__p::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(30, 31, 33, .9), rgba(30, 31, 33, .1) 62%); }
  .acc__p .vb__media { z-index: -2; }
  .acc__body { padding: clamp(18px, 2.4vw, 34px); display: grid; gap: 8px; width: 100%; }
  .acc__n { font-family: var(--mono); font-size: .78rem; color: var(--thread); letter-spacing: .12em; }
  .acc__t { font-family: var(--display); font-weight: 760; font-stretch: 110%; font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.1; }
  html[lang="ar"] .acc__t { line-height: 1.5; }
  .acc__d { font-size: .98rem; max-width: 26em; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .4s; }
  .acc__p:hover .acc__d, .acc__p:focus-visible .acc__d { max-height: 8em; opacity: .92; }
  @media (max-width: 860px) { .acc { flex-direction: column; min-height: 0; } .acc__p { min-height: 210px; } .acc__d { max-height: none; opacity: .92; } .acc__p:hover { flex-grow: 1; } }

  /* ---- audience pair */
  .pair { display: grid; grid-template-columns: 1fr 1fr; }
  .pair a { position: relative; display: grid; gap: 14px; align-content: end; min-height: clamp(260px, 34vw, 430px); padding: clamp(24px, 4vw, 60px) var(--gutter); text-decoration: none; color: var(--ink); background: var(--paper-2); overflow: hidden; }
  .pair a + a { background: var(--ink); color: var(--paper); }
  .pair a::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 6px; background: var(--thread); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
  [dir="rtl"] .pair a::before { transform-origin: right; }
  .pair a:hover::before { transform: scaleX(1); }
  @media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }

  /* ---- production line (sideways) */
  .line { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); padding-block: 8px 28px; scrollbar-width: thin; scrollbar-color: var(--thread) transparent; }
  .line__c { position: relative; flex: 0 0 clamp(270px, 30vw, 400px); aspect-ratio: 3 / 4; scroll-snap-align: start; overflow: hidden; color: var(--paper); text-decoration: none; display: flex; align-items: flex-end; isolation: isolate; background: var(--ink); }
  .line__c::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(30, 31, 33, .92), rgba(30, 31, 33, .06) 66%); }
  .line__b { padding: 24px; display: grid; gap: 8px; }
  .line__n { font-family: "Archivo", sans-serif; font-stretch: 122%; font-weight: 800; font-size: 3.4rem; line-height: .9; color: var(--thread); }
  .line__hint { display: inline-flex; align-items: center; gap: .6em; font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
  .line__nav { display: flex; gap: 10px; }
  .line__nav button { width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); display: grid; place-items: center; }
  .line__nav button:hover { background: var(--ink); color: var(--paper); }
  .line__nav svg { width: 16px; height: 16px; }
  [dir="rtl"] .line__nav svg { transform: scaleX(-1); }

  /* ---- stage page */
  .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trio > li { padding: clamp(20px, 3vw, 40px); padding-inline-start: 0; display: grid; gap: 12px; align-content: start; }
  .trio > li + li { border-inline-start: 2px dashed var(--line); padding-inline-start: clamp(20px, 3vw, 40px); }
  .trio b.n { font-family: var(--mono); font-weight: 500; font-size: .8rem; color: var(--muted); letter-spacing: .12em; }
  @media (max-width: 800px) { .trio { grid-template-columns: 1fr; } .trio > li + li { border-inline-start: 0; padding-inline-start: 0; border-top: 2px dashed var(--line); } }
  .decide { display: flex; flex-wrap: wrap; gap: 10px; }
  .decide li { padding: .6em 1.1em; border: 1px dashed var(--ink); border-radius: 2px; font-weight: 600; background: #fff; }
  .band2 { min-height: clamp(260px, 44vw, 520px); }
  .pn { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px dashed var(--line); }
  .pn a { padding: clamp(26px, 4vw, 54px) var(--gutter); text-decoration: none; display: grid; gap: 6px; transition: background .3s; }
  .pn a:hover { background: var(--paper-2); }
  .pn a + a { border-inline-start: 2px dashed var(--line); text-align: end; }
  .pn small { font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  html[lang="ar"] .pn small, html[lang="zh"] .pn small { letter-spacing: .02em; font-size: .9rem; }
  .pn span { font-family: var(--display); font-weight: 720; font-size: clamp(1.3rem, 2.6vw, 2.2rem); line-height: 1.2; }
  @media (max-width: 560px) { .pn { grid-template-columns: 1fr; } .pn a + a { border-inline-start: 0; border-top: 2px dashed var(--line); text-align: start; } }

  /* ---- timeline */
  .tl { display: grid; }
  .tl__i { display: grid; grid-template-columns: clamp(110px, 20vw, 290px) 1fr; gap: clamp(18px, 4vw, 60px); padding-block: clamp(30px, 5vw, 64px); border-top: 2px dashed var(--line); align-items: baseline; }
  .tl__y { font-family: "Archivo", "Alexandria", "Noto Sans SC", sans-serif; font-stretch: 122%; font-weight: 800; font-size: clamp(2.2rem, 6.4vw, 5.6rem); line-height: .95; letter-spacing: -.03em; }
  .tl__y span { background: linear-gradient(transparent 62%, var(--thread) 62%, var(--thread) 90%, transparent 90%); }
  .tl__b { display: grid; gap: 10px; max-width: 34em; }
  @media (max-width: 600px) { .tl__i { grid-template-columns: 1fr; gap: 12px; } }

  /* ---- family */
  .sons { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(10px, 2vw, 26px) clamp(16px, 3vw, 44px); padding-block: clamp(30px, 5vw, 60px); border-block: 2px dashed var(--line); }
  .sons li { font-family: var(--display); font-weight: 760; font-stretch: 112%; font-size: clamp(1.8rem, 4.2vw, 3.7rem); line-height: 1.1; display: flex; align-items: center; gap: clamp(16px, 3vw, 44px); }
  html[lang="ar"] .sons li { line-height: 1.5; }
  .sons li:not(:last-child)::after { content: ""; width: clamp(10px, 1.1vw, 15px); height: clamp(10px, 1.1vw, 15px); border-radius: 50%; background: var(--thread); flex: none; }

  /* ---- regions / cards */
  .regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-block: 2px dashed var(--line); }
  .regions li { padding: clamp(24px, 4vw, 54px) clamp(16px, 2.6vw, 36px); display: grid; gap: 10px; }
  .regions li + li { border-inline-start: 2px dashed var(--line); }
  .regions .h2 { font-size: clamp(1.6rem, 3.2vw, 2.7rem); }
  @media (max-width: 760px) { .regions { grid-template-columns: 1fr; } .regions li + li { border-inline-start: 0; border-top: 2px dashed var(--line); } .regions li { padding-inline: 0; } }
  .certs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .cert { padding: 28px; border: 1.5px dashed var(--ink); background: #fff; display: grid; gap: 40px; align-content: space-between; min-height: 210px; }
  @media (max-width: 760px) { .certs { grid-template-columns: 1fr; } }

  /* ---- tour */
  .tour { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 2.4vw, 32px); }
  .tour figure { grid-column: span 7; display: grid; gap: 10px; }
  .tour figure:nth-child(2) { grid-column: span 5; align-self: end; }
  .tour figure:nth-child(3) { grid-column: 2 / span 6; }
  .tour figure:nth-child(4) { grid-column: span 4; align-self: center; }
  .tour img { width: 100%; height: auto; background: var(--paper-2); }
  .tour figcaption { font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; color: var(--muted); }
  @media (max-width: 760px) { .tour figure, .tour figure:nth-child(n) { grid-column: 1 / -1; } }

  /* ---- faq */
  .faq details { border-top: 2px dashed var(--line); }
  .faq details:last-child { border-bottom: 2px dashed var(--line); }
  .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 24px 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.3; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--thread); font-weight: 400; font-size: 1.4rem; transition: transform .35s var(--ease); }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details p { padding-bottom: 26px; max-width: 44em; font-size: 1.08rem; }

  /* ---- rows (downloads) */
  .rows li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 22px 0; border-top: 2px dashed var(--line); }
  .rows li:last-child { border-bottom: 2px dashed var(--line); }

  /* ---- stores */
  .stores { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-block: 2px dashed var(--line); }
  .stores > li { padding: clamp(28px, 4vw, 60px) 0; display: grid; gap: 14px; align-content: start; }
  .stores > li + li { border-inline-start: 2px dashed var(--line); padding-inline-start: clamp(22px, 4vw, 60px); }
  @media (max-width: 760px) { .stores { grid-template-columns: 1fr; } .stores > li + li { border-inline-start: 0; padding-inline-start: 0; border-top: 2px dashed var(--line); } }

  /* ---- quote stepper */
  .qsteps { display: flex; gap: 8px; margin-bottom: 30px; }
  .qsteps li { flex: 1; padding-top: 12px; border-top: 4px solid var(--line); font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; color: var(--muted); }
  .qsteps li.is-on { border-top-color: var(--thread); color: var(--ink); font-weight: 600; }
  .qpane { display: none; gap: 20px; }
  .qpane.is-on { display: grid; }
  .qnav { display: flex; gap: 12px; justify-content: space-between; margin-top: 10px; }

  .contact__list { display: grid; gap: 26px; }
  .contact__list dt { font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
  html[lang="ar"] .contact__list dt, html[lang="zh"] .contact__list dt { letter-spacing: .03em; font-size: .9rem; }
  .contact__list dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.35; }
  .contact__list dd a { text-decoration: none; border-bottom: 2px solid var(--thread); }
  .checklist li { display: flex; gap: 16px; padding: 18px 0; border-top: 2px dashed var(--line); font-size: 1.1rem; font-weight: 500; }
  .checklist li:last-child { border-bottom: 2px dashed var(--line); }
  .checklist li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: .22em; border: 2px solid var(--ink); background: linear-gradient(135deg, transparent 46%, var(--thread) 46%); }
  .photo { width: 100%; height: auto; }
}

@layer motion {
  .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .js [data-reveal].in { opacity: 1; transform: none; }
  .js [data-words] .w { display: inline-block; opacity: 0; transform: translateY(.5em); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i) * 55ms + 120ms); }
  .js [data-words].in .w { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js [data-reveal], .js [data-words] .w { opacity: 1; transform: none; transition: none; }
    .acc__p, .btn, .link .arr { transition: none; }
    .vb__media video { display: none; }
  }
}

/* ================================================================ factory space (rental) pages and site-wide rental promotion */
@layer base {
  :root { --ann: 40px; --top: calc(var(--hdr) + var(--ann)); }
  :root.no-ann { --ann: 0px; }
}

@layer parts {
  /* ---- announcement strip: sits above the top bar, slides away once the page is scrolled */
  .ann { position: fixed; top: 0; inset-inline: 0; z-index: 61; height: var(--ann); display: flex; align-items: center; justify-content: center; background: var(--thread); color: var(--ink); font-size: .9rem; transition: transform .35s var(--ease); }
  .no-ann .ann { display: none; }
  .ann__a { display: inline-flex; align-items: center; gap: .55em; height: 100%; padding-inline: 46px; text-decoration: none; white-space: nowrap; }
  .ann__a b { font-weight: 800; }
  .ann__a .arr { width: 1em; height: 1em; flex: none; transition: transform .35s var(--ease); }
  .ann__a:hover .arr { transform: translateX(5px); }
  [dir="rtl"] .ann__a:hover .arr { transform: scaleX(-1) translateX(5px); }
  .ann__x { position: absolute; inset-inline-end: 0; top: 0; width: 44px; height: 100%; font-size: 1.35rem; line-height: 1; display: grid; place-items: center; }
  .ann__x:hover { background: rgba(54, 55, 57, .12); }
  .hdr { top: var(--ann); transition: background .3s, color .3s, box-shadow .3s, top .35s var(--ease); }
  .is-scrolled .ann { transform: translateY(-101%); }
  .is-scrolled .hdr { top: 0; }
  @media (max-width: 480px) { .ann { font-size: .84rem; } .ann__a span { display: none; } }

  /* ---- the new menu item */
  .nav__item--new .nav__btn { box-shadow: inset 0 -3px 0 var(--thread); }
  .nav__panel { max-height: calc(100vh - var(--hdr) - 20px); overflow-y: auto; }

  /* ---- icons and the three contact buttons */
  .ic { width: 1.25em; height: 1.25em; flex: none; }
  .c3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .c3__b { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px; text-decoration: none; border-radius: 2px; background: var(--thread); color: var(--ink); font-weight: 700; transition: transform .3s var(--ease), box-shadow .25s; }
  .c3__b:hover { transform: translateY(-2px); box-shadow: inset 0 -4px 0 var(--ink); }
  .c3__b span { display: grid; min-width: 0; }
  .c3__b small { font-family: var(--mono); font-weight: 500; font-size: .76rem; opacity: .82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .c3__b + .c3__b { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
  .c3__b + .c3__b:hover { box-shadow: inset 0 0 0 1.5px currentColor, inset 0 -5px 0 var(--thread); }
  .c3--stack { grid-template-columns: 1fr; }
  .c3--stack .c3__b { min-height: 68px; font-size: 1.08rem; }
  .c3--hero { max-width: 46rem; }
  @media (max-width: 640px) { .c3--hero { grid-template-columns: 1fr; } }

  /* ---- fixed contact bar on rental pages */
  .cbar { position: fixed; z-index: 58; inset-inline: 0; bottom: 0; padding: 8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)); background: rgba(42, 43, 45, .96); color: var(--paper); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 -1px 0 var(--line-light); }
  .js .cbar { opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
  .js .cbar.is-on { opacity: 1; visibility: visible; }
  .c3--bar { gap: 8px; max-width: 760px; margin-inline: auto; }
  .c3--bar .c3__b { min-height: 48px; justify-content: center; padding: 6px 10px; gap: 9px; font-size: .96rem; }
  .has-cbar .ftr { padding-bottom: 104px; }
  @media (min-width: 1000px) {
    .cbar { inset-inline: auto; left: 50%; right: auto; bottom: 18px; transform: translateX(-50%); width: min(620px, calc(100vw - 2 * var(--gutter))); padding: 8px; border-radius: 4px; box-shadow: 0 14px 40px rgba(0, 0, 0, .28), inset 0 0 0 1px var(--line-light); }
    .has-cbar .ftr { padding-bottom: 110px; }
  }

  /* ---- site plan */
  .plan { width: 100%; height: auto; overflow: visible; }
  .plan__plot { fill: none; stroke: currentColor; stroke-width: .34; stroke-linejoin: round; }
  .plan__thin { fill: none; stroke: currentColor; stroke-width: .22; opacity: .55; }
  .plan__b rect, .plan__b polygon { fill: rgba(240, 208, 48, .1); stroke: var(--thread); stroke-width: .55; stroke-linejoin: round; transition: fill .3s; }
  .plan__dim { fill: none; stroke: currentColor; stroke-width: .2; opacity: .6; }
  .plan__dimt { font-family: "IBM Plex Mono", monospace; font-size: 3px; fill: currentColor; opacity: .85; }
  .plan__mk circle { fill: var(--thread); stroke: none; }
  .plan__mk text { font-family: "Archivo", sans-serif; font-weight: 800; font-size: 4.4px; fill: var(--ink); }
  a.plan__b { cursor: pointer; outline: none; }
  a.plan__b:hover rect, a.plan__b:hover polygon, a.plan__b:focus-visible rect, a.plan__b:focus-visible polygon, .plan__b.is-on rect, .plan__b.is-on polygon { fill: rgba(240, 208, 48, .5); }
  a.plan__b:focus-visible rect, a.plan__b:focus-visible polygon { stroke-width: 1; }
  .plan--mini .plan__b rect, .plan--mini .plan__b polygon { fill: none; stroke-width: .5; }
  .plan--mini .plan__plot { stroke-width: .34; opacity: .7; }

  /* ---- spec table (real table, styled as a sewn label) */
  .spec { border: 1.5px dashed var(--ink); background: #fff; padding: clamp(18px, 3vw, 36px); }
  .dark .spec { background: transparent; border-color: var(--line-light); }
  .spec__t { width: 100%; border-collapse: collapse; font-size: 1rem; }
  .spec__t caption { text-align: start; font-family: var(--display); font-weight: 720; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.25; padding-bottom: 14px; }
  .spec__t thead th { font-family: var(--mono); font-weight: 500; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; text-align: start; color: var(--muted); padding: 8px 0; border-bottom: 2px solid var(--ink); }
  html[lang="ar"] .spec__t thead th, html[lang="zh"] .spec__t thead th { letter-spacing: .03em; font-size: .88rem; }
  .spec__t tbody th { text-align: start; font-weight: 600; padding: 13px 16px 13px 0; padding-inline: 0 16px; width: 38%; vertical-align: top; }
  .spec__t tbody td { padding: 13px 0; font-family: var(--mono); font-size: .95rem; vertical-align: top; }
  html[lang="ar"] .spec__t tbody td, html[lang="zh"] .spec__t tbody td { font-family: var(--body); font-size: 1rem; }
  .spec__t tbody tr + tr th, .spec__t tbody tr + tr td { border-top: 1px dashed var(--line); }
  .spec__n { margin-top: 16px; font-size: .88rem; color: var(--muted); max-width: 60em; }
  @media (max-width: 560px) { .spec__t tbody th, .spec__t tbody td { display: block; width: auto; padding: 4px 0; } .spec__t tbody th { padding-top: 14px; } .spec__t tbody td { padding-bottom: 14px; } .spec__t tbody tr + tr td { border-top: 0; } .spec__t thead { display: none; } }

  /* ---- photo tiles (the supplied photographs are small, so they stay small) */
  .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; }
  .tile { display: grid; gap: 8px; align-content: start; padding: 8px 8px 10px; background: #fff; border: 1px dashed var(--line); max-width: 344px; }
  .tile img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-2); }
  .tile figcaption { font-family: var(--mono); font-size: .74rem; line-height: 1.45; color: var(--muted); }
  html[lang="ar"] .tile figcaption, html[lang="zh"] .tile figcaption { font-family: var(--body); font-size: .86rem; }
  .dark .tile { background: rgba(237, 241, 242, .06); border-color: var(--line-light); }

  /* ---- step line */
  .fsteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: s; position: relative; }
  .fsteps::before { content: ""; position: absolute; inset-inline: 0; top: 21px; border-top: 2px dashed var(--thread-deep); }
  .fstep { position: relative; display: grid; gap: 10px; align-content: start; padding-inline-end: clamp(14px, 2.4vw, 34px); padding-top: 62px; }
  .fstep__n { position: absolute; top: 0; inset-inline-start: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--thread); color: var(--ink); display: grid; place-items: center; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.15rem; box-shadow: 0 0 0 6px var(--paper); }
  .dark .fstep__n { box-shadow: 0 0 0 6px var(--ink); }
  @media (max-width: 860px) {
    .fsteps { grid-template-columns: 1fr; gap: 26px; }
    .fsteps::before { inset-inline: auto; inset-inline-start: 21px; top: 0; bottom: 0; border-top: 0; border-inline-start: 2px dashed var(--thread-deep); }
    .fstep { padding-top: 6px; padding-inline-start: 66px; padding-inline-end: 0; }
  }

  /* ---- rental band (home, and the foot of other pages) */
  .sband { padding-block: clamp(56px, 8vw, 110px); position: relative; overflow: hidden; }
  .sband__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 90px); align-items: center; }
  .sband__plan { color: rgba(237, 241, 242, .8); max-width: 440px; }
  .sband__txt { display: grid; gap: 20px; justify-items: start; }
  .sband__nums { display: flex; flex-wrap: wrap; gap: 14px clamp(22px, 4vw, 54px); padding-block: 18px; border-block: 2px dashed var(--line-light); width: 100%; }
  .sband__nums div { display: grid; gap: 2px; }
  .sband__nums b { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.05; color: var(--thread); }
  .sband__nums span { font-size: .92rem; opacity: .86; }
  @media (max-width: 860px) { .sband__grid { grid-template-columns: 1fr; } .sband__plan { max-width: 300px; } }

  /* ---- enquiry type cards */
  .enq { margin-bottom: 34px; }
  .enq__h { font-weight: 700; margin-bottom: 12px; }
  .enq__g { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .enq__c { display: grid; gap: 6px; padding: 20px 22px; text-decoration: none; background: #fff; border: 1.5px solid var(--line); border-radius: 2px; min-height: 104px; align-content: start; transition: border-color .25s, box-shadow .25s; }
  .enq__c b { font-family: var(--display); font-size: 1.2rem; }
  .enq__c span { font-size: .95rem; color: var(--muted); }
  .enq__c:hover { border-color: var(--ink); box-shadow: inset 0 -4px 0 var(--thread); }
  .enq__c[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: inset 0 -5px 0 var(--thread); }
  .enq__c[aria-current] span { color: rgba(237, 241, 242, .78); }
  @media (max-width: 560px) { .enq__g { grid-template-columns: 1fr; } }

  /* ---- small shared pieces */
  .factrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 18px 0; margin-bottom: 30px; border-block: 2px dashed var(--line); font-size: 1.05rem; }
  .factrow a { font-size: .9rem; }
  .srcs { margin-top: 20px; font-size: .86rem; color: var(--muted); }
  .dark .srcs { color: rgba(237, 241, 242, .7); }
  .srcs a { text-underline-offset: 3px; }
  .regcard { display: grid; gap: 0; border: 1.5px dashed var(--ink); background: #fff; margin-top: 30px; }
  .regcard div { padding: clamp(16px, 2.4vw, 28px); display: grid; gap: 8px; }
  .regcard div + div { border-top: 1px dashed var(--line); }
  .regcard dt { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  html[lang="ar"] .regcard dt, html[lang="zh"] .regcard dt { letter-spacing: .03em; font-size: .88rem; }
  .regcard dd { margin: 0; font-size: 1.06rem; max-width: 52em; }
  .grid-2 > .regcard { margin-top: 0; }
  .stamps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .stamp { display: grid; gap: 26px; align-content: space-between; min-height: 150px; padding: 20px; background: #fff; border: 1.5px dashed var(--ink); position: relative; }
  .stamp::before { content: ""; position: absolute; top: 14px; inset-inline-end: 14px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--thread-deep); background: radial-gradient(circle, var(--thread) 0 42%, transparent 46%); }
  .stamp b { font-family: var(--display); font-size: 1.14rem; line-height: 1.25; padding-inline-end: 34px; }
  .stamp span { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  html[lang="ar"] .stamp span, html[lang="zh"] .stamp span { letter-spacing: .02em; font-size: .86rem; }
  @media (max-width: 1000px) { .stamps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .stamps { grid-template-columns: 1fr 1fr; } .stamp { min-height: 128px; } }
  .certs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
  .datestamp { position: absolute; top: 12px; inset-inline-end: 12px; font-family: "IBM Plex Mono", monospace; font-size: .8rem; letter-spacing: .1em; padding: .3em .7em; background: var(--ink); color: var(--thread); }
  .tour__img { position: relative; }
  .tourplan { max-width: 520px; margin-top: 40px; color: var(--ink); }
  .dl { display: inline-flex; align-items: center; gap: 16px; }
  .dl small { font-family: var(--mono); font-size: .78rem; color: var(--muted); }
  .dl .btn { min-height: 46px; padding: .5em 1.1em; font-size: .95rem; }
  .chip--wide span { width: 100%; }
  .formcard { background: var(--paper); color: var(--ink); padding: clamp(20px, 3vw, 38px); border-top: 5px solid var(--thread); }
  .contact__list--light dt { color: rgba(237, 241, 242, .66); }
  .hero__more { margin-top: -6px; }
  .ftr__top { grid-template-columns: minmax(200px, 1.15fr) repeat(4, minmax(0, 1fr)); gap: 40px clamp(20px, 3vw, 44px); }
  @media (max-width: 1100px) { .ftr__top { grid-template-columns: 1fr 1fr; } .ftr__brand { grid-column: 1 / -1; } }
  @media (max-width: 520px) { .ftr__top { grid-template-columns: 1fr; } }
  @media (min-width: 1000px) { .mnav__groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 56px); } }
  @media (min-width: 1200px) { .mnav__groups { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px clamp(16px, 2vw, 34px); } }
  .ph { display: inline-block; white-space: nowrap; }
}

@layer parts {
  /* ---- photos that enlarge in place */
  .zoom { position: relative; display: block; cursor: zoom-in; color: var(--paper); }
  .zoom img { display: block; transition: filter .3s; }
  .zoom__ic { position: absolute; inset-inline-end: 8px; bottom: 8px; width: 30px; height: 30px; padding: 7px; background: rgba(42, 43, 45, .86); border-radius: 2px; transition: background .25s, color .25s; }
  .zoom:hover .zoom__ic, .zoom:focus-visible .zoom__ic { background: var(--thread); color: var(--ink); }
  .zoom:hover img { filter: brightness(1.06); }
  .lb { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; background: rgba(28, 29, 31, .96); color: var(--paper); overflow: hidden; }
  .lb::backdrop { background: rgba(28, 29, 31, .6); }
  .lb__in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); align-items: center; gap: 0 clamp(8px, 2vw, 26px); width: 100%; height: 100%; padding: clamp(10px, 2vw, 24px); }
  .lb__top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
  .lb__n { font-family: "IBM Plex Mono", monospace; font-size: .86rem; letter-spacing: .12em; color: var(--thread); padding-inline-start: 6px; }
  .lb__btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(237, 241, 242, .1); box-shadow: inset 0 0 0 1.5px var(--line-light); color: var(--paper); transition: background .25s, color .25s; }
  .lb__btn:hover, .lb__btn:focus-visible { background: var(--thread); color: var(--ink); }
  .lb__btn svg { width: 20px; height: 20px; }
  [dir="rtl"] .lb__prev svg, [dir="rtl"] .lb__next svg { transform: scaleX(-1); }
  .lb__x { font-size: 1.8rem; line-height: 1; }
  .lb__fig { margin: 0; min-width: 0; min-height: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 14px; padding-bottom: 6px; }
  .lb__fig:focus { outline: none; }
  .lb__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; padding: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
  .lb__cap { font-family: var(--mono); font-size: .86rem; text-align: center; max-width: 60ch; color: rgba(237, 241, 242, .9); }
  html[lang="ar"] .lb__cap, html[lang="zh"] .lb__cap { font-family: var(--body); font-size: .98rem; }
  .lb--one .lb__prev, .lb--one .lb__next { visibility: hidden; }
  @media (max-width: 640px) {
    .lb__in { grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; }
    .lb__fig { grid-column: 1 / -1; grid-row: 2; }
    .lb__prev { grid-row: 3; justify-self: start; }
    .lb__next { grid-row: 3; justify-self: end; }
    .lb--one .lb__prev, .lb--one .lb__next { display: none; }
  }
}

@layer pages {
  .phead, .hero, .fpage { scroll-margin-top: 0; }
  .phead { padding-top: calc(var(--top) + 60px); }
  .phead--paper { padding-top: calc(var(--top) + clamp(56px, 9vw, 120px)); }
  .phead--band { padding-top: calc(var(--top) + 46px); }
  .hero { padding-top: calc(var(--top) + 40px); }
  .fpage { padding-top: calc(var(--top) + clamp(50px, 8vw, 110px)); }

  /* ---- promotional page: hero with the plan drawing itself */
  .shero { padding-top: calc(var(--hdr) + clamp(34px, 6vw, 80px)); padding-bottom: clamp(44px, 7vw, 90px); }
  .shero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(26px, 5vw, 80px); align-items: center; }
  .shero__txt { display: grid; gap: 22px; }
  .shero__h1 { font-size: clamp(2.3rem, 5.6vw, 4.9rem); }
  .shero__plan { color: var(--paper); }
  @media (max-width: 940px) { .shero__grid { grid-template-columns: 1fr; } .shero__plan { max-width: 430px; } }
  .snums-sec { background: var(--ink-deep); color: var(--paper); }
  .snums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
  .snum { padding: clamp(22px, 3.4vw, 44px) clamp(12px, 2vw, 30px); display: grid; gap: 8px; align-content: start; }
  .snum + .snum { border-inline-start: 2px dashed var(--line-light); }
  .snum dt { font-family: var(--mono); font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; opacity: .78; }
  html[lang="ar"] .snum dt, html[lang="zh"] .snum dt { letter-spacing: .02em; font-size: .9rem; }
  .snum dd { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .3em; }
  .snum b { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: clamp(2rem, 5vw, 4.1rem); line-height: 1; color: var(--thread); letter-spacing: -.03em; }
  .snum i { font-style: normal; font-size: clamp(.95rem, 1.5vw, 1.2rem); opacity: .9; }
  @media (max-width: 760px) { .snums { grid-template-columns: 1fr 1fr; } .snum:nth-child(3) { border-inline-start: 0; } .snum:nth-child(n+3) { border-top: 2px dashed var(--line-light); } }
  .fit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 30px; border-block: 2px dashed var(--line-light); }
  .fit li { padding: clamp(22px, 3vw, 40px) clamp(14px, 2vw, 28px); display: grid; gap: 12px; align-content: start; }
  .fit li + li { border-inline-start: 2px dashed var(--line-light); }
  .fit li:first-child { padding-inline-start: 0; }
  .fit p { opacity: .86; }
  @media (max-width: 900px) { .fit { grid-template-columns: 1fr 1fr; } .fit li:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; } .fit li:nth-child(n+3) { border-top: 2px dashed var(--line-light); } }
  @media (max-width: 520px) { .fit { grid-template-columns: 1fr; } .fit li, .fit li + li { border-inline-start: 0; padding-inline: 0; } .fit li + li { border-top: 2px dashed var(--line-light); } }
  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 6vw, 96px); align-items: start; }
  .duo > div { display: grid; gap: 22px; align-content: start; }
  @media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
  .rlist { display: grid; border-block: 2px dashed var(--line); }
  .rlist li { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; }
  .rlist li + li { border-top: 1px dashed var(--line); }
  .rlist b { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 1.3rem; min-width: 4.6em; }
  .snav { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 26px; padding-bottom: 20px; }
  .scta .c3__b + .c3__b { box-shadow: inset 0 0 0 1.5px var(--line-light); }

  /* ---- buildings and site plan */
  .bplan { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
  .bplan__plan { position: sticky; top: calc(var(--hdr) + 22px); }
  .bplan__sheet { padding: clamp(14px, 2.4vw, 30px); background: #fff; border: 1.5px dashed var(--ink); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; background-position: -1px -1px; }
  .bplan__sheet .plan__b rect, .bplan__sheet .plan__b polygon { stroke: var(--ink); fill: rgba(240, 208, 48, .22); }
  .bplan__sheet .plan__mk circle { fill: var(--ink); }
  .bplan__sheet .plan__mk text { fill: var(--thread); }
  .bplan__note { margin-top: 12px; font-family: var(--mono); font-size: .78rem; color: var(--muted); }
  html[lang="ar"] .bplan__note, html[lang="zh"] .bplan__note { font-family: var(--body); font-size: .9rem; }
  .bplan__panels { display: grid; gap: clamp(40px, 6vw, 80px); }
  .bpanel { display: grid; gap: 20px; scroll-margin-top: calc(var(--hdr) + 22px); }
  .bpanel header { display: flex; align-items: center; gap: 16px; }
  .bpanel__l { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--thread); display: grid; place-items: center; font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1.3rem; transition: background .3s, color .3s; }
  .bpanel.is-on .bpanel__l { background: var(--thread); color: var(--ink); }
  .bpanel__sub { font-family: var(--mono); font-weight: 500; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
  html[lang="ar"] .bpanel__sub, html[lang="zh"] .bpanel__sub { letter-spacing: .03em; font-size: .92rem; }
  .bspec { margin: 0; border-block: 2px dashed var(--line); }
  .bspec div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 12px 0; }
  .bspec div + div { border-top: 1px dashed var(--line); }
  .bspec dt { font-weight: 600; }
  .bspec dd { margin: 0; font-family: var(--mono); font-size: .95rem; }
  html[lang="ar"] .bspec dd, html[lang="zh"] .bspec dd { font-family: var(--body); font-size: 1rem; }
  @media (max-width: 900px) { .bplan { grid-template-columns: 1fr; } .bplan__plan { position: static; max-width: 560px; } }

  /* ---- utilities: meter panel */
  .meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .meter { display: grid; gap: 16px; align-content: start; padding: clamp(18px, 2.6vw, 32px); background: var(--ink); color: var(--paper); border-bottom: 5px solid var(--thread); }
  .meter__r { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35em; }
  .meter__r b { font-family: "IBM Plex Mono", "Alexandria", "Noto Sans SC", monospace; font-weight: 500; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; color: var(--thread); letter-spacing: -.03em; }
  .meter__r i { font-style: normal; font-family: var(--mono); font-size: 1.05rem; opacity: .88; }
  .meter p:last-child { opacity: .88; font-size: 1rem; }
  @media (max-width: 900px) { .meters { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 540px) { .meters { grid-template-columns: 1fr; } }

  /* ---- location: route board */
  .routes { display: grid; gap: 0; border-block: 2px dashed var(--line); }
  .route { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; align-items: center; gap: 12px clamp(14px, 2.4vw, 30px); padding: 20px 0; }
  .route + .route { border-top: 1px dashed var(--line); }
  .route__n { font-family: var(--display); font-weight: 700; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.3; }
  .route__bar { position: relative; height: 14px; }
  .route__bar i { position: absolute; inset-inline-start: 0; top: 6px; height: 3px; width: var(--w); background: var(--thread-deep); border-radius: 2px; transform-origin: left; }
  [dir="rtl"] .route__bar i { transform-origin: right; }
  .route__bar i::after { content: ""; position: absolute; inset-inline-end: -7px; top: -5.5px; width: 14px; height: 14px; border-radius: 50%; background: var(--thread); border: 2.4px solid var(--ink); }
  .route__km { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.7rem); white-space: nowrap; }
  @media (max-width: 640px) { .route { grid-template-columns: 1fr auto; } .route__bar { grid-column: 1 / -1; order: 3; } }
  .plainlist { display: grid; gap: 16px; font-size: clamp(1.06rem, 1.4vw, 1.22rem); line-height: 1.6; }
  .plainlist li { padding-inline-start: 22px; position: relative; }
  .plainlist li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--thread); }
  .warn { margin-top: 26px; padding: 16px 18px; border: 1.5px dashed var(--thread); font-weight: 600; max-width: 44em; }
  .trio--src .srcs { margin-top: 4px; }

  /* ---- questions and guide */
  .faqg + .faqg { margin-top: clamp(40px, 6vw, 70px); }
  .faqg h2 { margin-bottom: 18px; font-size: 1rem; font-weight: 500; }
  .guide { max-width: 860px; }
  .checks { display: grid; }
  .check { display: grid; grid-template-columns: clamp(52px, 8vw, 96px) 1fr; gap: clamp(12px, 3vw, 34px); padding-block: clamp(24px, 3.4vw, 40px); border-top: 2px dashed var(--line); }
  .check:last-child { border-bottom: 2px dashed var(--line); }
  .check__n { font-family: "Archivo", sans-serif; font-stretch: 122%; font-weight: 800; font-size: clamp(2.2rem, 5vw, 4rem); line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
  .check > div { display: grid; gap: 12px; }
  .check__q { font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
  .check__here { padding: 14px 16px; background: #fff; border-inline-start: 4px solid var(--thread); }
}

@layer motion {
  /* the plan draws itself */
  .js .plan--hero [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: plan-draw 1.5s var(--ease) forwards; }
  .js .plan--hero .plan__plot { animation-delay: .15s; animation-duration: 2s; }
  .js .plan--hero .plan__thin { animation-delay: .9s; }
  .js .plan--hero .plan__b:nth-of-type(1) { --d: .7s; }
  .js .plan--hero .plan__b:nth-of-type(2) { --d: 1.05s; }
  .js .plan--hero .plan__b:nth-of-type(3) { --d: 1.4s; }
  .js .plan--hero .plan__dim { animation-delay: 1.8s; }
  .js .plan--hero .plan__b [pathLength] { fill-opacity: 0; animation: plan-draw 1.5s var(--ease) var(--d, .7s) forwards, plan-fill .8s 2.2s forwards; }
  .js .plan--hero .plan__mk, .js .plan--hero .plan__dimt { opacity: 0; animation: plan-fade .6s 2.3s forwards; }
  @keyframes plan-draw { to { stroke-dashoffset: 0; } }
  @keyframes plan-fill { to { fill-opacity: 1; } }
  @keyframes plan-fade { to { opacity: 1; } }
  .js .route[data-reveal] .route__bar i { transform: scaleX(0); transition: transform 1.3s var(--ease) .15s; }
  .js .route[data-reveal].in .route__bar i { transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .js .plan--hero [pathLength], .js .plan--hero .plan__b rect, .js .plan--hero .plan__b polygon { animation: none; stroke-dashoffset: 0; fill-opacity: 1; }
    .js .plan--hero .plan__mk, .js .plan--hero .plan__dimt { animation: none; opacity: 1; }
    .js .route[data-reveal] .route__bar i { transform: none; transition: none; }
    .ann, .hdr { transition: none; }
  }
}