/* Extracted from index.html <style> - unchanged */

:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#0f1b2d;
  --muted:#5b6b82;
  --line:rgba(15,27,45,.10);
  --accent:#d9822b;
  --accent2:#f0a35a;
  --brand:#2F6FA3;
  --shadow: 0 16px 40px rgba(15,27,45,.10);
  --shadow2: 0 10px 24px rgba(15,27,45,.10);
  --radius:18px;
  --radius2:24px;
  --max:1120px;
  --headerH:76px;
}

*{box-sizing:border-box}
html{height:100%; font-size:16px}
body{height:100%}
body{margin:0}

/* IMPORTANT: keep Home typography isolated to the Home page only. */
body.home{
  font-family: var(--ycc-font, system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, Arial, sans-serif) !important;
  font-size:16px !important;
  font-weight:400 !important;
  background:var(--bg);
  color:var(--text);
  line-height:1.75;
}

/* Ensure the Home content can go full-width even inside constrained builder wrappers. */
body.home{overflow-x:hidden}
.yccHomeContent{
  width:100%;
  max-width:none;
  margin:0;
}

/* Hard reset for editable Home content area (prevents global typography from making everything bold/large). */
.yccHomeContent{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, Arial, sans-serif !important;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.75;
}

/* Force original font family inside Home content. */
.yccHomeContent :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,button,input,textarea,select,label,a,span,strong,em){
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, Arial, sans-serif !important;
}

/* Reset "normal text" weights/sizes only (keep headings/buttons/cards controlled by the theme classes). */
.yccHomeContent :is(p,li,dt,dd,blockquote,figcaption,label){
  font-weight:400 !important;
  font-size:inherit;
}

/* Elementor specific: force this section/widget to be full width */
.elementor-1910 .elementor-element.elementor-element-b20effd{
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  align-self: stretch !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Recommended wrapper for pasted Home HTML to fully isolate typography from page builder kits. */
.yccHome{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, Arial, sans-serif !important;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.75;
}
.yccHome :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote,figcaption,button,input,textarea,select,label,a,span,strong,em){
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, Arial, sans-serif !important;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:100%; width:100%; margin:0 auto; padding:0 20px}

/* ===== Home content width =====
   Request: Home page content should be 80% wide, except the slider/hero (full width).
   Important: avoid applying 80% twice (Elementor containers + .container) which makes it too narrow. */
