/* ═══════════════════════════════════════════════════════════
   Feven's Prints — Photo Print Studio, Addis Ababa
   Emil craft + Taste discipline. Vanilla. Light theme locked.
   ── Palette (warm-paper override, articulated) ─────────────
   A print shop sells paper. Warm lustre-white surfaces echo the
   product; deep pine (Ethiopian highland green) is the ink.
   paper #F8F4EE / ink #241F18 / pine #0E5C41 (single accent)
   ── Shape: cards 16 · images 12 · buttons 10 · seg 8
   ── Motion: transform+opacity · custom ease · <300ms UI
   ── z-scale: 10 nav · 20 mobile menu
   ═══════════════════════════════════════════════════════════ */

:root {
  --paper: #F8F4EE;
  --paper-2: #F0EAE1;
  --ink: #241F18;
  --ink-soft: #6B6155;
  --line: #E4DBCC;
  --pine: #0E5C41;
  --pine-deep: #0A4632;
  --pine-soft: #DCE7DF;
  --gold: #C1922B;          /* Meskel gold — second Ethiopian accent */
  /* Ethiopian flag, used as thread: saturated for ornament, muted for text */
  --flag-green:  #078930;
  --flag-yellow: #FCDD09;
  --flag-red:    #DA121A;
  --red:         #B3261E;      /* flag red is ~4:1 on cream - too weak for text */
  --red-soft:    #F3DAD7;
  --green-soft:  #DCE9DF;
  --yellow-soft: #F6EFD5;
  --accent: var(--pine);
  --accent-soft: var(--pine-soft);
  /* --body was never defined: `.am-eye` and `.brand-am` do
     font-family:'Noto Sans Ethiopic', var(--body), so an undefined token made
     the whole declaration invalid at computed-value time and both rules fell
     back to the inherited stack. Amharic only looked right because Android
     ships an Ethiopic system font. Defined here, with the self-hosted Ethiopic
     face in the stack so a desktop without one still renders Amharic. */
  --body: 'Outfit', 'Noto Sans Ethiopic', system-ui, -apple-system, sans-serif;
  /* semantic tokens — every one of these is remapped for the dark theme */
  --text-soft: #5C5246;
  --text-mute: #8D8171;
  --text-faint: #9A8E7D;
  --surface-hover: #FBF8F2;
  --rule-soft: #F2EDE4;
  --line-strong: #D6CBB8;
  --gold-rule: #E9D9AC;
  --dot-idle: #C6BAA6;
  --dot-hover: #B9AE9C;
  --btn-pill-hover: #C9D9CF;
  --danger: #A63A22;
  --danger-line: #C4533A;
  --hero-glow: rgba(14,92,65,.10);
  --card-shadow: rgba(46,37,26,.04);
  --nav-bg: rgba(248,244,238,.88);
  --btn-fg: #FFFFFF;
  --panel-inv-bg: #241F18;   /* the always-dark footer / "good to know" panel */
  --panel-inv-fg: #E4DCD0;
  --white: #FFFDF9;
  /* 🔴 'Noto Sans Ethiopic' MUST stay in this stack: Bricolage + Outfit are
     Latin-only (see their unicode-range), so without it Amharic headings fall
     through to system-ui and the AM headline stops matching the AM body. */
  --display: 'EB Garamond', 'Bricolage Grotesque', 'Noto Sans Ethiopic', Georgia, serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
  --shadow-warm: rgba(46, 37, 26, 0.4);
  --nav-h: 68px;
}

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

/* ── fonts: self-hosted ─────────────────────────────── */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/bricolage-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: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/bricolage-latinext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../fonts/outfit-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: 'Outfit'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../fonts/outfit-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Noto Sans Ethiopic'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/noto-ethiopic.woff2') format('woff2'); unicode-range: U+030E, U+1200-1399, U+2D80-2DDE, U+AB01-AB2E, U+1E7E0-1E7E6, U+1E7E8-1E7EB, U+1E7ED-1E7EE, U+1E7F0-1E7FE; }
@font-face { font-family: 'Noto Sans Ethiopic'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/noto-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: 'EB Garamond'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/ebgaramond-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; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Amharic mode: Ethiopic-first stack */
body.am { font-family: 'Noto Sans Ethiopic', 'Outfit', system-ui, sans-serif; }
img { display: block; max-width: 100%; }
a { color: var(--pine-deep); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.14; font-weight: 750; letter-spacing: -0.015em; }
h1, h2, .brand, .phone-xl { font-family: var(--display); }
.phone-xl { font-family: var(--body); } /* digits stay in the sans: Garamond's old-style figures are lovely in prose and wrong in a phone number */
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ── buttons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 15.5px;
  padding: 13px 24px; border-radius: 8px;
  transition: transform 160ms var(--ease-out), background 200ms ease, color 200ms ease, box-shadow 200ms ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-sm { padding: 9px 18px; font-size: 14.5px; }
.btn-outline { background: transparent; color: var(--pine-deep); border: 1.5px solid var(--pine); box-shadow: none; }
.btn-outline:hover { background: var(--pine-soft); border-color: var(--pine-deep); }
.btn-primary { background: var(--pine); color: var(--btn-fg); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 22px -12px rgba(14,92,65,.6); }
.btn-primary:hover { background: var(--pine-deep); }
.link-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 15.5px; color: var(--pine-deep); padding: 13px 2px; background: none; border: 0; cursor: pointer; }
.link-cta::after { content: "→"; font-size: 17px; transition: transform 200ms var(--ease-out); }
@media (hover:hover) and (pointer:fine) { .link-cta:hover::after { transform: translateX(4px); } }
@media (hover: hover) and (pointer: fine) {
  .link-cta:hover { text-decoration: underline; text-underline-offset: 4px; }
}
.btn-pill { background: var(--pine-soft); color: var(--pine-deep); border: 1.5px solid rgba(14,92,65,.24); }
.btn-pill:hover { background: var(--btn-pill-hover); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: scale(0.97); }
}

/* ── nav ─────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 10; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; gap: 22px; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height:44px; color: var(--ink); font-family: var(--display); font-weight: 640; font-size: 21px; letter-spacing: -0.015em; }
.brand-light { color: #fff; }
.nav-links { display: flex; gap: 22px; margin-left: 6px; }
.nav-links a { color: var(--ink-soft); font-size: 15px; font-weight: 570; position: relative; padding: 4px 0; transition: color 200ms ease; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; border-radius: 2px; background: var(--pine); transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease-out); }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.lang-group { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--white); }
.seg { font: inherit; font-size: 12.5px; font-weight: 650; letter-spacing: 0.04em; color: var(--text-faint); background: none; border: 0; padding: 4px 10px; cursor: pointer; transition: color 160ms ease, background 200ms ease; border-radius: 999px; }
.seg + .seg { margin-left: 1px; }

.seg:hover { color: var(--ink); }
.seg.active { color: var(--pine-deep); font-weight: 750; background: var(--pine-soft); }
.lang-group-mobile { width: 100%; justify-content: center; margin: 12px 0 4px; }
.lang-group-mobile .seg { flex: 1; padding: 10px 0; font-size: 15px; justify-content: center; }
.nav-burger { display: none; margin-left: auto; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 200ms var(--ease-out), opacity 200ms ease; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav-mobile { display: none; flex-direction: column; gap: 4px; padding: 8px 28px 20px; border-top: 1px solid var(--line); background: var(--paper); }
.nav-mobile a { padding: 11px 4px; font-size: 16.5px; font-weight: 600; color: var(--ink); border-radius: 10px; }
/* the mobile nav's button must beat `.nav-mobile a`'s colour (it was rendering
   dark-on-green at 2:1 before this) */
