/* =========================================================================
   ミント — 生成AIビルダー ポートフォリオ / style.css
   たこ焼きパレット（大阪・warm）。本番CSP適合: インラインstyle全廃・外部依存なし。
   背景 grain は data: URI SVG を background-image で使用（CSP img-src 'self' data:）。
   ========================================================================= */

:root{
  /* ---- palette: たこ焼きパレット / 大阪・warm — 紅生姜の赤ピンク主役 + カラフルたこ焼きのトッピング差し色 ---- */
  --bg:#FBF3E2;            /* 生地(batter)地・温かいクリーム */
  --surface:#FFFDF8;       /* カード・温白（純白の地は使わない） */
  --surface-alt:#F6EAD2;   /* 交互帯・チップ地（焼き色の生地） */
  --line:#EADFC9;          /* ヘアライン */
  --ink:#2C1E14;           /* ソース主インク・焦げ茶 */
  --ink-soft:#6E5645;      /* ソース副インク */
  --ink-faint:#7E6448;     /* 補助・大文字/メタ限定（AA 4.5:1 実測クリア＝brief #8C7359 の濃色派生） */
  --accent:#C42A43;        /* 紅生姜・文字/リンク/数値/線用の濃いめ（クリーム地でAA確保） */
  --accent-strong:#E0445E; /* 紅生姜・実塗りCTA地（白文字を載せる面） */
  --accent-hover:#C42A43;  /* CTAホバー（濃い紅生姜） */
  --accent-soft:#FBE3E7;   /* 紅生姜の極薄面（hover地・帯のみ） */
  --on-accent:#FFFFFF;
  /* category 差し色（カラフルたこ焼きトッピング・意味づけ専用・非テキスト用） */
  --cat-aonori:#4E8A3A;    /* 青のり緑 */
  --cat-beni:#E0445E;      /* 紅生姜ピンク */
  --cat-sauce:#7A4A2B;     /* ソース茶 */
  --cat-kitsune:#E29A2E;   /* きつね色（生地） */
  --cat-katsuo:#C9A24A;    /* かつお節/マヨ */
  --cat-dashi:#2E86C1;     /* だし青 */
  /* feedback（状態色のみ・warm 寄せ。error は枠/小面積で使う） */
  --ok-text:#2E7D32; --ok-bg:#EFF7EF; --ok-border:#C3E2C4;
  --warn-text:#9A6700; --err-text:#C0392B;
  /* type */
  --font-base:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --font-num:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* shape */
  --r-card:16px; --r-ui:10px; --r-chip:999px;
  --sh-sm:0 1px 2px rgba(44,30,20,.05);
  --sh-card:0 6px 24px rgba(44,30,20,.08), 0 1px 2px rgba(44,30,20,.05);
  --sh-pop:0 16px 48px rgba(196,42,67,.14), 0 2px 6px rgba(44,30,20,.07);
  /* motion / layout */
  --dur:.32s; --ease:cubic-bezier(.22,.61,.36,1);
  --container:1120px; --narrow:760px;
  --header-h:64px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px);}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-base); font-size:1.0625rem; line-height:1.85;
  letter-spacing:.01em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"palt" 1;
}
[id]{scroll-margin-top:calc(var(--header-h) + 16px);}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline; text-underline-offset:3px;}
h1,h2,h3{letter-spacing:-.01em; line-height:1.25; margin:0;}
p{margin:0;}
img,svg{display:block; max-width:100%;}
::selection{background:var(--accent-soft); color:var(--ink);}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px;}

/* ---- 紙 grain（data: URI SVG を background-image で。CSP img-src 'self' data: で許可） ---- */
body{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.17 0 0 0 0 0.12 0 0 0 0 0.08 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-attachment:fixed;
}

/* ---- layout helpers ---- */
.wrap{max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,5vw,48px);}
.section{padding-block:clamp(64px,10vw,128px);}
.section--tight{padding-block:clamp(48px,7vw,88px);}
.band-alt{background:var(--surface-alt); border-block:1px solid var(--line);}
.eyebrow{
  font-family:var(--font-num); font-size:.78rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:12px; margin:0 0 18px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); flex:none;}
