/* ==========================================================================
   Strom Nürnberg — theme.css
   Composable LEGO-brick primitives that theme.json cannot express.
   Neutral, no page copy baked in. Every page links this file UNEDITED.
   Design DNA adapted from style-library/elektro-volt, re-themed bronze+gold.
   ========================================================================== */

:root{
  --brand:      #6C4013; --brand-600:#5A3510; --brand-700:#4A2C0D; --brand-900:#2E1B08;
  --accent:     #FFC400; --accent-600:#E6B000; --on-accent:#171208;
  --ink:        #201507; --head:#241A0D; --text:#4A3A2C; --muted:#6B5C4C;
  --bg:         #FFFFFF; --tint:#F8F3EA; --tint2:#FAF7F1; --line:#E8DECD; --line2:#D9CBB2;
  --dark:       #1B1006; --dark2:#241705; --dark-line:#3A2712; --dark-muted:#C9B79C;
  --danger:     #B3261E;
  --r: 0px; --r-sm: 3px; --r-card: 10px; --pill: 999px;
  --c: 1320px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --sh-card:   0 0 50px rgba(20,10,2,.10);
  --sh-card-h: 0 0 50px rgba(20,10,2,.19);
  --sh-soft:   0 3px 15px rgba(20,10,2,.12);
  --sh-lift:   0 18px 40px rgba(108,64,19,.24);
}

/* ---- reset / base ---------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-size:18px; line-height:1.8; color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img,svg{ display:block; max-width:100%; height:auto; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-700); }
/* A12: links must never be distinguishable by colour alone. Prose links (inside running text)
   get an underline; nav/button/card/chip links keep their own non-colour cues (icons, borders,
   position, button shape) so this rule only targets plain in-copy links. */
p a, li a:not(.dd a):not(.mobmenu a):not(.fgrid a):not(.chip a){ text-decoration:underline; text-underline-offset:.15em; }
.card a, .menu a, .dd a, .mobmenu a, .fgrid a, .chip a, .btn, .more, .callrow, .crumbs a{ text-decoration:none; }
h1,h2,h3,h4,h5{ color:var(--head); font-weight:800; line-height:1.18; margin:0 0 .5em; }
p{ margin:0 0 1em; }
ul,ol{ padding-left:1.2em; }
:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:2px; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--brand);
  color:#fff; padding:14px 22px; font-weight:700; }
