/* =====================================================================
   八王子住創 — 工務店・リフォーム デモサイト
   Shared stylesheet · mobile-first (375px base) → responsive
   ===================================================================== */

/* ---- Design tokens ---------------------------------------------------- */
:root{
  --brand:        #3A2E28;   /* dark brown — header / headings (tweakable) */
  --brand-deep:   #2A211C;   /* darker brown for contrast blocks          */
  --wood:         #A6743C;   /* wood brown — sub / dividers                */
  --accent:       #E0913A;   /* orange / 木漏れ日 — CTA                     */
  --accent-ink:   #B96E1E;   /* darker orange for text on cream           */
  --recruit:      #1E3A30;   /* recruit section base (energetic shift)    */
  --recruit-accent:#F0A93B;  /* recruit accent (tweakable)                */
  --bg:           #FFFFFF;
  --cream:        #F5F1EA;   /* section ground                            */
  --cream-deep:   #ECE4D7;
  --line:         #E3DACB;   /* hairline on cream                         */
  --ink:          #2A2A2A;
  --ink-soft:     #5C564F;
  --ink-mute:     #8A837A;

  --serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --head:  var(--serif);     /* heading family (tweakable serif/gothic)   */

  --maxw: 1160px;
  --gut: 20px;
  --radius: 4px;
  --shadow-sm: 0 1px 3px rgba(42,33,28,.08), 0 6px 18px rgba(42,33,28,.06);
  --shadow-md: 0 4px 14px rgba(42,33,28,.10), 0 18px 44px rgba(42,33,28,.10);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Reset / base ----------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
  font-size:15px;line-height:1.85;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{font-family:var(--head);font-weight:600;line-height:1.35;letter-spacing:.02em;margin:0}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
.serif{font-family:var(--serif)}

/* heading-font tweak: gothic */
body.font-gothic{--head:var(--sans)}
body.font-gothic h1,body.font-gothic h2,body.font-gothic h3,body.font-gothic h4{font-weight:800;letter-spacing:.01em}

/* ---- Layout helpers --------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:clamp(56px,11vw,104px)}
.section--cream{background:var(--cream)}
.section--ink{background:var(--brand);color:#F3ECE2}
.center{text-align:center}
.stack-sm>*+*{margin-top:8px}

/* ---- Eyebrow + section heading --------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent-ink);margin:0 0 14px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--wood);display:inline-block}
.section--ink .eyebrow{color:var(--accent)}
.section--ink .eyebrow::before{background:var(--accent)}
.s-title{
  font-size:clamp(25px,6.4vw,40px);line-height:1.3;color:var(--brand);
  letter-spacing:.03em;
}
.section--ink .s-title{color:#fff}
.s-title .accent{color:var(--accent-ink)}
.s-lead{margin-top:18px;color:var(--ink-soft);font-size:14.5px;max-width:42em}
.center .s-lead{margin-inline:auto}
.s-head{margin-bottom:38px}

/* ---- Buttons ---------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.04em;
  padding:15px 26px;border-radius:var(--radius);border:1.5px solid transparent;
  cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s;
  text-align:center;line-height:1.4;
}
.btn .ar{transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn--accent{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(224,145,58,.32)}
.btn--accent:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(224,145,58,.42)}
.btn--brand{background:var(--brand);color:#fff}
.btn--brand:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--ghost{background:transparent;border-color:currentColor;color:var(--brand)}
.btn--ghost:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn--light{background:#fff;color:var(--brand)}
.btn--light:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--recruit{background:var(--recruit-accent);color:#2A211C;box-shadow:0 8px 22px rgba(240,169,59,.3)}
.btn--recruit:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(240,169,59,.42)}
.btn--lg{padding:18px 30px;font-size:16px}
.btn--block{display:flex;width:100%}

/* ---- Placeholder image system ---------------------------------------- */
.ph{
  position:relative;overflow:hidden;background:var(--cream-deep);
  display:flex;align-items:center;justify-content:center;color:rgba(58,46,40,.34);
  background-image:
    linear-gradient(135deg,rgba(166,116,60,.16),rgba(58,46,40,.10));
}
.ph::after{
  content:attr(data-label);position:absolute;left:10px;bottom:9px;
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.12em;
  color:rgba(58,46,40,.42);background:rgba(255,255,255,.62);
  padding:3px 8px;border-radius:3px;backdrop-filter:blur(2px);
}
.ph svg{width:38%;max-width:88px;height:auto;opacity:.5}
.ph--green{background-image:linear-gradient(135deg,rgba(44,74,59,.20),rgba(30,58,48,.12))}
.ph--wood{background-image:linear-gradient(135deg,rgba(166,116,60,.26),rgba(185,110,30,.12))}
.ph--dark{background:var(--brand);color:rgba(255,255,255,.4);background-image:linear-gradient(135deg,rgba(255,255,255,.06),rgba(0,0,0,.18))}
.ph--dark::after{color:rgba(255,255,255,.7);background:rgba(0,0,0,.28)}

/* =====================================================================
   HEADER
   ===================================================================== */
.hdr{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  transition:box-shadow .3s;
}
.hdr.scrolled{box-shadow:0 4px 20px rgba(42,33,28,.08)}
.hdr__bar{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;gap:11px}
.brand__mark{flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1.12}
.brand__name{font-family:var(--head);font-weight:700;font-size:16.5px;color:var(--brand);letter-spacing:.04em}
.brand__en{font-family:var(--sans);font-size:8.5px;letter-spacing:.28em;color:var(--ink-mute);text-transform:uppercase}
.nav{display:none}
.hdr__cta{display:none}
.nav__burger{
  display:inline-flex;flex-direction:column;gap:4.5px;width:44px;height:44px;
  align-items:center;justify-content:center;background:none;border:0;cursor:pointer;margin-right:-10px;
}
.nav__burger span{width:22px;height:2px;background:var(--brand);border-radius:2px;transition:.3s var(--ease)}
.nav__burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:62px 0 0;background:var(--bg);z-index:99;
  transform:translateX(100%);transition:transform .34s var(--ease);
  display:flex;flex-direction:column;padding:8px var(--gut) 30px;overflow-y:auto;
}
.drawer.open{transform:translateX(0)}
.drawer a{
  font-family:var(--head);font-size:18px;font-weight:600;color:var(--brand);
  padding:17px 4px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;
}
.drawer a .en{font-family:var(--sans);font-size:10px;letter-spacing:.16em;color:var(--ink-mute);font-weight:600}
.drawer a.is-recruit{color:var(--accent-ink)}
.drawer__cta{margin-top:24px;display:grid;gap:12px}
.drawer__tel{margin-top:22px;text-align:center}
.drawer__tel a{display:block;border:0;padding:0}
.drawer__tel .num{font-family:var(--head);font-size:26px;color:var(--brand);letter-spacing:.04em}
.drawer__tel .lbl{font-size:11px;color:var(--ink-mute);letter-spacing:.1em}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;background:var(--brand-deep);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media .ph{width:100%;height:100%}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(42,33,28,.62) 0%,rgba(42,33,28,.78) 60%,rgba(42,33,28,.92) 100%)}
.hero__inner{position:relative;z-index:1;padding-block:54px 40px}
.hero__loc{
  display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.18em;color:var(--accent);margin-bottom:20px;
}
.hero__loc::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(224,145,58,.22)}
.hero h1{font-size:clamp(30px,8.6vw,58px);line-height:1.28;letter-spacing:.03em;color:#fff;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--accent);position:relative;white-space:nowrap}
.hero__sub{font-size:14.5px;line-height:1.95;color:rgba(255,255,255,.82);max-width:32em;margin-bottom:30px}
.hero__split{display:grid;gap:13px}
.hero__door{
  display:flex;align-items:center;gap:15px;padding:18px 18px;border-radius:6px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  transition:transform .25s var(--ease),background .25s,border-color .25s;backdrop-filter:blur(4px);
}
.hero__door:hover{transform:translateY(-3px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.hero__door .ic{flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.hero__door--req .ic{background:var(--accent)}
.hero__door--job .ic{background:#fff}
.hero__door .ic svg{width:24px;height:24px}
.hero__door .tx{flex:1;min-width:0}
.hero__door .tx b{display:block;font-family:var(--head);font-size:16px;font-weight:600;letter-spacing:.02em}
.hero__door .tx small{font-size:11px;color:rgba(255,255,255,.62);letter-spacing:.06em}
.hero__door .go{flex:none;color:rgba(255,255,255,.7);transition:transform .25s var(--ease)}
.hero__door:hover .go{transform:translateX(4px)}
.hero__door--job{border-color:rgba(240,169,59,.34)}
.hero__stats{
  display:flex;gap:6px;margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
}
.hero__stat{flex:1;text-align:center}
.hero__stat b{display:block;font-family:var(--head);font-size:clamp(22px,6vw,30px);color:#fff;line-height:1}
.hero__stat b span{font-size:.55em;color:var(--accent);margin-left:1px}
.hero__stat small{font-size:10px;color:rgba(255,255,255,.6);letter-spacing:.08em}

/* =====================================================================
   REASONS (選ばれる理由)
   ===================================================================== */
.reasons{display:grid;gap:16px}
.reason{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:6px;
  padding:26px 22px;transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.reason:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.reason__no{font-family:var(--head);font-size:13px;color:var(--wood);letter-spacing:.1em}
.reason__ic{width:52px;height:52px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;margin:14px 0 16px}
.reason__ic svg{width:27px;height:27px;color:var(--accent-ink)}
.reason h3{font-size:18.5px;color:var(--brand);margin-bottom:9px;line-height:1.45}
.reason p{font-size:13.5px;color:var(--ink-soft);line-height:1.85}

/* =====================================================================
   SERVICES (事業内容)
   ===================================================================== */
.svc-grid{display:grid;gap:14px}
.svc{
  position:relative;border-radius:8px;overflow:hidden;background:#fff;border:1px solid var(--line);
  display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.svc__img{aspect-ratio:16/10}
.svc__img .ph{width:100%;height:100%}
.svc__body{padding:20px 20px 24px;flex:1;display:flex;flex-direction:column}
.svc__kw{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--accent-ink);margin-bottom:8px}
.svc h3{font-size:19px;color:var(--brand);margin-bottom:9px}
.svc p{font-size:13px;color:var(--ink-soft);line-height:1.8;flex:1}
.svc__link{margin-top:16px;font-size:12.5px;font-weight:700;color:var(--brand);display:inline-flex;align-items:center;gap:7px;letter-spacing:.04em}
.svc__link .ar{transition:transform .25s var(--ease)}
.svc:hover .svc__link .ar{transform:translateX(4px)}

/* =====================================================================
   WORKS (施工事例) — tabs + before/after
   ===================================================================== */
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:28px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.04em;
  padding:10px 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;
  color:var(--ink-soft);cursor:pointer;transition:.2s var(--ease);white-space:nowrap;
}
.tab:hover{border-color:var(--wood);color:var(--brand)}
.tab.active{background:var(--brand);border-color:var(--brand);color:#fff}
.section--cream .tab{background:#fff}

.works-grid{display:grid;gap:18px}
.work{
  background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.work.hide{display:none}
.work:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.work__media{aspect-ratio:4/3}
.work__body{padding:18px 20px 22px}
.work__cat{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:#fff;background:var(--wood);padding:4px 10px;border-radius:3px;margin-bottom:12px}
.work h3{font-size:17px;color:var(--brand);margin-bottom:10px;line-height:1.5}
.work__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--ink-mute);border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.work__meta span{display:inline-flex;align-items:center;gap:5px}
.work__meta b{color:var(--ink-soft);font-weight:600}

/* before / after slider */
.ba{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:8px;user-select:none;touch-action:pan-y;cursor:ew-resize}
.ba__layer{position:absolute;inset:0}
.ba__layer .ph{width:100%;height:100%}
.ba__after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba__tag{position:absolute;top:12px;font-size:11px;font-weight:700;letter-spacing:.1em;color:#fff;background:rgba(42,33,28,.72);padding:5px 12px;border-radius:3px;z-index:3}
.ba__tag--b{left:12px}
.ba__tag--a{right:12px;background:var(--accent)}
.ba__divider{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;transform:translateX(-1px);z-index:4;box-shadow:0 0 0 1px rgba(42,33,28,.15)}
.ba__handle{position:absolute;top:50%;left:var(--pos,50%);transform:translate(-50%,-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:var(--shadow-md);
  display:flex;align-items:center;justify-content:center;color:var(--brand)}
.ba__handle svg{width:24px;height:24px}

/* =====================================================================
   TESTIMONIALS (お客様の声)
   ===================================================================== */
.voices{position:relative}
.voice-track{display:grid;gap:16px}
.voice{
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 24px;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
}
.voice__stars{display:flex;gap:3px;color:var(--accent);margin-bottom:14px}
.voice__stars svg{width:17px;height:17px}
.voice__quote{font-family:var(--head);font-size:15.5px;line-height:1.95;color:var(--brand);margin-bottom:20px;flex:1}
.voice__who{display:flex;align-items:center;gap:13px;border-top:1px solid var(--line);padding-top:16px}
.voice__avatar{width:46px;height:46px;border-radius:50%;flex:none}
.voice__who b{display:block;font-size:13.5px;color:var(--ink);font-weight:700}
.voice__who small{font-size:11.5px;color:var(--ink-mute);letter-spacing:.04em}

/* =====================================================================
   FLOW (施工の流れ)
   ===================================================================== */
.flow{display:grid;gap:0;position:relative}
.flow__step{display:flex;gap:18px;padding-bottom:30px;position:relative}
.flow__step:last-child{padding-bottom:0}
.flow__step::before{content:"";position:absolute;left:21px;top:46px;bottom:-4px;width:2px;background:var(--line)}
.flow__step:last-child::before{display:none}
.flow__no{flex:none;width:44px;height:44px;border-radius:50%;background:var(--brand);color:#fff;
  font-family:var(--head);font-weight:600;font-size:17px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.flow__step:last-child .flow__no{background:var(--accent)}
.flow__c{padding-top:2px}
.flow__c h3{font-size:17px;color:var(--brand);margin-bottom:6px}
.flow__c .tag{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--accent-ink);display:block;margin-bottom:3px}
.flow__c p{font-size:13.5px;color:var(--ink-soft);line-height:1.8}

/* =====================================================================
   TEAM / 代表
   ===================================================================== */
.rep{display:grid;gap:26px}
.rep__photo .ph{aspect-ratio:4/5;border-radius:8px;width:100%}
.rep__body .eyebrow{margin-bottom:12px}
.rep__msg{font-family:var(--head);font-size:clamp(20px,5.2vw,28px);line-height:1.6;color:var(--brand);letter-spacing:.02em;margin-bottom:20px}
.rep__body p{font-size:14px;color:var(--ink-soft);line-height:1.95;margin-bottom:14px}
.rep__sign{display:flex;align-items:baseline;gap:12px;margin-top:22px}
.rep__sign small{font-size:11.5px;color:var(--ink-mute)}
.rep__sign b{font-family:var(--head);font-size:19px;color:var(--brand)}
.team-row{display:grid;gap:14px;margin-top:34px}
.member{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;text-align:center}
.member__ph .ph{aspect-ratio:1/1;width:100%}
.member__b{padding:16px 12px 20px}
.member__role{font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--accent-ink);margin-bottom:5px}
.member__b b{display:block;font-family:var(--head);font-size:16px;color:var(--brand);margin-bottom:3px}
.member__b small{font-size:11.5px;color:var(--ink-mute)}
.team-bridge{
  margin-top:30px;background:var(--brand);color:#fff;border-radius:10px;padding:28px 24px;text-align:center;
}
.team-bridge p{font-size:14px;color:rgba(255,255,255,.85);margin-bottom:18px;line-height:1.85}
.team-bridge p b{color:var(--accent);font-family:var(--head);font-size:1.1em}

/* =====================================================================
   RECRUIT — banner / numbers / merits / interviews / requirements
   ===================================================================== */
.rec-banner{position:relative;overflow:hidden;background:var(--recruit);color:#fff}
.rec-banner__media{position:absolute;inset:0;z-index:0}
.rec-banner__media .ph{width:100%;height:100%}
.rec-banner__media::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(20,32,26,.92) 30%,rgba(20,32,26,.66) 100%)}
.rec-banner__inner{position:relative;z-index:1;padding-block:clamp(54px,11vw,92px)}
.rec-tag{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--recruit-accent);margin-bottom:18px;text-transform:uppercase}
.rec-tag::before{content:"";width:26px;height:1px;background:var(--recruit-accent)}
.rec-banner h2{font-size:clamp(27px,7.6vw,50px);line-height:1.3;color:#fff;letter-spacing:.03em;margin-bottom:18px}
.rec-banner h2 em{font-style:normal;color:var(--recruit-accent)}
.rec-banner__sub{font-size:14.5px;color:rgba(255,255,255,.82);line-height:1.95;max-width:34em;margin-bottom:28px}
.rec-banner__cta{display:flex;flex-wrap:wrap;gap:12px}

.numbers{display:grid;gap:14px}
.num-card{
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px 20px;text-align:center;position:relative;overflow:hidden;
}
.num-card--hero{
  grid-column:1/-1;background:linear-gradient(135deg,var(--recruit) 0%,#16291f 100%);color:#fff;border:0;padding:34px 24px;
}
.num-card--hero .num-card__lbl{color:var(--recruit-accent)}
.num-card__lbl{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--accent-ink);margin-bottom:8px}
.num-card__big{font-family:var(--head);font-weight:700;color:var(--brand);line-height:.95;letter-spacing:.01em}
.num-card--hero .num-card__big{color:#fff}
.num-card__big .v{font-size:clamp(46px,15vw,74px)}
.num-card--hero .num-card__big .v{font-size:clamp(58px,19vw,104px);color:var(--recruit-accent)}
.num-card__big .u{font-size:.34em;font-weight:700;margin-left:4px;letter-spacing:.02em}
.num-card__big .pre{display:block;font-size:.28em;font-weight:700;letter-spacing:.06em;margin-bottom:6px;opacity:.85}
.num-card__note{font-size:12px;color:var(--ink-mute);margin-top:8px;line-height:1.7}
.num-card--hero .num-card__note{color:rgba(255,255,255,.72)}
.num-card__sub .v{font-size:clamp(30px,9vw,44px)}
.numbers-foot{margin-top:14px;font-size:11.5px;color:var(--ink-mute);text-align:center;line-height:1.7}

.merits{display:grid;gap:14px}
.merit{background:var(--cream);border-radius:8px;padding:24px 22px;border:1px solid var(--line)}
.merit__ic{width:48px;height:48px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:15px;box-shadow:var(--shadow-sm)}
.merit__ic svg{width:25px;height:25px;color:var(--recruit)}
.merit h3{font-size:17px;color:var(--brand);margin-bottom:8px;line-height:1.5}
.merit p{font-size:13.5px;color:var(--ink-soft);line-height:1.85}

.interviews{display:grid;gap:18px}
.intv{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm)}
.intv__top{display:flex;gap:0}
.intv__ph{flex:none;width:40%}
.intv__ph .ph{width:100%;height:100%;min-height:150px}
.intv__head{padding:20px 20px 16px;flex:1;display:flex;flex-direction:column;justify-content:center}
.intv__badge{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#fff;padding:4px 10px;border-radius:3px;margin-bottom:10px}
.intv__badge--young{background:var(--recruit-accent);color:#2A211C}
.intv__badge--vet{background:var(--recruit)}
.intv__head b{font-family:var(--head);font-size:18px;color:var(--brand);display:block}
.intv__head small{font-size:11.5px;color:var(--ink-mute);margin-top:3px;display:block}
.intv__body{padding:6px 22px 24px}
.intv__q{font-family:var(--head);font-size:15px;color:var(--accent-ink);margin:16px 0 7px;line-height:1.6}
.intv__q:first-child{margin-top:6px}
.intv__body p{font-size:13.5px;color:var(--ink-soft);line-height:1.9}

/* requirements table */
.reqtable{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.reqtable dl{display:grid;grid-template-columns:1fr;margin:0}
.reqrow{display:grid;grid-template-columns:108px 1fr;border-bottom:1px solid var(--line)}
.reqrow:last-child{border-bottom:0}
.reqrow dt{background:var(--cream);font-weight:700;font-size:12.5px;color:var(--brand);padding:16px 14px;letter-spacing:.04em}
.reqrow dd{margin:0;padding:16px 16px;font-size:13.5px;color:var(--ink-soft);line-height:1.8}
.reqrow dd b{color:var(--accent-ink);font-weight:700}
.reqrow .hl{font-family:var(--head);font-size:18px;color:var(--accent-ink);font-weight:700}

/* =====================================================================
   FORMS
   ===================================================================== */
.form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{font-size:13px;font-weight:700;color:var(--brand);letter-spacing:.03em;display:flex;align-items:center;gap:8px}
.req-mark{font-size:10px;font-weight:700;color:#fff;background:var(--accent);padding:2px 7px;border-radius:3px;letter-spacing:.06em}
.opt-mark{font-size:10px;font-weight:600;color:var(--ink-mute);border:1px solid var(--line);padding:2px 7px;border-radius:3px}
.field input,.field textarea,.field select{
  font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:6px;padding:13px 14px;width:100%;transition:border-color .2s,box-shadow .2s;
}
.field textarea{resize:vertical;min-height:110px;line-height:1.7}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,145,58,.16)}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#C0453B;box-shadow:0 0 0 3px rgba(192,69,59,.12)}
.field__err{font-size:11.5px;color:#C0453B;font-weight:600;display:none}
.field.invalid .field__err{display:block}
.radio-row{display:flex;flex-wrap:wrap;gap:10px}
.radio-chip{position:relative;cursor:pointer}
.radio-chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.radio-chip span{display:inline-flex;padding:11px 18px;border:1.5px solid var(--line);border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-soft);transition:.2s}
.radio-chip input:checked+span{background:var(--brand);border-color:var(--brand);color:#fff}
.form__note{font-size:11.5px;color:var(--ink-mute);line-height:1.7}
.form__ok{display:none;background:#EEF6EF;border:1px solid #BFD9C2;border-radius:8px;padding:22px;text-align:center}
.form__ok.show{display:block}
.form__ok b{font-family:var(--head);font-size:18px;color:#2C4A3B;display:block;margin-bottom:6px}
.form__ok p{font-size:13px;color:var(--ink-soft)}

.casual{margin-top:6px;background:var(--cream);border:1px dashed var(--wood);border-radius:8px;padding:18px 20px;text-align:center}
.casual p{font-size:13px;color:var(--ink-soft);margin-bottom:14px;line-height:1.8}
.casual p b{color:var(--brand)}
.casual__btns{display:grid;gap:10px}

/* contact split */
.contact-grid{display:grid;gap:20px}
.contact-side{display:grid;gap:14px}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px 22px}
.contact-card .lbl{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--accent-ink);margin-bottom:10px}
.contact-card .tel{font-family:var(--head);font-size:30px;color:var(--brand);letter-spacing:.04em;line-height:1.1}
.contact-card .hours{font-size:12px;color:var(--ink-mute);margin-top:6px}
.contact-card.is-recruit{background:var(--recruit);color:#fff;border:0}
.contact-card.is-recruit .lbl{color:var(--recruit-accent)}
.contact-card.is-recruit .tel,.contact-card.is-recruit p{color:#fff}
.contact-card .desc{font-size:13px;color:var(--ink-soft);line-height:1.8;margin-bottom:14px}

/* =====================================================================
   COMPANY / AREA
   ===================================================================== */
.company-table{border-top:2px solid var(--brand)}
.company-table .crow{display:grid;grid-template-columns:120px 1fr;border-bottom:1px solid var(--line);padding:0}
.company-table dt{padding:16px 8px;font-size:13px;font-weight:700;color:var(--brand)}
.company-table dd{margin:0;padding:16px 8px;font-size:13.5px;color:var(--ink-soft);line-height:1.8}
.area-grid{display:grid;gap:22px}
.area-list{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 0}
.area-list li{font-size:13px;font-weight:600;color:var(--brand);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px}
.area-list li.main{background:var(--brand);color:#fff;border-color:var(--brand)}
.map .ph{aspect-ratio:16/11;border-radius:10px;width:100%}
.nap{margin-top:16px;background:var(--cream);border-radius:8px;padding:18px 20px;font-size:13px;line-height:1.9;color:var(--ink-soft)}
.nap b{color:var(--brand)}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{background:var(--brand-deep);color:rgba(255,255,255,.7);padding-block:48px 30px}
.footer__top{display:grid;gap:30px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer__brand .brand__name{color:#fff}
.footer__brand .brand__en{color:rgba(255,255,255,.5)}
.footer__brand p{font-size:12.5px;line-height:1.9;margin-top:14px;color:rgba(255,255,255,.6)}
.footer__cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.footer__cols h4{font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--accent);font-weight:700;margin-bottom:14px;text-transform:uppercase}
.footer__cols a{display:block;font-size:13px;padding:6px 0;color:rgba(255,255,255,.72);transition:color .2s}
.footer__cols a:hover{color:#fff}
.footer__bottom{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;padding-top:24px;font-size:11px;color:rgba(255,255,255,.45)}
.footer__bottom .lic{letter-spacing:.04em}

/* =====================================================================
   STICKY MOBILE CTA
   ===================================================================== */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1fr 1fr;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(42,33,28,.1);transform:translateY(100%);transition:transform .35s var(--ease);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 4px 12px;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--brand);border-right:1px solid var(--line)}
.sticky-cta a:last-child{border-right:0}
.sticky-cta a svg{width:21px;height:21px}
.sticky-cta a.is-tel{color:var(--brand)}
.sticky-cta a.is-req{background:var(--accent);color:#fff}
.sticky-cta a.is-job{background:var(--brand);color:#fff}

/* =====================================================================
   PAGE HERO (sub pages)
   ===================================================================== */
.phead{background:var(--brand);color:#fff;position:relative;overflow:hidden}
.phead__media{position:absolute;inset:0;z-index:0;opacity:.4}
.phead__media .ph{width:100%;height:100%}
.phead__inner{position:relative;z-index:1;padding-block:54px 46px}
.crumbs{font-size:11.5px;color:rgba(255,255,255,.6);letter-spacing:.06em;margin-bottom:16px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:rgba(255,255,255,.8)}
.crumbs span{opacity:.5}
.phead h1{font-size:clamp(28px,8vw,46px);color:#fff;letter-spacing:.04em;margin-bottom:10px}
.phead__en{font-size:11px;letter-spacing:.3em;color:var(--accent);text-transform:uppercase}
.phead p{font-size:13.5px;color:rgba(255,255,255,.78);margin-top:14px;max-width:36em;line-height:1.9}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* =====================================================================
   RESPONSIVE  ≥640 / ≥900 / ≥1100
   ===================================================================== */
@media(min-width:560px){
  .hero__split{grid-template-columns:1fr 1fr}
  .reasons{grid-template-columns:1fr 1fr}
  .svc-grid{grid-template-columns:1fr 1fr}
  .works-grid{grid-template-columns:1fr 1fr}
  .voice-track{grid-template-columns:1fr 1fr}
  .numbers{grid-template-columns:1fr 1fr}
  .merits{grid-template-columns:1fr 1fr}
  .team-row{grid-template-columns:repeat(3,1fr)}
  .contact-side{grid-template-columns:1fr 1fr}
  .rec-banner__cta .btn{min-width:200px}
}
@media(min-width:900px){
  :root{--gut:40px}
  .nav{display:flex;align-items:center;gap:4px}
  .nav a{font-size:13.5px;font-weight:600;color:var(--ink-soft);padding:10px 13px;border-radius:5px;transition:.2s;letter-spacing:.03em;position:relative}
  .nav a:hover{color:var(--brand)}
  .nav a.is-recruit{color:var(--accent-ink)}
  .nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
  .nav a:hover::after{transform:scaleX(1)}
  .nav__burger{display:none}
  .hdr__cta{display:flex;align-items:center;gap:14px}
  .hdr__tel{text-align:right;line-height:1.1}
  .hdr__tel .num{font-family:var(--head);font-size:19px;color:var(--brand);font-weight:700;letter-spacing:.03em}
  .hdr__tel .lbl{font-size:9px;color:var(--ink-mute);letter-spacing:.1em}
  .hdr__bar{height:74px}
  .hdr__btns{display:flex;gap:9px}
  .hdr__btns .btn{padding:11px 18px;font-size:13px}
  .sticky-cta{display:none}
  .drawer{display:none}
  .hero__inner{padding-block:84px 70px;max-width:760px}
  .hero__split{max-width:680px}
  .reasons{grid-template-columns:repeat(4,1fr)}
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .works-grid{grid-template-columns:repeat(3,1fr)}
  .voice-track{grid-template-columns:repeat(3,1fr)}
  .numbers{grid-template-columns:repeat(4,1fr)}
  .num-card--hero{grid-column:1/-1}
  .merits{grid-template-columns:repeat(3,1fr)}
  .interviews{grid-template-columns:1fr 1fr}
  .rep{grid-template-columns:380px 1fr;align-items:center;gap:48px}
  .contact-grid{grid-template-columns:1.1fr .9fr;align-items:start}
  .contact-side{grid-template-columns:1fr;position:sticky;top:94px}
  .area-grid{grid-template-columns:1fr 1fr;align-items:center}
  .flow{grid-template-columns:repeat(2,1fr);gap:0 40px}
  .footer__top{grid-template-columns:1.4fr 2fr;gap:60px}
  .footer__cols{grid-template-columns:repeat(3,1fr)}
  .reqrow{grid-template-columns:160px 1fr}
  .company-table .crow{grid-template-columns:180px 1fr}
}
@media(min-width:1100px){
  .hero h1{font-size:58px}
  .num-card--hero{grid-column:span 2;display:flex;flex-direction:column;justify-content:center}
  .numbers{grid-template-columns:repeat(4,1fr)}
}
/* keep recruit hero spanning nicely on wide */
@media(min-width:900px){
  .num-card--hero{grid-column:1 / 3;grid-row:span 1}
}