/* Blue Peak GDS GmbH – stylesheet */
:root{
  --bg:#f2eee5; --bg2:#e8e2d4; --ink:#1f1d1b; --mute:#6a655c; --line:#cfc7b6;
  --accent:#7b2a35; --accent-lt:#d6a39a; --dark:#1f1d1b; --dark-mute:#b5ad9d;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1240px; --sec:8rem; --ease:.3s cubic-bezier(.2,.6,.2,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{font:400 1rem/1.65 var(--sans);background:var(--bg);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
section{padding:var(--sec) 0}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.02em}
h2{font-size:clamp(2.2rem,4.4vw,3.8rem);max-width:16ch}
.label{display:flex;align-items:center;gap:1rem;font-size:.85rem;font-weight:500;color:var(--mute);margin-bottom:1.5rem}
.label::before{content:"";width:2.5rem;height:1px;background:var(--accent)}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;padding:.95rem 1.6rem;background:var(--ink);color:var(--bg);font:500 .92rem var(--sans);border:1px solid var(--ink);border-radius:2px;cursor:pointer;transition:background var(--ease),border-color var(--ease)}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn--sm{padding:.5rem 1rem;font-size:.82rem}
.link{font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:.15rem;transition:color var(--ease),border-color var(--ease)}
.link:hover{color:var(--accent);border-color:var(--accent)}

/* Header */
.site-header{position:fixed;inset:0 0 auto;z-index:50;padding:1.4rem 0;border-bottom:1px solid transparent;transition:padding var(--ease),background var(--ease),border-color var(--ease)}
.site-header.scrolled,.site-header.menu-open{background:var(--bg);border-color:var(--line)}
.site-header.scrolled{padding:.7rem 0}
.bar{display:flex;align-items:center;justify-content:space-between}
.logo{font:600 1.35rem/1 var(--serif);letter-spacing:-.01em}
.logo span{font:500 .8rem var(--sans);color:var(--accent);margin-left:.4rem;letter-spacing:0}
#nav ul{display:flex;align-items:center;gap:2rem}
#nav a:not(.btn){position:relative;font-size:.9rem;padding:.2rem 0}
#nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--ease)}
#nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav-toggle{display:none;position:relative;width:2.4rem;height:2.4rem;background:none;border:0;cursor:pointer}
.nav-toggle span{position:absolute;left:.4rem;right:.4rem;height:2px;background:var(--ink);transition:transform var(--ease),top var(--ease)}
.nav-toggle span:nth-child(1){top:.9rem}
.nav-toggle span:nth-child(2){top:1.4rem}
.nav-toggle[aria-expanded="true"] span:nth-child(1){top:1.15rem;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){top:1.15rem;transform:rotate(-45deg)}

/* Hero */
.hero{padding:9rem 0 4rem}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:4rem;align-items:center}
.tag{display:inline-block;font-size:.85rem;font-weight:500;color:var(--accent);border:1px solid var(--accent);padding:.3rem .8rem;margin-bottom:2rem}
h1{font-size:clamp(2.9rem,6.4vw,5.8rem);line-height:1}
.lead{max-width:34rem;margin:2rem 0;color:var(--mute);font-size:1.12rem}
.actions{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.art{position:relative;aspect-ratio:4/5}
.art>*{position:absolute}
.art-a{top:0;right:0;width:68%;height:58%;background:var(--accent)}
.art-c{top:12%;left:6%;width:40%;height:34%;border:1px solid var(--ink)}
.art-b{bottom:0;left:0;width:72%;height:66%;background:var(--dark);overflow:hidden}
.art-b svg{width:100%;height:100%}
.art-label{right:0;bottom:8%;max-width:12.5rem;padding:1rem 1.2rem;background:var(--bg);border:1px solid var(--ink);font-size:.82rem;line-height:1.4}
.art-label b{display:block;font:500 1.15rem/1.2 var(--serif);margin-bottom:.3rem}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:5rem;border-top:1px solid var(--ink)}
.strip div{padding-top:1.2rem}
.strip dt{font-size:.82rem;color:var(--mute)}
.strip dd{font:400 1.3rem/1.3 var(--serif);margin-top:.2rem}

/* About */
.about-grid{display:grid;grid-template-columns:5fr 7fr;gap:5rem}
.about-visual{position:relative;aspect-ratio:3/4;margin-top:3rem;background:var(--bg2)}
.about-visual svg{width:100%;height:100%}
.quote{position:absolute;right:-4rem;bottom:2.5rem;width:72%;padding:1.5rem;background:var(--dark);color:var(--bg);font:italic 1.3rem/1.35 var(--serif)}
.cols{columns:2;column-gap:2.5rem;margin-top:3.6rem;color:var(--mute)}
.cols p{margin-bottom:1rem;break-inside:avoid}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:4rem;border-top:1px solid var(--line)}
.facts dd{font:400 3.4rem/1 var(--serif);color:var(--accent);margin:1.2rem 0 .5rem}
.facts dt{font-size:.85rem;color:var(--mute);line-height:1.45}
.facts div{display:flex;flex-direction:column-reverse;justify-content:flex-end}