body.home .yccHomeContent{
  width: 80%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* Let Elementor boxed containers be fluid within the 80% wrapper. */
body.home .yccHomeContent :is(
  .elementor-section.elementor-section-boxed > .elementor-container,
  .elementor-section.elementor-section-boxed > .elementor-container > .elementor-row,
  .e-con.e-con-boxed > .e-con-inner
){
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Hero/slider must stay full width even if it's placed inside an 80% Elementor container. */
body.home .yccHomeContent .hero{
  width: 100vw !important;
  max-width: none !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@supports (width: 100dvw){
  body.home .yccHomeContent .hero{
    width: 100dvw !important;
  }
}

/* Note: do NOT auto-exempt all Elementor stretched/full-width sections,
   because Home content (e.g., お知らせ) should still be 80% unless it's the hero/slider. */

/* Fallback: make common slider widgets full-bleed even if nested in an 80% container. */
body.home .yccHomeContent :is(
  .elementor-widget-slides,
  .elementor-widget-image-carousel,
  .elementor-widget-media-carousel
){
  width: 100vw !important;
  max-width: none !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@supports (width: 100dvw){
  body.home .yccHomeContent :is(
    .elementor-widget-slides,
    .elementor-widget-image-carousel,
    .elementor-widget-media-carousel
  ){
    width: 100dvw !important;
  }
}

/* Do not constrain the slider/hero area even if it is built with Elementor wrappers. */
body.home .yccHomeContent .hero :is(
  .elementor-container,
  .elementor-row,
  .e-con-inner
){
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Keep Home posts section consistent with the 80% rule above. */
.home .yccHomeContent .yccHomePosts .container{
  max-width: none;
}

/* Some sections (e.g., bizStrip) are not wrapped by .container; let them fill the 80% wrapper. */
body.home .yccHomeContent .bizStrip{
  width: 100%;
  max-width: none;
}

/* Gutenberg/Elementor: avoid block wrapper margins breaking the original layout (e.g. hero + bizStrip overlap). */
.wp-block-html{margin:0}
.wp-block-html + .wp-block-html{margin-top:0}

.topline{height:8px; background: linear-gradient(90deg, var(--accent), var(--accent2));}

header.siteHeader{position:relative; top:auto; z-index:50; background: rgba(255,255,255,.82); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(15,27,45,.08);}
.headerInner{height:var(--headerH); display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:12px; min-width:240px;}
.brandLogo{flex:0 0 auto; width:56px; height:40px; border-radius:10px; background: #fff; border:1px solid rgba(15,27,45,.12); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:3px 6px; box-shadow: 0 2px 10px rgba(15,27,45,.06);
  --logoScale: 1.25;
  --logoX: 0px;
  --logoY: 0px;
}
.brandLogo img{max-width:100%; max-height:100%; width:auto; height:auto; margin-top:0; object-fit:contain; object-position:center; display:block; transform: translate(var(--logoX), var(--logoY)) scale(var(--logoScale)); transform-origin: 50% 50%;}
.brandText{display:flex; flex-direction:column; gap:2px}
.brandName{font-weight:900; letter-spacing:.02em; font-size:18px; line-height:1.1}
.brandTag{color:rgba(15,27,45,.62); font-weight:800; font-size:12px; letter-spacing:.02em}
.menuToggle{display:none; width:46px; height:46px; border:1px solid rgba(15,27,45,.12); border-radius:14px; background:rgba(255,255,255,.96); box-shadow:0 10px 24px rgba(15,27,45,.10); padding:0; align-items:center; justify-content:center; flex-direction:column; gap:5px; cursor:pointer; flex:0 0 auto}
.menuToggleBar{display:block; width:20px; height:2px; border-radius:999px; background:rgba(15,27,45,.86); transition:transform .22s ease, opacity .22s ease}
nav.menu{display:flex; align-items:center; gap:8px;}

/* Header menu supports parent/child (dropdown). */
.menu .menuItem{position:relative; display:inline-flex; align-items:center}
.menu .menuLink{padding:10px 14px; border-radius:12px; font-weight:800; color:rgba(15,27,45,.78); transition:.2s; white-space:nowrap; display:inline-flex; align-items:center}
.menu .menuLink:hover{background:rgba(15,27,45,.05); color:rgba(15,27,45,.95)}
.menu .menuLink.active{background:rgba(217,130,43,.14); color:#7a3f06; border:1px solid rgba(217,130,43,.25)}

.menu .menuCaret{
  width: 0;
  height: 0;
  margin-left: 8px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(15,27,45,.45);
  transform: translateY(1px);
}

.menu .subMenu{
  position:absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(15,27,45,.10);
  box-shadow: 0 18px 44px rgba(15,27,45,.12);
  display:none;
  z-index: 999;
}

.menu .menuItem:hover .subMenu,
.menu .menuItem:focus-within .subMenu{display:block}

.menu .subLink{
  display:flex;
  align-items:center;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
  color: rgba(15,27,45,.82);
  white-space: nowrap;
  text-decoration:none;
}

.menu .subLink:hover{background: rgba(15,27,45,.05); color: rgba(15,27,45,.95)}
.menu .subLink.active{background: rgba(47,111,163,.10); border: 1px solid rgba(47,111,163,.16)}
body.mobile-menu-open{overflow:hidden}
body.mobile-menu-open .menuToggleBar:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.mobile-menu-open .menuToggleBar:nth-child(2){opacity:0}
body.mobile-menu-open .menuToggleBar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.hero{position:relative; min-height: 520px; height: clamp(520px, 72vh, 700px); display:flex; align-items:flex-end; overflow:hidden; background:#101722; opacity: 0; transform: translateY(32px) scale(0.98); transition: opacity 0.7s cubic-bezier(.4,1.2,.4,1), transform 0.7s cubic-bezier(.4,1.2,.4,1)}
body.hero-animate .hero{opacity:1; transform:none}
.hero::before{content:none}
.hero::after{content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(6,13,24,.50) 0%, rgba(6,13,24,.30) 34%, rgba(6,13,24,.10) 62%, rgba(6,13,24,.08) 100%), linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.22)); z-index: 2}
.heroSlides{position:absolute; inset:0; z-index: 1; overflow:hidden}
.heroSlides .slide{position:absolute; inset:0; overflow:hidden; isolation:isolate; filter: saturate(1.05) contrast(1.03); opacity:0; transition: opacity 0.9s ease}
.heroSlides .slide::before{content:""; position:absolute; inset:-24px; background-image: var(--slide-img); background-position:center; background-size:cover; background-repeat:no-repeat; filter: blur(22px) saturate(1.12); transform: scale(1.08); opacity: .55}
.heroSlides .slide::after{content:""; position:absolute; inset:0; background-image: var(--slide-img); background-position:center; background-size:cover; background-repeat:no-repeat}
.heroSlides .slide.active{opacity:1}
.heroNav{position:absolute; inset:0; z-index: 4; pointer-events:none}
.heroArrow{position:absolute; top:50%; transform: translateY(-50%); width:42px; height:42px; border-radius:999px; display:grid; place-items:center; padding:0; appearance:none; background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff; box-shadow: 0 10px 22px rgba(15,27,45,.18); cursor:pointer; pointer-events:auto; transition: transform .18s ease, filter .18s ease, background .18s ease}
.heroArrow:hover{ transform: translateY(-50%) scale(1.06); filter: brightness(1.08) }
.heroArrow.prev{ left:16px }
.heroArrow.next{ right:16px }
.heroInner{position:relative; width:100%; padding: 44px 0 92px 78px; z-index: 3}
.heroGrid{display:grid; grid-template-columns: minmax(0, 980px) 1fr; gap: 0; align-items:end}
.heroCopy{color:#fff; max-width: 980px; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none}
.heroTitle{
  margin: 0 0 14px;
  font-family: "Yu Gothic", "Yu Gothic UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  font-size: clamp(30px, 3.35vw, 46px);
  line-height: 1.14;
  letter-spacing: .015em;
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 4px 14px rgba(0,0,0,.22);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.heroCopy h6.heroTitle{
  margin: 0 0 16px;
  font-family: "Yu Gothic", "Yu Gothic UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  font-size: clamp(17px, 1.55vw, 24px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .02em;
  color: rgba(255,255,255,.96);
  text-shadow: 0 2px 10px rgba(0,0,0,.16);
}
.heroLead{
  margin: 0;
  max-width: 1080px;
  font-family: "Yu Gothic", "Yu Gothic UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  color: rgba(255,255,255,.94);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .015em;
  text-shadow: none;
}
.heroCtas{display:flex; gap:12px; flex-wrap:wrap; margin-top: 22px}
.btn{display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 14px; border-radius:12px; font-weight:900; border:1px solid rgba(15,27,45,.10); background:#fff; box-shadow: 0 8px 18px rgba(15,27,45,.08); transition:.22s cubic-bezier(.4,1.2,.4,1); white-space:nowrap; cursor:pointer}
.btn:hover{transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 36px rgba(47,111,163,.18); filter: brightness(1.08); border-color: rgba(142,202,217,.9)}
.btnBrand{background: var(--brand); border-color: rgba(47,111,163,.35); color:#fff; box-shadow: 0 14px 30px rgba(47,111,163,.22)}
.btnBrand:hover{box-shadow: 0 18px 40px rgba(47,111,163,.26); border-color: rgba(47,111,163,.55)}
.btnPrimary{background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: rgba(217,130,43,.35); color:#fff; box-shadow: 0 14px 30px rgba(217,130,43,.25)}
.btnGhost{background: linear-gradient(180deg, #4d7dcb 0%, #3b67b3 100%); border:1px solid #274a84; color:#fff; box-shadow: 0 10px 24px rgba(39,74,132,.24)}
.btnGhost:hover{border-color:#1e3d72; box-shadow: 0 14px 28px rgba(39,74,132,.28)}

/* Hero jump buttons ("YCCとは" / "サービスメニュー") */
.heroCtas .btn{
  font-family: "Yu Gothic", "Yu Gothic UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  min-width: 138px;
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .03em;
}

.heroCtas .btnBrand,
.heroCtas .btnPrimary,
.heroCtas .btnGhost{box-shadow: 0 10px 24px rgba(0,0,0,.14)}

@media (max-width: 560px){
  .heroTitle{max-width: none; font-size: clamp(28px, 8vw, 40px)}
  .heroCopy h6.heroTitle{max-width: none; font-size: clamp(17px, 5.2vw, 24px)}
  .yccHeroJumps .btn{height: 44px; font-size: 16px; min-width: 132px}
}

.bizStrip{position:relative; margin-top:-74px; z-index:6; max-width:1240px}
.bizGrid{display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:0; border-radius: 0; overflow:hidden; box-shadow: 0 18px 50px rgba(15,27,45,.14); border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.55); backdrop-filter: blur(14px)}
.bizCard{padding: 22px 20px; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; color:#0f1b2d; position:relative; border-right: 1px solid rgba(255,255,255,.25); transition: transform .2s ease, filter .2s ease; font-size: 1.10rem}
.bizCard:last-child{ border-right:none }
.bizCard:nth-child(1){background: linear-gradient(135deg, rgba(217,130,43,.22), rgba(255,255,255,0) 55%), linear-gradient(180deg, #fff3e6, #ffffff)}
.bizCard:nth-child(2){background: linear-gradient(135deg, rgba(47,111,163,.18), rgba(255,255,255,0) 55%), linear-gradient(180deg, #eef6ff, #ffffff)}
.bizCard:nth-child(3){background: linear-gradient(135deg, rgba(40,167,139,.14), rgba(255,255,255,0) 55%), linear-gradient(180deg, #edf9f6, #ffffff)}
.bizCard:nth-child(4){background: linear-gradient(135deg, rgba(174,107,209,.16), rgba(255,255,255,0) 55%), linear-gradient(180deg, #f6f0ff, #ffffff)}
.bizCard:hover{transform: translateY(-4px); filter: brightness(1.02)}
.bizCard{cursor:pointer}
.bizCard:focus-visible{outline:3px solid rgba(47,111,163,.38); outline-offset:-3px}
.bizCard h3{margin:0 0 14px; font-size: 1.28rem; font-weight: 950; letter-spacing:.01em; line-height:1.25}
.bizCard ul{margin:0; padding:0; list-style:none; display:grid; gap:10px; font-weight: 800; color: rgba(15,27,45,.78); line-height:1.55}
.bizCard li{display:flex; gap:10px; align-items:flex-start}
.bizCard li::before{content:""; width:10px; height:10px; border-radius:999px; flex:0 0 auto; margin-top:6px; background: rgba(217,130,43,.85); box-shadow: 0 8px 18px rgba(217,130,43,.18)}
.bizCard:nth-child(2) li::before{background: rgba(47,111,163,.85); box-shadow: 0 8px 18px rgba(47,111,163,.16)}
.bizCard:nth-child(3) li::before{background: rgba(40,167,139,.82); box-shadow: 0 8px 18px rgba(40,167,139,.14)}
.bizCard:nth-child(4) li::before{background: rgba(174,107,209,.82); box-shadow: 0 8px 18px rgba(174,107,209,.14)}

/* Back-compat: older pasted HTML used <span class="dot"></span> inside each <li>. */
.bizCard .dot{display:none}

section{padding: 56px 0}
.sectionTitle{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom: 18px}
.sectionTitle h2{margin:0; font-size: 28px; letter-spacing:.01em; font-weight: 950}
.sectionTitle .sub{color:var(--muted); font-weight:700; font-size: 13px}

.yccSectionAnchor{display:block; position:relative; top:-100px; visibility:hidden}

/* ===== Home message block (誠実に挑む50年...) ===== */
.yccMission{
  padding: 44px 0 54px;
}
.yccMissionInner{
  width: 100%;
}
.yccMissionTitle{
  margin: 0;
  font-weight: 1000;
  letter-spacing: .01em;
  line-height: 1.08;
  color: var(--accent);
  font-size: clamp(34px, 4.2vw, 58px);
}
.yccMissionSub{
  margin-top: 14px;
  font-weight: 950;
  letter-spacing: .01em;
  line-height: 1.22;
  font-size: clamp(18px, 2.3vw, 34px);
  color: rgba(15,27,45,.18);
}
.yccMissionBody{
  margin-top: 20px;
  color: rgba(15,27,45,.82);
  font-weight: 700;
  font-size: 16px;
  line-height: 2.0;
}
.yccMissionBody p{margin: 0}
.yccMissionBody p + p{margin-top: 10px}

/* Home posts (お知らせ): reduce whitespace + avoid class name collisions from builders/plugins. */
.home .yccHomeContent .yccHomePosts{padding: 44px 0}
.home .yccHomeContent .yccHomePosts .sectionTitle{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px;
}
.home .yccHomeContent .yccHomePosts .sectionTitle .sub{
  margin-left:auto !important;
  width:auto !important;
  text-align:right !important;
  display:block;
}
.home .yccHomeContent .yccHomePosts .sectionTitle .viewAllPosts{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.topicsBox{background: var(--card); border:1px solid var(--line); border-radius: var(--radius2); box-shadow: var(--shadow2); overflow:hidden}
.noticeList{display:block}
.noticeItem{display:grid; grid-template-columns: 150px 1fr; gap:14px; padding: 14px 18px 12px; border-bottom: 1px solid var(--line); align-items:flex-start}
.noticeItem:last-child{border-bottom:none}
.noticeDate{color: var(--muted); font-weight:900; font-size: 13px; white-space:nowrap}
.noticeTitle{margin:0 0 4px; font-size: 16px; font-weight:950; line-height:1.45}
.noticeDesc{
  margin:0;
  color: var(--muted);
  font-weight:700;
  font-size: 14px;
  line-height:1.65;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}
.noticeMore{display:inline-flex; margin-top: 6px; font-weight:900; color: rgba(47,111,163,.95); gap:8px}

/* Collapse unexpected vertical gaps inside each item (some builders inject styles on generic elements). */
.home .yccHomeContent .yccHomePosts .noticeItem{height:auto !important; min-height:0 !important}
.home .yccHomeContent .yccHomePosts .noticeItem > div:last-child{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.home .yccHomeContent .yccHomePosts .noticeItem :is(h4,p){margin:0 !important}
.home .yccHomeContent .yccHomePosts .noticeMore{margin-top:4px !important; align-self:flex-start}

.aboutWrap{display:grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items:stretch}
.aboutImg{border-radius: var(--radius2); overflow:hidden; box-shadow: var(--shadow); border:1px solid rgba(15,27,45,.10); position:relative; min-height: 320px; background:#0c1522}
.aboutImg::before{content:""; position:absolute; inset:0; background: url("../img/daiji.png") center/contain no-repeat; filter: saturate(1.05) contrast(1.02)}
.aboutImg::after{content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.10), rgba(0,0,0,.0))}
.aboutCard{background: var(--card); border:1px solid var(--line); border-radius: var(--radius2); box-shadow: var(--shadow2); padding: 26px 24px}
.aboutCard h3{margin:0 0 10px; font-size: 32px; font-weight: 950; letter-spacing:.01em}
.aboutCard p{margin:0; color: var(--muted); font-weight:700; font-size: 18px}
.aboutCard .em{margin-top:14px; padding-top:14px; border-top:1px dashed rgba(15,27,45,.14); color: rgba(15,27,45,.78); font-weight:800}

#contact{padding-top: 34px}
.contactWrap{position:relative; border-radius: var(--radius2); overflow:hidden; border:1px solid rgba(15,27,45,.10); background: radial-gradient(700px 260px at 18% 28%, rgba(47,111,163,.14), transparent 60%), radial-gradient(650px 260px at 82% 72%, rgba(217,130,43,.16), transparent 60%), linear-gradient(180deg, #ffffff 0%, #fbfcff 100%); box-shadow: var(--shadow)}
.contactWrap::before{content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(255,255,255,.6), rgba(255,255,255,0)), repeating-linear-gradient(135deg, rgba(15,27,45,.03) 0px, rgba(15,27,45,.03) 1px, transparent 1px, transparent 10px); opacity:.65; pointer-events:none}
.contactInner{position:relative; padding: 26px 22px 22px; z-index: 2; color: var(--text); text-align:left}
.contactHead{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding: 8px 4px 14px; border-bottom: 1px solid rgba(15,27,45,.08); margin-bottom: 18px}
.contactHead h3{margin:0; font-size: 28px; font-weight: 1000; letter-spacing:.02em; color:#18305a}
.contactHead .hint{margin:0; font-weight:800; color: rgba(15,27,45,.58); font-size: 13px; white-space:nowrap}
.contactHead > :first-child{margin-right:auto}
.contactHead .hint{margin-left:auto; text-align:right; align-self:flex-end}
.contactHead > p:not(.hint){display:none !important}
.contactGrid{display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items:stretch}
.contactCard{border-radius: 18px; border:1px solid rgba(15,27,45,.10); background: rgba(255,255,255,.78); box-shadow: 0 10px 22px rgba(15,27,45,.06); padding: 16px 16px 14px; backdrop-filter: blur(10px); height:100%}
.contactGrid > .contactCard:first-child{display:flex; flex-direction:column; justify-content:flex-start; max-height: 93%; padding: 28px 24px}
.contactGrid > .contactCard:first-child .contactText{max-width: none}
.contactCardTitle{display:flex; align-items:center; gap:10px; font-weight: 950; color:#234B6A; margin:0 0 12px; letter-spacing:.02em; font-size: 16px}
.ico{width:34px; height:34px; border-radius: 14px; display:grid; place-items:center; border:1px solid rgba(15,27,45,.10); background: rgba(47,111,163,.08); box-shadow: 0 8px 18px rgba(47,111,163,.10); flex:0 0 auto; position:relative; font-size:0; line-height:0}
.ico::before{content:""; width:18px; height:18px; display:block; background-size:contain; background-repeat:no-repeat; background-position:center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23234B6A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
.contactCard .ico[style*="217,130,43"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9822B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6l4 2'/%3E%3C/svg%3E")}
.contactText{margin:0; color: rgba(15,27,45,.78); font-weight:800; line-height:1.9; font-size: 16.5px}
.contactText a{color:#234B6A; font-weight: 950; text-decoration: underline; text-underline-offset: 3px}
.contactActions{display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px}
.btnSmall{height:40px; padding:0 14px; border-radius:12px; font-weight: 950; font-size: 13.5px}
.btnSoft{background: rgba(47,111,163,.10); border:1px solid rgba(47,111,163,.18); color:#234B6A; box-shadow: none}
.btnSoft:hover{border-color: rgba(47,111,163,.28); box-shadow: 0 14px 28px rgba(47,111,163,.14)}
.contactSide{display:flex; flex-direction:column; gap: 12px; min-height:100%; height:100%}
.contactSide > .contactCard:last-child{flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-between; padding: 18px 18px 16px}
.mapCard{padding: 0; overflow:hidden; flex:1 1 58%; min-height:260px}
.mapCard iframe{width:100%; height: 100%; min-height: 260px; border:0; display:block}
.hoursRow{display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top: 10px}
.mini{border-radius: 16px; border:1px solid rgba(15,27,45,.10); background: rgba(255,255,255,.72); padding: 14px 14px 12px}
.mini b{display:block; color:#234B6A; font-weight: 1000; font-size: 14.5px}
.mini span{display:block; margin-top:6px; color: rgba(15,27,45,.70); font-weight: 800; font-size: 14px; line-height:1.6}

footer{padding: 36px 0 24px; color: rgba(255,255,255,.82); background: #0b1320; border-top: 1px solid rgba(255,255,255,.08)}
.footerGrid{display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items:center}
.badge{width:120px; height:120px; border-radius: 18px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); display:grid; place-items:center; overflow:hidden; position:relative}
.badge::before{content:"YCC"; font-size:28px; font-weight:950; color:rgba(255,255,255,.4); position:absolute; z-index:0}
.badge img{width:100%; height:100%; object-fit:contain; background:#fff; position:relative; z-index:1}

/* Footer logo is a wide mark (logo_header.png) — give it a wide container. */
footer .badge{
  width: 108px;
  height: 64px;
  max-width: 72vw;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15,27,45,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;

  /* Match header logo treatment, just bigger. */
  --logoScale: 1.25;
  --logoX: 0px;
  --logoY: 0px;
}
footer .badge::before{content:""}
footer .badge img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  padding: 10px 0px;
  margin-top:0;
  object-fit:contain;
  object-position:center;
  display:block;
  transform: none;
  background: #fff;
  border-radius: 0;
}
.footerLinks{display:grid; gap:8px; justify-content:center}
.footerLinks a{color: rgba(255,255,255,.86); font-weight:800; display:inline-flex; gap:10px; align-items:center}
.plus{width:18px; height:18px; border-radius:8px; display:grid; place-items:center; background: rgba(217,130,43,.18); border:1px solid rgba(217,130,43,.28); color:#fff; font-weight: 950; line-height:1}
.copyright{margin-top: 16px; text-align:center; color: rgba(255,255,255,.55); font-weight:700; font-size: 11.5px}

@media (max-width: 980px){nav.menu{display:none} .heroGrid{grid-template-columns:1fr} .heroInner{padding: 34px 28px 78px} .heroCopy{max-width: 900px; padding: 0} .heroLead{max-width: 100%} .bizGrid{ grid-template-columns: 1fr 1fr } .bizCard{ border-right: 1px solid rgba(255,255,255,.25) } .bizCard:nth-child(2){ border-right:none } .bizCard:nth-child(4){ border-right:none } .topicsGrid{grid-template-columns:1fr 1fr} .aboutWrap{grid-template-columns:1fr} .footerGrid{grid-template-columns:1fr; text-align:center} .footerLinks{justify-content:center} .brand{min-width:auto} .brandLogo{--logoScale: 1.15; --logoY: 0px} .contactGrid{grid-template-columns:1fr} .contactHead{flex-direction:column; align-items:flex-start}}
@media (max-width: 560px){.bizGrid{ grid-template-columns: 1fr } .bizCard{ border-right:none; border-top: 1px solid rgba(255,255,255,.25) } .bizCard:first-child{ border-top:none } .topicsGrid{grid-template-columns:1fr} .hero{min-height: 500px; height: auto} .heroInner{padding: 24px 18px 64px} .heroCopy{max-width: 100%; padding: 0; border-radius: 0} .heroTitle{max-width: none; font-size: clamp(26px, 7.8vw, 38px)} .heroCopy h6.heroTitle{max-width: none; font-size: clamp(16px, 4.8vw, 22px)} .heroLead{font-size: 13.5px; line-height: 1.8} .heroCtas{gap:10px; margin-top: 18px} .heroCtas .btn{min-width: 126px; height: 40px; font-size: 14px} .hoursRow{grid-template-columns:1fr}}

@media (max-width: 980px){
  .headerInner{height:auto; min-height:var(--headerH); padding:14px 0; align-items:center}
  .menuToggle{display:inline-flex}
  nav.menu{display:none; position:absolute; top:calc(100% + 10px); left:20px; right:20px; z-index:60; flex-direction:column; align-items:stretch; gap:10px; padding:16px; border-radius:22px; background:rgba(255,255,255,.98); border:1px solid rgba(15,27,45,.10); box-shadow:0 22px 54px rgba(15,27,45,.18)}
  body.mobile-menu-open nav.menu{display:flex}
  .menu .menuItem{display:flex; width:100%; flex-direction:column; align-items:stretch}
  .menu .menuLink{width:100%; justify-content:space-between; padding:14px 16px; border:1px solid rgba(15,27,45,.08); background:rgba(247,249,252,.96)}
  .menu .subMenu{position:static; min-width:0; padding:8px 0 0; border:none; box-shadow:none; background:transparent; display:block}
  .menu .subLink{padding:10px 14px 10px 24px; white-space:normal}
}

@media (max-width: 560px){
  .heroInner{padding-left: 16px; padding-right: 16px}
  nav.menu{left:16px; right:16px}
  .brandName{font-size:16px}
  .brandTag{font-size:11px}
}

@media (max-width: 980px){
  body.home .yccHomeContent{
    width: 100%;
  }
}

/* Final lock: Home service strip spacing/layout on production and local. */
body.home div#service.container.bizStrip,
body.home .yccHomeContent div#service.container.bizStrip{
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin-top: -74px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
  z-index: 6 !important;
}

body.home div#service.container.bizStrip > div.bizGrid,
body.home .yccHomeContent div#service.container.bizStrip > div.bizGrid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  background: rgba(255,255,255,.55) !important;
  box-shadow: 0 18px 50px rgba(15,27,45,.14) !important;
  backdrop-filter: blur(14px) !important;
}

body.home div#service.container.bizStrip > div.bizGrid > a.bizCard,
body.home .yccHomeContent div#service.container.bizStrip > div.bizGrid > a.bizCard{
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 22px 24px !important;
  box-sizing: border-box !important;
  border-right: 1px solid rgba(255,255,255,.25) !important;
  text-align: left !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}

body.home div#service.container.bizStrip > div.bizGrid > a.bizCard:last-child,
body.home .yccHomeContent div#service.container.bizStrip > div.bizGrid > a.bizCard:last-child{
  border-right: none !important;
}

body.home div#service.container.bizStrip > div.bizGrid > a.bizCard > h3,
body.home .yccHomeContent div#service.container.bizStrip > div.bizGrid > a.bizCard > h3{
  width: 100% !important;
  margin: 0 0 18px !important;
  font-size: 1.28rem !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

body.home div#service.container.bizStrip > div.bizGrid > a.bizCard > ul,
body.home .yccHomeContent div#service.container.bizStrip > div.bizGrid > a.bizCard > ul{
  display: grid !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  gap: 14px !important;
}

body.home div#service.container.bizStrip > div.bizGrid > a.bizCard > ul > li,
body.home .yccHomeContent div#service.container.bizStrip > div.bizGrid > a.bizCard > ul > li{
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.75 !important;
}

@media (max-width: 980px){
  body.home div#service.container.bizStrip > div.bizGrid,
  body.home .yccHomeContent div#service.container.bizStrip > div.bizGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.home div#service.container.bizStrip > div.bizGrid > a.bizCard,
  body.home .yccHomeContent div#service.container.bizStrip > div.bizGrid > a.bizCard{
    border-right: 1px solid rgba(255,255,255,.25) !important;
    border-top: none !important;
  }

  body.home div#service.container.bizStrip > div.bizGrid > a.bizCard:nth-child(2),
  body.home div#service.container.bizStrip > div.bizGrid > a.bizCard:nth-child(4),
  body.home .yccHomeContent div#service.container.bizStrip > div.bizGrid > a.bizCard:nth-child(2),
  body.home .yccHomeContent div#service.container.bizStrip > div.bizGrid > a.bizCard:nth-child(4){
    border-right: none !important;
  }
}

@media (max-width: 560px){
  body.home div#service.container.bizStrip,
  body.home .yccHomeContent div#service.container.bizStrip{
    margin-top: -42px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.home div#service.container.bizStrip > div.bizGrid,
  body.home .yccHomeContent div#service.container.bizStrip > div.bizGrid{
    grid-template-columns: 1fr !important;
  }

  body.home div#service.container.bizStrip > div.bizGrid > a.bizCard,
  body.home .yccHomeContent div#service.container.bizStrip > div.bizGrid > a.bizCard{
    padding: 20px 18px !important;
    border-right: none !important;
    border-top: 1px solid rgba(255,255,255,.25) !important;
  }

  body.home div#service.container.bizStrip > div.bizGrid > a.bizCard:first-child,
  body.home .yccHomeContent div#service.container.bizStrip > div.bizGrid > a.bizCard:first-child{
    border-top: none !important;
  }
}