.nav-mobile a.btn { color: var(--btn-fg); }
.nav-mobile a.btn { margin-top: 8px; justify-content: center; }
.nav-mobile.open { display: flex; transform-origin: top right; animation: menuIn 190ms var(--ease-out); }
@keyframes menuIn { from { opacity: 0; transform: scale(.97) translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── hero ────────────────────────────────────────────── */
.hero { padding: 76px 0 88px; overflow: hidden; background: radial-gradient(1000px 620px at 86% -16%, var(--hero-glow), transparent 60%), var(--paper); }
.hero-grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 64px; align-items: center; }
.hero-sub { margin-top: 24px; font-size: 17.5px; line-height: 1.8; color: var(--text-soft); max-width: 41ch; }
.hero-cta { display: flex; align-items: center; gap: 28px; margin-top: 34px; flex-wrap: wrap; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px; font-size: 15.5px; font-weight: 620; color: var(--pine-deep); }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pine); flex: none; }

/* ── trust band ──────────────────────────────────────── */
.band { border-bottom: 1px solid var(--line); background: var(--white); }
.band-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.band-grid p { padding: 16px 10px; text-align: center; font-size: 13.5px; font-weight: 620; letter-spacing: 0.04em; color: var(--ink-soft); }
.band-grid p + p { border-left: 1px solid var(--line); }

/* ── sections ────────────────────────────────────────── */
.section { padding: 92px 0; }
.section-tint { background: var(--paper-2); }
.section-h { font-size: clamp(30px, 3.4vw, 42px); font-weight: 660; letter-spacing: -0.025em; margin-bottom: 36px; max-width: 18ch; }

/* ── bento products ──────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
/* The catalogue is a WALL OF PRINTS, not a grid of cards: white paper mattes,
   a woven thread hugging each photograph, every print hung at its own height
   and tilt. The resting tilt/stagger ride the individual `rotate`/`translate`
   properties ON PURPOSE — `.reveal.reveal-scale.in { transform: none }`
   outranks `.tile:hover` by specificity, which is what killed the old hover
   lift (verified live: hover changed the shadow, transform stayed `none`).
   Keeping tilt/stagger off `transform` means the reveal owns one channel and
   hover owns another, so they can never fight again. */
.tile { position: relative; display: flex; flex-direction: column; background: var(--white);
  padding: 15px 15px 0; border-radius: 3px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 1px 1px var(--card-shadow), 0 18px 32px -22px var(--shadow-warm);
  transition: transform 260ms var(--ease-out), rotate 340ms var(--ease-out), translate 340ms var(--ease-out), box-shadow 260ms var(--ease-out), border-color 260ms ease;
  color: var(--ink); rotate: -1.5deg; }
.bento > .tile:nth-child(even) { rotate: 1.4deg; }
.bento > .tile:nth-child(3n) { translate: 0 14px; }
.bento > .tile:nth-child(3n+1) { translate: 0 -11px; }
/* the full-width print hangs straight and level */
.bento > .tile.tile-wide { rotate: 0deg; translate: 0 0; }

/* ── the wall: a full-bleed pine panel ────────────────────
   ONE accent surface, the way a print shop hangs a wall — not a colour wash.
   The prints keep the colour (a single dyed thread each); the gold hairlines
   are ornament. Reaching both viewport edges is what makes it read as a wall
   rather than another card. */
