@charset "utf-8";
/* ==========================================================================
   Verdi Bookkeeping Services Ltd — site stylesheet
   Rebuilt from the original 1&1 / IONOS "diyw" template (layout.css, main.css,
   font.css): green body #4b900e, white navigation text, framed header image,
   210px sidebar, white content column, Verdana, red links, dotted rules.
   ========================================================================== */

:root {
  --green: #4b900e;          /* body background + h1 (font.css) */
  --green-light: #63bf11;    /* .sidecolor / sub-nav hover (layout.css) */
  --green-title: #325E1A;    /* header title colour */
  --green-dark: #3a700b;
  --page-bg: #d9d9d9;        /* #page background (layout.css) */
  --text: #666666;
  --text-strong: #333333;
  --link: #DB2F2C;           /* links (layout.css) */
  --rule: #CCCCCC;
  --white: #ffffff;
  --radius: 3px;
  --shadow: 0 1px 6px rgba(0,0,0,.25);
  --font: Verdana, Geneva, Arial, Helvetica, sans-serif;
  --font-head: Helvetica, "Helvetica Neue", "Trebuchet MS", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

body {
  margin: 0; padding: 0;
  background: var(--green);
  font: normal 12px/1.6 var(--font);
  color: var(--text);
  overflow-x: hidden;
}
/* original #background: light gradient over the top of the green body */
.bg-glow { position: absolute; inset: 0 0 auto 0; height: 870px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 40%, rgba(255,255,255,0) 100%); }

