/* ============================================================
   JapanPass v19 - shared design system
   One type system + one shell for home, directory, tours, listing.
   Display: Source Serif 4 | Body/UI: DM Sans | Logo kicker: Bebas Neue
   Japanese glyphs: Noto Sans JP. Red is brand-only. Tiers: blue/green/gold.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=DM+Sans:wght@400;500;600;700&family=Bebas+Neue&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root{
  --washi:#F8F6F2; --paper:#FFFFFF; --paper-2:#FCFBF9;
  --ink:#1A1410; --ink-2:#5B544C; --ink-3:#8D857B;
  --line:#E8E3DA; --line-2:#DCD6CB;
  --red:#D42015; --logo-red:#E10600;
  --gold:#C9A96E; --gold-deep:#A9822F;
  --blue:#2563A8; --green:#1D8E68;
  --shadow:0 1px 2px rgba(26,20,16,.04), 0 8px 26px rgba(26,20,16,.07);
  --shadow-lg:0 24px 64px rgba(26,20,16,.18);
  --r:14px; --r-lg:20px; --r-sm:10px;
  --maxw:1200px;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --display:'Bebas Neue','DM Sans',sans-serif;
  --jp:'Noto Sans JP','DM Sans',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);background:var(--washi);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.55;font-size:17px}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.1;margin:0;letter-spacing:-.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- shared header shell (dark ink, logo sits white) ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red);color:#fff;
  padding:12px 18px;border-radius:0 0 8px 0;font-weight:600;font-size:14px}
.skip-link:focus{left:0}
.jp-header{position:sticky;top:0;z-index:50;background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.08)}
.jp-header .row{display:flex;align-items:center;gap:22px;height:80px}
/* FA2. THE MASCOT SITS LEFT OF THE WORDMARK. THE WORDMARK ITSELF IS UNTOUCHED.
   The lockup becomes a flex row so the mark can be a SIBLING of the wordmark svg rather than
   anything wrapping or resizing it -- the wordmark markup is byte-identical to what shipped
   before, which is what the sign-off requires.

   48px tall, vertically centred. Clear space is 26px, which is half the head width: the head
   fills roughly the middle 52px of the 200-unit viewBox at this size, so half of it is 26. The
   gap is on the mascot's right only; the lockup's left padding is the header's own.

   <object>, NOT <img>, and that is the whole fallback mechanism. FA2 wants the static file if
   the animated one fails to load, and an <img onerror> is an inline handler -- Cloudflare's WAF
   strips those site-wide, so it would work in preview and be dead live. <object> renders its
   CHILD content on failure, declaratively, with no script anywhere. pointer-events:none so the
   parent <a> still takes the click. */
/* FF1/FF2, 2026-08-13, owner sign-off. The mascot is 72px and hangs across the boundary between
   the black bar and the white nav strip. The wordmark and strapline are untouched.

   THE BLACK BAR DOES NOT CHANGE HEIGHT. .jp-header .row stays 80px. The overhang is a
   translateY on the mascot alone -- a transform takes no space in layout, so nothing else in the
   row moves and the nav strip below stays exactly where it was. Changing the row height or using
   a negative margin would have shifted the wordmark, which is the thing that must not move.

   NOTHING CLIPPED IT. Checked before assuming: .jp-header is position:static with no overflow
   rule, .wrap has none, and the only overflow:hidden in this file is on an unrelated langbar
   pill. `visible` is already the initial value, so no header overflow needed changing and
   nothing was relying on the header clipping.

   Z-INDEX 49 IS THE PART THAT ACTUALLY MAKES IT WORK. .jp-quicknav -- the white strip -- is
   position:sticky with z-index:48 and an OPAQUE background. Without a higher z-index the cat's
   lower half is painted over by it and the overhang simply does not appear. The header is
   position:static and cannot take a z-index itself, so it goes on the mascot.

   THE NAV LINKS ARE NEVER OVERLAPPED. .jp-quicknav is justify-content:center, so its left is
   empty; the cat hangs into that empty space. Verified in the browser at every width, not
   assumed from the rule. */