.wall-band { position: relative; margin: 22px 0 44px; padding: 54px 0 60px;
  background-image: linear-gradient(180deg, #0F5F44 0%, #0B4A35 55%, #083D2A 100%);
  border-top: 1px solid rgba(193,146,43,.42); border-bottom: 1px solid rgba(193,146,43,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.wall-band::before { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Cpath d='M0 3.5h7M3.5 0v7' stroke='%23FFF' stroke-opacity='.045' stroke-width='.7'/%3E%3C/svg%3E"); }
/* a print on a dark wall casts deeper than a card on paper, and its paper edge
   needs a light hairline to separate it from the wall */
.wall-band .tile { border-color: rgba(255,255,255,.10);
  box-shadow: 0 1px 1px rgba(0,0,0,.30), 0 26px 46px -24px rgba(0,0,0,.72); }
@media (hover:hover) and (pointer:fine) {
  .wall-band .bento > .tile:hover { box-shadow: 0 2px 4px rgba(0,0,0,.32), 0 42px 68px -28px rgba(0,0,0,.82); }
}
[data-theme="dark"] .wall-stage { background-color: #1A170F; }
[data-theme="dark"] .wall-band { background-image: linear-gradient(180deg,#15382B,#0E2A20); }
[data-theme="dark"] .wall-band .tile { background: #2A241D; border-color: rgba(255,255,255,.09); }
.tile-big { grid-column: span 7; }
.tile-tall { grid-column: span 5; }
.tile:nth-of-type(3), .tile:nth-of-type(4), .tile:nth-of-type(5) { grid-column: span 4; }
.tile-wide { grid-column: span 12; flex-direction: row; align-items: stretch; }
/* the photograph sits in the paper with a fine DYED thread around it — a woven
   border, not a UI outline. Saturated flag green around a photo read as a
   selection box, so the thread is mixed down toward the paper line. */
.tile-media { margin: 0; overflow: hidden; background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); }
/* square media: the source crops are square, so a square frame shows the
   whole crop with no cover-slicing at either edge - which is what lets the
   product padding stay small. */
.tile-big .tile-media, .tile-tall .tile-media { aspect-ratio: 1 / 1; }
.tile:not(.tile-big):not(.tile-tall):not(.tile-wide) .tile-media { aspect-ratio: 1 / 1; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.tile-media-side { flex: 0 0 42%; aspect-ratio: auto; }
.tile-media-side img { height: 100%; }
.tile-cap { padding: 16px 5px 20px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.tile-cap-side { justify-content: center; }
.tile h3 { font-size: 19px; font-weight: 720; }
.tile p { font-size: 15px; color: var(--text-soft); line-height: 1.55; }
.tile-price { font-variant-numeric: tabular-nums; margin-top: auto; padding-top: 11px; border-top: 1px solid var(--rule-soft); font-size: 16.5px; font-weight: 780; letter-spacing: -0.012em; color: var(--pine-deep); }
.tile-wide .tile-price { margin-top: 8px; }
@media (hover: hover) and (pointer: fine) {
  /* `.bento >` keeps these ahead of the nth-child stagger on specificity, so
     the print straightens and lifts instead of being held down by its tilt. */
  .bento > .tile:hover { rotate: 0deg; translate: 0 -10px; box-shadow: 0 2px 3px var(--card-shadow), 0 36px 62px -26px var(--shadow-warm); border-color: var(--line-strong); }
  .bento > .tile:hover .tile-media img { transform: scale(1.035); }
  .bento > .tile:active { translate: 0 -3px; scale: 0.995; }
}

/* ── how it works ────────────────────────────────────── */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; }
.how-item { border-top: 2px solid var(--ink); padding-top: 22px; }
.how-item h3 { font-size: 22px; font-weight: 720; margin-bottom: 10px; }
.how-item p { font-size: 15.5px; color: var(--ink-soft); max-width: 34ch; line-height: 1.7; }

/* ── the display wall ────────────────────────────────────
   Replaces the old "Recent prints" masonry, which showed the same six
   product files a second time under a heading that implied a portfolio.
   This is a SCALE display instead: three prints hung with the same paper
   matte + dyed thread as the catalogue, each tagged with a size that
   exists in the price table, plus an honest note offering a real mockup. */
.wall-note { max-width: 64ch; color: var(--text-soft); margin: -20px 0 34px; font-size: 16.5px; }
.wall-stage { display: grid; grid-template-columns: repeat(12, 1fr); gap: 26px; align-items: start;
  padding: 42px 24px 50px; background-color: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Cpath d='M0 3.5h7M3.5 0v7' stroke='%23000' stroke-opacity='.030' stroke-width='.7'/%3E%3C/svg%3E"); }
.hung { margin: 0; display: flex; flex-direction: column; background: var(--white); padding: 13px 13px 0;
  border: 1px solid var(--line); border-radius: 3px;
  box-shadow: 0 1px 1px var(--card-shadow), 0 20px 36px -22px var(--shadow-warm); }
.hung picture { display: block; overflow: hidden; background: var(--paper-2);
  border: 1px solid var(--line-strong); border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); }
.hung img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-out); }
.hung figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 4px 16px; font-size: 13.5px; font-weight: 650; color: var(--ink); }
.hung figcaption em { font-style: normal; font-size: 12.5px; font-weight: 600;
  color: var(--text-mute); font-variant-numeric: tabular-nums; }
.hung-a { grid-column: span 5; rotate: -1.2deg; }
.hung-a picture { aspect-ratio: 1 / 1; }
.hung-b { grid-column: span 4; translate: 0 30px; rotate: 1.1deg; }
.hung-b picture { aspect-ratio: 1 / 1; }
.hung-c { grid-column: span 3; translate: 0 -10px; rotate: -1.6deg; }
.hung-c picture { aspect-ratio: 1 / 1; }
@media (hover: hover) and (pointer: fine) {
  .hung:hover { rotate: 0deg; box-shadow: 0 2px 3px var(--card-shadow), 0 38px 60px -26px var(--shadow-warm); }
  .hung:hover img { transform: scale(1.035); }
}

/* ── section chapter-mark ────────────────────────────────
   One ornament-scale Ge'ez numeral, ghosted behind the section that opens the
   order flow - the same ፩ as the first step marker inside it, at chapter scale.
   z-index -1 puts it above the section's own background and below its text,
   which is exactly where a watermark belongs (a positioned child at z-index
   auto would have painted over the heading). */
#send { position: relative; }
/* opacity note: at .10 on cream the numeral measured a 4/255 channel
   difference - present in the DOM, invisible to a human. Raised until it
   reads as a watermark rather than a rumour. */
.ghost-num { position: absolute; z-index: -1; top: 34px; right: 3vw;
  font-family: var(--display); font-size: clamp(140px, 22vw, 260px); line-height: .8;
  color: var(--gold); opacity: .22; pointer-events: none; user-select: none; }
[data-theme="dark"] .ghost-num { opacity: .26; }

/* ── visit ───────────────────────────────────────────── */
.visit-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: start; }
.visit-copy .section-h { margin-bottom: 18px; }
.visit-copy > p { font-size: 18px; color: var(--ink-soft); max-width: 44ch; margin-bottom: 30px; }
.visit-block { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.visit-block svg { width: 22px; height: 22px; fill: none; stroke: var(--pine); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; margin-top: 3px; }
.visit-block p { font-size: 16.5px; font-weight: 570; line-height: 1.6; }
.map-link { font-size:14px; font-weight:680; display:inline-flex; align-items:center; min-height:44px; }
.phone-xl { display: inline-block; min-height: 44px; font-size: clamp(26px, 2.8vw, 34px); font-weight: 660; letter-spacing: -0.02em; color: var(--ink); margin: 10px 0 24px; transition: color 200ms ease; }
.phone-xl:hover { color: var(--pine-deep); }
.channel-row { display: flex; gap: 12px; flex-wrap: wrap; }
.visit-card { background: var(--panel-inv-bg); color: var(--panel-inv-fg); border-radius: 14px; padding: 30px 30px 26px; }
.visit-card h3 { font-size: 19px; margin-bottom: 18px; color: #fff; }
.visit-card li { padding: 12px 0 12px 26px; position: relative; font-size: 15px; color: #CFC4B4; border-bottom: 1px solid rgba(255,255,255,.09); }
.visit-card li:last-child { border-bottom: 0; }
.visit-card li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--pine); }

/* ── footer ──────────────────────────────────────────── */
.footer { background: var(--panel-inv-bg); color: #CFC4B4; padding: 64px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 48px; }
.f-brand .brand { font-size: 17.5px; }
.f-blurb { font-size: 14.5px; line-height: 1.7; margin: 16px 0 18px; max-width: 34ch; color: #A79B89; }
.f-col { display: flex; flex-direction: column; gap: 9px; }
.f-col h4 { font-size: 12.5px; font-weight: 720; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin-bottom: 6px; }
.f-col a, .f-col span { font-size: 14.5px; color: #A79B89; transition: color 200ms ease; }
.f-col a { display:inline-block; padding:9px 0; min-height:44px; }
.f-col a:hover { color: #fff; }
.f-bottom { display: flex; justify-content: space-between; gap: 12px; padding-top: 22px; padding-bottom: 26px; border-top: 1px solid rgba(255,255,255,.09); font-size: 13px; color: #8A7D6B; }

/* ── reveals (scroll) ────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 60ms; }
.reveal.d2 { transition-delay: 120ms; }
.reveal.d3 { transition-delay: 180ms; }

/* ── send your photos ────────────────────────────────── */
.send-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 44px; align-items: start; }
.send-steps { display: flex; flex-direction: column; gap: 26px; }
.send-step { display: flex; gap: 16px; align-items: flex-start; }
.send-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pine); color: #fff;
          font-family: var(--display); font-weight: 700; font-size: 15px; display: grid; place-items: center; margin-top: 2px; }
.send-step h3 { font-size: 19px; font-weight: 720; }
.send-step p { font-size: 15.5px; color: var(--text-soft); line-height: 1.65; margin-top: 6px; max-width: 46ch; }
.quality-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 24px 24px 22px; }
.quality-card h3 { font-size: 13px; font-weight: 720; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pine); }
.quality-card ul { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; }
.quality-card li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.55; color: var(--text-soft); }
.quality-card li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--pine); }
#send .channel-row { margin-top: 36px; align-items: center; }

/* ── order form ──────────────────────────────────────── */
.order-sub { font-size: 17px; color: var(--text-soft); line-height: 1.65; max-width: 54ch; margin-bottom: 30px; }
.order-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
              background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.field { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 7px; }
.field-half { grid-column: span 1; }
.field label { font-size: 14px; font-weight: 650; color: var(--pine-deep); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; width: 100%;
  transition: border-color 180ms ease, box-shadow 180ms ease; }
.field input, .field select { min-height: 48px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--pine); box-shadow: 0 0 0 3px var(--pine-soft); }
.field-hint { font-size: 13.5px; color: var(--text-mute); }
.field-err { font-size: 13.5px; font-weight: 620; color: var(--danger); }
.field.invalid input, .field.invalid select { border-color: var(--danger-line); }
.field-submit { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.order-send { min-height: 48px; }
button.btn { cursor: pointer; }
.btn:active { transform: scale(0.985); }
.form-note { font-size: 14px; color: var(--text-mute); }
/* order confirmation + on-device history */
.order-done { margin-top: 22px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--pine);
              border-radius: 14px; padding: 22px 22px 20px; }
.order-done h3 { font-size: 19px; font-weight: 720; }
.order-ref { margin-top: 9px; font-size: 15px; color: var(--text-soft); }
.order-ref strong { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--pine-deep); letter-spacing: 0.02em; }
.order-done > p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-soft); max-width: 60ch; }
.order-done textarea { margin-top: 14px; width: 100%; font: inherit; font-size: 15px; line-height: 1.5;
                       border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--paper); color: var(--ink); }
