/* ============================================================
   Lorax GmbH — shared site theme
   Modern grotesk system (matches v2-aligned.html): cool paper base,
   Hanken Grotesk throughout (bold tight headings), EXACT logo
   palette — blue #005490 leads, green #84b424 is the accent.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root{
  --blue:#005490; --blue-deep:#013d6e;       /* logo wordmark — primary */
  --green:#84b424; --green-deep:#5f8718;      /* logo spiral — accent */
  --navy:#005490; --navy-ink:#1c2428;         /* legacy aliases */
  --ink:#1c2428;                              /* charcoal headings */
  --gold:#84b424; --gold-deep:#5f8718;        /* legacy accent aliases → green */
  --gold-soft:#e6efce; --gold-tint:#eff5de;
  --slate:#4e575d;       /* body text */
  --muted:#828b90;       /* secondary text */
  --line:#e2e7e1;        /* hairline */
  --surface:#ebf0e6;     /* tinted band */
  --surface-2:#e2eadb;   /* deeper tint */
  --bg:#f7f9f5; --cream-2:#ebf0e6; --panel:#ffffff;
  --shadow-sm:0 4px 16px rgba(20,40,30,.06);
  --shadow-md:0 24px 54px rgba(15,40,30,.09);
  --shadow-lg:0 44px 96px rgba(15,40,30,.14);
  --radius:28px;
  --maxw:1200px;
  --font-display:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  font:17px/1.65 var(--font-body); font-weight:400;
  color:var(--slate); background:var(--bg); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--blue); color:#fff}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:var(--font-display); color:var(--ink); font-weight:700; letter-spacing:-.022em; line-height:1.05}
.eyebrow{font-family:var(--font-body); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green-deep); display:inline-flex; align-items:center; gap:8px;
  background:var(--gold-soft); border:1px solid rgba(95,135,24,.22); padding:7px 15px 7px 13px; border-radius:999px}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--green); display:inline-block}
.mono{font:600 13px/1 var(--font-body); letter-spacing:.04em}

/* ============================================================
   NAVBAR (light, sticky)
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:60; background:rgba(247,249,245,.82);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:0 32px; height:78px;
  display:flex; align-items:center; justify-content:space-between; gap:28px}
.nav-logo{display:flex; align-items:center; gap:10px; text-decoration:none}
.nav-logo img{height:42px; width:auto}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a{
  text-decoration:none; color:var(--slate); font-size:16px; font-weight:500;
  padding:11px 16px; border-radius:10px; transition:background .18s,color .18s; white-space:nowrap;
}
.nav-links a:hover{background:var(--gold-soft); color:var(--ink)}
.nav-links a.active{color:var(--ink); font-weight:600}
.nav-cta{
  text-decoration:none; font-size:16px; font-weight:600; color:#fff !important;
  background:var(--blue); padding:11px 22px; border-radius:999px; transition:background .18s, transform .18s;
}
.nav-cta:hover{background:var(--blue-deep); transform:translateY(-1px)}
.langsw{display:inline-flex; align-items:center; gap:2px; margin-left:6px; padding:3px; border:1px solid var(--line); border-radius:999px}
.langsw button{appearance:none; border:0; background:none; cursor:pointer; color:var(--muted); font:600 13px/1 var(--font-body); letter-spacing:.04em; padding:7px 10px; border-radius:999px; transition:color .18s, background .18s}
.langsw button:hover{color:var(--ink)}
.langsw button.on{background:var(--blue); color:#fff}
.nav-burger{display:none; background:none; border:0; cursor:pointer; padding:8px; color:var(--ink)}
.nav-burger svg{width:28px; height:28px}
@media(max-width:920px){
  .nav-links{
    position:absolute; top:78px; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 16px 16px;
    box-shadow:var(--shadow-md);
    display:flex; visibility:hidden; opacity:0; transform:translateY(-8px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav-links.open{ visibility:visible; opacity:1; transform:none; }
  .nav-links a{padding:14px 14px; border-radius:10px; font-size:17px}
  .nav-links .nav-cta{margin-top:8px; text-align:center}
  .nav-burger{display:inline-flex}
}

/* ============================================================
   PAGE HEADER (editorial hero band for subpages)
   ============================================================ */