/* FJ1. GAP 0. "It could be almost touching" -- and it is, but nothing collides, because the
   ARTWORK CARRIES ITS OWN MARGIN. Measured with getBBox() inside the object document: the ink
   ends at x=194 of the 200-unit viewBox, so 6 units of transparent space travel with the file.
   At 112px that is a 3.4px visual gap at gap:0; the paw itself stops at 188.5 (6.4px clear) and
   the nearest ink to the J is a decorative motion arc, not a whisker.
   So gap:0 in CSS reads as "almost touching" on screen rather than as a collision, and there is
   no need for the 1-2px fallback. If the artwork is ever re-exported tighter, this is the number
   to re-measure -- the safety here is the file's padding, not the CSS. */
.jp-logo{width:auto;flex:0 0 auto;display:flex;align-items:center;gap:0px}
/* FG3. The wordmark lockup scales as ONE unit. It is a single <svg> whose viewBox holds the
   wordmark AND the strapline, so setting its width scales both together and preserves their
   proportion exactly -- no letter-spacing touched, no restyling, no change to how the strapline
   sits under the wordmark. Widening the element is the only lever, and it is the safe one. */
.jp-logo .jp-wordmark{width:273px;flex:0 0 auto}
.jp-logo svg{width:100%;height:auto;display:block}
/* FQ4 / FO Part 2, 2026-08-13. BIGGER, AND CENTRED ON THE BAR'S BOTTOM EDGE.
   Measured on the local preview, not estimated.

   ONE CUSTOM PROPERTY drives width, height AND the negative margin, because those three have to
   move together and this is the exact drift the character bible complains about: across FA, FF
   and FG the gap went 26 -> 12 -> 4 -> 0 and the mark 48 -> 72 -> 112, by hand, each time.

   THE NEGATIVE RIGHT MARGIN. The artwork carries its own padding INSIDE the viewBox -- measured
   with getBBox() through the <object>'s contentDocument: left 9.99, right 6.00, top 3.53,
   bottom 4.26, of 200 units. So `gap:0` is a lie: 6/200 = 3% of the rendered width sits between
   the cat and the wordmark as transparent SVG. -3% cancels exactly that and nothing more.
   A percentage margin would resolve against the CONTAINING BLOCK, not the element, so it has to
   be calc() off the same variable.

   translateY(41px) CENTRES THE MASCOT ON THE BOUNDARY AT ANY SIZE. The row is 80px and the bar
   81px, so the flex centre is at 40px and 40 + 41 = 81 = the bar's bottom edge. The old 28px put
   the centre at 68, thirteen pixels high. Because it is a transform it takes no layout space and
   the 81px bar does not move. */
/* FR2/FR3, 2026-08-13. THE MARK OVERLAPS THE WORDMARK, AND IT IS TWO SEPARATE NUMBERS.
   Both are written out because a re-export of the artwork changes one and not the other, and a
   single combined figure would hide which half moved.

     -3%    CANCELS THE ARTWORK'S OWN TRANSPARENT PADDING. Measured through the <object>'s
            contentDocument with getBBox(): the content bbox is x 9.99 .. 194.00 of a 200-unit
            viewBox, so there are exactly 6 units -- 3% -- of empty SVG on the right edge. This
            part is NOT a design choice. If the artwork is re-exported with different padding,
            THIS NUMBER IS WRONG and the lockup will silently collide or gap. Re-measure it, do
            not adjust the overlap to compensate.
     -12px  IS THE OVERLAP, and it is a design choice.

   HOW 12px WAS ARRIVED AT, because "slightly overlapping" cannot be judged from bounding boxes.
   Both marks were rasterised at their rendered sizes and scanned per row for the rightmost
   mascot pixel and the leftmost wordmark pixel. The tightest point is y=40: the mascot's outer
   motion arc against the BOTTOM HOOK OF THE J, which reaches all the way to the left edge of the
   J's own advance box. Ink-to-ink clearance there was 14.05px. 12px of overlap leaves 2px.

   SO THE J IS NOT OBSCURED, AND CANNOT BE WITHOUT TOUCHING IT. FR2 asked to go past zero into a
   small negative gap. Past zero against the J's ADVANCE BOX is 13.52px, and past zero against the
   J's INK is 14.05px -- the hook fills its own box, so those two are the same edge. There is no
   setting that overlaps the J's space without painting on the letterform. 12px is the back-off
   FR2 asked for, and 2px is the number it landed on.

   pointer-events:none stays ON THE <object>, and GU1 does not change that. See the overlay
   below for why it cannot change, and how the cat is made clickable anyway. */