.order-done-row { margin-top: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.order-done-row .field-hint { flex: 1 1 240px; }
.order-history { margin-top: 30px; }
.order-history h3 { font-size: 15px; font-weight: 700; color: var(--ink); }
.order-history .field-hint { margin-top: 5px; }
.order-history ul { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.order-history li { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
                    padding: 13px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.oh-meta { font-size: 14px; color: var(--text-soft); flex: 1 1 58%; }
.oh-send { font-size: 14px; font-weight: 700; color: var(--pine-deep); white-space: nowrap; }
.oh-send:hover { text-decoration: underline; }
.order-history > .btn { margin-top: 14px; }

/* ── sizes and prices ────────────────────────────────── */
.price-block { margin-top: 66px; }
.price-h { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.price-note { font-size: 15px; color: var(--text-soft); margin-top: 9px; max-width: 56ch; line-height: 1.6; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
.price-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 22px 22px 16px; }
.price-card h4 { font-size: 16.5px; font-weight: 720; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.price-card table { width: 100%; border-collapse: collapse; }
.price-card th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
                  color: var(--text-mute); padding: 13px 0 9px; }
.price-card th:last-child, .price-card td:last-child { text-align: right; }
.price-card td { font-size: 15px; padding: 9px 0; border-top: 1px solid var(--rule-soft); color: var(--ink); }
.price-card tbody tr:first-child td { border-top: 0; }
.price-card td:last-child { font-weight: 700; color: var(--pine-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── faq ─────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.faq { background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.faq summary { cursor: pointer; list-style: none; padding: 17px 20px; font-size: 16.5px; font-weight: 640; color: var(--ink);
               display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 16px; text-align: center; font-family: var(--display);
                      font-size: 23px; font-weight: 500; color: var(--pine); line-height: 1; transition: color 200ms ease; }
.faq[open] summary::after { content: "−"; color: var(--pine-deep); }
.faq summary:focus-visible { outline: 2px solid var(--pine); outline-offset: -2px; border-radius: 12px 12px 0 0; }
.faq p { padding: 0 20px 19px; font-size: 15.5px; line-height: 1.7; color: var(--text-soft); max-width: 68ch; }

/* ── hero carousel ───────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
           clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hero-carousel { position:relative; overflow:hidden; padding-bottom:34px; }
.hero-slides { display:flex; transition: transform 620ms var(--ease-out); will-change:transform; }
.hero-slide { min-width:100%; flex:0 0 100%; }
.hero-badge { display:inline-flex; align-items:center; font-size:12.5px; font-weight:700;
              letter-spacing:0.13em; text-transform:uppercase; color:var(--pine);
              background:var(--accent-soft); color:var(--accent); border-radius:999px; padding:6px 14px; }
.hero-title { font-family:var(--display); font-size:clamp(32px,3.8vw,50px); font-weight:680;
              letter-spacing:-0.03em; line-height:1.06; margin-top:16px; max-width:22ch; }
/* ── serif display tuning (must stay AFTER the rules it corrects) ────────
   EB Garamond has a small x-height and far less colour than the grotesque it
   replaced, so at the old numbers the headings read thin and undersized. Less
   negative tracking (serifs collide long before grotesques do), a touch more
   size, and weight down to ~560 — a Garamond at 750 turns to mud. */
h1, h2 { font-weight: 560; letter-spacing: -0.008em; }
.section-h { font-size: clamp(32px, 3.6vw, 45px); font-weight: 560; letter-spacing: -0.012em; }
.hero-title { font-size: clamp(34px, 4vw, 54px); font-weight: 560; letter-spacing: -0.015em; }
.brand { font-weight: 560; letter-spacing: 0; }
.hero-media { margin:0; }
.hero-media img { width:100%; height:auto; border-radius:10px; display:block;
                  box-shadow:0 26px 54px -34px rgba(46,37,26,.42); }
.hero-arrow { position:absolute; top:calc(50% - 17px); transform:translateY(-50%);
              width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
              background:rgba(255,253,249,.92); display:grid; place-items:center; cursor:pointer; z-index:6;
              transition: background 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out); }
.hero-arrow svg { width:22px; height:22px; fill:none; stroke:var(--pine-deep); stroke-width:1.9;
                  stroke-linecap:round; stroke-linejoin:round; }
.hero-arrow:hover { background:var(--white); border-color:var(--pine); }
.hero-arrow:active { transform:translateY(-50%) scale(0.94); }
.hero-arrow.prev { left:14px; }
.hero-arrow.next { right:14px; }
.hero-dots { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:center; gap:0; z-index:6; }
/* 44px touch target, 9px visual dot: the hit area must not be the visual size */
.hero-dot { width:44px; height:44px; margin:0 -13px; padding:0; border:0; background:none; cursor:pointer;
            display:grid; place-items:center; }
.hero-dot::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--dot-idle);
                    transition:transform 200ms var(--ease-out), background 200ms ease; }
.hero-dot:hover::before { background:var(--dot-hover); }
.hero-dot[aria-selected="true"]::before { background:var(--pine); transform:scale(1.3);
                                          box-shadow:0 0 0 2px rgba(193,146,43,.55); }
.hero .hero-facts { margin-top:30px; }

/* ══ ETHIOPIAN THEME — tibeb band + Meskel gold ══════════
   Tibeb: the woven border from habesha kemis, reduced to a repeating
   gold diamond-and-cross band. Used as a signature rule at the top of the
   page and above the footer, never as a decorative border on cards. */
/* ── the ceremonial tricolour, as a SILK SELVEDGE.
      Deep dyed threads rather than flag-bright ones, hairline gold edging and
      a soft sheen so it reads as couture trim. The full flag colours still live
      in the theme as accent roles; this band is the woven edge of the cloth. */
.tibeb { height:11px;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.13) 100%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.09) 0 1px, rgba(0,0,0,.05) 1px 3px),
    linear-gradient(180deg,
      #17532F 0 33.4%,
      #B8912F 33.4% 66.7%,
      #7E211C 66.7% 100%);
  background-size: auto, 7px 7px, auto;
  border-top: 1px solid rgba(184,145,47,.42);
  border-bottom: 1px solid rgba(184,145,47,.30);
  box-shadow: 0 1px 2px rgba(60,45,28,.10), inset 0 1px 0 rgba(255,255,255,.24); }
[data-theme="dark"] .tibeb {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.22) 100%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.08) 1px 3px),
    linear-gradient(180deg,
      #2C7A4B 0 33.4%,
      #D4AF4A 33.4% 66.7%,
      #A63229 66.7% 100%);
  border-top-color: rgba(212,175,74,.45);
  border-bottom-color: rgba(212,175,74,.30); }