.pagehead{position:relative; background:var(--cream-2); border-bottom:1px solid var(--line); overflow:hidden}
.pagehead::after{content:""; position:absolute; top:-30%; right:-8%; width:46%; height:150%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(132,180,36,.16), transparent)}
.pagehead .wrap{position:relative; padding-top:96px; padding-bottom:84px}
.pagehead .eyebrow{margin-bottom:20px}
.pagehead h1{font-family:var(--font-display); font-weight:500; font-size:clamp(38px,5.6vw,68px); letter-spacing:-.02em; line-height:1.0}
.pagehead p{color:var(--muted); font-size:clamp(17px,1.8vw,21px); max-width:60ch; margin-top:20px; line-height:1.6}
.breadcrumb{font-family:var(--font-body); font-size:13px; color:var(--muted); margin-bottom:24px}
.breadcrumb a{text-decoration:none; color:var(--muted)}
.breadcrumb a:hover{color:var(--green-deep)}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:128px 0}
.section.tight{padding:80px 0}
.section.alt{background:var(--cream-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-head{max-width:760px; margin-bottom:64px}
.section-head .eyebrow{margin-bottom:20px}
.section-head h2{font-size:clamp(30px,4.2vw,52px); margin:0; letter-spacing:-.015em; line-height:1.0}
.section-head p{color:var(--muted); font-size:18px; margin-top:18px; line-height:1.6}

/* ---------- generic grids & cards ---------- */
.grid{display:grid; gap:28px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid.cols-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:32px;
  box-shadow:var(--shadow-sm); transition:box-shadow .28s cubic-bezier(.22,1,.36,1), transform .28s cubic-bezier(.22,1,.36,1);
}
.card:hover{box-shadow:var(--shadow-lg); transform:translateY(-5px)}
.card .n{font-family:var(--font-display); font-weight:500; font-size:26px; color:var(--green-deep); line-height:1;
  width:50px; height:50px; display:flex; align-items:center; justify-content:center; background:var(--gold-tint); border-radius:50%; margin-bottom:18px}
.card h3{font-family:var(--font-display); font-weight:500; font-size:22px; margin:0 0 9px; letter-spacing:-.01em; line-height:1.1}
.card h4{font-family:var(--font-display); font-weight:500; font-size:19px; margin:6px 0}
.card p{color:var(--muted); font-size:15.5px; line-height:1.6}

/* media card (image + body) */
.mcard{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:box-shadow .28s, transform .28s; display:flex; flex-direction:column; padding:10px;
}
.mcard:hover{box-shadow:var(--shadow-lg); transform:translateY(-5px)}
.mcard .thumb{aspect-ratio:4/3; background:var(--surface-2); overflow:hidden; border-radius:15px}
.mcard .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.mcard:hover .thumb img{transform:scale(1.05)}
.mcard .body{padding:18px 16px 20px}
.mcard .body .k{font-family:var(--font-body); font-weight:600; font-size:11.5px; color:var(--green-deep); letter-spacing:.1em; text-transform:uppercase}
.mcard .body h3{font-family:var(--font-display); font-weight:500; font-size:21px; margin:9px 0 6px; letter-spacing:-.01em; line-height:1.1}
.mcard .body p{color:var(--muted); font-size:14.5px; line-height:1.55}

/* spec / data row */
.spec{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.spec span{
  font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--green-deep);
  background:var(--gold-soft); border:0; border-radius:999px; padding:6px 14px;
}

/* two-column feature (image + text) */
.feature{display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center}
.feature.rev{direction:rtl} .feature.rev>*{direction:ltr}
.feature .media{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/3; background:var(--surface-2)}
.feature .media img{width:100%; height:100%; object-fit:cover}
.feature .eyebrow{margin-bottom:18px}
.feature h2{font-size:clamp(28px,3.6vw,44px); line-height:1.02}
.feature p{color:var(--slate); font-size:17.5px; margin-top:18px; line-height:1.65}
@media(max-width:860px){ .feature{grid-template-columns:1fr; gap:30px} .feature.rev{direction:ltr} }

/* stats strip */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; text-align:center}
.stats .stat{position:relative; padding:6px 16px}
.stats .stat + .stat::before{content:""; position:absolute; left:0; top:16%; bottom:16%; width:1px; background:var(--line)}
.stats .stat .num{font-family:var(--font-display); font-weight:500; font-size:clamp(34px,4.4vw,54px); color:var(--ink); letter-spacing:-.02em; line-height:1}
.stats .stat .lab{font-family:var(--font-body); font-weight:600; color:var(--muted); font-size:12.5px; margin-top:12px; text-transform:uppercase; letter-spacing:.08em}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-family:var(--font-body); font-weight:600; font-size:15.5px;
  padding:16px 30px; border-radius:999px; transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, background .2s, border-color .2s, color .2s; cursor:pointer; border:0}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 6px 18px rgba(0,84,144,.26)}