.eyebrow--muted{color:var(--ink-soft);}
.eyebrow--muted::before{background:var(--ink-faint);}
.h2{font-size:clamp(1.65rem,3.6vw,2.6rem); font-weight:700;}
.lead{color:var(--ink-soft); font-size:1.0625rem; max-width:60ch; margin-top:14px;}

/* ---- spacing utilities（旧インラインstyle置換用・CSP適合） ---- */
.mt-22{margin-top:22px;}
.mt-42{margin-top:42px;}
.mt-64{margin-top:64px;}

/* ---- skip link ---- */
.skip{position:absolute; left:16px; top:-60px; z-index:100;
  background:var(--surface); color:var(--accent); border:1px solid var(--accent);
  padding:10px 18px; border-radius:var(--r-ui); font-weight:600;
  transition:top var(--dur) var(--ease);}
.skip:focus{top:14px; text-decoration:none;}

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 26px; border-radius:var(--r-chip);
  font-family:var(--font-base); font-size:1rem; font-weight:600; letter-spacing:.01em;
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform .12s var(--ease), box-shadow var(--dur) var(--ease);
}
.btn svg{width:18px; height:18px; flex:none;}
.btn--primary{background:var(--accent-strong); color:var(--on-accent); box-shadow:var(--sh-sm);}
.btn--primary:hover{background:var(--accent-hover); text-decoration:none; box-shadow:var(--sh-pop);}
.btn--primary:active{transform:translateY(1px);}
.btn--ghost{background:transparent; color:var(--accent); border-color:var(--line);}
.btn--ghost:hover{border-color:var(--accent); background:var(--accent-soft); text-decoration:none;}
.btn--ghost:active{transform:translateY(1px);}
.btn--onaccent{background:var(--surface); color:var(--accent); border-color:transparent;}
.btn--onaccent:hover{background:var(--bg); text-decoration:none; box-shadow:var(--sh-pop);}
.btn--onaccent:active{transform:translateY(1px);}
/* CTA帯の上に載るゴーストボタン（白文字・白系の枠）。旧インラインstyle置換 */
.btn--on-cta{color:#fff; border-color:rgba(255,255,255,.5);}
.btn--on-cta:hover{border-color:#fff; background:rgba(255,255,255,.12); color:#fff;}

/* ---- header / nav ---- */
.site-header{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  background:rgba(251,243,226,.82);
  -webkit-backdrop-filter:saturate(180%) blur(12px); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:var(--header-h);}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); letter-spacing:.02em;}
.brand:hover{text-decoration:none;}
.brand .mark{
  width:30px; height:30px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,var(--accent) 0%, var(--accent-strong) 100%);
  display:grid; place-items:center; color:#fff; font-family:var(--font-num); font-weight:800; font-size:.95rem;
  box-shadow:0 2px 6px rgba(196,42,67,.35);
}
.brand .tag{font-size:.72rem; font-weight:500; color:var(--ink-faint); letter-spacing:.08em;}
.nav-links{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0;}
.nav-links a{
  color:var(--ink-soft); font-size:.92rem; font-weight:500; padding:8px 12px; border-radius:8px;
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-links a:hover{color:var(--ink); background:var(--surface-alt); text-decoration:none;}
.nav-cta{margin-left:8px;}
.nav-cta .btn{min-height:40px; padding:0 18px; font-size:.92rem;}
.nav-toggle{display:none; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); cursor:pointer;}
.nav-toggle svg{width:22px; height:22px;}