/* loom: the ribbon draws across as the page scrolls it into view */
/* Loom reveal. The band must NOT be hidden with clip-path or a transform on
   itself: Chromium computes an empty intersection rect for a clipped element,
   so IntersectionObserver never fires and it stays hidden forever. Observe an
   unclipped wrapper instead and slide the band inside it. */
.tibeb-wrap { overflow:hidden; }
.tibeb-wrap > .tibeb, .tibeb-wrap > .tibeb-div { display:block; transform:translateX(-101%);
  transition:transform 950ms var(--ease-out); }
.tibeb-wrap.in > .tibeb, .tibeb-wrap.in > .tibeb-div { transform:none; }

/* slimmer woven divider between sections, one colour per section, cycling */
.tibeb-div { height:12px; background-repeat:repeat-x; background-position:left center; background-size:auto 12px; }


.tibeb-div.g { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Cg fill='none' stroke='%23078930' stroke-width='1.6'%3E%3Cpath d='M4.5 1.4l3.2 3.2-3.2 3.2L1.3 4.6z'/%3E%3Cpath d='M13.5 1.4l3.2 3.2-3.2 3.2-3.2-3.2z'/%3E%3C/g%3E%3C/svg%3E"); }
.tibeb-div.y { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Cg fill='none' stroke='%23B98A16' stroke-width='1.6'%3E%3Cpath d='M4.5 1.4l3.2 3.2-3.2 3.2L1.3 4.6z'/%3E%3Cpath d='M13.5 1.4l3.2 3.2-3.2 3.2-3.2-3.2z'/%3E%3C/g%3E%3C/svg%3E"); }
.tibeb-div.r { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Cg fill='none' stroke='%23B3261E' stroke-width='1.6'%3E%3Cpath d='M4.5 1.4l3.2 3.2-3.2 3.2L1.3 4.6z'/%3E%3Cpath d='M13.5 1.4l3.2 3.2-3.2 3.2-3.2-3.2z'/%3E%3C/g%3E%3C/svg%3E"); }.tibeb-foot { margin-bottom:34px; }
.hero .tibeb-wrap { margin-bottom:26px; }
/* gold hairline under section headings instead of the neutral rule */
.section-h { border-bottom-color:var(--gold-rule); }
/* the active carousel dot carries the gold so the motif repeats */

/* ── motion: hero slide stagger on activation ─────────── */
.hero-copy > * { opacity:0; transform:translateY(14px);
                 transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.hero-slide[aria-hidden="false"] .hero-copy > * { opacity:1; transform:none; }
.hero-slide[aria-hidden="false"] .hero-copy > *:nth-child(1) { transition-delay:60ms; }
.hero-slide[aria-hidden="false"] .hero-copy > *:nth-child(2) { transition-delay:130ms; }
.hero-slide[aria-hidden="false"] .hero-copy > *:nth-child(3) { transition-delay:200ms; }
.hero-slide[aria-hidden="false"] .hero-copy > *:nth-child(4) { transition-delay:270ms; }
.hero-slide[aria-hidden="false"] .hero-media { opacity:1; transform:none; }
.hero-media { opacity:0; transform:translateY(18px) scale(.985);
              transition: opacity 520ms var(--ease-out) 120ms, transform 520ms var(--ease-out) 120ms; }

/* ── motion: nav underline, price rows, faq ───────────── */
.nav-links a::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
                      background:var(--pine); transform:scaleX(0); transform-origin:left;
                      transition:transform 240ms var(--ease-out); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform:scaleX(1); }
.price-card tbody tr { transition: background 180ms ease; }
.price-card tbody tr:hover { background:var(--surface-hover); }
.faq[open] p { animation:fadeUp 240ms var(--ease-out) both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }


/* ══ DARK THEME ═══════════════════════════════════════════
   A designed dark palette, not an inversion: deep warm charcoal from the same
   family as the paper tones, warmer greys for body copy, pine lightened so it
   still passes contrast on a dark surface, and the gold brightened because
   dark grounds swallow a warm mid-tone. */
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #15120E;
  --paper-2: #1B1712;
  --ink: #F3EEE4;
  --ink-soft: #C4BAA8;
  --line: #2F2921;
  --white: #201B15;
  --pine: #57B08B;
  --pine-deep: #8ACCA9;
  --pine-soft: #1E2F27;
  --gold: #D9AF52;
  --text-soft: #BFB5A3;
  --text-mute: #978D7B;
  --text-faint: #887F6E;
  --surface-hover: #262019;
  --rule-soft: #2B251D;
  --line-strong: #3E372C;
  --gold-rule: #6B5626;
  --dot-idle: #4B4336;
  --dot-hover: #6C614E;
  --btn-pill-hover: #27372E;
  --danger: #E79076;
  --danger-line: #B4614A;
  --hero-glow: rgba(87,176,139,.10);
  --card-shadow: rgba(0,0,0,.45);
  --shadow-warm: rgba(0,0,0,.78);
  --nav-bg: rgba(21,18,14,.86);
  --btn-fg: #0F211A;
  --panel-inv-bg: #0D0B08;
  --panel-inv-fg: #CBC2B2;
  --red: #E8615A;
  --red-soft: #3A211E;
  --green-soft: #1C2C21;
  --yellow-soft: #332C16;
}
[data-theme="dark"] .accent-green  { --accent:#3FA463; --accent-soft:#1C2C21; }
[data-theme="dark"] .accent-yellow { --accent:#D9AF52; --accent-soft:#332C16; }
[data-theme="dark"] .accent-red    { --accent:#E0574F; --accent-soft:#3A211E; }
[data-theme="dark"] body::before { opacity:.35; }
[data-theme="dark"] .tibeb { filter: brightness(1.3) saturate(1.05); }
[data-theme="dark"] .hero-arrow { background: rgba(32,27,21,.92); }
[data-theme="dark"] .hero-media img { box-shadow: 0 40px 80px -44px rgba(0,0,0,.9); }
[data-theme="dark"] .tile-media img, [data-theme="dark"] .hung img,
[data-theme="dark"] .hero-media img, [data-theme="dark"] .price-card { filter: brightness(.90) contrast(.98); }
[data-theme="dark"] .tile-media img, [data-theme="dark"] .hung img, [data-theme="dark"] .hero-media img {
  box-shadow: 0 0 0 1px rgba(255,255,255,.06); }

/* ── theme toggle ─────────────────────────────────────── */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center;
                width: 44px; height: 44px; border-radius: 999px; cursor: pointer;
                background: var(--white); border: 1px solid var(--line); color: var(--ink-soft);
                transition: color 200ms ease, border-color 200ms ease, background 200ms ease, transform 160ms var(--ease-out); }
.theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.55;
                    stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.nav-mobile .theme-toggle { margin: 10px auto 2px; }

/* ══ ETHIOPIAN THEME — carried through the page ══════════ */

/* 1. every section heading gets a tibeb flourish instead of a plain rule */
.section-h { position:relative; padding-bottom:15px; border-bottom:0; }
.section-h::after { content:""; position:absolute; left:0; bottom:0; width:143px; height:12px;
  background-color:var(--accent); opacity:.95;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9'%3E%3Cpath d='M5.5 1.1L9.4 4.5 5.5 7.9 1.6 4.5z'/%3E%3Cpath d='M0 4.5h1.6M9.4 4.5H11'/%3E%3C/g%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9'%3E%3Cpath d='M5.5 1.1L9.4 4.5 5.5 7.9 1.6 4.5z'/%3E%3Cpath d='M0 4.5h1.6M9.4 4.5H11'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size:11px 9px; mask-size:11px 9px; mask-repeat:repeat-x; -webkit-mask-repeat:repeat-x;
  mask-position:left center; -webkit-mask-position:left center;
  transform:scaleX(0); transform-origin:left; transition:transform 620ms var(--ease-out) 90ms; }
.section-h.in::after { transform:scaleX(1); }
[data-theme="dark"] .section-h::after { filter:brightness(1.35); }

/* 2. adey abeba (Meskel daisy) replaces the plain bullet dots in the hero facts */
.hero-facts li::before { content:""; width:13px; height:13px; border-radius:0; background:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23C1922B'%3E%3Cellipse cx='12' cy='5.6' rx='2.3' ry='3.8'/%3E%3Cellipse cx='12' cy='18.4' rx='2.3' ry='3.8'/%3E%3Cellipse cx='5.6' cy='12' rx='3.8' ry='2.3'/%3E%3Cellipse cx='18.4' cy='12' rx='3.8' ry='2.3'/%3E%3Cellipse cx='7.4' cy='7.4' rx='2.3' ry='3.8' transform='rotate(-45 7.4 7.4)'/%3E%3Cellipse cx='16.6' cy='16.6' rx='2.3' ry='3.8' transform='rotate(-45 16.6 16.6)'/%3E%3Cellipse cx='16.6' cy='7.4' rx='2.3' ry='3.8' transform='rotate(45 16.6 7.4)'/%3E%3Cellipse cx='7.4' cy='16.6' rx='2.3' ry='3.8' transform='rotate(45 7.4 16.6)'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.5' fill='%23A8761F'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:contain; }
[data-theme="dark"] .hero-facts li::before { filter:brightness(1.3); }

/* 3. a fine woven/cotton texture over the tinted sections — the weave of
      Ethiopian cotton cloth, and paper for a print shop */
.section-tint { background-color:var(--paper-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Cpath d='M0 3.5h7M3.5 0v7' stroke='%23000' stroke-opacity='.030' stroke-width='.7'/%3E%3C/svg%3E"); }
[data-theme="dark"] .section-tint { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Cpath d='M0 3.5h7M3.5 0v7' stroke='%23FFF' stroke-opacity='.028' stroke-width='.7'/%3E%3C/svg%3E"); }

/* 4. ge'ez numerals in the numbered step circles */
.send-n { font-family:var(--display); font-size:17px; }
.how-n { display:block; font-family:var(--display); font-size:26px; line-height:1; color:var(--gold); margin-bottom:8px; }
[data-theme="dark"] .how-n { filter:brightness(1.25); }

/* ══ ADDITIONAL MOTION ═══════════════════════════════════ */

/* scroll progress bar */
.progress { position:fixed; top:0; left:0; height:2.5px; width:100%; z-index:40;
  background:linear-gradient(90deg, #17532F, #B8912F 52%, #7E211C); transform:scaleX(0); transform-origin:left;
  pointer-events:none; }
/* heading flourish + cards cadence */
.price-card, .faq { transition:transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms ease; }
@media (hover:hover) and (pointer:fine) {
  .price-card:hover, .faq:hover { transform:translateY(-3px); box-shadow:0 22px 44px -22px var(--shadow-warm); border-color:var(--line-strong); }
  .btn-primary { position:relative; overflow:hidden; }
  .btn-primary::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.28) 50%, transparent 68%);
    transform:translateX(-120%); transition:transform 520ms var(--ease-out); }
  .btn-primary:hover::after { transform:translateX(120%); }
}
/* order confirmation slides in */
.order-done { animation:cardIn 420ms var(--ease-out) both; }
@keyframes cardIn { from { opacity:0; transform:translateY(14px) scale(.99); } to { opacity:1; transform:none; } }
/* back to top */
.to-top { position:fixed; right:16px; bottom:18px; z-index:30; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; border:1px solid var(--line);
  background:var(--white); color:var(--pine-deep);
  box-shadow:0 14px 30px -14px var(--shadow-warm);
  opacity:0; transform:translateY(10px) scale(.9); pointer-events:none;
  transition:opacity 260ms var(--ease-out), transform 260ms var(--ease-out), border-color 200ms ease; }
.to-top.show { opacity:1; transform:none; pointer-events:auto; }
.to-top:hover { border-color:var(--pine); }
.to-top:active { transform:scale(.94); }
.to-top svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ══ ETHIOPIAN IDENTITY, STRUCTURAL ══════════════════════
   Colour as thread: one accent per surface, all three as a family. */
.accent-green  { --accent:#078930; --accent-soft:var(--green-soft); }
.accent-yellow { --accent:#B98A16; --accent-soft:var(--yellow-soft); }
.accent-red    { --accent:#B3261E; --accent-soft:var(--red-soft); }
/* woven top edge on every card — the tibeb motif repeated at every surface */
.tile::before, .price-card::before, .faq::before, .quality-card::before {
  content:""; display:block; height:9px; flex:none; background-color:var(--accent);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9'%3E%3Cpath d='M5.5 1.1L9.4 4.5 5.5 7.9 1.6 4.5z'/%3E%3Cpath d='M0 4.5h1.6M9.4 4.5H11'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9'%3E%3Cpath d='M5.5 1.1L9.4 4.5 5.5 7.9 1.6 4.5z'/%3E%3Cpath d='M0 4.5h1.6M9.4 4.5H11'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size:11px 9px; mask-size:11px 9px; mask-repeat:repeat-x; -webkit-mask-repeat:repeat-x;
  mask-position:center; -webkit-mask-position:center; }
/* corners: clip the woven band so it follows the card radius */
.price-card, .quality-card, .faq { overflow:hidden; }
/* the print's woven top edge — sits on the paper edge, above the matte */
.tile::before { position:absolute; top:0; left:0; right:0; height:6px; margin:0; }
.tile-wide { position:relative; }
.price-card, .faq, .quality-card { position:relative; }
/* Amharic is visible, not hidden behind the toggle */
.am-eye { font-family:'Noto Sans Ethiopic',var(--body); font-size:15px; font-weight:600; letter-spacing:.02em;
          color:var(--gold); margin-bottom:6px; display:block; }
body.am .am-eye { display:none; }
.brand-txt { display:flex; flex-direction:column; line-height:1.1; }
.brand-am { font-family:'Noto Sans Ethiopic',var(--body); font-size:10.5px; font-weight:600; letter-spacing:.04em;
            color:var(--gold); margin-top:1px; }
body.am .brand-am { display:none; }
.footer .brand-am { color:var(--gold); }
/* page-wide cotton weave, with a hint of the three colours in the thread */
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M0 4.5h9M4.5 0v9' stroke='%23000' stroke-opacity='.022' stroke-width='.7'/%3E%3C/svg%3E"); }
main, .footer { position:relative; z-index:1; }
/* page-wide print grain + a faint diagonal weave OVER the content.
   The body::before weave above sits at z-index 0 — behind every surface that
   has its own background — so it only ever showed through the gaps. This one
   rides above the content (z-index 2, under the nav at 10) so the whole page
   reads as one sheet of printed cloth rather than a stack of panels. Alpha is
   baked per layer so the layers can differ. Deliberately NOT masked: a mask on
   a fixed overlay fades a band that travels with the viewport while scrolling. */
body::after { content:""; position:fixed; inset:0; z-index:2; pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, transparent 0 19px, rgba(165,122,43,.045) 19px 20px, transparent 20px 38px),
    repeating-linear-gradient(135deg, transparent 0 19px, rgba(165,122,43,.045) 19px 20px, transparent 20px 38px);
}
[data-theme="dark"] body::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' fill='%23fff' opacity='.055'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, transparent 0 19px, rgba(217,175,82,.04) 19px 20px, transparent 20px 38px),
    repeating-linear-gradient(135deg, transparent 0 19px, rgba(217,175,82,.04) 19px 20px, transparent 20px 38px);
}

/* ── typographic wrapping + skip link ─────────────────── */
h1, h2, h3, .hero-title, .section-h, .tile h3, .price-card h4 { text-wrap: balance; }
p, li, .hero-sub, .section-h + p { text-wrap: pretty; }
.skip { position:absolute; left:-9999px; top:0; z-index:100; }
.skip:focus { left:12px; top:12px; padding:12px 18px; border-radius:10px;
               background:var(--white); color:var(--ink); border:1px solid var(--line-strong);
               font-weight:700; box-shadow:0 10px 24px -12px var(--shadow-warm); }

/* ══ MOTION VARIETY ══════════════════════════════════════
   Canon: if everything enters the same way it reads as machine-made. Three
   behaviours now, assigned by what the element IS - headings resolve from a
   blur, cards and images settle from a slight scale, prose rises. */
.reveal.reveal-scale { opacity:0; transform:scale(.97);
  transition:opacity 460ms var(--ease-out), transform 460ms var(--ease-out); }
.reveal.reveal-scale.in { opacity:1; transform:none; }
.reveal.reveal-blur { opacity:0; filter:blur(7px); transform:translateY(7px);
  transition:opacity 520ms var(--ease-out), filter 520ms var(--ease-out), transform 520ms var(--ease-out); }
.reveal.reveal-blur.in { opacity:1; filter:blur(0); transform:none; }

/* once-only silk sheen across the ribbon as it draws in */
.tibeb-wrap { position:relative; }
.tibeb-wrap::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 34%, rgba(255,255,255,.45) 50%, transparent 66%);
  transform:translateX(-100%); }
.tibeb-wrap.in::after { animation:sheen 1150ms var(--ease-out) 480ms 1 both; }
@keyframes sheen { from { transform:translateX(-100%); } to { transform:translateX(100%); } }

/* ══ AMBIENT MOTION ══════════════════════════════════════
   Three slow continuous background behaviours, ported from the client's other
   design: the hero print breathes, a fine dot field drifts across it, and a
   large Meskel daisy turns almost imperceptibly. Things that move when nobody
   is doing anything are what make a page feel alive rather than printed.
   Rules that matter:
   RE-CALIBRATED: the first pass was so slow it was invisible - 1.1px/s of dot
   drift and a 96s rotation at 7.5% opacity read as 'no animation at all'. These
   now match the reference's pace (18s zoom to 1.07, a visible dot travel, a 40s
   turn) rather than my over-cautious guesses.
   - transform/opacity only. The reference animates background-position, which
     repaints the whole hero every frame; this drifts an oversized layer with
     translate3d instead, so it composites on the GPU.
   - the breathe is scoped to the VISIBLE slide, so switching slides restarts
     it and two hidden images never animate.
   - everything pauses once the hero leaves the viewport (html.past-hero). Three
     infinite animations on a Dimensity 920 is how a phone gets hot for nothing.
   - the reduced-motion block above already zeroes all of it. */
.hero { position: relative; }
.hero-carousel { position: relative; z-index: 1; }
.hero-slide[aria-hidden="false"] .hero-media img { animation: heroBreathe 18s ease-in-out infinite alternate; }
@keyframes heroBreathe { from { transform: scale(1); } to { transform: scale(1.07); } }

.hero::after { content:""; position:absolute; inset:-16% -12%; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 70% 30%, rgba(193,146,43,.22) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 25% 62%, rgba(14,92,65,.18) 0 1.1px, transparent 2.1px);
  background-size: 104px 104px, 138px 138px;
  animation: dotsDrift 9s ease-in-out infinite alternate; }
@keyframes dotsDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-42px,26px,0); } }
[data-theme="dark"] .hero::after { background-image:
    radial-gradient(circle at 70% 30%, rgba(217,175,82,.20) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 25% 62%, rgba(143,190,169,.17) 0 1.1px, transparent 2.1px); }

