/* ============================================================
   Hara Technologies — haratechnologies.com
   Light editorial. Paper ground, black rules, five logo pastels.
   ============================================================ */

/* --- Tokens ------------------------------------------------ */
:root{
  --paper:#F6F5F1;
  --paper-2:#EFEDE7;
  --ink:#0A0A0A;
  --ink-soft:rgba(10,10,10,.72);   /* 7.9:1 on paper */
  --ink-mute:rgba(10,10,10,.60);   /* 5.1:1 on paper — WCAG AA */
  --ink-12:rgba(10,10,10,.12);
  --rule:rgba(10,10,10,.14);

  --hara-yellow:#FDFFA1;
  --hara-coral:#FFA4A1;
  --hara-green:#B1FFA1;
  --hara-magenta:#FFA1FF;
  --hara-blue:#A1E6FF;

  --hf-red:#FE2D54;
  --hf-green:#4CFF73;
  --ab-orange:#FF6C52;
  --ab-green:#1DD882;

  --sans:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Type scale — ten steps, largest first. EVERY font-size in this file is one
     of these. Nothing is sized freehand; if something needs a size it takes the
     nearest step, or the scale gains a step here, once. The root is left at the
     browser's 16px so a visitor's own text-size setting keeps working.
       grep -rn 'font-size' index.html assets/css/*.css | grep -v 'var(--fs-'
     should return only .kanji, which is artwork rather than text. */
  --fs-display: clamp(2.8rem, 8.4vw, 8.2rem);   /* hero h1, once on the site */
  --fs-h1:      clamp(2rem, 5.4vw, 4.6rem);     /* every section display line */
  --fs-h2:      clamp(1.5rem, 3.4vw, 2.6rem);   /* the typed Audition Buddy line */
  --fs-h3:      clamp(1.25rem, 2.2vw, 1.85rem); /* section openers, sub-display */
  --fs-h4:      clamp(1.05rem, 1.3vw, 1.25rem); /* tenet, step and card titles */
  --fs-lede:    clamp(1.08rem, 1.5vw, 1.32rem); /* ledes, pull quotes */
  --fs-body:    clamp(1.0625rem, 1.1vw, 1.15rem);
  --fs-small:   .94rem;                         /* buttons, inputs, address, footer */
  --fs-label:   .72rem;                         /* mono metadata, [01], badges */
  /* The phone mocks are a fixed-width component (min(300px,74vw)), so their
     type is fixed too — a fluid step inside a fixed frame would scale the text
     independently of the device drawn around it. Three steps, because a mock
     needs its own hierarchy: a headline number, body, and mono chrome. */
  --fs-mock-lg: 1.5rem;                         /* the ring's 4/5 */
  --fs-mock:    .78rem;                         /* primary text in a mock */
  --fs-micro:   .58rem;                         /* mono chrome in a mock */

  /* One sticky offset for the whole site, just clear of the 66px nav.
     Was 14vh (126px) in one place and calc(50vh - 300px) (150px) in another. */
  --stick:clamp(84px,10vh,104px);

  --gut:clamp(20px,4vw,64px);
  --maxw:1440px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.55;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--hara-blue);color:var(--ink)}

/* --- Type -------------------------------------------------- */
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
.h-display{font-size:var(--fs-display)}
.h-section{font-size:var(--fs-h1);line-height:1.04}
.h-sub{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em;font-weight:500}
.lede{font-size:var(--fs-lede);line-height:1.5;color:var(--ink-soft);max-width:34ch;text-wrap:pretty}
p{margin:0 0 1em;text-wrap:pretty}
.mono{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;font-weight:500}

/* --- Layout ------------------------------------------------ */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
section{position:relative}
.sec-pad{padding-block:clamp(64px,9.5vh,128px)}

/* Section header: [01] label + hairline, Heron-style */
.sec-head{display:flex;align-items:baseline;gap:16px;padding-bottom:22px;
  border-bottom:1px solid var(--rule);margin-bottom:clamp(28px,4.5vh,56px)}
.sec-head .idx{color:var(--ink-mute);flex:none}
.sec-head .ttl{flex:1;font-size:var(--fs-label);font-weight:500;letter-spacing:.14em;line-height:1.4}
.sec-head .meta{color:var(--ink-mute);text-align:right;flex:none}
@media(max-width:640px){.sec-head .meta{display:none}}

/* --- Scroll progress rule ---------------------------------- */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:120;pointer-events:none}
.progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--hara-yellow),var(--hara-coral) 25%,var(--hara-green) 50%,var(--hara-magenta) 75%,var(--hara-blue));
  border-bottom:1px solid var(--ink)}

