:root{
  --bg:#ffffff;
  --bg-alt:#eef0f3;
  --bg-contrast:#1b2ecc;
  --ink:#0b0c10;
  --ink-soft:#565c66;
  --accent:#ff4e36;
  --blue:#1b2ecc;
  --gap:24px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{text-decoration-thickness:3px}

a:focus-visible,
li a:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}

.contrast a:focus-visible{outline-color:#ffffff}

/* ---------- grid ---------- */

.wrap{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding-left:32px;
  padding-right:32px;
}

.g{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
}

.c1-5{grid-column:1/6}
.c1-6{grid-column:1/7}
.c1-7{grid-column:1/8}
.c1-9{grid-column:1/10}
.c1-10{grid-column:1/11}
.c2-9{grid-column:2/10}
.c3-12{grid-column:3/13}
.c4-13{grid-column:4/13}
.c5-13{grid-column:5/13}
.c6-13{grid-column:6/13}
.c7-13{grid-column:7/13}
.c1-4{grid-column:1/5}
.c1-12{grid-column:1/13}

/* ---------- rhythm ---------- */

.pad-l{padding-top:120px;padding-bottom:120px}
.pad-m{padding-top:88px;padding-bottom:88px}
.pad-s{padding-top:56px;padding-bottom:56px}
.alt{background:var(--bg-alt)}

/* ---------- typography ---------- */

h1,h2,h3{margin:0}

h1{
  font-size:clamp(40px,7.4vw,88px);
  font-weight:800;
  line-height:0.98;
  letter-spacing:-0.035em;
}

h1 .l2{margin-left:8.333%}
h1 .l3{margin-left:16.666%}
h1 span{display:block}

h2{
  font-size:clamp(25px,2.9vw,36px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.02em;
  margin-bottom:20px;
}

h3{
  font-size:20px;
  font-weight:700;
  line-height:1.35;
  margin-top:34px;
  margin-bottom:10px;
}

p{margin:0 0 20px}
p:last-child{margin-bottom:0}

.lead{font-size:22px;line-height:1.55}

.cap,
.num,
.kicker{
  font-size:13px;
  line-height:1.5;
  color:var(--ink-soft);
}

.num,
.kicker{
  color:var(--blue);
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin:0 0 14px;
}

.soft{color:var(--ink-soft)}

/* ---------- header ---------- */

.site-head{border-bottom:1px solid #d8dce2}

.head-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:12px 32px;
  padding-top:22px;
  padding-bottom:22px;
}

.brand{
  font-size:21px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--ink);
  text-decoration:none;
}

.brand:hover{color:var(--accent)}

.site-head nav ul,
.foot-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
}

.site-head nav a{
  color:var(--ink);
  text-decoration:none;
  font-size:15px;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}

.site-head nav a:hover,
.site-head nav a[aria-current="page"]{border-bottom-color:var(--accent)}

/* ---------- hero ---------- */

.hero{padding-top:96px;padding-bottom:24px}

.hero-head{
  grid-column:1/12;
  border-left:3px solid var(--accent);
  padding-left:26px;
}

.hero-intro{margin-top:44px}

.topics{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  margin:26px 0 0;
  padding:0;
  font-size:15px;
  color:var(--ink-soft);
}

.topics li{margin-right:14px}
.topics li::after{content:"/";color:var(--accent);font-weight:700;margin-left:14px}
.topics li:last-child::after{content:""}

.hero-figure{
  grid-column:5/13;
  margin-right:-32px;
  margin-top:64px;
  display:flex;
  align-items:flex-end;
  gap:16px;
}

.hero-figure img{width:100%;aspect-ratio:4/3;object-fit:cover}

.v-cap{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:13px;
  line-height:1.4;
  color:var(--ink-soft);
  margin:0;
  white-space:nowrap;
}

/* ---------- separators ---------- */

.rule{
  height:3px;
  background:var(--accent);
  border:0;
  margin:0;
  grid-column:span 4;
}

.rule-c{grid-column:5/9}
.rule-r{grid-column:9/13}

/* ---------- lists ---------- */

.steps{
  list-style:none;
  counter-reset:step;
  margin:24px 0 0;
  padding:0;
}

.steps li{
  counter-increment:step;
  position:relative;
  padding-left:58px;
  margin-bottom:18px;
}

.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:-4px;
  font-size:26px;
  font-weight:800;
  letter-spacing:-0.03em;
  color:var(--accent);
}

.plain{margin:20px 0 0;padding-left:20px}
.plain li{margin-bottom:10px}
.plain li::marker{color:var(--accent)}

/* ---------- contrast section ---------- */

.contrast{
  background:var(--bg-contrast);
  color:#ffffff;
}

.contrast .num,
.contrast .kicker,
.contrast .cap,
.contrast .soft{color:#ffffff;opacity:0.85}

.contrast a{color:#ffffff}
.contrast .steps li::before{color:#ffffff;opacity:0.6}
.contrast .plain li::marker{color:#ffffff}

.detail-fig{grid-column:2/6;margin:0}
.detail-fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.detail-fig figcaption{margin-top:12px;font-size:13px;line-height:1.5;color:#ffffff;opacity:0.8}
.detail-text{grid-column:7/13;align-self:center}

/* ---------- about ---------- */

.about-lead{font-size:22px;line-height:1.55}
.side-h{grid-column:1/3}
.side-body{grid-column:3/9}
.block-6{grid-column:3/9}

/* ---------- footer ---------- */

.site-foot{padding-bottom:72px}

.foot-rule{
  height:3px;
  background:var(--accent);
  border:0;
  margin:0 0 28px;
}

.foot-name{
  font-size:clamp(34px,6vw,72px);
  font-weight:800;
  letter-spacing:-0.035em;
  line-height:1;
  margin:0 0 36px;
}

.foot-nav{grid-column:1/6}
.foot-info{grid-column:7/13}

.foot-nav ul{display:block}
.foot-nav li{margin-bottom:8px}
.foot-nav a{color:var(--ink);text-decoration:none;border-bottom:2px solid transparent}
.foot-nav a:hover{border-bottom-color:var(--accent)}

.foot-info p{font-size:15px;color:var(--ink-soft)}
.foot-info .mail{font-size:19px;color:var(--accent);font-weight:600}

/* ---------- responsive ---------- */

@media (max-width:1000px){
  .hero-figure{grid-column:3/13}
  .detail-fig{grid-column:1/6}
  .detail-text{grid-column:6/13}
}

@media (max-width:860px){
  .wrap{padding-left:20px;padding-right:20px}
  .g > *{grid-column:1/-1 !important}
  .pad-l{padding-top:64px;padding-bottom:64px}
  .pad-m{padding-top:56px;padding-bottom:56px}
  .pad-s{padding-top:40px;padding-bottom:40px}
  .hero{padding-top:48px}
  h1 .l2{margin-left:6%}
  h1 .l3{margin-left:12%}
  .hero-figure{margin-right:0;margin-top:40px;flex-direction:column;align-items:flex-start;gap:10px}
  .v-cap{writing-mode:horizontal-tb;transform:none;white-space:normal;order:2}
  .hero-figure img{order:1}
  .rule{max-width:220px}
  .detail-fig{margin-bottom:28px;max-width:420px}
  .foot-nav{margin-bottom:28px}
  .lead,.about-lead{font-size:19px}
}

/* ---------- inner page head ---------- */

.page-head{
  border-left:3px solid var(--accent);
  padding-left:26px;
}