img { max-width: 100%; height: auto; display: block; }
p, table, td { font: normal 12px/1.65 var(--font); color: var(--text); }
p { margin: 0 0 1em; }
h1 { font: bold 16px/1.4 var(--font-head); color: var(--green); margin: 0 0 .6em; }
h2 { font: bold 14px/1.4 var(--font-head); color: var(--text-strong); margin: 1.6em 0 .6em; }
h3 { font: bold 12px/1.4 var(--font); color: var(--text-strong); margin: 1.3em 0 .5em; }
a:link, a:visited { color: var(--link); text-decoration: underline; }
a:hover, a:active { color: var(--link); text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--link); outline-offset: 2px; }
strong { color: var(--text-strong); }
ul, ol { margin: 0 0 1em 1.3em; padding: 0; }
li { margin: 0 0 .35em; }
.hr, hr.hr { border: 0; border-bottom: 1px dotted var(--rule); height: 1px; margin: 18px 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 1000; background: #fff; color: #000 !important; padding: 8px 12px; font-weight: bold; }
.skip-link:focus { top: 8px; }

/* ---------- container ---------- */
.container { width: 100%; max-width: 980px; margin: 0 auto; position: relative; z-index: 2; }

/* ---------- reading progress ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--link); z-index: 200; transition: width .1s linear; }

/* ---------- top navigation (#menu) ---------- */
.menu { margin: 0 42px; background: rgba(0,0,0,.12); position: sticky; top: 0; z-index: 100; transition: background .3s, box-shadow .3s; }
.menu.is-stuck { background: rgba(58,112,11,.97); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.menu__inner { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 20px; min-height: 48px; }
.menu__brand { display: none; color: #fff !important; font-weight: bold; text-decoration: none !important; padding: 12px 0; font-size: 13px; }
.menu.is-stuck .menu__brand { display: block; }
.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.nav li { margin: 0; position: relative; }
.nav > li > a { display: block; padding: 7px 12px; margin-top: 15px; font-weight: bold; color: #fff !important; text-decoration: none !important; white-space: nowrap; transition: background .2s, color .2s; }
.menu.is-stuck .nav > li > a { margin-top: 8px; margin-bottom: 8px; }
.nav > li > a:hover, .nav > li > a.current, .nav > li:focus-within > a { background: #fff; color: #000 !important; }
.nav .sub { list-style: none; margin: 0; padding: 6px 0; position: absolute; left: 0; top: 100%; min-width: 230px; background: #fff; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .2s; z-index: 50; }
.nav li:hover > .sub, .nav li:focus-within > .sub { opacity: 1; visibility: visible; transform: none; }
.nav .sub a { display: block; padding: 7px 16px; color: #555 !important; text-decoration: none !important; font-weight: bold; }
.nav .sub a:hover { background: var(--green-light); color: #fff !important; }
.menu__toggle { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: 12px 4px; font: bold 12px var(--font); align-items: center; gap: 8px; }
.burger { width: 22px; height: 2px; background: #fff; position: relative; display: inline-block; transition: background .2s; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: #fff; transition: transform .25s; }
.burger::before { top: -7px; } .burger::after { top: 7px; }
.menu.is-open .burger { background: transparent; }
.menu.is-open .burger::before { transform: translateY(7px) rotate(45deg); }
.menu.is-open .burger::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- header (#header, emotion header) ---------- */
.header { margin: 0 auto; max-width: 956px; padding: 12px; }
.header__frame { background: #fff; padding: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.35); }
.emotion { position: relative; overflow: hidden; background: #eee; aspect-ratio: 940 / 190; }
.emotion img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 22s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08) translateX(-1.5%); } }
.emotion__band { position: absolute; left: 0; top: 0; width: 100%; height: 18%; min-height: 34px; background: rgba(255,255,255,.5); }
.emotion__title { position: absolute; left: 1%; top: 0; margin: 0; font: normal bold 29px/1.2 Verdana, Geneva, sans-serif; color: var(--green-title);
  padding: 2px 0; animation: titleIn 1s .2s both; }
.emotion__title a { color: inherit !important; text-decoration: none !important; }
.emotion__tag { position: absolute; right: 16px; bottom: 14px; background: rgba(75,144,14,.92); color: #fff; font-weight: bold; padding: 8px 14px; font-size: 12px;
  animation: slideIn .9s .6s both; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.emotion__tag a { color: #fff !important; text-decoration: none !important; }
.emotion__tag a:hover { text-decoration: underline !important; }
@keyframes titleIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

/* ---------- page (#page) ---------- */
.page { margin: 0 42px; padding: 0 20px 0; background: var(--page-bg) linear-gradient(180deg, #efefef 0, var(--page-bg) 260px) no-repeat; display: flex; gap: 20px; align-items: flex-start; }
.column-left { width: 210px; flex: 0 0 210px; margin-top: -5px; }
.content { background: #fff; flex: 1 1 auto; min-width: 0; margin-top: -5px; padding: 22px 50px 40px; }

/* breadcrumbs */
.breadcrumbs { font-size: 11px; margin: 0 0 14px; color: #999; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: 4px; color: #bbb; }
.breadcrumbs a { color: #999 !important; text-decoration: none !important; }
.breadcrumbs a:hover { color: var(--link) !important; }

/* sub navigation (#navigation, mainNav2) */
.subnav { background: #fff; margin-bottom: 14px; }
.subnav__title { margin: 0; padding: 10px 14px 6px; font: bold 11px var(--font); text-transform: uppercase; letter-spacing: .06em; color: #aaa; }
.subnav ul { list-style: none; margin: 0; padding: 0 0 8px; }
.subnav li { margin: 0; }
.subnav a { display: block; padding: 7px 14px 7px 40px; background: #fff; color: #9ea0a2 !important; text-decoration: none !important; font-weight: bold; position: relative; transition: background .2s, color .2s, padding .2s; }
.subnav a::before { content: ""; position: absolute; left: 22px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); opacity: .6; }
.subnav a:hover, .subnav a.current { background: var(--green-light); color: #fff !important; padding-left: 44px; }

/* sidebar modules */
.sidebar .module { background: rgba(255,255,255,.55); padding: 12px 14px; margin-bottom: 12px; }
.sidebar h2.side-h { font: bold 14px/1.4 var(--font); color: #000; margin: 0 0 8px; }
.sidebar p { margin: 0 0 .5em; }
.sidebar .hr { margin: 10px 0; }
.open-status { display: inline-flex; align-items: center; gap: 6px; font-weight: bold; font-size: 11px; padding: 3px 8px; border-radius: 20px; background: #eee; color: #555; margin-top: 4px; }
.open-status__dot { width: 8px; height: 8px; border-radius: 50%; background: #999; }
.open-status.is-open { background: #e5f4d7; color: var(--green-dark); }
.open-status.is-open .open-status__dot { background: var(--green-light); animation: pulse 1.6s infinite; }
.open-status.is-closed { background: #f7e1e0; color: #a42320; }
.open-status.is-closed .open-status__dot { background: var(--link); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(99,191,17,.6); } 70% { box-shadow: 0 0 0 7px rgba(99,191,17,0); } 100% { box-shadow: 0 0 0 0 rgba(99,191,17,0); } }
.side-cta { display: block; text-align: center; margin-top: 8px; }

/* ---------- buttons ---------- */
.btn, a.btn { display: inline-block; background: var(--green); color: #fff !important; text-decoration: none !important; font: bold 12px/1 var(--font); padding: 11px 18px; border: 2px solid var(--green);
  border-radius: var(--radius); cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; position: relative; overflow: hidden; }
.btn:hover { background: var(--green-dark); border-color: var(--green-dark); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.btn:active { transform: none; }
.btn--ghost, a.btn--ghost { background: transparent; color: var(--green) !important; }
.btn--ghost:hover { background: var(--green); color: #fff !important; }
.btn--red, a.btn--red { background: var(--link); border-color: var(--link); }
.btn--red:hover { background: #b92623; border-color: #b92623; }
.btn--small { padding: 7px 12px; font-size: 11px; }
.btn .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.5); animation: ripple .6s linear; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ---------- content components ---------- */
.lead { font-size: 13px; color: #555; }
.page-date { font-size: 11px; color: #999; }
.callout { border-left: 4px solid var(--green-light); background: #f3f9ec; padding: 12px 14px; margin: 1.2em 0; }
.callout p:last-child { margin-bottom: 0; }
.callout--tip { border-color: #2e8bc0; background: #eef6fb; }
.callout--warn { border-color: var(--link); background: #fdf0ef; }
.checklist { list-style: none; margin-left: 0; }
.checklist li { position: relative; padding-left: 24px; }
.checklist li::before { content: ""; position: absolute; left: 2px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--green-light); }
.checklist li::after { content: ""; position: absolute; left: 6px; top: 5px; width: 3px; height: 6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.steps { list-style: none; margin-left: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 2px 0 10px 42px; border-left: 2px dotted var(--rule); margin-left: 14px; }
.steps li:last-child { border-left-color: transparent; }
.steps li::before { content: counter(step); position: absolute; left: -15px; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--green); color: #fff; font-weight: bold; display: grid; place-items: center; }
.steps li strong { display: block; }
.table-wrap { overflow-x: auto; margin: 1.2em 0; -webkit-overflow-scrolling: touch; }
table.data { border-collapse: collapse; width: 100%; min-width: 420px; }
table.data th, table.data td { border-bottom: 1px dotted var(--rule); padding: 8px 10px; text-align: left; vertical-align: top; font-size: 11.5px; }
table.data thead th { background: var(--green); color: #fff; font-weight: bold; }
table.data tbody tr:nth-child(even) { background: #f7f7f7; }
table.data tbody tr:hover { background: #eef7e4; }
.figure { margin: 1.2em 0; }
.figure img { width: 100%; border: 1px solid var(--rule); padding: 3px; background: #fff; }
.figure figcaption { font-size: 11px; color: #999; margin-top: 4px; }
.quote { margin: 1.2em 0; padding: 12px 16px 12px 40px; position: relative; font-style: italic; color: var(--text-strong); background: #fafafa; border-left: 4px solid var(--green-light); }
.quote::before { content: "\201C"; position: absolute; left: 10px; top: 0; font: bold 40px/1 Georgia, serif; color: var(--green-light); }
.quote cite { display: block; margin-top: 6px; font-style: normal; color: #808080; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1.2em 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 1.2em 0; }
.card { border: 1px solid #e3e3e3; padding: 14px; background: #fff; transition: transform .25s, box-shadow .25s, border-color .25s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.08); border-color: var(--green-light); }
.card h3 { margin-top: 0; color: var(--green); }
.card p:last-child { margin-bottom: 0; }
.cta-box { background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%); color: #fff; padding: 20px; margin: 1.8em 0 .5em; position: relative; overflow: hidden; }
.cta-box::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.08); }
.cta-box h3 { color: #fff; margin: 0 0 6px; font-size: 14px; }
.cta-box p { color: #eaf5de; }
.cta-box .btn { background: #fff; color: var(--green) !important; border-color: #fff; margin: 4px 6px 0 0; }
.cta-box .btn:hover { background: #f1f1f1; }
.cta-box .btn--ghost { background: transparent; color: #fff !important; }
.cta-box .btn--ghost:hover { background: rgba(255,255,255,.15); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 1.2em 0; }
.stat { text-align: center; padding: 14px 6px; border: 1px dotted var(--rule); background: #fafafa; }
.stat__num { display: block; font: bold 26px/1.1 var(--font-head); color: var(--green); }
.stat__label { display: block; font-size: 11px; color: #888; margin-top: 4px; }

/* text with image (original module-type-textWithImage) */
.twi { display: flex; gap: 16px; align-items: flex-start; }
.twi__text { flex: 1; }
.twi__img { flex: 0 0 148px; }
.twi__img a { display: block; border: 1px solid var(--rule); padding: 2px; background: #fff; transition: transform .3s, box-shadow .3s; }
.twi__img a:hover { transform: scale(1.04) rotate(-1deg); box-shadow: 0 6px 14px rgba(0,0,0,.18); }

/* service cards */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin: 1.2em 0; }
.svc-card { display: flex; flex-direction: column; border: 1px solid #e3e3e3; background: #fff; text-decoration: none !important; color: var(--text) !important; transition: transform .25s, box-shadow .25s, border-color .25s; overflow: hidden; }
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,.1); border-color: var(--green-light); }
.svc-card__img { aspect-ratio: 16/9; overflow: hidden; background: #eee; }
.svc-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.svc-card:hover .svc-card__img img { transform: scale(1.07); }
.svc-card__body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.svc-card__icon { width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; margin-top: -30px; margin-bottom: 8px; position: relative; box-shadow: 0 0 0 3px #fff; }
.svc-card__icon svg { width: 18px; height: 18px; }
.svc-card h3 { margin: 0 0 6px; color: var(--green); }
.svc-card p { flex: 1; margin-bottom: 8px; }
.svc-card__more { color: var(--link); font-weight: bold; font-size: 11px; }
.svc-card__more::after { content: " →"; transition: margin .2s; }
.svc-card:hover .svc-card__more::after { margin-left: 4px; }

/* article cards / blog */
.post-list { display: grid; gap: 16px; margin: 1em 0; }
.post-card { display: grid; grid-template-columns: 170px 1fr; gap: 14px; border-bottom: 1px dotted var(--rule); padding-bottom: 16px; }
.post-card__img { display: block; overflow: hidden; aspect-ratio: 4/3; background: #eee; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.post-card:hover .post-card__img img { transform: scale(1.06); }
.post-card h2 { margin: 0 0 4px; font-size: 13px; }
.post-card h2 a { color: var(--text-strong) !important; text-decoration: none !important; }
.post-card h2 a:hover { color: var(--link) !important; }
.meta { font-size: 11px; color: #999; margin-bottom: 6px; }
.tag { display: inline-block; background: #eef7e4; color: var(--green-dark); font-size: 10px; font-weight: bold; padding: 2px 7px; border-radius: 10px; text-transform: uppercase; letter-spacing: .03em; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.filter-btn { background: #f1f1f1; border: 1px solid #ddd; padding: 6px 10px; cursor: pointer; font: bold 11px var(--font); color: #666; border-radius: 14px; transition: all .2s; }
.filter-btn:hover { border-color: var(--green-light); }
.filter-btn.is-active { background: var(--green); color: #fff; border-color: var(--green); }
.search-input { width: 100%; padding: 9px 12px; border: 1px solid #ccc; font: 12px var(--font); margin-top: 4px; }
.no-results { display: none; padding: 16px; background: #fafafa; text-align: center; }
.post-card.is-hidden { display: none; }

/* swiper carousel */
.carousel { margin: 1em 0 1.6em; position: relative; }
.carousel .swiper-slide { height: auto; }
.carousel .post-mini { display: flex; flex-direction: column; height: 100%; border: 1px solid #e3e3e3; text-decoration: none !important; color: var(--text) !important; background: #fff; }
.carousel .post-mini img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.carousel .post-mini div { padding: 10px 12px; }
.carousel .post-mini strong { display: block; color: var(--text-strong); margin: 4px 0; }
.carousel .post-mini:hover strong { color: var(--link); }
.carousel-nav { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.carousel-nav button { width: 30px; height: 30px; border: 1px solid #ccc; background: #fff; cursor: pointer; font-weight: bold; color: var(--green); transition: all .2s; }
.carousel-nav button:hover { background: var(--green); color: #fff; }
.carousel .swiper-pagination { position: static; margin-top: 6px; }
.swiper-pagination-bullet-active { background: var(--green) !important; }

/* article page */
.article-hero { margin: 0 0 1em; }
.article-hero img { width: 100%; border: 1px solid var(--rule); padding: 3px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 11px; color: #999; margin: -.2em 0 1em; }
.toc { background: #fafafa; border: 1px dotted var(--rule); padding: 10px 14px; margin: 1em 0 1.4em; }
.toc summary { cursor: pointer; font-weight: bold; color: var(--text-strong); }
.toc ol { margin: 8px 0 0 1.4em; }
.toc a { text-decoration: none; }
.toc a.is-active { font-weight: bold; }
.share { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 1.6em 0 0; padding-top: 12px; border-top: 1px dotted var(--rule); }
.share span { font-weight: bold; margin-right: 4px; }
.related { margin-top: 1.6em; }

/* FAQ accordion */
.faq-item { border-bottom: 1px dotted var(--rule); }
.faq-item summary { cursor: pointer; list-style: none; padding: 10px 28px 10px 0; font-weight: bold; color: var(--text-strong); position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 6px; font-size: 18px; color: var(--green); transition: transform .25s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--green); }
.faq-body { padding: 0 0 10px; animation: faqIn .3s ease; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* tabs */
.tabs__list { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--green); margin: 1em 0 0; }
.tabs__btn { background: #eee; border: 0; padding: 8px 12px; font: bold 11px var(--font); color: #666; cursor: pointer; transition: background .2s; }
.tabs__btn[aria-selected="true"] { background: var(--green); color: #fff; }
.tabs__panel { padding: 14px 0; }
.tabs__panel[hidden] { display: none; }

/* timeline */
.timeline { list-style: none; margin: 1em 0; padding: 0 0 0 20px; border-left: 2px solid var(--green-light); }
.timeline li { position: relative; margin: 0 0 16px; padding-left: 10px; }
.timeline li::before { content: ""; position: absolute; left: -27px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--green); }
.timeline strong { display: block; color: var(--green); }

/* tools */
.tool { border: 1px solid #e3e3e3; padding: 16px; margin: 1.2em 0; background: #fcfcfc; }
.tool h2 { margin-top: 0; }
.tool__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.tool__row label { display: block; font-weight: bold; font-size: 11px; margin-bottom: 3px; color: #555; }
.tool input, .tool select { padding: 8px 10px; border: 1px solid #ccc; font: 12px var(--font); min-width: 140px; background: #fff; }
.tool__result { background: #fff; border: 1px dotted var(--green-light); padding: 10px 12px; }
.tool__result dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; }
.tool__result dt { color: #888; }
.tool__result dd { margin: 0; font-weight: bold; color: var(--text-strong); }
.seg { display: inline-flex; border: 1px solid #ccc; }
.seg button { border: 0; background: #fff; padding: 8px 12px; cursor: pointer; font: bold 11px var(--font); color: #666; }
.seg button.is-active { background: var(--green); color: #fff; }
.deadlines { list-style: none; margin: 0; padding: 0; }
.deadlines li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dotted var(--rule); }
.deadlines .days { font-weight: bold; color: var(--green); white-space: nowrap; }
.deadlines li.is-soon .days { color: var(--link); }

/* ---------- forms ---------- */
.form { margin: 1em 0; }
.form__row { margin-bottom: 14px; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form label { display: block; font-weight: bold; margin-bottom: 4px; color: #555; }
.form .req { color: var(--link); }
.form input[type=text], .form input[type=email], .form input[type=tel], .form input[type=number], .form select, .form textarea {
  width: 100%; padding: 9px 10px; border: 1px solid #c8c8c8; font: 12px var(--font); color: #333; background: #fff; border-radius: 2px; transition: border-color .2s, box-shadow .2s; }
.form textarea { min-height: 130px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--green-light); box-shadow: 0 0 0 3px rgba(99,191,17,.18); outline: none; }
.form .is-invalid { border-color: var(--link) !important; box-shadow: 0 0 0 3px rgba(219,47,44,.12) !important; }
.form .is-valid { border-color: var(--green-light) !important; }
.form__error { display: block; color: var(--link); font-size: 11px; margin-top: 3px; min-height: 0; }
.form__hint { font-size: 11px; color: #999; }
.form__check { display: flex; gap: 8px; align-items: flex-start; font-weight: normal !important; }
.form__check input { margin-top: 2px; }
.form__counter { float: right; font-size: 10px; color: #999; font-weight: normal; }
.hp { position: absolute; left: -9999px; }
.form-alert { display: none; padding: 10px 12px; background: #fdf0ef; border-left: 4px solid var(--link); margin-bottom: 12px; }
.form-alert.is-visible { display: block; animation: shake .4s; }
@keyframes shake { 0%,100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* thank you */
.thanks { text-align: center; padding: 10px 0; }
.check-anim { width: 80px; height: 80px; margin: 10px auto 16px; }
.check-anim circle { stroke: var(--green-light); stroke-width: 3; fill: none; stroke-dasharray: 166; stroke-dashoffset: 166; animation: draw .7s .2s forwards; }
.check-anim path { stroke: var(--green); stroke-width: 4; fill: none; stroke-linecap: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw .4s .9s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* sitemap list */
.sitemap-list ul { margin-left: 1.4em; }
.sitemap-list > ul { margin-left: 0; list-style: none; }
.sitemap-list > ul > li { margin-bottom: .8em; font-weight: bold; }
.sitemap-list > ul > li li { font-weight: normal; }

/* map card */
.map-card { position: relative; border: 1px solid var(--rule); background: #eef4e8; padding: 0; overflow: hidden; }
.map-card svg { display: block; width: 100%; height: auto; }
.map-card__pin { animation: bounce 1.6s infinite; transform-origin: center bottom; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- footer (#footer inside #page) ---------- */
.footer { margin: 0 42px; padding: 20px 20px 26px; background: var(--page-bg); border-top: 1px dotted #bbb; }
.footer__cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 20px; margin-bottom: 16px; }
.footer h2 { font: bold 12px/1.4 var(--font); color: #000; margin: 0 0 8px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin: 0 0 4px; }
.footer p, .footer li { font-size: 11px; }
.footer a { color: var(--link); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px dotted #bbb; font-size: 11px; }
.footer__bottom a, .footer__bottom button { font-size: 11px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; cursor: pointer; font: inherit; }
.linkbtn:hover { text-decoration: none; }
.site-bottom { height: 30px; }

/* ---------- floating UI ---------- */
.to-top { position: fixed; right: 18px; bottom: 18px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--link); color: #fff; font-size: 18px; cursor: pointer; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .3s; z-index: 150; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: #b92623; }
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 520px; background: #fff; border-top: 4px solid var(--green); box-shadow: 0 6px 30px rgba(0,0,0,.3); padding: 16px 18px; z-index: 300;
  transform: translateY(140%); transition: transform .45s cubic-bezier(.2,.9,.3,1.2); }
.cookie.is-visible { transform: none; }
.cookie p { margin-bottom: 10px; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.call-fab { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .menu, .page, .footer { margin-left: 12px; margin-right: 12px; }
  .header { padding: 12px; }
  .nav > li > a { padding: 7px 9px; font-size: 11.5px; }
}
@media (max-width: 860px) {
  .menu__inner { align-items: center; min-height: 46px; }
  .menu__brand { display: block; }
  .menu__toggle { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--green-dark); flex-direction: column; padding: 6px 0 12px; box-shadow: 0 8px 16px rgba(0,0,0,.25); max-height: calc(100vh - 50px); overflow-y: auto; }
  .menu.is-open .nav { display: flex; animation: faqIn .25s; }
  .nav > li > a, .menu.is-stuck .nav > li > a { margin: 0; padding: 11px 20px; }
  .nav .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: rgba(0,0,0,.12); display: none; padding: 0; }
  .nav li.is-expanded > .sub { display: block; }
  .nav .sub a { color: #e9f5dc !important; padding-left: 36px; }
  .nav .has-sub > a { padding-right: 50px !important; }
  .sub-toggle { position: absolute; right: 8px; top: 4px; width: 36px; height: 34px; background: none; border: 0; color: #fff; font-size: 16px; cursor: pointer; }
  .page { flex-direction: column-reverse; padding: 0 12px; }
  .column-left { width: 100%; flex: 1 1 auto; margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .column-left .subnav { grid-column: 1 / -1; }
  .content { width: 100%; padding: 20px 22px 30px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .emotion__title { font-size: 3.1vw; }
  .emotion__tag { display: none; }
}
@media (min-width: 861px) { .sub-toggle { display: none; } }
@media (max-width: 560px) {
  body, p, td { font-size: 13px; }
  .page, .footer { margin-left: 0; margin-right: 0; }
  .menu { margin: 0; }
  .header { padding: 8px; }
  .header__frame { padding: 4px; }
  .emotion { aspect-ratio: 940 / 260; }
  .emotion__title { font-size: 4.4vw; }
  .content { padding: 16px 14px 24px; }
  .column-left { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .svc-grid, .form__grid, .footer__cols { grid-template-columns: 1fr; }
  .post-card { grid-template-columns: 1fr; }
  .twi { flex-direction: column-reverse; }
  .twi__img { flex: 0 0 auto; width: 148px; }
  .call-fab { display: grid; place-items: center; position: fixed; left: 16px; bottom: 18px; width: 46px; height: 46px; border-radius: 50%; background: var(--green); color: #fff !important; z-index: 150; box-shadow: var(--shadow); text-decoration: none !important; }
  .call-fab svg { width: 20px; height: 20px; }
}

/* ---------- print (original site had a Print link) ---------- */
@media print {
  body { background: #fff; }
  .menu, .column-left, .footer__cols, .to-top, .cookie, .share, .bg-glow, .carousel, .progress, .call-fab, .emotion__tag, .toc { display: none !important; }
  .page, .footer { margin: 0; padding: 0; background: #fff; display: block; }
  .content { padding: 0; }
  .emotion img { animation: none; }
  a { color: #000 !important; }
}
.addr { font-style: normal; }