/* GU1 — THE WHOLE CAT IS A HOME LINK, WITHOUT GIVING THE <object> POINTER EVENTS.
 *
 * WHY NOT SIMPLY REMOVE pointer-events:none. An <object> is a replaced element hosting a NESTED
 * BROWSING CONTEXT. A click inside it is delivered to the embedded SVG document, not to the
 * ancestor <a> in this one, so the cat would become a dead zone that swallows the click instead
 * of passing it on. That is worse than today: today the click at least falls through to whatever
 * is behind. So the object keeps pointer-events:none, permanently, and a transparent sibling
 * layer takes the clicks instead.
 *
 * WHY A PSEUDO-ELEMENT ON THE ANCHOR, and not on the mascot: a replaced element does not render
 * ::before or ::after, so .jp-mascot::before would never exist. .jp-logo IS the home anchor, so
 * a pseudo-element on it is inside the link and a click on it navigates home with no JS at all.
 *
 * MEASURED BEFORE AND AFTER, on the rendered page at 1280px:
 *     cat box            x 57..195, y 12..150      header bottom y 81
 *     cat above header   69px tall, already resolved to the home anchor
 *     cat below header   69px tall, resolved to nav.jp-quicknav, i.e. NOTHING happened
 *     quicknav links under the cat                 0    (Directory starts at x=360)
 *     FF3 overlap region x 178, y 12, 16 x 58      resolves to the home anchor, and still must
 * So the overhang covers empty bar, not links: the layer steals nothing. z-index 50 clears
 * quicknav's 48 and the mascot's own 49, which is what makes the lower half live.
 *
 * NO DIMENSION CHANGES. The lockup is brand-gated: the wordmark width, the mascot size, the gap
 * and their ratio are all untouched here. The variables moved UP to .jp-logo so the mascot and
 * the overlay read the SAME numbers rather than two copies that drift; .jp-mascot inherits them,
 * so every calc resolves exactly as before. Verified byte-identical geometry after the change. */
.jp-logo{position:relative;
  --jp-mascot-size:138px;
  --jp-mascot-overlap:12px;
  --jp-mascot-shift:41px}
.jp-logo::before{content:'';position:absolute;left:0;top:0;
  width:var(--jp-mascot-size);height:var(--jp-mascot-size);
  transform:translateY(var(--jp-mascot-shift));
  z-index:50;pointer-events:auto}
.jp-mascot{
  width:var(--jp-mascot-size);height:var(--jp-mascot-size);
  margin-right:calc(var(--jp-mascot-size) * -0.03 - var(--jp-mascot-overlap));
  flex:0 0 auto;display:block;pointer-events:none;
  position:relative;z-index:49;transform:translateY(var(--jp-mascot-shift))}
.jp-mascot img,.jp-mascot svg{width:100%;height:100%;display:block}

/* MOBILE. Below 900px the header loses Sign in / Join free and gains the burger, so the row is
   logo + burger and the space either side of the wordmark collapses. 72px stops fitting there,
   and an overhang on a 56px-tall strip would put the cat's feet through the nav icons rather
   than beside them. So: smaller, and FULLY INSIDE the black bar -- no translateY, no z-index
   games needed because nothing is being overlapped. */
/* FG5. MOBILE. Below 900px the header is logo + burger and the row has no spare width, so BOTH
   halves of the lockup scale, not just the mascot. The wordmark is width-driven, so shrinking it
   scales the strapline with it and their proportion is preserved at every size.
   The mascot stays FULLY INSIDE the black bar here -- transform:none. Below 900 the nav strip is
   only 56px tall and its icons run edge to edge, so an overhang would put the cat's feet through
   them rather than beside them. */