/* --- Nav ---------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:110;
  transition:transform .5s var(--ease),background .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent}
.nav.is-stuck{background:rgba(246,245,241,.82);backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:var(--rule)}
.nav.is-hidden{transform:translateY(-102%)}
.nav .wrap{display:flex;align-items:center;gap:20px;height:66px}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.nav-logo svg{width:60px;height:auto}
.nav-logo b{font-weight:600;letter-spacing:-.02em;font-size:var(--fs-small)}
.nav-links{margin-left:auto;display:flex;gap:26px;align-items:center}
.nav-links a{text-decoration:none;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
@media(max-width:820px){.nav-links a:not(.btn){display:none}}

/* --- Buttons ------------------------------------------------ */
.btn{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:100px;
  border:1px solid var(--ink);background:transparent;color:var(--ink);text-decoration:none;
  font-size:var(--fs-small);font-weight:500;cursor:pointer;position:relative;overflow:hidden;
  transition:color .3s var(--ease),border-color .3s}
/* z-index 0, not -1: at -1 the panel paints BEHIND the button's own
   background, so on .btn--fill (solid ink) it was never visible at all. The
   label carries z-index 1, so the order is background -> panel -> label. */
.btn::before{content:'';position:absolute;inset:0;background:var(--hf-green);border-radius:inherit;
  transform:translateY(101%);transition:transform .45s var(--ease);z-index:0}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:translateY(0)}
.btn span{position:relative;z-index:1}
/* The filled button rests on black, so crossfading its label to black leaves
   it invisible until the neon panel arrives. The panel rises from the bottom
   and reaches the label at roughly half its travel, so snap the colour at that
   moment instead — in both directions. Under a moving edge the snap is
   invisible; the crossfade was not. */
.btn--fill{background:var(--ink);color:var(--paper);
  transition:color .001s linear .22s,border-color .3s}
.btn--fill::before{background:var(--hf-green)}
.btn--fill:hover{color:var(--ink)}
.btn[aria-disabled=true]{border-style:dashed;color:var(--ink-mute);cursor:default}
.btn[aria-disabled=true]:hover{color:var(--ink-mute)}
.btn[aria-disabled=true]::before{display:none}

/* --- Boot overlay ------------------------------------------- */
.boot{position:fixed;inset:0;z-index:200;background:var(--paper);
  display:grid;place-items:center;gap:0}
.boot__inner{text-align:center}
.boot__mark{width:min(46vw,320px);margin:0 auto 26px}
.boot__mark circle{opacity:0}
.boot__count{color:var(--ink-mute);font-variant-numeric:tabular-nums}
.boot.is-done{transform:translateY(-100%);transition:transform .9s var(--ease)}
html.no-js .boot,html.boot-skip .boot{display:none}

/* --- Hero ---------------------------------------------------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(96px,12vh,124px) 40px;position:relative;overflow:hidden}
#field{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero .wrap{position:relative;z-index:1}
/* @keyframes blip is kept deliberately — the eyebrow that used to run it is
   gone, but the recording dot in the Audition Buddy phone mock still does. */
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.hero h1{max-width:16ch}
.hero__foot{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,80px);align-items:flex-end;
  margin-top:clamp(36px,7vh,72px);padding-top:28px;border-top:1px solid var(--rule)}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}
.hero__scroll{margin-left:auto;color:var(--ink-mute);display:flex;align-items:center;gap:9px}
.hero__scroll i{width:1px;height:26px;background:var(--ink-mute);display:block;
  animation:drop 1.9s var(--ease) infinite;transform-origin:top}
@keyframes drop{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:640px){.hero__scroll{display:none}}

/* --- Reveal primitives -------------------------------------- */
.rv{clip-path:inset(0 0 105% 0);transform:translateY(.24em);will-change:clip-path,transform}
.rv-line{display:block;overflow:hidden}
.fade{opacity:0;transform:translateY(18px)}
html.no-js .rv,html.no-reveal .rv{clip-path:none;transform:none}
html.no-js .fade,html.no-reveal .fade{opacity:1;transform:none}

/* --- Belief / about ------------------------------------------ */
.belief{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,72px)}
@media(min-width:900px){.belief{grid-template-columns:1.05fr .95fr;align-items:start}
  /* The glyph is ~370px in a ~840px column, so 474px of this column was empty
     while you scrolled. Sticky turns that dead space into the thing you read
     the tenets against. Static below 900px, where the layout is one column. */
  .belief__mark{position:sticky;top:var(--stick)}}