.skip-link:focus{ left:12px; top:12px; }
.vh{ position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- layout ------------------------------------------------------------ */
.wrap{ width:min(100% - 48px, var(--c)); margin-inline:auto; }

/* Fix: WordPress's core "is-layout-constrained" styles cap EVERY direct child of <main> to
   --wp--style--global--content-size and auto-centre it (theme.json's contentSize, 1320px) unless
   that child carries the alignfull/alignwide block classes. Our pattern sections are plain HTML
   output (not core blocks with alignment attributes), so without this override every full-bleed
   band (.hero--panel, .cta, .notice, .panelsplit, dark bands, etc.) was being boxed to 1320px with
   visible white gutters instead of spanning the viewport — the "narrow container" bug. Every
   section already manages its own readable width internally via .wrap, so direct children of
   #main should never be width- or margin-constrained by the block-layout system at all. */
#main.is-layout-constrained > *{
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.section{ padding:clamp(64px,8vw,112px) 0; }
.section--tint{ background:var(--tint); }
.section--tint2{ background:var(--tint2); }
.section--dark{ background:var(--dark); color:var(--dark-muted); }
.section--dark h2,.section--dark h3{ color:#fff; }
.shead{ margin-bottom:44px; }
.shead.center{ text-align:center; max-width:56ch; margin-inline:auto; margin-bottom:44px; }
.shead.split{ display:grid; grid-template-columns:1.15fr .85fr; gap:32px; align-items:end; }
@media (max-width:820px){ .shead.split{ grid-template-columns:1fr; } }
.stitle{ font-size:clamp(29px,4.1vw,50px); line-height:1.16; letter-spacing:-.01em; font-weight:800; max-width:20ch; margin:0 0 .3em; }
.lead{ font-size:clamp(18px,2.2vw,22px); color:var(--muted); max-width:62ch; }
.section--dark .lead{ color:var(--dark-muted); }

/* ---- eyebrow ------------------------------------------------------------ */
.eyebrow{ display:inline-flex; align-items:center; gap:8px; border:3px solid var(--line); background:#fff;
  padding:5px 20px; font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brand); position:relative; margin-bottom:18px; }
.eyebrow.on-dark{ border-color:var(--dark-line); background:transparent; color:var(--accent); }
.eyebrow.left{ border:0; background:none; padding-left:16px; }
.eyebrow.left::before{ content:""; position:absolute; left:0; top:50%; translate:0 -50%; width:43px; height:5px; border-radius:5px; background:var(--brand); }
.eyebrow.left.on-dark{ color:var(--accent); }
.eyebrow.left.on-dark::before{ background:var(--accent); }

/* ---- buttons ------------------------------------------------------------ */
.btn,.wp-block-button__link{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:0!important; text-transform:uppercase; font-weight:700; font-size:14px; letter-spacing:.7px;
  padding:19px 44px!important; border:0; cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition:color .2s var(--ease); min-height:44px; }
.btn span, .btn-inner{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:10px; }
.btn::before{ content:""; position:absolute; inset:0; z-index:1; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
.btn:hover::before{ transform:scaleX(1); transform-origin:left; }
.btn--accent,.btn-call .wp-block-button__link{ background:var(--accent)!important; color:var(--on-accent)!important; }
.btn--accent::before{ background:var(--brand-700); }
.btn--accent:hover{ color:#fff!important; }
.btn--brand{ background:var(--brand)!important; color:#fff!important; }
.btn--brand::before{ background:var(--accent); }
.btn--brand:hover{ color:var(--on-accent)!important; }
.btn--ghost{ background:transparent!important; color:#fff!important; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); }
.btn--ghost::before{ background:#fff; }
.btn--ghost:hover{ color:var(--brand)!important; }
/* .btn--ghost (white-on-transparent) is only legible on a dark/colour hero (--panel/--dark/--emergency)
   or a dark band (.panel/.cta/.section--dark). .hero--split's background is the LIGHT --tint, so a
   ghost button there is white-on-near-white and effectively invisible — this was a real contrast bug
   found on two pages. Fixed at the source (those patterns now use .btn--brand instead), and backed by
   this structural override so the same mistake can't silently ship again if reused on a light hero. */
.hero--split .btn--ghost{ color:var(--brand)!important; box-shadow:inset 0 0 0 2px var(--brand); }
.hero--split .btn--ghost::before{ background:var(--brand); }
.hero--split .btn--ghost:hover{ color:#fff!important; }
.btn--sm{ padding:13px 28px!important; }
.btn--block{ width:100%; }
@media (max-width:480px){ .btn,.wp-block-button__link{ width:100%; padding:17px 26px!important; } }

/* ---- icon badges --------------------------------------------------------- */
.ibadge{ display:inline-flex; align-items:center; justify-content:center; width:75px; height:75px; flex:none; background:var(--tint); color:var(--brand); }
.ibadge svg{ width:32px; height:32px; }
.ibadge--sm{ width:50px; height:50px; } .ibadge--sm svg{ width:22px; height:22px; }
.ibadge--lg{ width:90px; height:90px; }
.ibadge--bordered{ border:3px solid var(--line); background:#fff; }
.ibadge--round{ border-radius:50%; }
.ibadge--fill{ background:var(--accent); color:var(--on-accent); }
.ibadge--navy{ background:var(--brand); color:var(--accent); }

/* ---- grids / cards -------------------------------------------------------- */
.grid{ display:grid; gap:30px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); gap:26px; }
.grid--auto{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
@media (max-width:980px){ .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; } }

.card{ background:#fff; box-shadow:var(--sh-card); transition:box-shadow .3s var(--ease), transform .3s var(--ease); }
.card:hover{ box-shadow:var(--sh-card-h); transform:translateY(-6px); }
.card .bd{ padding:28px 28px 30px; }
.card .ph{ position:relative; overflow:hidden; }
.card .ph img{ aspect-ratio:4/3; object-fit:cover; width:100%; transition:transform .5s var(--ease); }
.card:hover .ph img{ transform:scale(1.07); }
.card .ph .n{ position:absolute; top:14px; right:14px; background:var(--brand); color:#fff; font-weight:800; font-size:13px; padding:5px 12px; }
.card .ibadge{ margin:-46px 0 14px 28px; box-shadow:var(--sh-lift); }
.card h3{ font-size:19px; margin:0 0 8px; }
.card .more{ display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--brand); font-size:15px; margin-top:10px; }
.card .more svg{ width:16px; height:16px; transition:translate .2s var(--ease); }
.card:hover .more svg{ translate:5px 0; }

/* ---- icon rows ------------------------------------------------------------ */
.rows{ display:flex; flex-direction:column; gap:18px; }
.row{ display:flex; gap:16px; align-items:flex-start; background:#fff; box-shadow:var(--sh-card); padding:22px 24px; transition:transform .2s var(--ease); }
.row:hover{ transform:translateX(6px); }
.row h3{ font-size:18px; margin:0 0 4px; }
.row p{ margin:0; color:var(--muted); }
.it{ display:flex; gap:16px; align-items:flex-start; }
.it h3{ font-size:18px; margin:0 0 4px; }
.it p{ margin:0; color:var(--muted); }

/* ---- feature split -------------------------------------------------------- */
.split{ display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:center; }
.split.rev{ direction:rtl; } .split.rev > *{ direction:ltr; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } .split.rev{ direction:ltr; } }
.media{ position:relative; }
.media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.media .badge{ position:absolute; right:-14px; bottom:-14px; background:var(--brand); color:#fff; padding:18px 22px; box-shadow:var(--sh-lift); max-width:220px; }
.media .badge b{ display:block; color:var(--accent); font-size:22px; }
.checks{ list-style:none; margin:22px 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.checks li{ display:flex; gap:12px; align-items:flex-start; }
.checks svg{ flex:none; width:22px; height:22px; color:var(--brand); margin-top:2px; }

.panelsplit{ display:grid; grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .panelsplit{ grid-template-columns:1fr; } }
.panel{ background:var(--brand); color:#fff; padding:clamp(38px,5vw,68px); }
.panel h2{ color:#fff; }
.prow{ display:flex; gap:14px; padding:18px 0; border-top:1px solid rgba(255,255,255,.14); }
.prow:first-of-type{ border-top:0; }
.prow svg{ flex:none; width:26px; height:26px; color:var(--accent); }
.prow h3{ color:#fff; font-size:17px; margin:0 0 4px; }
.prow p{ color:#e7d9c4; margin:0; }
.panelbody{ background:#fff; padding:clamp(38px,5vw,68px); }
.callrow{ display:flex; align-items:center; gap:14px; }
.callrow .ic{ flex:none; width:52px; height:52px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; }
.callrow b{ display:block; font-size:19px; color:var(--head); }

/* ---- process steps --------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; position:relative; }
.steps::before{ content:""; position:absolute; top:37px; left:11%; right:11%; height:3px;
  background:repeating-linear-gradient(90deg,var(--line2) 0 14px,transparent 14px 26px); }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; } .steps::before{ display:none; } }
.step{ text-align:center; }
.step .no{ width:74px; height:74px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:var(--on-accent); font-weight:800; font-size:24px; box-shadow:0 0 0 10px var(--bg); position:relative; }
.section--tint .step .no{ box-shadow:0 0 0 10px var(--tint); }
.section--dark .step .no{ box-shadow:0 0 0 10px var(--dark); }
.step h3{ font-size:18px; } .step p{ color:var(--muted); margin:0; }
.section--dark .step p{ color:var(--dark-muted); }

/* ---- stats ------------------------------------------------------------------ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center; }
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{ position:relative; padding-top:10px; }
.stat .ghost{ position:absolute; top:-30px; left:50%; translate:-50% 0; font-size:96px; font-weight:900; color:rgba(255,255,255,.06); z-index:0; }
.stat b{ position:relative; display:block; font-size:34px; color:var(--accent); }
.stat span{ position:relative; display:block; text-transform:uppercase; letter-spacing:.08em; font-weight:700; font-size:13px; margin-top:4px; }
.stat small{ position:relative; display:block; color:var(--dark-muted); margin-top:8px; }

/* ---- notice (safety/hazard) --------------------------------------------------- */
.notice{ background:var(--accent); color:var(--on-accent); }
.notice .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:34px 0; }
.notice .tx{ display:flex; gap:18px; align-items:flex-start; }
.notice .ic{ flex:none; width:34px; height:34px; }
.notice h2{ color:var(--on-accent); font-size:22px; margin:0 0 6px; }
.notice p{ margin:0; }
.notice.notice--danger{ background:var(--danger); color:#fff; }
.notice.notice--danger h2{ color:#fff; }

/* ---- chips (coverage) ------------------------------------------------------- */
.chips{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); padding:10px 18px; font-weight:600; color:var(--head); transition:background .2s,color .2s; }
.chip::before{ content:""; width:7px; height:7px; background:var(--accent); }
.chip:hover,.chip.is-current{ background:var(--brand); color:#fff; }
.chip a{ color:inherit; }

/* ---- accordion / FAQ ---------------------------------------------------------- */
.faqgrid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; }
@media (max-width:900px){ .faqgrid{ grid-template-columns:1fr; } }
details.faq{ background:#fff; border:1px solid var(--line); padding:18px 22px; margin-bottom:14px; }
details.faq[open]{ box-shadow:var(--sh-card); border-color:transparent; }
details.faq summary{ display:flex; align-items:center; gap:14px; cursor:pointer; list-style:none; font-weight:700; color:var(--head); font-size:17px; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq .qn{ flex:none; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:var(--tint); font-size:13px; font-weight:800; color:var(--brand); }
details.faq[open] .qn{ background:var(--accent); color:var(--on-accent); }
details.faq summary::after{ content:"+"; margin-left:auto; font-size:22px; font-weight:400; color:var(--brand); }
details.faq[open] summary::after{ content:"\2212"; color:var(--accent-600); }
details.faq .ans{ padding:14px 0 4px 44px; color:var(--muted); }

.arrowlist details{ border-bottom:1px solid var(--line); padding:16px 0; }
.arrowlist summary{ display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; font-weight:700; color:var(--head); }
.arrowlist summary::-webkit-details-marker{ display:none; }
.arrowlist summary::after{ content:"\2192"; margin-left:auto; transition:transform .2s var(--ease); color:var(--brand); }
.arrowlist details[open] summary::after{ transform:rotate(90deg); }
.arrowlist .ans{ padding:10px 0 0; color:var(--muted); }

/* ---- work / gallery grids -------------------------------------------------------- */
.work{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); }
@media (max-width:820px){ .work{ grid-template-columns:repeat(2,1fr); } }
.wcard{ position:relative; overflow:hidden; background:#fff; }
.wcard img{ width:100%; aspect-ratio:3/3.6; object-fit:cover; transition:transform .5s var(--ease); }
.wcard:hover img{ transform:scale(1.06); }
.wcard .cap{ position:absolute; left:0; right:0; bottom:0; padding:18px; color:#fff;
  background:linear-gradient(to top, rgba(27,16,6,.94), rgba(27,16,6,0)); transform:translateY(14px); opacity:0; transition:.3s var(--ease); }
.wcard:hover .cap{ transform:none; opacity:1; }
.wcard .cap span{ font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); }
.wcard .cap h3{ color:#fff; font-size:16px; margin:2px 0 0; }

/* ---- trust strip ------------------------------------------------------------------ */
.trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
@media (max-width:820px){ .trust{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .trust{ grid-template-columns:1fr; } }

/* ---- hero variants ----------------------------------------------------------------- */
.hero{ position:relative; padding:clamp(52px,8vw,96px) 0 0; overflow:hidden; }
.hero .wrap{ position:relative; z-index:1; }
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:52px; align-items:center; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.display{ font-size:clamp(34px,6.6vw,96px); line-height:.94; font-weight:900; letter-spacing:-.025em; text-transform:uppercase; margin:0 0 18px; overflow-wrap:break-word; }
.display em{ font-style:normal; display:block; }
.display--long{ font-size:clamp(30px,4.9vw,68px); }
.hero--panel{ background:var(--brand); color:#fff; }
.hero--panel .display{ color:#fff; } .hero--panel .display em{ color:var(--accent); }
.hero--panel .lead{ color:#eadfcd; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin:26px 0 16px; }
.hero-note{ display:flex; gap:10px; align-items:center; font-size:15px; color:var(--text); }
.hero--panel .hero-note, .hero--dark .hero-note, .hero--emergency .hero-note{ color:#eadfcd; }
.hero-note svg{ flex:none; width:18px; height:18px; color:var(--accent); }
.hero-media{ position:relative; }
.hero-media img{ width:100%; aspect-ratio:9/10; object-fit:cover; }
.hero-media .tag{ position:absolute; left:-18px; bottom:30px; background:var(--accent); color:var(--on-accent); padding:14px 20px; box-shadow:var(--sh-lift); }
.hero-media .tag b{ display:block; font-size:20px; }
.hero-rail{ margin-top:48px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--dark-line); }
@media (max-width:820px){ .hero-rail{ grid-template-columns:repeat(2,1fr); } }
.hero-rail > div{ background:var(--brand-700); padding:20px 22px; display:flex; gap:12px; align-items:center; color:#fff; }
.hero-rail svg{ flex:none; width:22px; height:22px; color:var(--accent); }
.hero-rail b{ display:block; font-size:14px; } .hero-rail span{ font-size:12.5px; color:#d8c6ac; }

.hero--split{ background:var(--tint); color:var(--text); padding-bottom:64px; }
.hero--split h1{ font-size:clamp(29px,4.3vw,52px); font-weight:800; text-transform:none; margin:0 0 16px; }
.phonecard{ background:var(--brand); color:#fff; padding:34px; box-shadow:var(--sh-lift); }
.phonecard span{ text-transform:uppercase; letter-spacing:.1em; font-size:12px; color:var(--accent); font-weight:800; }
.phonecard b{ display:block; font-size:28px; margin:8px 0; }
.phonecard small{ display:block; color:#e7d9c4; margin-bottom:18px; }

.hero--dark{ background:var(--dark); color:#fff; padding-bottom:0; }
.hero--dark .hero-grid{ grid-template-columns:1fr; text-align:center; justify-items:center; }
.hero--dark .display{ color:#fff; font-size:clamp(33px,5.4vw,72px); } .hero--dark .display em{ color:var(--accent); }
.hero--dark .hero-cta{ justify-content:center; }
.hero--dark .lead{ color:var(--dark-muted); max-width:60ch; }

.hero--emergency{ background:var(--danger); color:#fff; padding-bottom:36px; }
.hero--emergency .eyebrow.on-dark{ border-color:rgba(255,255,255,.4); color:#fff; }
.hero--emergency .hero-grid{ grid-template-columns:1fr; text-align:center; justify-items:center; }
.hero--emergency h1{ color:#fff; font-size:clamp(30px,5vw,58px); text-transform:uppercase; margin:0 0 16px; }
.hero--emergency .lead{ color:#ffe3df; }

.crumbs{ list-style:none; display:flex; gap:6px; padding:0; margin:0 0 18px; font-size:14px; color:var(--muted); }
.crumbs.on-dark{ color:var(--dark-muted); }
.crumbs li::after{ content:"/"; margin-left:6px; color:var(--line2); }
.crumbs li:last-child::after{ content:""; }
.crumbs a{ color:inherit; text-decoration:underline; text-underline-offset:.15em; }
/* Every colour/dark hero forces its breadcrumbs to white regardless of whether the pattern
   remembered ".crumbs.on-dark" — this is the structural fix, not a per-pattern one, because
   axe's colour-contrast check caught --muted/--dark-muted failing against the brand and danger
   hero backgrounds (both clear 4.5:1 on white, verified: 6.54:1 on --danger, 8.82:1 on --brand). */
.hero--panel .crumbs, .hero--dark .crumbs, .hero--emergency .crumbs{ color:#fff; }
.hero--panel .crumbs li::after, .hero--dark .crumbs li::after, .hero--emergency .crumbs li::after{ color:rgba(255,255,255,.5); }

/* ---- testimonials (only used with real content) --------------------------------------- */
.tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
@media (max-width:900px){ .tgrid{ grid-template-columns:1fr; } }

/* ---- CTA band --------------------------------------------------------------------------- */
.cta{ background:var(--brand); color:#fff; padding:clamp(52px,7vw,88px) 0; }
.cta .wrap{ display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; }
@media (max-width:820px){ .cta .wrap{ grid-template-columns:1fr; } }
.cta h2{ color:#fff; font-size:clamp(24px,3.4vw,36px); }
.cta p{ color:#eadfcd; }
.cta .box{ background:var(--brand-700); padding:34px; text-align:center; }
.cta .box span{ display:block; text-transform:uppercase; letter-spacing:.1em; font-size:12px; color:var(--accent); font-weight:800; }
.cta .box b{ display:block; font-size:30px; margin:8px 0; }
.cta .box small{ display:block; color:#d8c6ac; margin-bottom:18px; }

/* ---- header / nav ------------------------------------------------------------------------ */
.topbar{ background:var(--brand-700); color:#e7d9c4; font-size:13.5px; }
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; min-height:44px; flex-wrap:wrap; gap:8px; padding-block:6px; }
.topbar ul{ list-style:none; display:flex; gap:22px; padding:0; margin:0; flex-wrap:wrap; }
.topbar li{ display:flex; align-items:center; gap:6px; }
.topbar a{ color:#fff; font-weight:700; min-height:44px; display:inline-flex; align-items:center; }
.topbar svg{ width:14px; height:14px; color:var(--accent); flex:none; }
@media (max-width:760px){ .topbar .sec{ display:none; } }

.site-header{ position:sticky; top:0; z-index:120; background:#fff; border-bottom:1px solid var(--line); transition:box-shadow .2s; }
.site-header.is-stuck{ box-shadow:0 10px 30px rgba(20,10,2,.10); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:14px; }
.brandmark{ display:flex; align-items:center; gap:12px; font-weight:800; color:var(--head); font-size:17px; }
.brandmark .mk{ width:44px; height:44px; background:var(--brand); display:flex; align-items:center; justify-content:center; flex:none; }
.brandmark .mk svg{ width:22px; height:22px; color:var(--accent); }
.brandmark small{ display:block; font-weight:600; color:var(--muted); font-size:12px; }

.menu{ list-style:none; display:flex; gap:26px; margin:0; padding:0; align-items:center; }
.menu li{ position:relative; }
.menu a{ color:var(--head); font-weight:700; font-size:15px; position:relative; padding:6px 0; display:inline-block; }
.menu a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--accent); transition:width .3s; }
.menu a:hover::after,.menu a[aria-current="page"]::after{ width:100%; }
.menu .has-dd{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.dd{ list-style:none; position:absolute; top:calc(100% + 14px); left:0; background:#fff; box-shadow:var(--sh-card-h); border:1px solid var(--line);
  min-width:280px; padding:14px; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:2px; opacity:0; visibility:hidden; transform:translateY(6px); transition:.2s var(--ease); z-index:50; }
.dd.dd--single{ grid-template-columns:1fr; min-width:240px; }
.menu li:hover .dd, .menu li:focus-within .dd{ opacity:1; visibility:visible; transform:none; }
.dd li{ }
.dd a{ display:block; padding:9px 10px; font-size:14px; font-weight:600; white-space:nowrap; }
.dd a::after{ display:none; }
.dd a:hover{ background:var(--tint); }

.nav-phone{ display:flex; align-items:center; gap:10px; background:var(--brand); color:#fff; padding:11px 20px; font-weight:700; min-height:44px; flex:none; }
.nav-phone .ic{ width:20px; height:20px; color:var(--accent); flex:none; }
.nav-phone small{ display:block; font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; }
.nav-phone b{ display:block; font-size:15px; }
.burger{ display:none; width:46px; height:46px; background:var(--brand); border:0; color:var(--accent); cursor:pointer; flex:none; }
@media (max-width:900px){
  .menu,.nav-phone{ display:none; }
  .burger{ display:flex; align-items:center; justify-content:center; }
}
.mobmenu{ display:none; border-top:1px solid var(--line); background:#fff; }
.mobmenu.open{ display:block; }
.mobmenu .wrap{ padding-block:14px; }
.mobmenu ul{ list-style:none; padding:0; margin:0; }
.mobmenu > .wrap > ul > li{ border-bottom:1px solid var(--line); }
.mobmenu a{ display:flex; align-items:center; justify-content:space-between; padding:14px 4px; color:var(--head); font-weight:700; min-height:44px; }
.mobmenu .dd-mobile{ padding-left:16px; }
.mobmenu .dd-mobile a{ font-weight:600; font-size:15px; color:var(--muted); }
.mobmenu details summary{ list-style:none; cursor:pointer; }
.mobmenu details summary::-webkit-details-marker{ display:none; }

/* ---- footer -------------------------------------------------------------------------------- */
.site-footer{ background:var(--dark); color:var(--dark-muted); }
.fgrid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; padding:clamp(52px,6vw,80px) 0 40px; }
@media (max-width:900px){ .fgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .fgrid{ grid-template-columns:1fr; } }
.fgrid h3{ color:#fff; font-size:15px; text-transform:uppercase; letter-spacing:.06em; position:relative; padding-bottom:12px; margin-bottom:14px; }
.fgrid h3::after{ content:""; position:absolute; left:0; bottom:0; width:38px; height:3px; background:var(--accent); }
.fgrid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.fgrid ul.long{ font-size:14px; gap:7px; }
.fgrid a{ color:var(--dark-muted); }
.fgrid a:hover{ color:#fff; }
.fbrand{ display:flex; align-items:center; gap:12px; font-weight:800; color:#fff; margin-bottom:14px; font-size:17px; }
.fbrand .mk{ width:40px; height:40px; background:var(--brand-700); display:flex; align-items:center; justify-content:center; }
.fbrand .mk svg{ width:20px; height:20px; color:var(--accent); }
.fcontact li{ display:flex; gap:10px; align-items:flex-start; }
.fcontact svg{ flex:none; width:18px; height:18px; color:var(--accent); margin-top:3px; }
.fcontact b a{ color:#fff; }
.fbar{ border-top:1px solid var(--dark-line); padding:20px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13.5px; }
.fbar ul{ list-style:none; display:flex; gap:18px; padding:0; margin:0; }
.fbar a{ color:var(--dark-muted); }
.fbar a:hover{ color:#fff; }

/* ---- fixed UI ------------------------------------------------------------------------------- */
.callbar{ position:fixed; left:0; right:0; bottom:0; z-index:150; display:none; box-shadow:0 -6px 22px rgba(20,10,2,.18); }
.callbar .btn{ width:100%; padding:16px!important; font-size:15px; min-height:56px; }
@media (max-width:760px){ .callbar{ display:block; } body{ padding-bottom:56px; } }
.toTop{ position:fixed; right:20px; bottom:22px; width:50px; height:50px; border-radius:50%; background:var(--brand); color:var(--accent);
  border:0; display:flex; align-items:center; justify-content:center; opacity:0; translate:0 14px; pointer-events:none; transition:.3s var(--ease); z-index:140;
  box-shadow:0 7px 30px rgba(20,10,2,.35); cursor:pointer; }
.toTop.show{ opacity:1; translate:0 0; pointer-events:auto; }
@media (max-width:760px){ .toTop{ bottom:88px; } }

/* ---- reveal-on-scroll ------------------------------------------------------------------------ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.09s; } .reveal.d2{ transition-delay:.18s; } .reveal.d3{ transition-delay:.27s; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---- utility -------------------------------------------------------------------------------- */
.imgph{ background:repeating-linear-gradient(-45deg,#fff 0 11px,var(--tint) 11px 22px); border:2px dashed var(--line2);
  display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; text-align:center; padding:20px; min-height:180px; }
.sample-note{ font-size:13px; color:var(--muted); text-align:center; margin-top:8px; }