@media(max-width:900px){
    /* FQ4: 76 -> 78, AND THE OVERHANG STAYS OFF BELOW 900. This is the one I got wrong first.
     I measured at 880px, saw the leftmost quicknav link at x=160 with 40px of clearance, and
     concluded the overhang was safe for the whole band. IT IS NOT. The nav links are distributed
     across the row, so as the viewport narrows they slide LEFT, under the mascot. Measured at
     620px: the leftmost link is at x=37 and a 96px overhanging mascot covers it outright. One
     sample inside a range is not a measurement of the range -- the same mistake shape as a
     depth-limited walk reporting "not found".
     So the cat stays inside the 80px row, and the row is therefore the ceiling: 78px leaves 1px
     top and bottom. That is only +2.6% on the old 76px, and it is the whole of what is available
     without changing the bar height, which has never changed and is not FQ4's to change. */
  /* FR4: the size is UNCHANGED at 78px because it is already at the ceiling. The row is 80px and
     the cat must sit inside it here (see the overhang note below), so 78 leaves 1px top and
     bottom and there is nowhere left to go without growing the 81px bar. Reported rather than
     faked with a 1px bump.
     The overlap IS applied at this scale, and it is NOT the desktop 12px scaled down. Estimating
     it that way gave 8px and left 13.66px of ink clearance -- nowhere near touching. The overlap
     does not scale with the mark, because the two things it closes scale differently: the
     wordmark's leading space follows the WORDMARK, and the mascot's inset ink follows the MASCOT,
     and here the mascot is 1.8x smaller than desktop while the wordmark is only 1.3x smaller.
     Measured per breakpoint instead: 19.5px leaves 2px. */
  /* GU1: the geometry variables live on .jp-logo at every breakpoint so the mascot and the
     click overlay read the SAME numbers. .jp-mascot inherits them, so every calc below
     resolves exactly as it did before. transform:none stays ON THE MASCOT deliberately --
     translateY(0px) would create a stacking context where none is wanted here, and the
     z-index:auto beside it says that is the intent. The overlay picks up shift 0 instead. */
  .jp-logo{--jp-mascot-size:78px;--jp-mascot-overlap:16.9px;--jp-mascot-shift:0px}
  .jp-mascot{transform:none;z-index:auto}
  /* FR4: the 16px floor is the ROW's flex gap, not free space. The header row is
     justify-content:space-between with gap:12px, so whenever the lockup and the burger do not
     both fit, the gap collapses to its minimum and THAT is the clearance -- which is why
     shrinking the lockup by 9.5px moved the burger 9.5px left and left the measured clearance at
     exactly 12px both times. Raising the floor is the fix; shrinking things is not. */
  .jp-header .wrap.row{gap:16px}
  /* FR4/FR5: 212 -> 164. Two reasons, and the first is a hard constraint rather than taste.
     The mascot CANNOT get bigger here -- it is capped by the 80px row -- so the only way the
     lockup gets the mascot-to-wordmark ratio anywhere near desktop's 50.6% is for the wordmark
     to come down. At 212 the ratio was 36.8%, which is not the same design at a second size.
     This is a WIDTH change only. The <svg> holds the wordmark and the strapline in one viewBox,
     so width scales both together; nothing here restyles either mark. */
  .jp-logo .jp-wordmark{width:164px}
  .jp-logo{gap:0px}
}
@media(max-width:560px){
  /* FU4 2026-08-13. 24px -> 12px each side, approved. The header row is
     justify-content:space-between with a 16px gap floor, so at 320px the lockup, the gap and the
     86.9px MENU control needed 320.6px inside a 272px content box -- 48.6px short, and the burger
     overflowed the viewport. This returns 24px of that for free: it is ordinary layout, touches
     no owner-controlled string, and MENU is untouched per FU4.
     Scoped to .jp-header so the rest of the page keeps its 24px gutters -- body text at 12px
     from the edge of a phone reads as a broken page. */
  .jp-header .wrap{padding:0 12px}
    /* FQ4: 56 -> 72. The bar is 81px at EVERY width, so a mascot that must sit inside it converges
     to the same ceiling no matter how narrow the screen gets -- which is why this is close to the
     900px value rather than proportionally smaller. It is held 6px under that ceiling because the
     wordmark also has to fit beside it: at 390px the lockup ends at x=262 of 390, and the MENU
     control is on the right of the same row.
     Measured at 390px: the quicknav links run the full width of the phone and "Directory" starts
     at x=2. An overhang here would sit straight on top of it, and pointer-events:none would make
     that worse rather than better -- the link would still work, the reader just could not read
     what it said. */
  /* FR4: 72 -> 78, so the phone now runs the same 78px mark as the tablet band. The bar is 81px
     at EVERY width, so anything that must sit inside it converges on the same ceiling -- there is
     no reason for the phone to carry a smaller mark than the tablet when both are capped by the
     same 80px row. The wordmark still steps down (168 vs 212), which is what changes the ratio.
     Overlap measured separately again: 16.5px leaves 2px here. Smaller than the 900px band's
     19.5px because the wordmark is 168 rather than 212, so its leading space is smaller. */
  .jp-logo{--jp-mascot-size:78px;--jp-mascot-overlap:16px}
  /* FR4: 168 -> 158, and this one is FORCED. Measured at 320px, the narrowest width worth
     supporting: the MENU control lands at x=263 and the lockup ended at 251, leaving 12px --
     under FR4's 16px floor. (It was ~1.3px before this job, so the floor has never been met
     here.) The mascot could not shrink to fix it, because FR4 asks for it to grow, so the
     wordmark gives. At 158 the clearance is comfortably over 16 at every width down to 320. */
  .jp-logo .jp-wordmark{width:158px}
  .jp-logo{gap:0px}
}
.jp-nav{display:flex;gap:6px;margin-left:14px}
.jp-nav a{font-size:16px;font-weight:600;color:rgba(255,255,255,.9);letter-spacing:.005em;
  padding:9px 15px;border-radius:8px;position:relative;transition:color .18s, background .18s}
