/* EF project screen — verbatim extract from css/styles.css for INTRO-1 (index.html) ONLY. Portfolio index-portfolio-archived.html loads the originals from styles.css; this is an isolated copy so INTRO-1 can render the EF full-bleed screen without pulling in the whole portfolio stylesheet. Keep in sync manually if the portfolio EF styles change. */

[data-theme="ef-tours"] {
  --project-visual-bg: #D9EAFB;
  --project-meta-bg: #0075E1;
  --project-meta-text-primary: #D9EAFB;
}

.project-row {
  display: block;
}

.project-row--live {
  display: flex;
  width: 1215px;
  height: 600px;
  align-items: stretch;
  /* v=283 — round the meta-panel's top-right to match its bottom-right. The
     meta-panel is the rightmost full-height panel, so rounding the row's
     top-right corner (with overflow:hidden) curves the colored description
     container there. The visual panel's top-left stays square. */
  border-top-right-radius: 16px;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  overflow: hidden;
}

.project-row--live .visual-panel {
  width: 912px;
  height: 600px;
  background: var(--project-visual-bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.ef-visual {
  position: relative;
  overflow: hidden;
}

/* Card stack is an 800×438 frame positioned at left=56 of the 912 visual
   panel (56px gutter each side; bottom=71 from the 600 panel floor).
   overflow:hidden enforces the gutter — EF-1 slides past .ef-stack's left
   edge during hover reveal but is clipped before reaching the panel gutter.
   Per Figma 872:960 (states 896:767, 899:3019, 900:567): each .ef-screen
   is a clip container. Its inner content is authored to the container's own
   fixed width and anchored left; as of 2026-07-29 (dual offset) that width no
   longer animates at all — the states move `left` only — so the clip never
   rescales content and never exposes uncovered container. */
.ef-stack {
  position: absolute;
  left: 56px;
  bottom: 71px;
  width: 800px;
  height: 438px;
  overflow: hidden;

  /* ── THE DECK'S ONE DECLARED VALUE ───────────────────────────────────────────────
     Everything about the stepped stack is derived from --ef-step. It used to be stored
     as arithmetic RESULTS — 16 width literals in the JS STATES table, the four widths
     below, .ef2-card's width + padding, and .efa-card's width — four sites across three
     files with nothing asserting they agreed. This is now the single source; the CSS
     derives its first-paint widths here and js/pellmell-intro-ef.js READS --ef-step and
     --ef-base off this element once at init and derives the whole STATES table from them.

     THE RULE, as designed:
       • every card's right offset is ONE FULL STEP from the card behind it, so card n
         (0-based front to back: e1 e2 e3 e5) is (3 − n) steps narrower than the base;
       • the FIRST card to peel left takes one full step;
       • every card peeling left AFTER the first takes a HALF step.
     The half-step is NOT a second value — it is --ef-step / 2, computed in the JS from
     this same declaration. Nothing else in either file may restate 37 or 18.5.

     --ef-base is the widest card as authored (EF-5's) and the right edge the ladder
     counts down from. --ef-step 37 is recovered from the portfolio build, not measured
     off Figma — see Docs/TODO.md "2026-07-29 — EF card offsets" for the derivation.
     Unitless on purpose: the JS parses them as plain numbers, and CSS multiplies by 1px. */
  --ef-base: 799;
  --ef-step: 37;

  /* The right ladder. A card's right edge belongs to the CARD, not the state, so these
     four hold in every state and only `left` animates. */
  --ef-w1: calc((var(--ef-base) - 3 * var(--ef-step)) * 1px);   /* hero, forward-most */
  --ef-w2: calc((var(--ef-base) - 2 * var(--ef-step)) * 1px);
  --ef-w3: calc((var(--ef-base) - 1 * var(--ef-step)) * 1px);
  --ef-w5: calc(var(--ef-base) * 1px);                          /* last screen, full width */
}

/* ---- EF full-width project screen (v=347) --------------------------------
   The EF row loses its .meta-panel and becomes an all-visual screen at the
   Matey visual-panel footprint (912×600). Two scoped overrides do it; every
   EF card position and the whole EF-2/3/4/5 sweep + hover state machine are
   UNTOUCHED (no motion retune).

   1) Row width 1215 → 912 so the visual (already 912) fills it edge-to-edge
      with no meta gap. Wins over .project-row--live on specificity. */
.project-row--live[data-theme="ef-tours"] {
  width: 912px;
}

/* 2) Card stack scaled full-bleed. The stack keeps its 800×438 INTERNAL
      coordinate space — so the STATES table (left/width px) and ef3-alt's
      ratio-based measure() stay byte-identical — and a single transform
      renders that space 1.14× larger (912/800). Card aspect 800:438 (1.83)
      ≠ panel 912:600 (1.52): scaling to full WIDTH keeps every card intact
      and leaves a balanced 50.34px top/bottom margin on the panel bg;
      scaling to full height instead would crop ~23% off the cards' sides.
      Origin bottom-left + left:0 pins the fill to the panel's left edge;
      bottom = (600 − 438×1.14)/2 centres it vertically. */
.project-row[data-theme="ef-tours"] .ef-stack {
  left: 0;
  bottom: 50.34px;
  transform: scale(1.14);
  transform-origin: bottom left;
}

.ef-screen {
  position: absolute;
  height: 438px;
  bottom: 0;
  /* SQUARE LEFT — AND IT MUST STAY SQUARE (user, 2026-08-24). This is the DECK DEFAULT,
     i.e. every state that is not `rest`, which is what the glide-close animation runs in.
     Once the cards start gliding closed the left corners go square and stack flush; a curve
     there breaks the block. A 2026-08-24 pass rounded this pair to 6.6364 as part of the
     footer's 10px sweep and was reverted the same day: the sweep applies to the HERO AT
     REST, which is the `[data-state="rest"]` rule further down, NOT to this default.
     Do not fold the two together — they are different states with opposite requirements. */
  border-radius: 0 20px 20px 0;
  overflow: hidden;
}

.ef-screen > img {
  display: block;
  height: 100%;
  width: auto;
}

/* Rest-state widths + lefts match Figma keyframe geometry (rest derived from
   states; see Docs/RULES.md). Each card's inner content is authored to that
   card's own width — img 688, .ef2-card 725, .efa-card 762, .ef5-card 799 —
   which is the same in every state, so no content is ever clipped or left
   uncovered. */
/* ALL FOUR AT left 0 (user 2026-07-28, off Figma 1853:8127 "EF-cards-med" as a
   VISUAL guide — no pixel measurement taken from it). The reference's four state frames show
   every card at the frame's own width, the forward card at x = 0 and closed cards stacked to the
   LEFT at negative x. Equal widths are what make that possible in the OPEN states: unequal ones
   force a right-hand strip whatever the offsets do. 799 is the widest card as authored (EF-5's),
   so this WIDENS three cards rather than clipping any.
   The left peeks live in js/pellmell-intro-ef.js STATES and are UNCHANGED — the authored
   18.6-step family was already the evenly-stepped stack the reference shows.

   THE WIDTHS BELOW ARE THE REST POSE, NOT 799 (user 2026-07-29; Figma 1872:5228 for INTENT ONLY,
   nothing measured off it). Rest is a STEPPED STACK: the last screen (EF-5) sits at full 799 and
   each card forward of it is one uniform step narrower off the RIGHT edge, so a sliver of each
   deeper card shows past the one in front. THE STEP IS 37, recovered from the portfolio build
   (the portfolio index-portfolio-archived.html) this file was ported from — its rest right edges are 688 / 725 / 762.25 / 799.31,
   a 37 ladder to within 0.31px, and 799 - n*37 lands on 688 / 725 / 762 / 799 exactly. INTRO-1's
   own s1 peek is 37 too. See js/pellmell-intro-ef.js STATES.rest for the full derivation.
   These are the CSS defaults so the FIRST PAINT already reads stepped; STATES.rest carries the
   identical values and GSAP owns them from the first viewport crossing on. The two must stay in
   step.

   THESE FOUR WIDTHS NOW HOLD IN EVERY STATE, NOT JUST REST (user 2026-07-29, dual offset). A
   card's right edge belongs to the CARD, not to the state: it keeps that edge for as long as it
   is unpeeled, and when it peels it leaves the right ladder and joins the left one. So WIDTH NO
   LONGER ANIMATES anywhere — every entry in STATES is `left` only, and these are the widths in
   all four. See js/pellmell-intro-ef.js STATES for both ladders. */
/* CORNERS (user 2026-07-28). The deck's default is `border-radius: 0 20px 20px 0` — square
   LEFT, because when a card is forward the closed ones stack against its left edge and a curve
   there would break the block. That default is what the GLIDE-CLOSE animation runs in, and the
   square left is load-bearing there (user, 2026-08-24). The footer's 10px left corner applies
   ONLY to the rest rule below. That is right for cards 2-4. It is wrong for the HERO at rest, which is
   the only card on screen and should read fully rounded; and card 2 carried an all-round override
   that made it the one exception, which is backwards. The override is dropped above.

   THE REST RULE BELOW COVERS ALL FOUR, NOT JUST THE HERO, AND THAT IS DELIBERATE. It was
   written when the four cards were COINCIDENT at rest (all left 0, width 799) and justified
   purely as show-through prevention. THEY ARE NO LONGER COINCIDENT — they share left 0 but hold
   four different right edges (688 / 725 / 762 / 799). RECONCILED 2026-07-29: the rule still
   holds, but only half the old reason does, and the two sides now hold for OPPOSITE reasons.
   Verified by computing per-scanline coverage at r=35.04 across the 438 height:

   LEFT corners — REASON SURVIVES UNCHANGED. All four still share left 0 and the same top/bottom
   and radius, so their left arcs are exactly congruent and nest perfectly: at every scanline all
   four start at the same x. Nothing can paint through another's left notch, and what shows there
   is the panel bg (at the top scanline, x < 35.04 is uncovered). Rounding only the hero would
   still expose e2's #0075e1 in the top-left and bottom-left notches, so the rule is still what
   prevents that.

   RIGHT corners — REASON IS NOW THE OPPOSITE, AND THAT IS CORRECT. These are NOT congruent; each
   card's right arc sits at its own right edge, so the card behind DOES paint into the one in
   front of it. At the top scanline the hero's arc has pulled its edge back to 652.96 and e2's
   blue fills 652.96..689.96. That is not show-through to be prevented — it is the 37 step sliver
   following the corner round, which is what a stepped deck should do. Because all four arcs are
   congruent and merely offset by 37, EVERY SLIVER STAYS EXACTLY 37 WIDE AT EVERY SCANLINE: the
   ladder is preserved through the rounding rather than distorted by it, which is why the corners
   read right. Rounding only the hero would instead give it a bare notch against a square-cornered
   e2 and break the ladder at the top and bottom.

   In every other state the default square-left applies, and the hero's own left corners are then
   off-clip inside .ef-stack. */
/* GROUND UNDER THE HERO (user, 2026-08-24) — the same class of fix as 7-Eleven's yellow.
   THE CORNER IS BAKED INTO THE ASSET, NOT DRAWN BY CSS. Screen-EF-1.webp opens with
       <rect width="688.241" height="437.878" rx="20" fill="url(#pattern0_587_665)"/>
   so the artwork carries its OWN rx=20 corner — ~30px painted through the 1.50685 scale.
   The container now clips at 6.6364 (10px painted), which is SMALLER, so a sliver of the
   SVG is transparent between the two arcs. --1 was the only card with no background, so
   what showed through that sliver was .ef-screen--2 behind it: a 22px triangular wedge of
   #0075e1 at the top-left, measured at x110-132 / y200-222 in the render.
   The right pair never notched — the deck default keeps them at 20 authored = 30 painted,
   which is exactly the SVG's own corner. This is a LEFT-corner fault by construction.
   #D7D8DF is the photo's own colour immediately inside the arc, sampled from the render
   (mean of 31 points along the arc), not the theme token: the build's EF ground
   --project-visual-bg is #D9EAFB, which is bluer than the photo actually is there and
   would trade a blue wedge for a paler one. */
.ef-screen--1 { left: 0px; width: var(--ef-w1); z-index: 4; background: #D7D8DF; }
/* RADIUS AT REST = 52.8px RENDERED (user 2026-07-28: the hero's right corners "read clipped,
   not fully rounded"). MEASURED FIRST — there is no geometric clip: .ef-screen--1 sits well inside
   .ef-stack's 800 (it was 799 wide when this was written, 688 now that rest is stepped) and flush
   top and bottom, and a sharp rect clip flush with a box removes nothing from a corner arc that
   curves inward. What is actually wrong is the RADIUS ITSELF, against the card beside it:
       authored 20px through .ef-stack's scale(1.50685)  ->  30.14px rendered
       the Matey card (base .hero-card, Figma rounded-[52.8px]) ->  52.80px rendered
   so the EF hero's corners are 43% tighter than the Matey card's and read cut next to them.
   DERIVED, not picked: 52.8 / 1.50685 = 35.04 authored, which renders at exactly 52.8.
   SCOPED TO REST, which is the only pose the hero is forward in. The other three cards keep
   the deck's `0 20px 20px 0` when THEY come forward — a curve on the left would break the
   stack — and at rest they sit behind the hero AND step past it on the right, where this rule
   keeps their left arcs congruent with the hero's and their right slivers a constant 37 at every
   scanline (see the CORNERS note above). If .ef-stack's scale changes, 35.04 must change with
   it — and so must the 52.8 it is derived to render at. */
/* LEFT PAIR ONLY (user, 2026-08-24). 35.04 -> 6.6364 on the LEFT corners: authored 6.6364
   because the stack renders at 1.50685x, so 6.6364 x 1.50685 = 10.0000 PAINTED, the footer's
   corner. Writing 10 here would paint 15.07.

   THE RIGHT PAIR STAYS 35.04 (= 52.8 rendered) AND THAT IS THE POINT OF THIS RULE. A first
   pass set all four to 6.6364 and shrank the hero's right corners with the left; corrected
   the same day. This rule exists BECAUSE of the note above it — the hero's right corners at
   the deck default's 20 authored (30.14 rendered) "read clipped, not fully rounded" (user,
   2026-07-28). Dropping them to 10 rendered made that worse, not better. The right side is
   deliberately NOT part of the footer's 10px sweep; the cards keep the larger corner there.

   So the two sides now answer to different masters and must be changed independently:
       LEFT   6.6364 -> 10.00 rendered   the 2026-08-24 corner sweep
       RIGHT 35.04   -> 52.80 rendered   the 2026-07-28 "not fully rounded" fix
   If .ef-stack's scale changes, BOTH must be re-derived against it. */
.ef-stack[data-state="rest"] .ef-screen { border-radius: 6.6364px 35.04px 35.04px 6.6364px; }
/* object-fit: cover, NOT a bare width bump. Screen-EF-1.webp is authored 1400x890 (2026-09-04: was a 689x438 SVG) with
   preserveAspectRatio="none", so a 799 box would stretch the hero photo 16% horizontally.
   `cover` sizes it from the INTRINSIC 689:438 and CROPS instead — proportions kept. The asset is
   untouched; it is shared with the portfolio's EF row, where the box is 688 and cover is a no-op.
   799 -> 688 (2026-07-29). The img is sized to e1's box, which is 688 in EVERY state now that
   width is constant per card — matching the portfolio exactly, which puts cover back to a ~0.15%
   no-op and shows the full authored hero at rest. THE EXACT FIT IS ALSO WHAT MAKES THE HERO'S
   LEFT PEEK PAINT: when e1 is peeled its container is off to the left with only its right 18.5-37
   px on screen, and .ef-screen--1 has no background of its own, so anything the img does not
   cover shows as nothing at all. That is exactly what went wrong when the img was 688 inside a
   799 container — the peek fell past the image's right edge and the hero vanished from the left
   stack in all three open states. Keep img width == e1's state width. */
.ef-screen--1 > img { width: var(--ef-w1); height: 100%; object-fit: cover; }
.ef-screen--2 { left: 0px; width: var(--ef-w2); z-index: 3; background: #0075e1; }
.ef-screen--3 { left: 0px; width: var(--ef-w3); z-index: 2; background: #f7f7f7; }
/* EF-5 (map) is the deepest card (z 0), so it is THE FULL-WIDTH ONE the rest stack steps down
   from — its right sliver is the outermost of the three at rest. It is fully occluded behind
   EF-1/2/3 at s1/s2 (same pink, so any transient reveal is seamless) and slides forward
   as the final state s3. */
.ef-screen--5 { left: 0px; width: var(--ef-w5); z-index: 0; background: #ff77e0; }

/* EF-2 native content (Tours we think you'll love). Built at intrinsic
   725×438 per Figma 896:2066. Photo placeholders use gradients until
   real assets are downloaded. */
/* Centered per Figma 896:2066: frame items-center, inner content 559.526 wide.
   WIDTH 725 -> 799 (2026-07-28) so the card fills its now-799 container instead of leaving 74px
   of bare #0075e1 at the right; the padding re-centres with it, (799-559.526)/2 = 119.737 each
   side. That supersedes the old asymmetric 74 left, which existed only to clear EF-1's left
   peek in s1 — 119.737 clears it by a wider margin, so the intent survives.
   799 -> 725 (2026-07-29, dual offset): .ef-screen--2 is 725 in every state now — that is EF-2's
   own right-ladder edge, held whenever it is unpeeled — so a 799 card would be clipped 74px on
   the right by the container and read visibly off-centre. The padding re-centres again,
   (725-559.526)/2 = 82.737 each side, and 82.737 still clears the hero's 37px left peek at s1,
   which is the only state this card is visible in. */
.ef2-card {
  width: var(--ef-w2);
  height: 438px;
  box-sizing: border-box;
  /* 559.526 is EF-2's authored inner content width (Figma 896:2066); the side padding is
     whatever is left over, halved, so the card re-centres itself from --ef-step alone. */
  padding: 44.762px calc((var(--ef-w2) - 559.526px) / 2);
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: 'Inter', 'Nunito', system-ui, sans-serif;
  color: white;
  opacity: 0;
}
.ef-stack[data-state="s1"] .ef2-card { opacity: 1; }
.ef2-header { display: flex; flex-direction: column; gap: 4px; }
.ef2-eyebrow {
  margin: 0;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.48px;
  line-height: 7.46px;
  text-transform: uppercase;
}
.ef2-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ef2-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 37.302px;
  white-space: nowrap;
}
.ef2-tabs { display: inline-flex; gap: 3.73px; align-items: center; }
.ef2-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;            /* v=237 — normalized EF button height (was 18.651) */
  padding: 0 8px;
  border-radius: 14.921px;
  font-size: 8px;
  font-weight: 500;
  line-height: 11.191px;
  white-space: nowrap;
}
.ef2-tab--active { background: #da2381; color: white; }
.ef2-tab--light  { background: white; color: #191919; }
.ef2-rule {
  width: 100%;
  height: 0;
  border-top: 0.466px solid rgba(255, 255, 255, 0.3);
  margin-top: 4px;
}
.ef2-tour-cards {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.ef2-tcard {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(7px);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0px 14px 36px 0px rgba(0,0,0,0.12);
  gap: 8px;
}
.ef2-tcard-photo {
  position: relative;
  height: 251.787px;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.ef2-tcard-photo--starter {
  background-image:
    linear-gradient(180deg, rgba(25,25,25,0) 50%, rgba(25,25,25,0.78) 80%, rgba(25,25,25,0.95) 100%),
    url("../assets/EF/ef2-starter.webp?v=2");
}
/* v=198 — 3D viewing context for the photo's hover wobble driven from
   main.js. Perspective lives on the article so the photo block (child)
   gets z-depth when rotated on X/Y. 1200px is gentle (high = subtle
   depth, low = funhouse). All three cards now share the same wobble
   config (v=196 warp 0.02), so perspective applies to all .ef2-tcard
   instances rather than per-modifier. Note: preserve-3d is NOT set on
   .ef2-tcard-photo because its overflow:hidden forces the computed
   value to flat regardless — and we don't need preserve-3d here since
   the photo is the rotated leaf, not a 3D container. */
.ef2-tcard {
  perspective: 1200px;
}
/* Hover chip overlay — Figma 946:944 "Tint" group. backdrop-blur on the
   overlay creates the "photo blurs" effect on what's beneath; chips
   inside paint sharp. Sits before heart/foot in DOM so abs-positioned
   siblings stack on top and remain visible. v=179 generalized from
   .ef2-tcard--starter to all .ef2-tcard so Card-2 (Modern Japan) and
   Card-3 (Most popular) share the same hover behavior. */
.ef2-tcard {
  will-change: transform;
  transform-origin: center center;
}
/* v=182 spacing spec (applies to all three cards):
     - 4px between chips (was 8)
     - 8px between bottom chip and card title (was 16)
   Title top y = .ef2-tcard-foot.top (198.485) + foot.padding-top (4) =
   202.485. Bottom-chip box-bottom must land at 202.485 − 8 = 194.485.
   padding-bottom on tint = 251.787 (tint height) − 194.485 = 57.302.
   justify-content: flex-end pins all chip stacks to that bottom y
   regardless of chip count — Card-2/3 naturally bottom-align with
   Card-1. */
.ef2-tcard-tint {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6.039px);
  -webkit-backdrop-filter: blur(6.039px);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  padding: 8px 8px 57.302px 8px;
}
.ef2-tcard-tint .ef2-tag { opacity: 0; }

/* Hover end-state pill rendering (v=188 simplification): the desc
   element itself IS the pill button — bg #F9F9F9/0.85 (already on
   .ef2-tcard-desc), collapses to h:30 + radius:32 (GSAP). Inside it:
   HTML link text "Our picks for your first trip" + inline trail SVG
   for the dots-arrow. The prior .ef2-link-button-img SVG overlay was
   removed — its baked text couldn't scale to match Figma 946:3629's
   text-[8px] / EF_Circular:Medium, and v=174's flex-shrink:0 on the
   link makes HTML text render reliably in the collapsed pill. */
.ef2-tcard-desc {
  position: relative;
  overflow: hidden;
}
/* Arrow icon (v=186) — Figma assets ICON-ARROW-HEAD.svg (rest state =
   14-dot chevron head) and ICON-arrow-dots.svg (end state = same head
   + 8-dot leg extending leftward in 2 rows of 4). Inline SVG uses the
   ICON-arrow-dots viewBox (12×16). Sized at h:30 + auto width →
   22.5px wide via the 12:16 aspect. Sits at right:4px of the desc
   (matches Figma 946:3626 desc pr-[4px]). Initial opacity:0 — fades
   in with revealTl alongside the button SVG. Head paths always-on
   after that fade; leg paths stay opacity:0 until legTl staggers them
   in on chip-cascade end (right→left DOM order = head→tail). */
.ef2-link-dots-trail {
  display: block;
  width: auto;
  height: 20px;       /* v=187 scale-down; auto width = 15px via 12:16 aspect */
  flex-shrink: 0;     /* v=193 — flex child of .ef2-tcard-link, prevent shrink */
  pointer-events: none;
  /* v=193: removed position:absolute + bottom + right + own opacity:0
     gate. The SVG is now a flex child INSIDE .ef2-tcard-link (HTML
     restructure same turn). Link's align-items:center auto-aligns text
     and icon vertically; link's opacity:0/revealTl tween gates both. */
}
.ef2-link-dot-leg { opacity: 0; }
.ef2-tcard-photo--japan {
  background-image:
    linear-gradient(180deg, rgba(25,25,25,0) 50%, rgba(25,25,25,0.85) 100%),
    url("../assets/EF/ef2-japan.webp?v=1");
}
.ef2-tcard-photo--popular {
  background-image:
    linear-gradient(180deg, rgba(25,25,25,0) 50%, rgba(25,25,25,0.85) 100%),
    url("../assets/EF/ef2-popular.webp?v=1");
}
.ef2-tcard-heart {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24.64px;
  height: 24.64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
}
.ef2-tcard-heart::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  background: url("../assets/EF/ICON-like.svg") center / contain no-repeat;
}
.ef2-tcard-foot {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ef2-tcard-title {
  margin: 0;
  font-size: 14.921px;
  font-weight: 700;
  color: white;
  line-height: 18.651px;
}
/* Pill + pink next button sit as siblings in a flex-row that hugs the
   left edge of the foot (Figma 893:1706). No gap — arrow touches the
   pill's right edge. Replaces the prior structure where the arrow was
   nested INSIDE the pill. */
.ef2-tcard-pill-row {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
}
.ef2-tcard-pill {
  display: inline-flex;
  align-items: center;
  gap: 3.73px;
  height: 18.651px;
  padding: 0 8px;
  border-radius: 13.397px;
  /* 8px, not the 12.5px this shipped with: matched to .ef2-eyebrow
     ("BROWSE TOURS") so the chips sit in the same type scale as the rest
     of the EF card (user, 2026-08-24). Size only - the pill keeps its
     18.651px capsule height, padding and weight 500, so the box is
     unchanged and only the label shrinks. The EF screen paints at
     1.50685x, so 8px authored renders ~12.05px, same as the eyebrow. */
  font-size: 8px;
  font-weight: 500;
  line-height: 11.191px;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 8.373px 0 rgba(255,255,255,0.4);
  align-self: flex-start;
}
.ef2-tcard-pill--new {
  background: rgba(255, 255, 255, 0.15);
}
/* Pink next-circle: pink bg + chevron baked into a single SVG (Figma
   893:1715 / 946:792, ICON-next-pink.svg, 25x25 viewBox with chevron
   path). Replaces the prior CSS-painted circle + text ">" glyph that
   couldn't match Figma's chevron proportions. */
.ef2-tcard-arrow {
  display: inline-block;
  width: 18.651px;
  height: 18.651px;
  background: url("../assets/EF/icon-next-pink.svg") center / contain no-repeat;
  flex-shrink: 0;
}
.ef2-tcard-desc {
  background: rgba(249, 249, 249, 0.85);
  border-radius: 8px;
  padding: 7.46px;
  height: 164.594px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 7.46px;
  color: #191919;
}
.ef2-tcard-desc > p {
  margin: 0;
  font-size: 6.698px;
  line-height: 11.191px;
  font-weight: 300;
}
.ef2-tcard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ef2-tag {
  display: inline-flex;
  align-items: center;
  height: 13.056px;
  padding: 0 8px;
  border-radius: 14.921px;
  background: white;
  font-size: 6.698px;
  font-weight: 400;
  line-height: 11.191px;
  color: #191919;
  white-space: nowrap;
}
.ef2-tag > strong { font-weight: 700; margin-right: 2px; }
.ef2-tcard-link {
  /* v=194 — absolute-positioned at desc vertical center. Removes the
     v=189 flex-shrink + margin-top:auto setup that was pulling the
     link to desc bottom. With paragraph collapsing to h:0 on hover,
     link absolute at top:50% + translateY(-50%) sits at desc center
     y=15. Inside the link, text and icon are flex children: text on
     left (link padding-left:8), icon on right (link padding-right:8),
     both vertically centered relative to each other via align-items. */
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding-top: 6px;        /* rest-state separator; JS tweens to 0 on hover */
  padding-left: 8px;        /* 8px from pill left edge per spec */
  padding-right: 8px;       /* 8px from pill right edge per spec */
  border-top: 0.466px solid rgba(25,25,25,0.3);
  display: flex;
  align-items: center;            /* vertical-center text + icon as flex row siblings */
  justify-content: space-between; /* text left, icon right */
  gap: 3.73px;
  font-size: 8px;          /* Figma 946:3629 text-[8px] */
  font-weight: 500;        /* Figma 'EF_Circular:Medium' */
  line-height: 11.191px;
  letter-spacing: 0;
  color: #191919;
  opacity: 0;              /* invisible at rest; revealTl tweens to 1 on hover */
}
/* v=190 RULE #3 (c) extreme-value test removed at v=191 after empirical
   confirmation that the rule was hitting .ef2-tcard-link — see turn 49
   console output. Label was always rendering; opacity gate now drives
   the hover-vs-rest distinction. */
.ef2-link-arrow {
  display: inline-flex;
  width: 13.056px;
  height: 13.056px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #FF77E0;
  font-size: 8px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── EF-5 native content (About EF — dot-matrix world map) ──────────────────
   Pink #ff77e0 card, ABOUT EF eyebrow, 20px title + white Learn-more button +
   hairline rule. Below the header, a
   Bequant-style dot-matrix world map — white 80% base dots for land, Bequant-
   red markers on the ~50 countries EF tours cover, each a looping radar pulse
   (rings expand + fade from a glowing centre) with a per-marker randomised
   phase (set inline by the builder) so the map never reads as synced. The map
   is built by the "EF-5 world map" IIFE in js/main.js. Content opacity- and
   pulse-gated to s4 (EF-5 forward). */
.ef5-card {
  width: 799px;
  height: 438px;
  box-sizing: border-box;
  padding: 44.762px 55.953px 30px 100px;
  display: flex;
  flex-direction: column;
  gap: 15.071px;
  font-family: 'Inter', 'Nunito', system-ui, sans-serif;
  color: white;
  opacity: 0;
}
.ef-stack[data-state="s3"] .ef5-card { opacity: 1; }
.ef5-header { display: flex; flex-direction: column; gap: 4px; }
.ef5-eyebrow {
  margin: 0;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.48px;
  line-height: 7.46px;
  text-transform: uppercase;
}
/* The header rule IS this row's border-bottom. align-self:stretch makes the
   row (and thus the rule) span the full card content box — same left origin
   and same right edge as .ef5-map below it (both are stretch children of the
   flex-column .ef5-card), so the rule's right end stays flush with the map's
   right edge across breakpoints without any absolute positioning. */
.ef5-title-row {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: 17px;
  border-bottom: 0.466px solid rgba(255,255,255,0.3);
  padding-bottom: 6px;
}
.ef5-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  line-height: 26px;
  letter-spacing: -0.2px;
  text-shadow: 0px 0.837px 2.512px rgba(0,0,0,0.1);
  white-space: nowrap;   /* hard constraint: title never wraps (measured to fit beside the pill) */
}
/* Self-contained 24×24 SVG button (translucent white circle + white dotted
   arrow) — dropped in as-is, no recolor / no wrapping pill. Sits centred in the
   title row (align-items:center); flex-shrink:0 keeps it beside the one-line title.
   translateY(0.63px): align-items centres on the line-box, but the title has no
   descenders so its ink centroid (optical centre) sits 0.63px below the line-box
   centre — this drops the icon's centre onto the title's optical centre. */
.ef5-learn-more {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transform: translateY(0.63px);
  /* RIGHT-ALIGNED (user 2026-07-28, direction from Figma 1852:7693 "EF-4-med" as a VISUAL guide
     — no pixel measurement taken from it). The reference puts this circle at the far right of the
     title row, flush with the rule's end; the row's `gap: 17px` alone left it sitting immediately
     after the title text instead.
     `margin-left: auto` rather than `justify-content: space-between` on the row: auto-margin
     absorbs the free space on this element only, so the TITLE does not move and the row keeps its
     17px gap as the minimum separation when the title is long enough to close the space. Nothing
     else in the row changes, and the row is already `align-self: stretch`, so "right" is the same
     right edge .ef5-map holds below it. */
  margin-left: auto;
}
.ef5-map {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  margin-top: 2px;
}
.ef5-map svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ef5-dot { fill: #ffffff; fill-opacity: 0.8; }
/* Bequant red marker + soft glowing centre */
.ef5-dot--active {
  fill: #f5333f;
  filter: drop-shadow(0 0 2.4px rgba(245,51,63,0.95)) drop-shadow(0 0 5px rgba(245,51,63,0.55));
}
.ef5-ring {
  fill: none;
  stroke: #f5333f;
  stroke-width: 0.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
/* Radar pulse only runs while EF-5 is the forward card (s3, the final state).
   --ef5-dur / --ef5-delay are set per ring by the builder (W→E/N→S wave). */
.ef-stack[data-state="s3"] .ef5-ring {
  animation: ef5-radar var(--ef5-dur, 7s) var(--ef5-delay, 0s) cubic-bezier(0.2, 0.5, 0.3, 1) infinite;
}
/* The visible ripple occupies only the first 42.86% (= PULSE_DUR/PERIOD = 3s/7s
   set in main.js); 42.86%→100% is idle. This makes the shared cycle far longer
   than one pulse so the W→E/N→S activation stagger reads as a travelling band
   instead of all-markers-mid-pulse-at-once. The ripple stops (0/3.43/30/42.86%)
   are the reverted keyframe's 0/8/70/100% scaled by 3/7 — identical per-segment
   easing and wall-clock, so a single pulse is visually unchanged. Keep this ratio
   in sync with PULSE_DUR/PERIOD in main.js. */
@keyframes ef5-radar {
  0%     { transform: scale(0.5); opacity: 0; }
  3.43%  { opacity: 0.85; }
  30%    { opacity: 0; }
  42.86% { transform: scale(6.5); opacity: 0; }
  100%   { transform: scale(6.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ef-stack[data-state="s3"] .ef5-ring { animation: none; }
}

/* EF-3 native content (How it works). Built at intrinsic 763×438 so the
   clip container (.ef-screen--3) reveals more by widening, never stretches.
   All inner geometry per Figma 899:3192. */
/* EF-3 padding-L = 82.987 so that in s2 (card-left = -0.25) content sits at
   stack-x 82.737 — matching EF-2 @ s1 (card-left 0 + padding-L 82.737). Active-
   state content left-edges are aligned across the panels per Figma 896:768 / 899:3019. */
.ef3-card {
  width: 763px;
  height: 438px;
  box-sizing: border-box;
  padding: 44.762px 55.953px 44.762px 84.25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  font-family: 'Inter', 'Nunito', system-ui, sans-serif;
  color: #191919;
  opacity: 0;
}
.ef-stack[data-state="s2"] .ef3-card { opacity: 1; }
.ef3-header { display: flex; flex-direction: column; width: 604px; }
.ef3-eyebrow {
  margin: 0;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.48px;
  line-height: 7.46px;
  text-transform: uppercase;
}
.ef3-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 4px;
}
.ef3-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 37.302px;
  white-space: nowrap;
}
.ef3-tabs { display: inline-flex; gap: 3.73px; align-items: center; }
.ef3-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;            /* v=237 — normalized EF button height (was 18.651) */
  padding: 0 8px;
  border-radius: 14.921px;
  font-size: 8px;
  font-weight: 500;
  line-height: 11.191px;
  background: white;
  color: #191919;
  border: 0.466px solid #191919;
  white-space: nowrap;
}
.ef3-tab--active {
  background: #da2381;
  color: white;
  border-color: transparent;
}
.ef3-rule {
  width: 100%;
  height: 0;
  border-top: 0.466px solid rgba(25, 25, 25, 0.3);
  margin-top: 4px;
}
.ef3-body {
  display: flex;
  gap: 33.572px;
  align-items: center;
  width: 604px;
}
.ef3-photo {
  width: 199.329px;
  height: 244.793px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.ef3-photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ef3-right {
  display: flex;
  flex-direction: column;
  gap: 17.252px;
  width: 371px;
  height: 247px;
}
.ef3-accordion { display: flex; flex-direction: column; }
.ef3-acc {
  display: flex;
  flex-direction: column;
  padding: 0 11.191px;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 0.466px solid rgba(25, 25, 25, 0.3);
}
.ef3-acc--open {
  background: white;
  border-radius: 8px;
  padding: 8px 8px 8px 11.191px;
  border-bottom: 0;
  margin-bottom: 4.663px;
}
/* v=235 — fixed-height open card. Carousel-open is 158px in every question
   state (Figma 1026:821 / 990:1950 / 1025:613 / 993:695); minus the card's
   8/8 vertical padding leaves a 142px inner. Question content sits at the top,
   the Q.1–Q.4 progress row is pinned to the bottom (space-between), so the card
   height and every element below it stay put as Q.1→Q.4 cross-fade. */
.ef3-acc-open-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 142px;
  width: 100%;
}
.ef3-acc-q-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ef3-acc-q-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ef3-acc-question {
  margin: 0;
  font-size: 8px;
  font-weight: 500; /* Figma medium — was 400/regular */
  line-height: 13.056px;
  color: #191919;
  width: 302px;
}
.ef3-acc-tags {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding-right: 8px;
}
.ef3-acc-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 4px;
  border-radius: 16px;
  background: #f7f7f7;
  font-size: 8px;
  font-weight: 300;
  line-height: 4.8px;
  color: #191919;
  white-space: nowrap;
}
.ef3-acc-tag-add {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url("../assets/EF/ICON-plus-sml.svg") center / contain no-repeat;
  flex-shrink: 0;
}
.ef3-acc-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 332px;
}
.ef3-acc-steps {
  display: flex;
  gap: 32px;
  height: 20px;
  align-items: center;
}
.ef3-acc-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
}
.ef3-acc-step-num {
  font-size: 6px;
  font-weight: 500;
  line-height: 24px;
  color: rgba(25, 25, 25, 0.5);
  text-align: center;
}
.ef3-acc-step-label {
  font-size: 6px;
  font-weight: 500;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.ef3-acc-step--active .ef3-acc-step-num,
.ef3-acc-step--active .ef3-acc-step-label {
  color: #000;
}
.ef3-acc-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.ef3-arrow-dots { display: block; height: 15.491px; width: auto; }
/* Leg dots hidden at rest — fan in via legTl on the per-question arrow beat
   (mirrors EF-2 ICON-ARROWHEAD-sml → ICON-ARROW-DOTS-sml). */
.ef3-link-dot-leg { opacity: 0; }
.ef3-acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14.921px;
  padding: 7.46px 0;
}
.ef3-acc--open .ef3-acc-head { padding: 0 0 4px; }
.ef3-acc-title {
  margin: 0;
  flex: 1 0 0;
  font-size: 8px;
  font-weight: 700;
  line-height: 13.056px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ef3-caret { width: 8.046px; height: 4.549px; flex-shrink: 0; }
.ef3-caret path { stroke: #DA2381; }
.ef3-acc-body {
  margin: 0;
  font-size: 8px;
  font-weight: 400;
  line-height: 13.056px;
  color: #191919;
}
.ef3-cta {
  display: inline-flex;
  align-items: center;
  gap: 3.73px;
  padding-left: 11.191px;
}
.ef3-cta-label {
  font-size: 8px;
  font-weight: 700;
  line-height: 11.191px;
}
/* Locked square (13.056×13.056) with circular rounding — native HTML keeps
   it square regardless of parent .ef-screen--3 width animation, which
   stretched the SVG'd equivalent into an oval. */
.ef3-cta-icon {
  width: 13.056px;
  height: 13.056px;
  flex-shrink: 0;
  background: #191919;
  color: #fff;
  font-size: 8px;
  line-height: 1;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── EF-3 quiz: Carousel-open question panels (Q.1–Q.4) ──────────────
   The open accordion card holds four question variants stacked in
   .ef3-q-stack. Only --active paints; the GSAP loop cross-fades opacity.
   v=235 — the stack is a fixed 108px box (the tallest question content,
   Q.3/Q.4 per Figma 1025:613 / 993:695). All four panels are top-aligned
   within it, so the open card stays one height and the progress row holds
   its position; questions no longer grow/shrink the card. */
.ef3-q-stack { position: relative; width: 100%; height: 108px; }
.ef3-q-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
}
.ef3-q-panel--active { opacity: 1; pointer-events: auto; }
.ef3-q-head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.ef3-q-question { width: auto; white-space: nowrap; }
/* Question text + its inline pill (Q.3 "Longer trips ▾", Q.4 "Add note ✎"),
   left of the accordion collapse caret. */
.ef3-q-qrow { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* L&C tag fillable selected-state — dark pill wipes in L→R over the light
   base, per Figma 988:616 (bg #191919, white text). */
.ef3-acc-tag--fillable { position: relative; overflow: hidden; }
.ef3-acc-tag-fill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 16px;
  background: #191919;
  color: #fff;
  font-weight: 300;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
}

/* Q.2 Activities — 4 illustrated icon cards + carousel chevron (990:1950) */
.ef3-q2-row { display: flex; align-items: center; width: 100%; }
.ef3-q2-cards { display: flex; align-items: center; gap: 4px; margin-right: -7px; }
.ef3-q2-card {
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ef3-q2-card--plain { background: #f7f7f7; border: 1px solid #fff; }
.ef3-q2-card--nobrd { background: #f7f7f7; }
.ef3-q2-card--selected { border: 2px solid #e3edf7; }
.ef3-q2-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ef3-q2-icon img { display: block; height: 42px; width: auto; }
.ef3-q2-label {
  font-size: 8px;
  font-weight: 400;
  line-height: 24px;
  color: #191919;
  text-align: center;
  white-space: nowrap;
}
.ef3-q2-label--med { font-weight: 500; }
.ef3-q2-chevron { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ef3-q2-chevron img { width: 24px; height: 24px; transform: rotate(-90deg); }

/* Q.3 Timing — "Longer trips ▾" pill + 4 season cards (Figma 1025:613).
   v=235 — collapsed to the compact one-row layout (the standalone "Longer
   Trips" heading, "Short Breaks" bar and "Choose a time period" rows were
   removed); the season selector now lives in a header pill, matching Q.2/Q.4. */
.ef3-q3-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 20px;
  padding: 0 8px;
  border-radius: 16px;
  background: #f7f7f7;
  flex-shrink: 0;
}
.ef3-q3-dropdown-label { font-size: 8px; font-weight: 500; line-height: 13.056px; color: #191919; white-space: nowrap; }
.ef3-q3-dropdown-caret { width: 8.046px; height: 4.549px; flex-shrink: 0; }
.ef3-q3-row { display: flex; align-items: center; width: 100%; }
.ef3-q3-cards { display: flex; gap: 4px; align-items: center; margin-right: -7px; }
.ef3-q3-card {
  width: 80px;
  height: 75.461px;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ef3-q3-card--outline { background: #fff; border: 2px solid #e3edf7; }
.ef3-q3-card--fill { background: #f7f7f7; border: 2px solid transparent; }
.ef3-q3-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }
.ef3-q3-icon img { height: 27px; width: auto; display: block; }
.ef3-q3-cardlabel { font-size: 8px; font-weight: 500; line-height: 24px; color: #191919; text-align: center; white-space: nowrap; }
.ef3-q3-chevron { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ef3-q3-chevron img { width: 24px; height: 24px; transform: rotate(-90deg); }

/* Q.4 Experience — 3 suitcase cards + header "Add note ✎" pill (Figma 993:695).
   v=235 — the per-card descriptions were removed and the Add-note pill moved
   into the question row (was below the cards), matching Q.2/Q.3. */
.ef3-q4-row { display: flex; gap: 4px; align-items: center; width: 100%; }
.ef3-q4-card {
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ef3-q4-card--outline { background: #fff; border: 2px solid #e3edf7; }
.ef3-q4-card--fill { background: #f7f7f7; }
.ef3-q4-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }
.ef3-q4-icon--wide { width: 46px; }
.ef3-q4-icon img { height: 33px; width: auto; display: block; }
.ef3-q4-cardlabel { font-size: 8px; font-weight: 500; line-height: 12px; color: #191919; text-align: center; white-space: nowrap; }
.ef3-q4-addnote {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 20px;
  padding: 0 6px 0 8px;
  border-radius: 16px;
  background: #f8f8f8;
  flex-shrink: 0;
}
.ef3-q4-addnote-label { font-size: 8px; font-weight: 500; line-height: 13.056px; color: #191919; white-space: nowrap; }
.ef3-q4-addnote-icon { width: 13px; height: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ef3-q4-addnote-icon svg { width: 12.5px; height: 12.5px; display: block; }

/* =========================================================================
   INTRO-1 INTEGRATION (NOT from the portfolio) — places the EF project screen
   as the 2nd screen on index.html, below the Matey hero.

   The shared base .hero is position:fixed; inset:0; z-index:100 (off-limits —
   loaded by v2/v3 too). This container sits AFTER #scrollTrack in normal flow
   with a HIGHER z-index, so as the page scrolls past the 180vh track the EF
   screen slides UP OVER the pinned Matey hero. The base is never modified.

   Scroll math: on the motion path <html> keeps .js-loading, so
   `.js-loading .scroll-track { height:180vh }` supplies the Matey scroll region
   and the EF screen naturally follows at ~180vh. On the reduced-motion / no-JS
   fallback the track collapses to 0, so we offset the EF screen by one viewport
   (margin-top:100vh) to keep the static Matey hero as the first screen.
   ========================================================================= */
.ef-project-screen {
  position: relative;
  z-index: 200;               /* above the fixed .hero (z-index 100) */
  min-height: 100vh;
  /* v=6 — the #0075E1 full-bleed blue is REMOVED. The section still needs an OPAQUE
     fill to occlude the pinned hero as it scrolls over, so it is the PAGE background
     (#fff, = body); the EF cards read as floating on the page. */
  background: #ffffff;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* Fallback (reduced-motion / no-JS): #scrollTrack is 0, so push the EF screen
   below the first viewport to preserve Matey-first ordering. */
html:not(.js-loading) .ef-project-screen {
  margin-top: 100vh;
}

/* =========================================================================
   INTRO-1 EF FOOTPRINT — the 1276×660 standard (the rounded Matey #heroCard size).
   The stack is a PLACEHOLDER contained (no clip) at S = 660/438 = 1.50685 (→ 1205.5
   wide), centred — the real cards are being authored in Figma. No panel fill (the
   removed #0075E1 lived on the section above; nothing replaces it — cards on page bg). */
.project-row--live[data-theme="ef-tours"] {
  width: 1276px;
  height: 660px;
  border-radius: 0;
  overflow: visible;
}
.project-row[data-theme="ef-tours"] .visual-panel {
  width: 1276px;
  height: 660px;
  background: transparent;
}
.project-row[data-theme="ef-tours"] .ef-stack {
  left: 35.26px;                 /* (1276 − 800×1.50685) / 2 — centre the placeholder */
  bottom: 0;
  transform: scale(1.50685);     /* contain: 660 / 438 (height-fit, no clip) */
  transform-origin: bottom left;
}

/* =========================================================================
   INTRO-1 CARD-2: the earlier photo-crop (148px) + padding-cut (20px) workaround
   was REMOVED (ef.css v=5). It arbitrarily shrank the photo and padding to force
   the content under 438px; the correct fit is a comp-guided content rebuild (Figma
   1776:1506 / 1780:2455), not a crop — see the report. Card 2 is back to its ported
   (portfolio-parity) values (photo 251.787, padding 44.762) pending that rebuild. */