/* ---- hero ---- */
.hero{position:relative; overflow:hidden;
  background:
    radial-gradient(58% 48% at 78% -8%, rgba(224,68,94,.10), transparent 70%),
    radial-gradient(46% 40% at 8% 6%, rgba(226,154,46,.08), transparent 72%),
    var(--bg);
}
.hero .wrap{padding-block:clamp(72px,12vw,132px); position:relative; z-index:1;}
/* たこ焼きドット・モチーフ（控えめに1モチーフ・装飾のみ／静止） — 生地色の丸＋トッピング色の芯 */
.hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:clamp(8px,3vw,28px); right:clamp(-18px,1vw,12px);
  width:clamp(150px,20vw,230px); aspect-ratio:1; opacity:.5;
  background:
    radial-gradient(circle at 26% 30%, var(--cat-beni) 0 4.5px, transparent 5px),
    radial-gradient(circle at 26% 30%, #F4DDB2 0 22px, transparent 23px),
    radial-gradient(circle at 70% 24%, var(--cat-aonori) 0 4.5px, transparent 5px),
    radial-gradient(circle at 70% 24%, #F4DDB2 0 20px, transparent 21px),
    radial-gradient(circle at 48% 62%, var(--cat-kitsune) 0 4.5px, transparent 5px),
    radial-gradient(circle at 48% 62%, #F4DDB2 0 24px, transparent 25px),
    radial-gradient(circle at 82% 60%, var(--cat-dashi) 0 4px, transparent 4.5px),
    radial-gradient(circle at 82% 60%, #F4DDB2 0 18px, transparent 19px);
  background-repeat:no-repeat;
}
@media (max-width:900px){ .hero::after{opacity:.32; width:clamp(120px,30vw,170px);} }
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:center;}
.hero h1{font-size:clamp(2.15rem,5.4vw,3.85rem); font-weight:800; letter-spacing:-.022em; line-height:1.16;}
.hero h1 .accent{color:var(--accent);}
.hero .sub{margin-top:22px; font-size:clamp(1.02rem,1.6vw,1.18rem); color:var(--ink-soft); max-width:54ch;}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;}
.hero-trust{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:30px; padding-top:26px; border-top:1px solid var(--line);}
.hero-trust .item{display:flex; align-items:baseline; gap:9px;}
.hero-trust .num{font-family:var(--font-num); font-weight:800; font-size:1.5rem; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.hero-trust .num .sup{font-size:.7em;}
.hero-trust .lbl{font-size:.86rem; color:var(--ink-soft);}

/* hero visual: orchestration mock (CSS/SVG, no external img) */
.hero-visual{position:relative;}
.mock{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  box-shadow:var(--sh-card); padding:18px; overflow:hidden;
}
.mock-bar{display:flex; align-items:center; gap:7px; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:16px;}
.mock-bar i{width:11px; height:11px; border-radius:50%; background:var(--line); display:inline-block;}
.mock-bar i:first-child{background:var(--cat-beni);} .mock-bar i:nth-child(2){background:var(--cat-kitsune);} .mock-bar i:nth-child(3){background:var(--cat-aonori);}
.mock-bar span{margin-left:8px; font-family:var(--font-num); font-size:.74rem; color:var(--ink-faint); letter-spacing:.04em;}
.flow{display:flex; flex-direction:column; gap:10px;}
.flow .node{display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface-alt); font-size:.86rem; color:var(--ink);}
.flow .node .dot{width:9px; height:9px; border-radius:50%; flex:none;}
/* ノードドットの差し色（旧インラインstyle置換・意味づけ専用） */
.flow .node .dot--aonori{background:var(--cat-aonori);}
.flow .node .dot--accent{background:var(--accent);}
.flow .node .dot--sauce{background:var(--cat-sauce);}
.flow .node .dot--dashi{background:var(--cat-dashi);}
.flow .node .role{font-family:var(--font-num); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-left:auto;}
.flow .node--accent{border-color:var(--accent); background:var(--accent-soft);}
.flow .arrow{align-self:center; color:var(--ink-faint);}
.flow .arrow svg{width:16px; height:16px;}

/* ---- about ---- */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start;}
.about-body p + p{margin-top:16px;}
.about-body p{color:var(--ink-soft);}
.about-body strong{color:var(--ink); font-weight:600;}
.principles{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.principles li{display:flex; gap:14px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-ui); padding:16px 18px; box-shadow:var(--sh-sm);}
.principles .pico{width:34px; height:34px; flex:none; border-radius:9px; background:var(--accent-soft);
  color:var(--accent); display:grid; place-items:center;}
.principles .pico svg{width:18px; height:18px;}
.principles b{display:block; color:var(--ink); font-weight:600; font-size:.98rem;}
.principles span{display:block; color:var(--ink-soft); font-size:.9rem; line-height:1.7; margin-top:2px;}