.jp-nav a:hover,.jp-nav a:focus-visible{color:#fff;background:rgba(255,255,255,.09)}
.jp-nav a::after{content:"";position:absolute;left:15px;right:calc(100% - 15px);bottom:5px;height:2px;
  background:var(--red);transition:right .22s ease}
.jp-nav a:hover::after{right:15px}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px;border-radius:3px}
.jp-header :focus-visible{outline-color:var(--gold)}
.jp-actions{margin-left:auto;display:flex;align-items:center;gap:14px}
.jp-signin{font-size:14px;font-weight:500;color:rgba(255,255,255,.72)}
.jp-signin:hover{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:15px;border:none;cursor:pointer;
  border-radius:999px;padding:11px 22px;transition:transform .15s ease, box-shadow .2s ease, background .2s}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover{background:#d8bb87}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#e8331f}
.btn-ink{background:var(--ink);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(26,20,16,.03)}
.jp-burger{display:none;margin-left:auto;background:none;border:none;cursor:pointer;padding:8px}
.jp-burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;border-radius:2px}

/* ---------- shared tier badge ---------- */
.tier{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:6px}
.tier.listed{color:#6B645B;background:#ECE8E1}
.tier.bronze{color:#fff;background:#9C6B3F}
.tier.silver{color:#fff;background:#6E767C}
.tier.gold{color:#fff;background:#A9822F}
.tier.platinum{color:#fff;background:#2E2E30}

/* ---------- shared card ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);transition:transform .22s ease, box-shadow .22s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

/* ---------- section heading rhythm ---------- */
.eyebrow{font-family:var(--display);font-size:15px;letter-spacing:.18em;color:var(--red);
  text-transform:uppercase}
.eyebrow.jp{font-family:var(--jp);font-weight:700;font-size:12px;letter-spacing:.34em;color:var(--gold-deep)}
.sec-h{font-size:34px;margin:6px 0 0}
.sec-sub{color:var(--ink-2);font-size:16.5px;max-width:62ch;margin:10px 0 0}
.sec-link{font-weight:600;font-size:15px;color:var(--red);display:inline-flex;gap:6px;align-items:center}
.sec-link:hover{gap:10px}

/* ---------- shared footer ---------- */
.jp-foot{background:var(--ink);color:rgba(255,255,255,.66);margin-top:90px;
  padding:64px 0 30px;font-size:14.5px}
.jp-foot a{color:rgba(255,255,255,.66);transition:color .2s}
.jp-foot a:hover{color:#fff}
.jp-foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.jp-foot h4{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.4);margin:0 0 14px}
.jp-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.jp-foot .blurb{max-width:34ch;line-height:1.6;margin:16px 0 0}
.jp-foot .logo-f{width:168px;margin-bottom:4px}
.jp-foot .base{margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.45)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

@media(max-width:900px){
  .jp-nav,.jp-signin{display:none}
  .jp-burger{display:block}
  .jp-foot .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  body{font-size:16px}
  .sec-h{font-size:27px}
  .jp-foot .cols{grid-template-columns:1fr}
}

/* ===== site-wide mobile drawer + labeled burger ===== */
html,body{overflow-x:hidden}
.drawer{position:fixed;inset:0;z-index:60;background:rgba(12,10,8,.6);display:none}
.drawer.open{display:block}
.drawer .panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,84vw);background:var(--ink);padding:24px;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.drawer .panel a{color:#fff;text-decoration:none;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer .panel a b{display:block;font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.2}
.drawer .panel a i{display:block;font-style:normal;font-family:var(--sans);font-size:12.5px;color:rgba(255,255,255,.5);margin-top:2px}
.drawer .panel a.dr-join{margin-top:12px;background:var(--gold);color:var(--ink);text-align:center;border-radius:999px;border-bottom:none;font-weight:700;padding:13px}
.drawer .close{align-self:flex-end;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;margin-bottom:8px;line-height:1}
.jp-burger .blabel{display:inline-block;width:auto;height:auto;margin:0;background:none;font-size:13px;font-weight:700;letter-spacing:.05em;color:#fff;text-transform:uppercase}
.jp-burger .bicon{display:inline-block;width:22px;height:16px;margin:0;background:linear-gradient(#fff,#fff) left top/22px 2px no-repeat,linear-gradient(#fff,#fff) left center/22px 2px no-repeat,linear-gradient(#fff,#fff) left bottom/22px 2px no-repeat}
@media(max-width:900px){.jp-header .row{justify-content:space-between;gap:12px;max-width:100vw}.jp-actions{display:none}.jp-burger{display:inline-flex;align-items:center;gap:8px;margin-left:0}}

/* ===== social bar (site-wide) ===== */
.jp-social{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.jp-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);color:var(--ink-2);background:var(--paper);transition:all .16s;text-decoration:none}
.jp-social a:hover{color:#fff;background:var(--ink);border-color:var(--ink)}
.jp-social svg{width:18px;height:18px;fill:currentColor;display:block}
.jp-foot .jp-social{margin:18px 0}
.jp-nav a.active{color:#fff;position:relative}
.jp-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--red);border-radius:2px}

/* ===== labeled quick-nav (primary sections) ===== */
.jp-header{position:static}
.jp-nav{display:none}
.jp-quicknav{position:sticky;top:0;z-index:48;background:var(--paper);border-bottom:1px solid var(--line);display:flex;justify-content:center;gap:2px;padding:0 10px;overflow-x:auto;scrollbar-width:none;box-shadow:0 1px 0 rgba(26,20,16,.02)}
.jp-quicknav::-webkit-scrollbar{display:none}
.jp-quicknav a{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 18px;min-width:78px;text-decoration:none;color:var(--ink-2);font-family:var(--sans);font-size:12px;font-weight:600;border-bottom:2.5px solid transparent;transition:color .15s}
.jp-quicknav a svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.jp-quicknav a:hover{color:var(--ink)}
.jp-quicknav a.active{color:var(--red);border-bottom-color:var(--red)}
@media(max-width:560px){.jp-quicknav{justify-content:space-between;gap:0;padding:0 2px}.jp-quicknav a{padding:9px 4px;min-width:0;flex:1;font-size:10.5px}.jp-quicknav a svg{width:20px;height:20px}}

/* ===== interior pages (consult / learn / connect) ===== */
.ip-hero{background:var(--washi);border-bottom:1px solid var(--line);text-align:center;padding:52px 22px 44px}
.ip-hero .eyebrow{display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--red);margin-bottom:14px}
.ip-hero h1{font-family:var(--serif);font-weight:600;font-size:40px;line-height:1.12;letter-spacing:-.01em;margin:0 auto 14px;max-width:16em}
.ip-hero p{color:var(--ink-2);font-size:17px;line-height:1.6;margin:0 auto;max-width:34em}
.ip-sec{max-width:1040px;margin:0 auto;padding:46px 22px}
.ip-sec.tight{max-width:860px}
.ip-sec.alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:none}
.ip-sec.alt>.in{max-width:1040px;margin:0 auto}
.ip-head{text-align:center;margin-bottom:30px}
.ip-head .label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--red);margin-bottom:8px}
.ip-head h2{font-family:var(--serif);font-weight:600;font-size:28px;margin:0 auto;max-width:20em}
.ip-head p{color:var(--ink-2);font-size:15.5px;margin:10px auto 0;max-width:34em}
.ip-grid{display:grid;gap:18px}
.ip-grid.c4{grid-template-columns:repeat(4,1fr)}
.ip-grid.c3{grid-template-columns:repeat(3,1fr)}
.ip-grid.c2{grid-template-columns:repeat(2,1fr)}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;display:flex;flex-direction:column;position:relative}
.pcard.feat{border-color:var(--blue);box-shadow:var(--shadow)}
.pcard .pop{position:absolute;top:0;right:0;background:var(--blue);color:#fff;font-size:10px;font-weight:700;letter-spacing:.08em;padding:4px 11px;border-bottom-left-radius:10px}
.pcard .km{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:8px}
.pcard h3{font-family:var(--serif);font-weight:600;font-size:20px;margin:0 0 6px}
.pcard .price{font-size:30px;font-weight:700;line-height:1}
.pcard .price small{font-size:13px;color:var(--ink-3);font-weight:400}
.pcard .meta{font-size:12px;color:var(--ink-3);margin:4px 0 14px}
.pcard ul{list-style:none;margin:0 0 18px;padding:0;flex:1}
.pcard li{position:relative;padding:6px 0 6px 20px;font-size:13.5px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.pcard li:last-child{border-bottom:0}
.pcard li::before{content:"\2192";position:absolute;left:0;top:6px;color:var(--red)}
.pcard .pbtn{display:block;text-align:center;background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:12px;font-weight:700;font-size:14px;text-decoration:none}
.pcard.feat .pbtn{background:var(--red)}
.pcard .pbtn:hover{opacity:.92}
.ip-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.ip-step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.ip-step .n{font-family:var(--display);font-size:32px;color:var(--red);line-height:1}
.ip-step b{display:block;font-size:15px;margin:6px 0 4px}
.ip-step span{font-size:13px;color:var(--ink-2)}
.ip-note{text-align:center;color:var(--ink-2);font-size:14.5px;margin-top:22px}
.ip-note a{color:var(--red);font-weight:600;text-decoration:none}
.door{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.door a{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;text-decoration:none;border-radius:999px;padding:14px 22px}
.door a.email{background:var(--ink);color:#fff}
.door a.wa{background:var(--green);color:#fff}
.door a svg{width:18px;height:18px;fill:currentColor}
.langbar{display:flex;justify-content:center;margin:0 0 6px}
.langbar .lang{display:flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;font-size:12px;font-weight:700}
.langbar button{background:transparent;color:var(--ink-3);border:0;padding:7px 14px;cursor:pointer;font-family:var(--sans);font-weight:700}
.langbar button.on{background:var(--ink);color:#fff}
@media(max-width:900px){.ip-grid.c4,.ip-grid.c3{grid-template-columns:1fr 1fr}.ip-steps{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ip-grid.c4,.ip-grid.c3,.ip-grid.c2{grid-template-columns:1fr}.ip-steps{grid-template-columns:1fr}.ip-hero h1{font-size:30px}}