/* Scale exception, deliberate: 腹 is a single glyph used as artwork, not text.
   It is sized to its column, not to a type step. Do not "fix" it. */
.kanji{font-size:clamp(5rem,13vw,11rem);line-height:.86;letter-spacing:-.04em;font-weight:500}
.kanji small{display:block;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-mute);font-family:var(--mono);margin-top:1.2em}
.belief__body p{font-size:var(--fs-lede);line-height:1.5;max-width:44ch}
.belief__body p:first-of-type{font-size:var(--fs-h3);line-height:1.28;
  letter-spacing:-.02em;color:var(--ink)}
.tenets{list-style:none;margin:clamp(28px,4vh,52px) 0 0;padding:0;
  display:grid;gap:0;border-top:1px solid var(--rule)}
.tenets li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--rule)}
.tenets .n{color:var(--ink-mute);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em}
.tenets b{font-weight:600;letter-spacing:-.02em;display:block;font-size:var(--fs-h4)}
.tenets span.d{color:var(--ink-soft);display:block;font-size:var(--fs-small);margin-top:3px;max-width:52ch}

/* --- Product sections ---------------------------------------- */
.prod{position:relative}
.prod__grid{display:grid;gap:clamp(32px,5vw,64px);grid-template-columns:1fr}
@media(min-width:960px){.prod__grid{grid-template-columns:1fr 1fr;align-items:start}}
.prod__sticky{position:sticky;top:var(--stick)}
@media(max-width:959px){.prod__sticky{position:static}}
.prod__mark{width:clamp(56px,6vw,84px);margin-bottom:26px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:100px;
  border:1px solid var(--ink);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:22px;background:var(--paper)}
.badge::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ink)}
.badge--hf::before{background:var(--hf-red)}
.badge--ab::before{background:var(--ab-orange)}
/* :not(.badge) — otherwise this outranks .badge (0,1,1 vs 0,1,0) and the Hara
   Fitness badge silently renders at body size while the Audition Buddy one,
   which sits outside .prod__body, does not. */
.prod__body p:not(.badge){color:var(--ink-soft);font-size:var(--fs-body);max-width:46ch}
.prod__body p.first{color:var(--ink);font-size:var(--fs-h3);line-height:1.3;
  letter-spacing:-.02em;margin-bottom:1.1em}
.prod__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

/* Phone mock */
.phone{width:min(300px,74vw);aspect-ratio:9/19.2;margin-inline:auto;position:relative;
  border:1.5px solid var(--ink);border-radius:38px;background:var(--paper);
  box-shadow:0 34px 70px -30px rgba(10,10,10,.32);overflow:hidden}
.phone::before{content:'';position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:76px;height:20px;border-radius:100px;background:var(--ink);z-index:5}
.phone__screen{position:absolute;inset:5px;border-radius:33px;overflow:hidden;
  background:var(--paper-2);display:flex;flex-direction:column}

/* Hara Fitness screens — four panels, one per feature in the list beside them.
   Same show/hide mechanism as .ab-panel; type stays on the fixed mock scale. */
.hf-screen{padding:44px 15px 15px;gap:9px;display:flex;flex-direction:column;height:100%;
  font-size:var(--fs-mock)}
.hf-panel{display:none;flex-direction:column;gap:8px;height:100%}
.hf-panel.on{display:flex}
.hf-ttl{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);margin:0}
.hf-row{border:1px solid var(--ink);border-radius:12px;padding:10px 11px;background:var(--paper);
  display:flex;align-items:center;gap:9px}
.hf-row b{font-weight:600;letter-spacing:-.01em}
.hf-row .tag{margin-left:auto;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;
  color:var(--ink-mute)}
.hf-add{border-style:dashed;border-color:var(--ink-mute);color:var(--ink-mute);
  justify-content:center;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em}
/* Week strip. The <i> is a box, not italics — same trick as .ab-slider i. */
.hf-week{display:flex;gap:5px}
.hf-week i{flex:1;text-align:center;padding:5px 0;border:1px solid var(--ink-12);border-radius:7px;
  font-family:var(--mono);font-size:var(--fs-micro);font-style:normal;color:var(--ink-mute)}
.hf-week i.done{background:var(--ink-12);color:var(--ink-soft)}
.hf-week i.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.hf-prog{border:1px solid var(--ink);border-radius:14px;padding:13px;background:var(--ink);
  color:var(--paper);display:flex;flex-direction:column;gap:4px}