.hero-orn { position:absolute; right:-34px; top:-26px; width:230px; height:230px; z-index:0;
  opacity:.10; pointer-events:none; animation: spinSlow 40s linear infinite;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23C1922B'%3E%3Cellipse cx='12' cy='5.6' rx='2.3' ry='3.8'/%3E%3Cellipse cx='12' cy='18.4' rx='2.3' ry='3.8'/%3E%3Cellipse cx='5.6' cy='12' rx='3.8' ry='2.3'/%3E%3Cellipse cx='18.4' cy='12' rx='3.8' ry='2.3'/%3E%3Cellipse cx='7.4' cy='7.4' rx='2.3' ry='3.8' transform='rotate(-45 7.4 7.4)'/%3E%3Cellipse cx='16.6' cy='16.6' rx='2.3' ry='3.8' transform='rotate(-45 16.6 16.6)'/%3E%3Cellipse cx='16.6' cy='7.4' rx='2.3' ry='3.8' transform='rotate(45 16.6 7.4)'/%3E%3Cellipse cx='7.4' cy='16.6' rx='2.3' ry='3.8' transform='rotate(45 7.4 16.6)'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.5' fill='%23A8761F'/%3E%3C/svg%3E"); }
@keyframes spinSlow { to { transform: rotate(360deg); } }
[data-theme="dark"] .hero-orn { opacity:.14; }

html.past-hero .hero::after,
html.past-hero .hero-orn,
html.past-hero .hero-slide[aria-hidden="false"] .hero-media img { animation-play-state: paused; }

@media print { .hero-orn { display:none !important; } .hero::after { display:none !important; } }

/* the adey abeba opens on hover (fine pointers only) */
@media (hover:hover) and (pointer:fine) {
  .hero-facts li::before { transition:transform 280ms var(--ease-out), filter 280ms ease; }
  .hero-facts li:hover::before { transform:rotate(24deg) scale(1.2); filter:brightness(1.15); }
}

/* the carousel track owns horizontal drags, the page keeps vertical scroll */
.hero-slides { touch-action:pan-y; }

/* ══ PRINT ═══════════════════════════════════════════════
   Customers print price lists. Without this they get the nav, the carousel and
   a collapsed FAQ. */
.print-only { display:none; }
@media print {
  @page { margin: 14mm; }
  .nav, .progress, .to-top, .skip, .hero, .order-form, .channel-row,
  .tibeb-wrap, .visit-card, .send-grid .quality-card { display:none !important; }
  .print-only { display:block !important; margin-bottom:8mm; }
  .print-only h2 { font-size:16pt; margin-bottom:2mm; }
  .print-only p { font-size:10pt; color:#333; }
  body { background:#fff !important; color:#000 !important; font-size:10.5pt; }
  body::before, body::after { display:none !important; }
  .section, .price-block { padding:0 0 9mm !important; }
  .section-h::after { display:none !important; }
  .am-eye { color:#000 !important; }
  .tile::before, .price-card::before, .faq::before, .quality-card::before { display:none !important; }
  .tile, .price-card, .faq, .quality-card { break-inside:avoid; page-break-inside:avoid;
    border-color:#999 !important; box-shadow:none !important; transform:none !important; }
  .price-grid { display:grid !important; grid-template-columns:1fr 1fr !important; gap:6mm !important; }
  .bento { display:block !important; }
  .bento > .tile:nth-child(n) { rotate: 0deg; translate: 0 0; } /* :nth-child(n) to out-rank the stagger rules above */
  /* never print the wall panel: it would flood the page with ink */
  .wall-stage { background-image:none !important; background-color:#fff !important; border:0 !important; padding:0 !important; }
  .ghost-num { display:none !important; }
  .hung, .hung:nth-child(n) { rotate:0deg !important; translate:0 0 !important; box-shadow:none !important; }
  .wall-band { background-image:none !important; background-color:#fff !important; border:0 !important; padding:0 !important; margin:0 !important; box-shadow:none !important; }
  .wall-band::before { display:none !important; }
  .wall-band .tile, [data-theme="dark"] .wall-band .tile { border-color:#999 !important; box-shadow:none !important; background:#fff !important; }
  .tile { margin-bottom:6mm; }
  .faq p { color:#000 !important; }
  a { color:#000 !important; text-decoration:none !important; }
  .reveal, .reveal-scale, .reveal-blur { opacity:1 !important; transform:none !important; filter:none !important; }
}

/* ── responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .hung-a, .hung-b { grid-column: span 6; }
  .hung-c { grid-column: span 12; translate: 0 0; }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .visit-grid { grid-template-columns: 1fr; gap: 40px; }
  /* three per row, not two: with two columns the five small tiles leave the
     sixth cell of row three empty, which reads as a missing product image.
     Six tiles over two rows of three, plus the full-width tile, leaves no hole. */
  .tile-big, .tile-tall, .tile:nth-of-type(3), .tile:nth-of-type(4), .tile:nth-of-type(5) { grid-column: span 4; }
  .tile-wide { grid-column: span 12; }
}
@media (max-width: 860px) {
  .nav-links, .nav-cta .lang-group, .nav-cta .btn { display: none; }
  .nav-burger { display: flex; }
  .send-grid { grid-template-columns: 1fr; gap: 30px; }
  .order-form { grid-template-columns: 1fr; padding: 20px; gap: 18px; }
  .field-half { grid-column: 1 / -1; }
  .price-grid { grid-template-columns: 1fr; gap: 18px; }
  .price-block { margin-top: 48px; }
  .hero { padding: 44px 0 60px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .band-grid { grid-template-columns: 1fr; }
  .band-grid p { padding: 12px 10px; }
  .band-grid p + p { border-left: 0; border-top: 1px solid var(--line); }
  .section { padding: 68px 0; }
  .bento { grid-template-columns: 1fr; }
  .wall-band { padding: 36px 0 42px; margin: 16px 0 32px; }
  .ghost-num { font-size: 120px; top: 8px; right: 1vw; opacity: .20; }
  .bento > .tile:nth-child(n) { rotate: 0deg; translate: 0 0; } /* :nth-child(n) to out-rank the stagger rules above */
  .tile-big, .tile-tall, .tile:nth-of-type(3), .tile:nth-of-type(4), .tile:nth-of-type(5), .tile-wide { grid-column: span 1; }
  .tile-wide { flex-direction: column; }
  .tile-media-side { flex: none; aspect-ratio: 4 / 3; }
  .how-grid { grid-template-columns: 1fr; gap: 36px; }
  .wall-stage { grid-template-columns: 1fr; padding: 28px 16px 34px; }
  .hung:nth-child(n) { grid-column: span 1; rotate: 0deg; translate: 0 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .f-bottom { flex-direction: column; }
}

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