.btn-primary:hover{background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,84,144,.32)}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--ink); color:var(--bg); border-color:var(--ink); transform:translateY(-2px)}
.btn-gold{background:var(--green); color:#fff}
.btn-gold:hover{background:var(--green-deep); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn:active,.btn-primary:active,.btn-ghost:active,.btn-gold:active,.nav-cta:active{ transform:scale(.97) }

/* gallery masonry-ish */
.gallery{columns:3 260px; column-gap:18px}
.gallery figure{break-inside:avoid; margin:0 0 18px; border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-sm); background:var(--surface-2); border:1px solid var(--line)}
.gallery figure img{width:100%; transition:transform .5s ease}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{font-size:12.5px; color:var(--muted); padding:10px 14px; background:var(--panel); border-top:1px solid var(--line)}

/* timeline (Unternehmen) */
.timeline{position:relative; max-width:800px; margin:0 auto; padding-left:34px}
.timeline::before{content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,var(--green),var(--gold-soft))}
.tl-item{position:relative; padding:0 0 40px 8px}
.tl-item::before{content:""; position:absolute; left:-34px; top:3px; width:16px; height:16px; border-radius:50%;
  background:var(--panel); border:3px solid var(--green)}
.tl-item .yr{font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--blue)}
.tl-item h4{font-family:var(--font-display); font-weight:500; font-size:20px; margin:5px 0 7px; letter-spacing:-.01em}
.tl-item p{color:var(--muted); font-size:15.5px; line-height:1.6}

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{position:relative; background:var(--cream-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden}
.cta-band::after{content:""; position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:60%; height:160%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(132,180,36,.14), transparent)}
.cta-band .wrap{position:relative; padding:96px 28px; text-align:center}
.cta-band .eyebrow{margin-bottom:18px}
.cta-band h2{font-size:clamp(30px,4vw,52px); letter-spacing:-.015em; line-height:1.0}
.cta-band p{color:var(--muted); font-size:18px; margin:18px auto 30px; max-width:54ch; line-height:1.6}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ============================================================
   PHOTO TREATMENT — clean, natural photos (no heavy cast)
   ============================================================ */