.hf-prog b{font-size:var(--fs-mock-lg);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.hf-prog span{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;opacity:.6}
.hf-prog .hf-play{color:var(--hf-green);opacity:1;margin-top:5px}
.hf-vid{border:1px solid var(--ink);border-radius:12px;padding:8px 10px;background:var(--paper);
  display:flex;align-items:center;gap:10px}
.hf-vid .th{width:38px;height:26px;border-radius:5px;background:var(--ink);flex:none}
.hf-vid b{font-weight:600;display:block;letter-spacing:-.01em}
.hf-vid span span{color:var(--ink-mute);font-size:var(--fs-micro)}
.hf-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.hf-cal i{aspect-ratio:1;border-radius:4px;background:var(--ink-12)}
.hf-cal i.d{background:var(--hf-red)}
.hf-ring{margin:6px auto 10px;width:112px;height:112px;position:relative}
.hf-ring svg{transform:rotate(-90deg)}
.hf-ring div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.hf-ring b{font-size:var(--fs-mock-lg);font-weight:600;letter-spacing:-.03em;display:block;line-height:1}
.hf-ring small{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;color:var(--ink-mute)}

/* --- Audition Buddy ------------------------------------------ */
.ab-open{max-width:24ch;margin-bottom:clamp(24px,4vh,44px)}
.ab-type{font-size:var(--fs-h2);line-height:1.22;letter-spacing:-.03em;
  font-weight:500;max-width:20ch;min-height:3.7em}
.ab-type .cur{display:inline-block;width:.06em;height:.95em;background:var(--ink);
  vertical-align:-.1em;margin-left:.05em;animation:cur 1s steps(1) infinite}
@keyframes cur{50%{opacity:0}}
/* Same step as the Hara Fitness display line — they are the same rank of
   heading and used to be set 24px apart. */
.ab-punch{font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.035em;font-weight:600;
  max-width:17ch;margin-top:.6em}
.ab-punch em{font-style:normal;background:linear-gradient(transparent 62%,var(--ab-green) 62%)}

/* Flow walkthrough */
.flow{display:grid;gap:clamp(32px,5vw,64px);grid-template-columns:1fr;margin-top:clamp(24px,3.5vh,44px)}
@media(min-width:960px){.flow{grid-template-columns:.85fr 1.15fr;align-items:start}}
.flow__steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.flow__steps li{border-bottom:1px solid var(--rule);padding:18px 0 18px 0;cursor:pointer;
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  opacity:.4;transition:opacity .4s var(--ease)}
.flow__steps li.on{opacity:1}
.flow__steps li .n{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.14em;color:var(--ink-mute)}
.flow__steps li b{font-weight:600;letter-spacing:-.02em;font-size:var(--fs-h4);display:block}
.flow__steps li p{margin:4px 0 0;color:var(--ink-soft);font-size:var(--fs-small);max-width:44ch}
.flow__steps li.on .n{color:var(--ab-orange)}
/* Hara Fitness keeps its own colour rather than borrowing Audition Buddy's.
   It also needs the top margin .tenets used to give it: Audition Buddy's list
   sits in its own grid column, this one follows a paragraph. */
#hfSteps{margin-top:clamp(28px,4vh,52px)}
#hfSteps li.on .n{color:var(--hf-red)}
/* #hfSteps lives inside .prod__body, where `p:not(.badge)` (0,2,1) outranks
   `.flow__steps li p` (0,1,2) and would push the step text to body size at
   46ch. Same specificity trap as the badge above. Restate at 0,2,2. */
.prod__body .flow__steps li p{color:var(--ink-soft);font-size:var(--fs-small);max-width:44ch}

.ab-stage{position:sticky;top:var(--stick)}
@media(max-width:959px){.ab-stage{position:static}}
.ab-screen{padding:44px 15px 15px;height:100%;display:flex;flex-direction:column;gap:10px;
  font-size:var(--fs-mock)}
.ab-panel{display:none;flex-direction:column;gap:9px;height:100%}
.ab-panel.on{display:flex}
.ab-drop{border:1.5px dashed var(--ink-mute);border-radius:14px;flex:1;display:grid;
  place-content:center;text-align:center;gap:7px;color:var(--ink-mute);padding:14px}
.ab-drop b{color:var(--ink);font-size:var(--fs-mock);display:block}
.ab-row{border:1px solid var(--ink);border-radius:12px;padding:9px 11px;background:var(--paper);
  display:flex;align-items:center;gap:9px}
.ab-row .tag{margin-left:auto;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;
  color:var(--ink-mute)}
.ab-row.sel{background:var(--ab-green);border-color:var(--ink)}
.ab-chip{width:22px;height:22px;border-radius:50%;border:1px solid var(--ink);flex:none}
.ab-slider{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:var(--fs-micro);
  letter-spacing:.1em;color:var(--ink-mute);text-transform:uppercase}
.ab-slider i{flex:1;height:3px;background:var(--ink-12);border-radius:2px;position:relative}
.ab-slider i::after{content:'';position:absolute;top:-4px;height:11px;width:11px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--ink);left:var(--p,60%);transition:left .5s var(--ease)}
.ab-tele{flex:1;border:1px solid var(--ink);border-radius:14px;padding:13px;background:var(--ink);
  color:var(--paper);display:flex;flex-direction:column;gap:9px;justify-content:center;line-height:1.35}
