/* ============================================================
   合同会社DRAI Corporate Site
   Concept: 最先端を、堅実に。
   Dark, high-tech hero + refined white body + orange CTA
   ============================================================ */

:root{
  --navy:        #0B1D3A;
  --navy-2:      #112B52;
  --navy-3:      #16345f;
  --ink:         #0E1726;
  --ink-soft:    #46566e;
  --line:        #E4E9F1;
  --bg:          #ffffff;
  --bg-soft:     #F5F7FB;
  --bg-soft-2:   #EEF2F8;
  --orange:      #FF6A1A;
  --orange-d:    #E9560B;
  --orange-soft: #FFF1E8;
  --white:       #ffffff;

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 14px;

  --ff-disp: "Sora", "Zen Kaku Gothic New", sans-serif;
  --ff-ja:   "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --ff-body: "Noto Sans JP", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.85;
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.sp-only{ display:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--ff-disp); font-weight:600; font-size:.98rem;
  padding:.95em 1.7em; border-radius:999px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
  cursor:pointer; border:none; white-space:nowrap;
}
.btn .arr{ transition:transform .3s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn-primary{
  background:var(--orange); color:#fff;
  box-shadow:0 10px 26px -8px rgba(255,106,26,.6);
}
.btn-primary:hover{ background:var(--orange-d); transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(255,106,26,.7); }
.btn-ghost{
  background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4);
}
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-2px); }
.btn-lg{ font-size:1.05rem; padding:1.1em 2.4em; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.site-header.scrolled{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 var(--line), 0 12px 30px -22px rgba(11,29,58,.5);
  padding:12px var(--gutter);
}
.brand{ display:flex; align-items:center; gap:12px; color:#fff; transition:color .4s var(--ease); }
.site-header.scrolled .brand{ color:var(--navy); }
.brand-mark{ display:grid; place-items:center; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ font-family:var(--ff-disp); font-weight:800; font-size:1.32rem; letter-spacing:.06em; }
.brand-inc{ font-weight:500; opacity:.8; }
.brand-tag{ font-size:.62rem; letter-spacing:.18em; opacity:.72; margin-top:3px; font-family:var(--ff-ja); }

.nav{ display:flex; align-items:center; gap:clamp(14px,2.2vw,34px); }
.nav>a{ color:#fff; transition:color .4s var(--ease); position:relative; }
.site-header.scrolled .nav>a{ color:var(--navy); }
.nav>a:not(.nav-cta){ display:flex; flex-direction:column; align-items:center; gap:1px; font-family:var(--ff-ja); }
.nav>a .ja{ font-size:.86rem; font-weight:700; }
.nav>a .en{ font-size:.56rem; letter-spacing:.18em; opacity:.6; font-family:var(--ff-disp); }
.nav>a:not(.nav-cta)::after{
  content:""; position:absolute; bottom:-6px; left:50%; width:0; height:2px;
  background:var(--orange); transform:translateX(-50%); transition:width .3s var(--ease);
}
.nav>a:not(.nav-cta):hover::after{ width:80%; }
.nav-cta{
  background:var(--orange); color:#fff !important; font-family:var(--ff-disp); font-weight:700;
  padding:.62em 1.4em; border-radius:999px; font-size:.9rem;
  box-shadow:0 10px 24px -10px rgba(255,106,26,.7); transition:transform .3s var(--ease), background .3s var(--ease);
}
.nav-cta:hover{ background:var(--orange-d); transform:translateY(-2px); }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; z-index:110; }
.burger span{ width:26px; height:2px; background:#fff; transition:.3s var(--ease); border-radius:2px; }
.site-header.scrolled .burger span{ background:var(--navy); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:radial-gradient(120% 120% at 80% 0%, var(--navy-3) 0%, var(--navy) 55%, #07142a 100%);
  color:#fff; overflow:hidden;
}
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero-glow{
  position:absolute; width:60vw; height:60vw; right:-10vw; top:-15vw; border-radius:50%;
  background:radial-gradient(circle, rgba(255,106,26,.28), transparent 60%);
  filter:blur(30px); pointer-events:none;
}
.hero-grain{
  position:absolute; inset:0; opacity:.05; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.hero-eyebrow{
  font-family:var(--ff-disp); font-size:.72rem; letter-spacing:.34em; font-weight:600;
  color:var(--orange); margin:0 0 22px;
}
.hero-title{
  font-family:var(--ff-ja); font-weight:900;
  font-size:clamp(2.5rem, 7vw, 5.4rem); line-height:1.12; letter-spacing:.01em;
  margin:0 0 28px; text-shadow:0 6px 40px rgba(0,0,0,.3);
}
.hero-title .line{ display:block; }
.hero-title em{ font-style:normal; color:var(--orange); position:relative; }
.hero-sub{
  font-size:clamp(1rem, 1.6vw, 1.22rem); line-height:2; color:rgba(255,255,255,.86);
  max-width:34em; margin:0 0 40px; font-weight:500;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; }

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--ff-disp); font-size:.6rem; letter-spacing:.3em; color:rgba(255,255,255,.6);
}
.scroll-cue span{ width:1px; height:46px; background:linear-gradient(rgba(255,255,255,.7), transparent); position:relative; overflow:hidden; }
.scroll-cue span::after{ content:""; position:absolute; top:0; left:0; width:100%; height:40%; background:var(--orange); animation:scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot{ 0%{transform:translateY(-100%)} 100%{transform:translateY(250%)} }

/* ============================================================
   STATS
   ============================================================ */
.stats{ background:var(--navy); color:#fff; position:relative; z-index:3; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.08);
  border-radius:var(--radius); overflow:hidden; transform:translateY(-1px); }
.stat{ background:var(--navy); padding:42px 26px; text-align:center; }
.stat-num{ font-family:var(--ff-disp); font-weight:800; font-size:clamp(2rem,4vw,2.9rem); line-height:1; color:#fff; }
.stat-num i{ font-style:normal; font-size:.42em; font-weight:700; color:var(--orange); margin-left:.2em; }
.stat-label{ margin-top:14px; font-size:.84rem; color:rgba(255,255,255,.62); letter-spacing:.04em; }

/* ============================================================
   SECTION COMMON
   ============================================================ */
.section{ padding:clamp(72px,11vw,140px) 0; position:relative; }
.sec-head{ margin-bottom:54px; }
.sec-head.center{ text-align:center; }
.eyebrow{
  display:inline-block; font-family:var(--ff-disp); font-size:.74rem; font-weight:700;
  letter-spacing:.3em; color:var(--orange); margin-bottom:14px;
}
.sec-title{
  font-family:var(--ff-ja); font-weight:900; line-height:1.25;
  font-size:clamp(1.8rem,4vw,2.9rem); margin:0; color:var(--navy);
}
.sec-sub{ display:block; margin-top:16px; color:var(--ink-soft); font-size:1rem; font-weight:500; }
.sec-head.light .eyebrow{ color:var(--orange); }
.sec-head.light .sec-title{ color:#fff; }
.sec-sub.light{ color:rgba(255,255,255,.78); }

/* ---------- MESSAGE ---------- */
.message-grid{ display:grid; grid-template-columns:.8fr 1.4fr; gap:clamp(30px,6vw,90px); align-items:start; }
.message .sec-head{ margin-bottom:0; position:sticky; top:120px; }
.message .sec-sub{ color:var(--ink-soft); }
.message-body .lead{ font-family:var(--ff-ja); font-weight:700; font-size:clamp(1.2rem,2.2vw,1.55rem);
  line-height:1.7; color:var(--navy); margin:0 0 30px; }
.message-body p{ font-size:1.02rem; color:#33415a; }
.message-body strong{ color:var(--orange-d); font-weight:700; }
.logo-note{
  margin-top:40px; padding:32px; background:var(--bg-soft); border-radius:var(--radius);
  display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center;
  border-left:4px solid var(--orange);
}
.logo-note-mark{ color:var(--navy); }
.logo-note p{ margin:0; font-size:.96rem; line-height:1.85; }

/* ---------- SERVICE ---------- */
.service{ background:var(--bg-soft); }
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:42px 38px; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:4px;
  background:linear-gradient(90deg,var(--orange),var(--orange-d)); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.card:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -30px rgba(11,29,58,.4); border-color:transparent; }
.card:hover::before{ transform:scaleX(1); }
.card-no{ position:absolute; right:28px; top:24px; font-family:var(--ff-disp); font-weight:800;
  font-size:3.2rem; color:var(--bg-soft-2); line-height:1; transition:color .4s var(--ease); }
.card:hover .card-no{ color:var(--orange-soft); }
.card-icon{ width:54px; height:54px; display:grid; place-items:center; border-radius:12px;
  background:var(--navy); color:#fff; margin-bottom:22px; }
.card-icon svg{ width:28px; height:28px; }
.card h3{ font-family:var(--ff-ja); font-weight:700; font-size:1.22rem; color:var(--navy); margin:0 0 12px; }
.card p{ margin:0; font-size:.96rem; color:#46566e; line-height:1.85; }

/* ---------- WHY ---------- */
.why{ background:var(--navy); color:#fff; }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.why-item{ padding:38px 30px; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent); transition:border-color .4s var(--ease), transform .4s var(--ease); }
.why-item:hover{ border-color:var(--orange); transform:translateY(-6px); }
.why-no{ font-family:var(--ff-disp); font-weight:800; font-size:1rem; color:var(--orange); letter-spacing:.1em; }
.why-item h3{ font-family:var(--ff-ja); font-weight:700; font-size:1.3rem; margin:14px 0 12px; }
.why-item p{ margin:0; color:rgba(255,255,255,.74); font-size:.96rem; }

/* ---------- FLOW ---------- */
.flow-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:flow; }
.flow-steps li{ position:relative; padding:34px 26px; background:var(--bg-soft); border-radius:var(--radius); }
.flow-steps li::after{ content:"→"; position:absolute; right:-16px; top:50%; transform:translateY(-50%);
  color:var(--orange); font-weight:800; font-size:1.3rem; z-index:2; }
.flow-steps li:last-child::after{ display:none; }
.flow-no{ font-family:var(--ff-disp); font-weight:800; color:var(--orange); font-size:1.1rem; letter-spacing:.08em; }
.flow-steps h3{ font-family:var(--ff-ja); font-weight:700; font-size:1.12rem; color:var(--navy); margin:12px 0 8px; }
.flow-steps p{ margin:0; font-size:.9rem; color:var(--ink-soft); }

/* ---------- NOTICE ---------- */
.notice-grid{ display:grid; grid-template-columns:.7fr 1.6fr; gap:clamp(30px,6vw,80px); align-items:start; }
.notice .sec-head{ margin-bottom:0; }
.notice-list{ list-style:none; margin:0; padding:0; }
.notice-list li{ display:flex; align-items:center; gap:20px; padding:22px 6px; border-bottom:1px solid var(--line);
  flex-wrap:wrap; transition:background .3s var(--ease); }
.notice-list li:first-child{ border-top:1px solid var(--line); }
.notice-list li:hover{ background:var(--bg-soft); }
.notice-list time{ font-family:var(--ff-disp); font-weight:600; color:var(--ink-soft); font-size:.9rem; min-width:92px; }
.notice-cat{ font-family:var(--ff-disp); font-size:.66rem; font-weight:700; letter-spacing:.12em;
  color:var(--orange); border:1px solid var(--orange); border-radius:999px; padding:3px 12px; }
.notice-list a{ font-size:1rem; font-weight:500; transition:color .3s var(--ease); }
.notice-list a:hover{ color:var(--orange-d); }

/* ---------- ABOUT ---------- */
.about{ background:var(--bg-soft); }
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,64px); align-items:stretch; }
.company-table{ margin:0; }
.company-table>div{ display:grid; grid-template-columns:140px 1fr; gap:20px; padding:20px 4px; border-bottom:1px solid var(--line); }
.company-table>div:first-child{ border-top:1px solid var(--line); }
.company-table dt{ font-family:var(--ff-ja); font-weight:700; color:var(--navy); font-size:.95rem; }
.company-table dd{ margin:0; color:#33415a; font-size:.97rem; }
.company-table a:hover{ color:var(--orange-d); }
.about-map{ border-radius:var(--radius); overflow:hidden; min-height:340px; box-shadow:0 20px 50px -30px rgba(11,29,58,.5); }
.about-map iframe{ width:100%; height:100%; min-height:340px; border:0; filter:grayscale(.2) contrast(1.02); }

/* ---------- CONTACT ---------- */
.contact{ background:radial-gradient(120% 120% at 20% 0%, var(--navy-3), var(--navy) 60%, #07142a); color:#fff; position:relative; overflow:hidden; }
.contact-canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.contact-inner{ position:relative; z-index:2; max-width:880px; }
.contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:22px 26px; margin-top:10px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field-full{ grid-column:1 / -1; }
.field label, .consent span{ font-family:var(--ff-ja); font-weight:700; font-size:.92rem; color:#fff; display:flex; align-items:center; gap:10px; }
.req{ font-size:.62rem; background:var(--orange); color:#fff; padding:2px 8px; border-radius:4px; letter-spacing:.08em; font-weight:700; }
.field input, .field textarea{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22); border-radius:10px;
  padding:14px 16px; color:#fff; font-family:var(--ff-body); font-size:1rem; transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.4); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--orange); background:rgba(255,255,255,.1); }
.consent{ grid-column:1/-1; flex-direction:row; align-items:center; gap:12px; margin-top:4px; }
.consent input{ width:20px; height:20px; accent-color:var(--orange); flex:none; }
.consent a{ color:var(--orange); text-decoration:underline; }
.submit-row{ text-align:center; margin-top:12px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:#07142a; color:rgba(255,255,255,.7); padding:64px 0 0; }
.footer-grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:48px; }
.footer-brand .brand-name{ font-family:var(--ff-disp); font-weight:800; font-size:1.4rem; color:#fff; letter-spacing:.06em; }
.footer-tag{ color:var(--orange); font-size:.78rem; letter-spacing:.14em; margin:8px 0 18px; }
.footer-addr{ font-size:.86rem; line-height:1.8; margin:0; }
.footer-nav{ display:grid; grid-template-columns:1fr 1fr; gap:12px 40px; align-content:start; }
.footer-nav a{ font-size:.9rem; transition:color .3s var(--ease); }
.footer-nav a:hover{ color:var(--orange); }
.footer-copy{ border-top:1px solid rgba(255,255,255,.1); padding:22px var(--gutter); text-align:center; }
.footer-copy small{ font-family:var(--ff-disp); font-size:.74rem; letter-spacing:.06em; color:rgba(255,255,255,.5); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.hero .reveal{ transition-duration:1s; }
.hero-title .line.reveal:nth-child(2){ transition-delay:.12s; }
.hero-sub.reveal{ transition-delay:.28s; }
.hero-actions.reveal{ transition-delay:.42s; }
.cards .card:nth-child(2){ transition-delay:.08s; }
.cards .card:nth-child(3){ transition-delay:.16s; }
.cards .card:nth-child(4){ transition-delay:.24s; }
.why-item:nth-child(2),.flow-steps li:nth-child(2){ transition-delay:.1s; }
.why-item:nth-child(3),.flow-steps li:nth-child(3){ transition-delay:.2s; }
.flow-steps li:nth-child(4){ transition-delay:.3s; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .scroll-cue span::after{ animation:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .message-grid, .notice-grid, .about-grid{ grid-template-columns:1fr; }
  .message .sec-head{ position:static; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:1fr; }
  .flow-steps{ grid-template-columns:repeat(2,1fr); }
  .flow-steps li:nth-child(2)::after{ display:none; }
}
@media (max-width:760px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); flex-direction:column; justify-content:center;
    align-items:flex-start; gap:30px; background:var(--navy); padding:0 40px;
    transform:translateX(100%); transition:transform .45s var(--ease); box-shadow:-20px 0 60px rgba(0,0,0,.4);
  }
  .nav.open{ transform:none; }
  .nav>a, .site-header.scrolled .nav>a{ color:#fff; }
  .nav>a:not(.nav-cta){ flex-direction:row; gap:10px; align-items:baseline; }
  .nav>a .en{ opacity:.5; }
  .burger{ display:flex; }
  .burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .cards{ grid-template-columns:1fr; }
  .contact-form{ grid-template-columns:1fr; }
  .sp-only{ display:inline; }
}
@media (max-width:480px){
  .stats-grid{ grid-template-columns:1fr; }
  .flow-steps{ grid-template-columns:1fr; }
  .flow-steps li::after{ content:"↓"; right:50%; top:auto; bottom:-16px; transform:translateX(50%); }
  .flow-steps li:nth-child(2)::after{ display:block; }
}

/* ============================================================
   MULTI-PAGE (HP) — page hero banners, sub-page layouts, images
   ============================================================ */
.static-header{ position:fixed; }
body:not([data-hero]) main{ padding-top:0; }

/* ---- Page hero banner (sub pages) ---- */
.page-hero{
  position:relative; min-height:clamp(300px,42vh,440px); display:flex; align-items:flex-end;
  color:#fff; overflow:hidden; padding-top:90px;
  background:linear-gradient(120% 120% at 80% 0%, var(--navy-3), var(--navy) 60%, #07142a);
}
.ph-bg{ position:absolute; inset:0; z-index:0; }
.ph-bg img{ width:100%; height:100%; object-fit:cover; opacity:.42; }
.page-hero::after{ /* gradient veil for legibility */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(7,20,42,.82) 0%, rgba(7,20,42,.45) 55%, rgba(7,20,42,.25) 100%);
}
.ph-glow{ position:absolute; z-index:1; width:48vw; height:48vw; right:-12vw; top:-16vw; border-radius:50%;
  background:radial-gradient(circle, rgba(255,106,26,.3), transparent 62%); filter:blur(26px); }
.ph-inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding:0 var(--gutter) clamp(36px,6vw,64px); }
.ph-inner .eyebrow{ margin-bottom:10px; }
.ph-title{ font-family:var(--ff-ja); font-weight:900; font-size:clamp(2rem,5vw,3.4rem); line-height:1.2; margin:0; }
.ph-sub{ margin:14px 0 0; color:rgba(255,255,255,.82); font-size:1rem; max-width:40em; }
.breadcrumb{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:14px var(--gutter) 0; font-size:.78rem; color:var(--ink-soft); }
.breadcrumb a:hover{ color:var(--orange-d); }
.breadcrumb span{ color:#c2ccda; }

/* ---- Home: image-backed teaser cards / band ---- */
.home-svc{ background:var(--bg-soft); }
.svc-teasers{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.svc-teaser{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--navy); min-height:230px; display:flex; align-items:flex-end; color:#fff; isolation:isolate; }
.svc-teaser img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; z-index:-1; transition:transform .6s var(--ease), opacity .4s var(--ease); }
.svc-teaser::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(7,20,42,.92), rgba(11,29,58,.35)); }
.svc-teaser:hover img{ transform:scale(1.06); opacity:.65; }
.svc-teaser .st-body{ padding:30px 30px 28px; }
.svc-teaser .st-no{ font-family:var(--ff-disp); font-weight:800; color:var(--orange); letter-spacing:.1em; }
.svc-teaser h3{ font-family:var(--ff-ja); font-weight:700; font-size:1.22rem; margin:8px 0 6px; }
.svc-teaser p{ margin:0; font-size:.9rem; color:rgba(255,255,255,.78); }

.cta-band{ position:relative; color:#fff; text-align:center; overflow:hidden;
  background:linear-gradient(120% 120% at 20% 0%, var(--navy-3), var(--navy) 60%, #07142a); }
.cta-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.25; z-index:0; }
.cta-band .cta-inner{ position:relative; z-index:2; padding:clamp(64px,10vw,110px) var(--gutter); max-width:760px; margin:0 auto; }
.cta-band h2{ font-family:var(--ff-ja); font-weight:900; font-size:clamp(1.8rem,4vw,2.8rem); margin:0 0 14px; }
.cta-band p{ color:rgba(255,255,255,.82); margin:0 0 30px; }

.section-link{ display:inline-flex; align-items:center; gap:.5em; margin-top:34px; font-family:var(--ff-disp); font-weight:700; color:var(--orange-d); }
.section-link .arr{ transition:transform .3s var(--ease); }
.section-link:hover .arr{ transform:translateX(5px); }
.center-link{ text-align:center; }

/* ---- Service detail page ---- */
.svc-detail{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; margin-bottom:clamp(48px,8vw,96px); }
.svc-detail:last-child{ margin-bottom:0; }
.svc-detail:nth-child(even) .svc-figure{ order:2; }
.svc-figure{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:linear-gradient(135deg,var(--navy-2),var(--navy)); box-shadow:0 24px 60px -34px rgba(11,29,58,.6); }
.svc-figure img{ width:100%; height:100%; object-fit:cover; }
.svc-figure .svc-figtag{ position:absolute; left:18px; top:18px; z-index:2; font-family:var(--ff-disp); font-weight:800; color:#fff; background:var(--orange); border-radius:999px; padding:6px 16px; font-size:.8rem; letter-spacing:.06em; }
.svc-detail-body .eyebrow{ margin-bottom:10px; }
.svc-detail-body h3{ font-family:var(--ff-ja); font-weight:900; font-size:clamp(1.4rem,2.6vw,2rem); color:var(--navy); margin:0 0 16px; }
.svc-detail-body p{ color:#33415a; margin:0 0 14px; }
.svc-detail-body ul{ margin:18px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:10px; }
.svc-detail-body li{ font-size:.84rem; font-weight:700; font-family:var(--ff-ja); color:var(--navy);
  background:var(--orange-soft); border:1px solid #ffd9c2; border-radius:999px; padding:6px 14px; }

/* ---- Message page ---- */
.message-page-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center; }
.message-visual{ border-radius:var(--radius); overflow:hidden; aspect-ratio:3/4; background:linear-gradient(135deg,var(--navy-2),var(--navy)); box-shadow:0 30px 70px -40px rgba(11,29,58,.6); }
.message-visual img{ width:100%; height:100%; object-fit:cover; }
.signoff{ margin-top:30px; text-align:right; }
.signoff .role{ font-size:.9rem; color:var(--ink-soft); }
.signoff .name{ font-family:var(--ff-ja); font-weight:900; font-size:1.4rem; color:var(--navy); }

/* ---- About office image ---- */
.about-figure{ border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10; background:linear-gradient(135deg,var(--navy-2),var(--navy));
  box-shadow:0 24px 60px -34px rgba(11,29,58,.5); margin-top:34px; }
.about-figure img{ width:100%; height:100%; object-fit:cover; }

/* ---- Light contact form (on white page) ---- */
.contact-form-light label, .contact-form-light .consent span{ color:var(--navy); }
.contact-form-light .field input, .contact-form-light .field textarea{
  background:#fff; border:1px solid var(--line); color:var(--ink);
}
.contact-form-light .field input::placeholder, .contact-form-light .field textarea::placeholder{ color:#9aa6b8; }
.contact-form-light .field input:focus, .contact-form-light .field textarea:focus{ border-color:var(--orange); background:#fff; box-shadow:0 0 0 3px rgba(255,106,26,.12); }
.contact-form-light .consent a{ color:var(--orange-d); }

@media (max-width:900px){
  .svc-teasers{ grid-template-columns:1fr; }
  .svc-detail{ grid-template-columns:1fr; }
  .svc-detail:nth-child(even) .svc-figure{ order:0; }
  .message-page-grid{ grid-template-columns:1fr; }
  .message-visual{ aspect-ratio:16/10; max-width:520px; margin:0 auto; }
}