.mcard .thumb, .feature .media{ position:relative; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--panel); border-top:1px solid var(--line); color:var(--slate)}
.footer .wrap{padding:72px 28px 44px}
.footer-top{display:grid; grid-template-columns:1.6fr .9fr .9fr 1.1fr; gap:48px}
.footer-brand img{height:38px; margin-bottom:18px}
.footer-brand p{color:var(--muted); font-size:14.5px; max-width:38ch; line-height:1.65}
.footer-iso{margin-top:16px; font-weight:600; color:var(--green-deep); font-size:12.5px; letter-spacing:.02em}
.footer h5{font-family:var(--font-body); font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink); font-weight:600; margin-bottom:16px}
.footer ul{list-style:none; display:flex; flex-direction:column; gap:10px}
.footer ul a{text-decoration:none; color:var(--muted); font-size:14.5px}
.footer ul a:hover{color:var(--green-deep)}
.footer address{font-style:normal; color:var(--muted); font-size:14.5px; line-height:1.9}
.footer address a{color:var(--blue); text-decoration:none; font-weight:500}
.footer-bottom{margin-top:48px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  color:var(--muted); font-size:13px}
.footer-legal{display:flex; gap:20px}
.footer-legal a{color:var(--muted); text-decoration:none}
.footer-legal a:hover{color:var(--green-deep)}
@media(max-width:860px){ .footer-top{grid-template-columns:1fr 1fr; gap:36px} .footer-brand{grid-column:1 / -1} }
@media(max-width:480px){ .footer-top{grid-template-columns:1fr} .footer-bottom{justify-content:flex-start} }

/* reveal-on-scroll */
.reveal{opacity:0; transform:translateY(18px); filter:blur(4px); transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1), filter .5s ease}
.reveal.in{opacity:1; transform:none; filter:none}

/* ============================================================
   CHAPTER — full-bleed "one claim per screen" block
   ============================================================ */
.chapter{display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:70vh; border-top:1px solid var(--line)}
.chapter .cmedia{position:relative; overflow:hidden; min-height:44vh; background:var(--surface-2)}
.chapter .cmedia img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease}
.chapter:hover .cmedia img{transform:scale(1.05)}
.chapter .cbody{display:flex; flex-direction:column; justify-content:center; padding:9vh 6vw}
.chapter.rev .cmedia{order:2}
.chapter .cnum{font-family:var(--font-body); font-weight:600; font-size:12.5px; color:var(--green-deep); letter-spacing:.1em; text-transform:uppercase}
.chapter h2{font-family:var(--font-display); font-weight:500; font-size:clamp(34px,4.8vw,60px); color:var(--ink); letter-spacing:-.02em; line-height:1.0; margin:14px 0 16px}
.chapter p{color:var(--slate); font-size:clamp(16px,1.5vw,19px); max-width:44ch; line-height:1.65}
.chapter .ctag{display:inline-flex; gap:8px; margin-top:22px; flex-wrap:wrap}
.chapter .ctag span{font-family:var(--font-body); font-weight:600; font-size:12px; color:var(--green-deep); background:var(--gold-soft); border:0; border-radius:999px; padding:7px 14px}
.more{display:inline-flex; align-items:center; gap:7px; margin-top:26px; color:var(--blue); font-weight:600; text-decoration:none; font-size:15.5px}
.more::after{content:"→"; transition:transform .2s}
.more:hover::after{transform:translateX(4px)}
@media(max-width:860px){ .chapter{grid-template-columns:1fr; min-height:0} .chapter.rev .cmedia{order:0} .chapter .cbody{padding:7vh 7vw} .chapter .cmedia{min-height:56vw} }

/* ============================================================
   PARTS WAVE — transparent cutouts ride a curved motion-path
   ============================================================ */
.wave{position:relative; overflow:hidden; background:var(--bg); display:flex; justify-content:center; align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.wave-wrap{position:relative; flex:0 0 auto; transform-origin:center}
.wave-line{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.wave-line path{fill:none; stroke-width:2}
.wave-line .wflow{stroke-width:2; opacity:.7; stroke-linecap:round; stroke-dasharray:6 28; animation:dashflow 3.2s linear infinite}
.wave:hover .wflow{animation-play-state:paused}
@keyframes dashflow{ to{ stroke-dashoffset:-34 } }
.wpart{position:absolute; top:0; left:0; text-decoration:none; transform-origin:center;
  offset-rotate:0deg; offset-distance:0%;
  animation:ride 26s linear infinite; will-change:offset-distance}
.wave:hover .wpart{animation-play-state:paused}
.wpart img{height:84px; width:auto; display:block;
  filter:drop-shadow(0 10px 14px rgba(15,40,30,.16)); transition:transform .2s ease, filter .2s ease}
.wpart .lab{position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%);
  font-size:12px; font-weight:600; color:var(--ink); white-space:nowrap;
  background:var(--panel); padding:4px 10px; border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow-sm);
  opacity:0; transition:opacity .2s}