.ab-tele .who{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;opacity:.55}
.ab-tele .me{color:var(--ab-green)}
.ab-rec{display:flex;align-items:center;gap:8px;justify-content:center;font-family:var(--mono);
  font-size:var(--fs-micro);letter-spacing:.14em;color:var(--ink-soft)}
.ab-rec::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--hf-red);
  animation:blip 1.4s infinite}
.ab-take{border:1px solid var(--ink);border-radius:12px;padding:9px 11px;display:flex;gap:9px;
  align-items:center;background:var(--paper)}
.ab-take .th{width:34px;height:24px;border-radius:5px;background:var(--ink);flex:none}

.privacy-note{margin-top:clamp(30px,4.5vh,56px);border:1px solid var(--ink);border-radius:18px;
  padding:clamp(22px,3vw,34px);background:var(--paper-2);display:flex;gap:20px;
  align-items:flex-start;flex-wrap:wrap}
.privacy-note p{margin:0;font-size:var(--fs-lede);letter-spacing:-.02em;
  max-width:40ch;line-height:1.35}
.privacy-note a{margin-left:auto;white-space:nowrap}

/* --- Contact --------------------------------------------------- */
.contact{border-top:1px solid var(--ink)}
.mail{display:inline-block;text-decoration:none;font-size:var(--fs-h1);
  letter-spacing:-.04em;font-weight:600;line-height:1.05;word-break:break-word;
  background:linear-gradient(var(--hara-blue),var(--hara-blue)) no-repeat 0 100%/0% 34%;
  transition:background-size .45s var(--ease)}
.mail:hover{background-size:100% 34%}
.contact__grid{display:grid;gap:clamp(32px,5vw,64px);grid-template-columns:1fr;
  margin-top:clamp(28px,4vh,52px)}
@media(min-width:900px){.contact__grid{grid-template-columns:1.2fr .8fr}}
.wl{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.wl .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl input[type=email]{flex:1;min-width:220px;padding:12px 17px;border-radius:100px;border:1px solid var(--ink);
  background:transparent;font:inherit;font-size:var(--fs-small);color:var(--ink)}
.wl input::placeholder{color:var(--ink-mute)}
.wl input:focus{outline:2px solid var(--hara-blue);outline-offset:1px}
.addr{font-style:normal;color:var(--ink-soft);font-size:var(--fs-small);line-height:1.65}
.addr b{color:var(--ink);font-weight:600}
.addr a{color:var(--ink-soft)}

/* --- Footer ---------------------------------------------------- */
.foot{border-top:1px solid var(--ink);padding-block:44px 34px;background:var(--paper-2)}
.foot__top{display:flex;gap:30px;flex-wrap:wrap;align-items:flex-start;
  padding-bottom:32px;border-bottom:1px solid var(--rule);margin-bottom:24px}
.foot__mark{width:104px}
.foot__nav{margin-left:auto;display:flex;gap:clamp(28px,5vw,72px);flex-wrap:wrap}
.foot__nav ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot__nav h3{margin:0 0 14px;color:var(--ink-mute);font-size:var(--fs-label);font-weight:500;letter-spacing:.14em;line-height:1.4}
.foot__nav a{color:var(--ink-soft);text-decoration:none;font-size:var(--fs-small);transition:color .2s}
.foot__nav a:hover{color:var(--ink)}
.foot__base{display:flex;gap:18px;flex-wrap:wrap;color:var(--ink-mute);font-size:var(--fs-small)}
.foot__base p{margin:0}
.foot__base .r{margin-left:auto}

/* --- Focus + motion prefs -------------------------------------- */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:var(--paper);
  padding:11px 18px;border-radius:0 0 8px 0;text-decoration:none}
.skip:focus{left:0}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{clip-path:none!important;transform:none!important}
  .fade{opacity:1!important;transform:none!important}
  .boot{display:none}
}