/* Activities */
.activities{background:var(--bg2)}
.svc-head{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:end;margin-bottom:4rem}
.svc-head>p{color:var(--mute);max-width:30rem}
.svc{display:grid;grid-template-columns:5rem 1.1fr 1fr 3rem;gap:2rem;align-items:center;padding:2rem 0;border-top:1px solid var(--ink);transition:background var(--ease),padding var(--ease)}
.svc:last-child{border-bottom:1px solid var(--ink)}
.svc-n{font-size:.9rem;font-weight:500;color:var(--accent)}
.svc h3{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.svc--lead{padding:3.2rem 0}
.svc--lead h3{font-size:clamp(2rem,4vw,3.4rem)}
.svc p{color:var(--mute);font-size:.98rem}
.svc svg{width:2rem;height:2rem;fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round;transition:stroke var(--ease),transform var(--ease)}
.svc:hover{background:var(--bg);padding-inline:1.5rem}
.svc:hover svg{stroke:var(--accent);transform:rotate(-8deg)}

/* Approach */
.dark{background:var(--dark);color:var(--bg)}
.dark .label{color:var(--dark-mute)}
.ben-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;align-items:start;margin-top:5rem}
.ben{border-top:1px solid #4a463f;padding-top:1.5rem}
.ben:nth-child(even){margin-top:4rem}
.ben-n{display:block;font:400 clamp(3.5rem,6vw,5.5rem)/1 var(--serif);color:var(--accent-lt)}
.ben h3{font-size:1.6rem;margin:1rem 0 .7rem}
.ben p{color:var(--dark-mute);font-size:.95rem}

/* Contact */
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:5rem;align-items:start}
.addr{display:block;font:400 1.45rem/1.45 var(--serif);margin:2.5rem 0 1.5rem}
.mail{font:400 1.45rem var(--serif);color:var(--accent);border-bottom:1px solid currentColor}
.note{margin-top:2rem;color:var(--mute);max-width:26rem}
form{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;padding:2.5rem;background:var(--bg2)}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.full{grid-column:1/-1}
label{font-size:.85rem;font-weight:500}
label small{font-weight:400;color:var(--mute)}
input,textarea{width:100%;font:inherit;padding:.8rem .9rem;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:2px;transition:border-color var(--ease)}
input:focus,textarea:focus{outline:none;border-color:var(--ink)}
textarea{min-height:9rem;resize:vertical}
.err{min-height:1.1em;font-size:.8rem;color:var(--accent)}
.field.invalid input,.field.invalid textarea{border-color:var(--accent)}
.status{display:none;grid-column:1/-1;padding:.9rem 1rem;border-left:3px solid;font-size:.92rem}
.status.ok{display:block;border-color:#3f6b4f;background:#e1eadf}
.status.bad{display:block;border-color:var(--accent);background:#efdcd8}

/* Footer */
.site-footer{background:var(--dark);color:var(--dark-mute);padding:5rem 0 2rem;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1fr;gap:3rem}
.foot-logo{font:600 1.5rem var(--serif);color:var(--bg);margin-bottom:1rem}
.site-footer h4{font:600 .9rem var(--sans);color:var(--bg);margin-bottom:1.2rem}
.site-footer ul{display:grid;gap:.6rem}
.site-footer a{transition:color var(--ease)}
.site-footer a:hover{color:var(--bg)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:4rem;padding-top:1.5rem;border-top:1px solid #3a3731;font-size:.82rem}

/* Reveal */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease var(--d,0s),transform .7s ease var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* Responsive */
@media (max-width:900px){
  :root{--sec:5rem}
  .hero{padding-top:7rem}
  .hero-grid,.about-grid,.svc-head,.contact-grid{grid-template-columns:1fr;gap:3rem}
  .art{max-width:30rem}
  .quote{right:0}
  .strip{grid-template-columns:1fr;gap:0;margin-top:3rem}
  .strip div{padding-bottom:1rem}
  .svc{grid-template-columns:3rem 1fr 2rem;gap:.5rem 1rem}
  .svc p{grid-column:2;grid-row:2}
  .svc svg{grid-column:3;grid-row:1}
  .ben-grid{grid-template-columns:1fr 1fr;margin-top:3rem}
  .ben:nth-child(even){margin-top:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-toggle{display:block}
  #nav{display:none;position:absolute;top:100%;left:0;right:0;padding:1.5rem 1.25rem 2rem;background:var(--bg);border-bottom:1px solid var(--line)}
  #nav.open{display:block}
  #nav ul{flex-direction:column;align-items:flex-start;gap:1.2rem}
}
@media (max-width:560px){
  .cols{columns:1}
  .facts,.ben-grid,.foot-grid{grid-template-columns:1fr}
  form{grid-template-columns:1fr;padding:1.5rem}
  .art-label{max-width:10rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important}
}