.wpart:hover{z-index:5}
.wpart:hover img{transform:scale(1.14); filter:drop-shadow(0 18px 26px rgba(15,40,30,.24))}
.wpart:hover .lab{opacity:1}
@keyframes ride{ from{offset-distance:0%} to{offset-distance:100%} }
.wave.nofx .wave-wrap{display:flex; gap:24px; align-items:center; height:auto !important; padding:30px 0; width:max-content}
.wave.nofx .wave-line{display:none}
.wave.nofx .wpart{position:relative; animation:bob 4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(-18px)}50%{transform:translateY(18px)}}
.flow-hint{text-align:center; color:var(--muted); font-size:13px; margin-top:8px}
/* stacked lanes + left-to-right reveal */
.wave-stack{flex-direction:column; gap:6px}
.wave-stack .wpart img{height:62px}
/* default is fully visible; the left-to-right wipe is a one-shot enhancement on first view */
.wave-reveal.revealed{animation:wavewipe 1.15s cubic-bezier(.22,1,.36,1)}
@keyframes wavewipe{from{clip-path:inset(0 101% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion: reduce){ .wave-reveal.revealed{animation:none} }

/* ============================================================
   THREAD — wavy gutter line that draws itself on scroll
   ============================================================ */
.thread{position:fixed; top:0; left:calc((100vw - 1200px)/2 - 34px); width:34px; height:100vh; z-index:35; pointer-events:none}
.thread svg{width:34px; height:100%; overflow:visible}
.thread .t-base{fill:none; stroke:var(--line); stroke-width:2}
.thread .t-draw{fill:none; stroke:var(--green); stroke-width:2.5; stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(132,180,36,.30))}
.thread .t-flow{fill:none; stroke:var(--green); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:5 30; animation:dashflow 3.2s linear infinite}
.thread .t-node{ fill:var(--green); opacity:.22; transition:opacity .45s ease, r .45s ease; }
.thread .t-node.on{ opacity:.95; }
@media(max-width:1280px){ .thread{display:none} }

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

/* ── modern grotesk display: heavier + tighter (replaces the editorial serif) ── */
.pagehead h1,.chapter h2,.section-head h2,.cta-band h2{font-weight:800; letter-spacing:-.03em}
.stats .num,.card h3,.card h4,.card .n,.mcard .body h3,.tl-item h4,.tl-item .yr,.feature h2{font-weight:700; letter-spacing:-.02em}

/* ============================================================
   MOBILE REFINEMENTS (added 2026-06)
   Tighter vertical rhythm + right-sized type so more is visible
   per screen on phones. Layout already stacks via the breakpoints
   above; this just removes the oversized desktop spacing.
   ============================================================ */
@media(max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .section{padding:72px 0}
  .section.tight{padding:52px 0}
  .section-head{margin-bottom:38px}
  .section-head h2{font-size:clamp(26px,7vw,40px)}
  .pagehead .wrap{padding-top:58px; padding-bottom:46px}
  .pagehead h1{font-size:clamp(30px,7.6vw,44px)}
  .pagehead p{font-size:16.5px; margin-top:16px}
  .nav-in{padding:0 18px; height:62px}
  .nav-logo img{height:32px}
  .nav-links{top:62px}
  .cta-band .wrap{padding:64px 20px}
  .cta-band h2{font-size:clamp(26px,7vw,40px)}
  .footer .wrap{padding:52px 20px 36px}
  .card{padding:24px}
  .feature{gap:26px}
  .stats{gap:18px}
  .gallery{columns:2 140px; column-gap:12px}
  .timeline{padding-left:26px}
  .chapter .cbody{padding:48px 22px}
}
@media(max-width:400px){
  .section{padding:56px 0}
  .pagehead .wrap{padding-top:46px; padding-bottom:38px}
}