/* ---- services ---- */
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:clamp(18px,2.4vw,26px);}
.svc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:28px 26px; box-shadow:var(--sh-sm);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);}
.svc:hover{border-color:var(--accent); box-shadow:var(--sh-card); transform:translateY(-3px);}
.svc .ico{width:46px; height:46px; border-radius:12px; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; margin-bottom:18px;}
.svc .ico svg{width:23px; height:23px;}
.svc h3{font-size:1.12rem; font-weight:700; margin-bottom:9px;}
.svc p{color:var(--ink-soft); font-size:.95rem; line-height:1.8;}
/* カテゴリ差し色（カラフルたこ焼きトッピング・意味づけ専用・左罫＋アイコン地。操作色には流用しない） */
.svc{border-left:3px solid var(--line);}
.svc:nth-of-type(6n+1){border-left-color:var(--cat-aonori);}
.svc:nth-of-type(6n+1) .ico{background:#E7F0E1; color:#3F6F2E;}
.svc:nth-of-type(6n+2){border-left-color:var(--cat-beni);}
.svc:nth-of-type(6n+2) .ico{background:#FBE3E7; color:#C42A43;}
.svc:nth-of-type(6n+3){border-left-color:var(--cat-sauce);}
.svc:nth-of-type(6n+3) .ico{background:#EFE2D5; color:#7A4A2B;}
.svc:nth-of-type(6n+4){border-left-color:#A8690F;} /* きつね色は3:1確保のため左罫は濃色派生 */
.svc:nth-of-type(6n+4) .ico{background:#FBEBD3; color:#A8690F;}
.svc:nth-of-type(6n+5){border-left-color:#8C6E1E;} /* かつお節/マヨは3:1確保のため左罫は濃色派生 */
.svc:nth-of-type(6n+5) .ico{background:#F6EFD7; color:#8C6E1E;}
.svc:nth-of-type(6n+6){border-left-color:var(--cat-dashi);}
.svc:nth-of-type(6n+6) .ico{background:#DFEDF7; color:#226CA0;}

/* ---- work / portfolio cards ---- */
.work-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:clamp(18px,2.2vw,24px);}
.work{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-sm);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);}
.work:hover{border-color:var(--accent); box-shadow:var(--sh-card); transform:translateY(-3px);}
.work-thumb{height:128px; position:relative; border-bottom:1px solid var(--line); overflow:hidden;
  background:linear-gradient(135deg,var(--surface-alt) 0%, #F3E0C2 100%);}
.work-thumb svg{position:absolute; inset:0; width:100%; height:100%;}
.work-body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1;}
.work .kicker{font-family:var(--font-num); font-size:.7rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:8px;}
.work h3{font-size:1.08rem; font-weight:700; margin-bottom:8px;}
.work p{color:var(--ink-soft); font-size:.92rem; line-height:1.78; flex:1;}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:16px;}
.tag{font-family:var(--font-num); font-size:.7rem; font-weight:500; letter-spacing:.02em;
  color:var(--ink-soft); background:var(--surface-alt); border:1px solid var(--line);
  border-radius:6px; padding:3px 9px;}
/* Work カードのカテゴリ差し色（トッピング左罫＋kicker 前のドット・意味づけ専用） */
.work{border-left:3px solid var(--line);}
.work .kicker{display:flex; align-items:center; gap:7px;}
.work .kicker::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; opacity:.85;}
.work:nth-of-type(6n+1){border-left-color:var(--cat-beni);}
.work:nth-of-type(6n+1) .kicker::before{background:var(--cat-beni);}
.work:nth-of-type(6n+2){border-left-color:var(--cat-sauce);}
.work:nth-of-type(6n+2) .kicker::before{background:var(--cat-sauce);}
.work:nth-of-type(6n+3){border-left-color:var(--cat-dashi);}
.work:nth-of-type(6n+3) .kicker::before{background:var(--cat-dashi);}
.work:nth-of-type(6n+4){border-left-color:var(--cat-aonori);}
.work:nth-of-type(6n+4) .kicker::before{background:var(--cat-aonori);}
.work:nth-of-type(6n+5){border-left-color:#A8690F;} /* きつね色は3:1確保のため濃色派生 */
.work:nth-of-type(6n+5) .kicker::before{background:#A8690F;}
.work:nth-of-type(6n+6){border-left-color:#8C6E1E;} /* かつお節/マヨは3:1確保のため濃色派生 */
.work:nth-of-type(6n+6) .kicker::before{background:#8C6E1E;}
.work:nth-of-type(6n+7){border-left-color:var(--cat-beni);}
.work:nth-of-type(6n+7) .kicker::before{background:var(--cat-beni);}
.work:nth-of-type(6n+8){border-left-color:var(--cat-sauce);}
.work:nth-of-type(6n+8) .kicker::before{background:var(--cat-sauce);}

/* ---- impact ---- */
.impact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:clamp(16px,2vw,24px);}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:30px 26px; box-shadow:var(--sh-sm);}
.stat .num{font-family:var(--font-num); font-weight:800; font-size:clamp(2.4rem,5vw,3.1rem);
  line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:-.02em;}
.stat .num .unit{font-size:.5em; color:var(--ink); margin-left:3px;}
.stat .cap{display:block; margin-top:12px; color:var(--ink-soft); font-size:.92rem; line-height:1.7;}

/* before/after */
.ba{display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(14px,2.5vw,28px); align-items:stretch; margin-top:40px;}
.ba-card{border:1px solid var(--line); border-radius:var(--r-card); padding:24px 24px; background:var(--surface); box-shadow:var(--sh-sm);}
.ba-card.is-after{border-color:var(--accent); background:var(--accent-soft);}
.ba-card .ba-label{font-family:var(--font-num); font-size:.72rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px;}
.ba-card.is-after .ba-label{color:var(--accent);}
.ba-card ul{margin:0; padding-left:1.1em; color:var(--ink-soft); font-size:.95rem; line-height:1.85;}
.ba-card.is-after ul{color:var(--ink);}
.ba-arrow{align-self:center; color:var(--accent); display:grid; place-items:center;}
.ba-arrow svg{width:30px; height:30px;}
/* Before/After 見出し（旧インラインstyle置換） */
.ba-heading{font-size:clamp(1.2rem,2.4vw,1.55rem); font-weight:700;}

/* ---- why ---- */
.why-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:clamp(18px,2.4vw,28px);}
.why{display:flex; gap:16px; align-items:flex-start;}
.why .n{font-family:var(--font-num); font-weight:800; font-size:1.5rem; color:var(--accent);
  font-variant-numeric:tabular-nums; line-height:1; flex:none; width:44px;}
.why h3{font-size:1.08rem; font-weight:700; margin-bottom:7px;}
.why p{color:var(--ink-soft); font-size:.94rem; line-height:1.8;}

/* ---- tech stack ---- */
.stack{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px;}
.stack .pill{display:inline-flex; align-items:center; gap:9px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-chip); padding:10px 18px;
  font-family:var(--font-num); font-size:.9rem; color:var(--ink); box-shadow:var(--sh-sm);}
.stack .pill .d{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none;}
/* tech stack 見出し（旧インラインstyle置換） */
.h2--stack{font-size:clamp(1.4rem,3vw,2rem);}

/* ---- process ---- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:clamp(18px,2.4vw,24px);}
.step{position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:28px 24px 26px; box-shadow:var(--sh-sm);}
.step .step-n{font-family:var(--font-num); font-weight:800; font-size:.85rem; letter-spacing:.1em;
  color:var(--accent); background:var(--accent-soft); border-radius:var(--r-chip);
  width:fit-content; padding:5px 13px; margin-bottom:16px;}
.step h3{font-size:1.06rem; font-weight:700; margin-bottom:8px;}
.step p{color:var(--ink-soft); font-size:.92rem; line-height:1.78;}
.step .meta{display:block; margin-top:12px; font-family:var(--font-num); font-size:.78rem; color:var(--ink-faint); letter-spacing:.04em;}

/* ---- contact CTA band ---- */
.cta{position:relative; overflow:hidden; color:var(--on-accent);
  background:
    radial-gradient(50% 120% at 88% 0%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(135deg,#9E1B33 0%, #7A172A 100%);
}
.cta .wrap{padding-block:clamp(64px,9vw,108px); text-align:center;}
.cta .eyebrow{color:rgba(255,255,255,.9);}
.cta .eyebrow::before{background:rgba(255,255,255,.7);}
.cta h2{font-size:clamp(1.7rem,4vw,2.7rem); font-weight:800; letter-spacing:-.02em; color:#fff;}
.cta p{margin:18px auto 0; max-width:52ch; color:rgba(255,255,255,.92); font-size:1.05rem;}
.cta-actions{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px;}
.cta-note{margin-top:22px; font-size:.85rem; color:rgba(255,255,255,.78);}
.copied{display:inline-flex; align-items:center; gap:8px; margin-top:18px; min-height:24px;
  font-size:.9rem; font-weight:600; color:#EAF7EE; opacity:0; transition:opacity var(--dur) var(--ease);}
.copied.show{opacity:1;}
.copied svg{width:16px; height:16px;}

/* ---- footer ---- */
.site-footer{background:var(--surface); border-top:1px solid var(--line);}
.site-footer .wrap{padding-block:clamp(40px,6vw,64px);}
.foot-top{display:flex; flex-wrap:wrap; gap:28px 48px; justify-content:space-between; align-items:flex-start;}
.foot-brand{max-width:34ch;}
.foot-brand .brand{margin-bottom:12px;}
.foot-brand p{color:var(--ink-soft); font-size:.9rem; line-height:1.8;}
.foot-nav{display:flex; flex-wrap:wrap; gap:18px;}
.foot-nav a{color:var(--ink-soft); font-size:.9rem;}
.foot-nav a:hover{color:var(--accent);}
.foot-bottom{display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; align-items:center;
  margin-top:32px; padding-top:24px; border-top:1px solid var(--line);}
.foot-bottom small{color:var(--ink-faint); font-family:var(--font-num); font-size:.8rem; letter-spacing:.02em;}
.foot-mail{font-family:var(--font-num); font-size:.86rem;}

/* ---- legal / privacy page ---- */
.legal{max-width:var(--narrow); margin-inline:auto;}
.legal h1{font-size:clamp(1.7rem,4vw,2.4rem); font-weight:800; letter-spacing:-.02em;}
.legal .updated{margin-top:10px; font-family:var(--font-num); font-size:.85rem; color:var(--ink-faint); letter-spacing:.02em;}
.legal h2{font-size:clamp(1.2rem,2.6vw,1.5rem); font-weight:700; margin-top:44px;}
.legal h2:first-of-type{margin-top:32px;}
.legal p{color:var(--ink-soft); margin-top:14px;}
.legal ul{color:var(--ink-soft); margin-top:14px; padding-left:1.2em; line-height:1.85;}
.legal ul li + li{margin-top:6px;}
.legal a{color:var(--accent);}
.legal .back{display:inline-flex; align-items:center; gap:8px; margin-top:48px;
  font-family:var(--font-num); font-size:.92rem; font-weight:600;}
.legal .back svg{width:16px; height:16px;}

/* ---- reveal animation ---- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal.in{opacity:1; transform:none;}

/* ---- responsive ---- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:-1; max-width:520px;}
  .about-grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .nav-links, .nav-cta{display:none;}
  .nav-toggle{display:inline-flex;}
  .nav[data-open="true"] .nav-links{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:absolute; left:0; right:0; top:var(--header-h);
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:12px clamp(20px,5vw,48px) 18px; box-shadow:var(--sh-card);
  }
  .nav[data-open="true"] .nav-links a{padding:12px 10px; font-size:1rem;}
  .nav[data-open="true"] .nav-cta{display:block; margin:8px clamp(20px,5vw,48px) 16px;
    position:absolute; left:0; right:0; top:calc(var(--header-h) + 1px); transform:translateY(100%);}
  .ba{grid-template-columns:1fr;}
  .ba-arrow{transform:rotate(90deg); justify-self:center;}
}
@media print{
  .site-header,.nav-toggle,.hero-visual{display:none;}
  body{background:#fff;}
  .cta{background:#fff; color:var(--ink);}
  .cta h2,.cta p{color:var(--ink);}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important; transition-duration:.001ms !important;}
  .reveal{opacity:1; transform:none;}
}