:root{
  --brand: #f8b500;
  --line: #b5b5b6;
  --gray-bg: #efefef;
  --ink: #111111;
  --paper: #ffffff;

  --x: calc(clamp(769px, 100vw, 1600px) / 24);
  --edge: calc(var(--x) * 1);
  --gap-obj: calc(var(--x) * 0.5);

  --fs-quantum: 1px;
  --fs-scale: 1.1;
  --fs-fluid: clamp(14px, calc(10px + 0.6vw), 17.27px);
  --fs-body: calc(var(--fs-fluid) * var(--fs-scale));

  --r-h1: 3.0;
  --fs-h1: calc(var(--fs-body) * var(--r-h1));

  --fw-title: 900;
  --lh-title: 1.15;
  --lh-body: 1.6;
  --ls-title: -0.02em;
  --ls-body: 0.01em;

  --header-h: 80px;
  --logo-h: calc(var(--header-h) * 0.35);
  --header-fs-logo: 30px;
  --header-fs-menu: 15px;
  --header-fs-menu-m: calc(var(--x) * 0.75);
  --header-pad: calc(var(--x) * 1);
  --header-glass-alpha: 0.6;
  --header-blur: 13px;
  --menu-open-sec: 0.35;
  --menu-white-solid: calc(var(--x) * 2.5);
  --menu-white-fade: calc(var(--x) * 2.5);
  --menu-white-rgb: 253, 230, 170;
  --menu-blog-gap: calc(var(--x) * 0.4);

  --ham-w: calc(var(--header-h) * 0.38);
  --ham-line: 2px;
  --ham-gap: calc(var(--header-h) * 0.1);
  --ham-shift-x: 0px;
  --ham-shift-y: 0px;

  --cta-size: calc(var(--x) * 1.35);
  --cta-arrow-size: 100%;

  --ch4-bg: var(--gray-bg);
  --ch4-gray: #8a8a8a;
  --ch4-top-gap: calc(var(--header-h) + var(--x) * 1.5);
  --ch4-bottom-gap: calc(var(--x) * 2.5);
  --ch4-col-gap: calc(var(--x) * 1.5);
  --ch4-left-w: 38%;
  --ch4-right-w: 50%;
  --ch4-item-radius: 14px;
  --ch4-item-border: 0.8px;

  --lead-img-radius: var(--ch4-item-radius);
  --field-gap: calc(var(--x) * 0.5);
  --field-label-fs: var(--fs-body);
  --field-radius: var(--ch4-item-radius);
  --field-pad-y: calc(var(--x) * 0.5);
  --field-pad-y-flat: calc(var(--x) * 0.28);
  --field-pad-x: calc(var(--x) * 0.7);
  --field-msg-h: calc(var(--x) * 5);

  --footer-fs: var(--fs-body);
  --footer-pad-y: calc(var(--x) * 1);
  --footer-row-gap: calc(var(--x) * 2.5);
  --footer-link-gap: calc(var(--gap-obj) * 0.4);
}

@supports (width: round(nearest, 1px, 1px)){
  :root{ --fs-body: round(nearest, calc(var(--fs-fluid) * var(--fs-scale)), var(--fs-quantum)); }
}

@media (max-width: 768px){
  :root{
    --x: calc(100vw / 24);

    --header-h: calc(var(--x) * 3.5);
    --logo-h: calc(var(--header-h) * 0.35);
    --header-fs-logo: calc(var(--header-h) * 0.3);
    --header-fs-menu-m: 14px;
    --ham-line: 1.8px;
    --menu-blog-gap: calc(var(--x) * 0.8);

    --fs-fluid: clamp(14px, calc(10px + 1.2vw), 15.45px);
    --r-h1: 2.2;

    --cta-size: calc(var(--x) * 3);

    --ch4-top-gap: calc(var(--header-h) + var(--x) * 2);
    --ch4-bottom-gap: calc(var(--x) * 4);
    --ch4-col-gap: calc(var(--x) * 2.5);
    --ch4-item-radius: 12px;

    --footer-row-gap: calc(var(--x) * 5);
  }
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ overflow-anchor:none; scroll-behavior:smooth; }

body{
  font-family:'Jost', sans-serif;
  font-size:var(--fs-body);
  color:var(--ink);
  background:var(--ch4-bg);
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3{ text-wrap:balance; letter-spacing:var(--ls-title); line-height:var(--lh-title); }
p{ text-wrap:pretty; letter-spacing:var(--ls-body); line-height:var(--lh-body); }
img{ display:block; max-width:100%; -webkit-user-drag:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; pointer-events:none; }
a{ color:inherit; text-decoration:none; }

.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:0; left:0; z-index:200;
  padding:0.75em 1.25em; background:var(--ink); color:var(--paper);
  font-size:var(--header-fs-menu); font-weight:600;
  transform:translateY(-150%); transition:transform 0.2s ease;
}
.skip-link:focus{ transform:translateY(0); }

.site-header{ position:fixed; top:0; left:0; right:0; z-index:100; }
.header-bar{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  height:calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-top:env(safe-area-inset-top, 0px);
  padding-left:max(var(--header-pad), env(safe-area-inset-left, 0px));
  padding-right:max(var(--header-pad), env(safe-area-inset-right, 0px));
}
.header-glass{
  position:absolute; inset:0;
  -webkit-backdrop-filter:blur(var(--header-blur)); backdrop-filter:blur(var(--header-blur));
  pointer-events:none;
}
.header-colors{
  position:absolute; inset:0;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,var(--header-glass-alpha)) 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,var(--header-glass-alpha)) 100%);
}
.header-tint{ position:absolute; inset:0; background:var(--brand); }
.header-white{
  position:absolute; inset:0; background:rgb(var(--menu-white-rgb));
  -webkit-mask-image:linear-gradient(to left,
    #000 var(--menu-white-solid),
    transparent calc(var(--menu-white-solid) + var(--menu-white-fade)));
  mask-image:linear-gradient(to left,
    #000 var(--menu-white-solid),
    transparent calc(var(--menu-white-solid) + var(--menu-white-fade)));
  opacity:0; transition:opacity calc(var(--menu-open-sec) * 1s) ease;
}
.site-header.is-open .header-white{ opacity:1; }

.logo{
  position:relative; z-index:1; display:flex; align-items:center;
  font-size:var(--header-fs-logo); font-weight:700; letter-spacing:0.04em;
}
.header-right{ position:relative; z-index:2; display:flex; align-items:center; }

.hamburger{
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; gap:var(--ham-gap);
  width:var(--ham-w);
  transform:translate(var(--ham-shift-x), var(--ham-shift-y)) rotate(0deg) scaleX(1);
  transform-origin:center;
  transition:transform calc(var(--menu-open-sec) * 1s) ease;
}
.hamburger span{
  display:block; width:100%; height:var(--ham-line); background:var(--paper);
  transition:background calc(var(--menu-open-sec) * 1s) ease;
}
.site-header.is-open .hamburger{
  transform:translate(var(--ham-shift-x), var(--ham-shift-y)) rotate(90deg) scaleX(var(--ham-open-sx, 0.72));
}
.site-header.is-open .hamburger span{ background:var(--ink); }

.menu-nav{
  display:flex;
  align-items:center;
  gap:var(--menu-blog-gap);
  max-width:0;
  opacity:0;
  overflow:hidden;
  white-space:nowrap;
  transition:max-width calc(var(--menu-open-sec) * 1s) ease,
             opacity calc(var(--menu-open-sec) * 1s) ease,
             margin calc(var(--menu-open-sec) * 1s) ease;
}
.site-header.is-open .menu-nav{
  max-width:16em;
  opacity:1;
  margin-right:var(--menu-blog-gap);
}
.menu-nav a{
  font-size:var(--header-fs-menu);
  font-weight:600;
  letter-spacing:0.06em;
  color:var(--ink);
  white-space:nowrap;
}
@media (max-width:768px){
  .menu-nav a{ font-size:var(--header-fs-menu-m); }
}

.cta{
  display:flex;
  align-items:flex-start;
  gap:calc(var(--x) * 0.35);
  flex-shrink:0;
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
}
.cta-label{
  font-size:var(--fs-body);
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1;
}
.cta-circle{
  position:relative;
  width:var(--cta-size);
  height:var(--cta-size);
  border-radius:50%;
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:transform 0.3s ease;
}
.cta:hover .cta-circle{ transform:scale(1.08); }
.cta-arrow{
  position:absolute;
  width:var(--cta-arrow-size);
  height:auto;
  transition:opacity 0.25s ease;
}
.cta-arrow.arrow-hover{ opacity:0; }
.cta:hover .arrow-hover{ opacity:1; }
.cta:hover .arrow-default{ opacity:0; }
.cta--dark .cta-label{ color:var(--ink); }
.cta--dark .cta-circle{ background:transparent; border:1px solid var(--ink); }
@media (max-width:768px){
  .cta{ align-items:flex-end; }
  .cta-circle{ order:1; }
  .cta-label{ order:2; }
}

.page-ch4{ min-height:100svh; background:var(--ch4-bg); }
.ch4-inner{
  position:relative;
  max-width:1600px;
  margin:0 auto;
  padding:var(--ch4-top-gap) var(--edge) var(--ch4-bottom-gap);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--ch4-col-gap);
}

.ch4-intro{ flex:0 0 var(--ch4-left-w); max-width:var(--ch4-left-w); }
.ch4-intro h1{ font-size:var(--fs-h1); font-weight:var(--fw-title); line-height:1.1; color:var(--ink); }
.ch4-intro p.ch4-lead{ margin-top:var(--gap-obj); font-size:var(--fs-body); font-weight:400; line-height:1.6; color:var(--ch4-gray); }

.ch4-lead-image{
  width:calc(100% + var(--ch4-col-gap));
  max-width:calc(100% + var(--ch4-col-gap));
  aspect-ratio:4 / 3;
  object-fit:cover;
  border-radius:var(--lead-img-radius);
  margin-top:calc(var(--gap-obj) * 1.4);
}
@media (max-width:768px){
  .ch4-lead-image{ width:100%; max-width:100%; }
}

.contact-form{
  flex:0 0 var(--ch4-right-w);
  max-width:var(--ch4-right-w);
  width:100%;
  display:flex;
  flex-direction:column;
  gap:var(--field-gap);
}
.field{ display:flex; flex-direction:column; gap:calc(var(--field-gap) * 0.35); }
.field label{
  font-size:var(--field-label-fs); font-weight:700; color:var(--ink);
}
.field label .req{ color:var(--brand); margin-left:0.25em; }
.field input,
.field textarea{
  font-family:inherit;
  font-size:var(--fs-body);
  color:var(--ink);
  background:var(--paper);
  border:var(--ch4-item-border) solid var(--line);
  border-radius:var(--field-radius);
  outline:none;
  transition:border-color 0.2s ease;
  width:100%;
}
.field input{
  padding:var(--field-pad-y-flat) var(--field-pad-x);
}
.field input:focus,
.field textarea:focus{ border-color:var(--brand); }
.field input:user-invalid,
.field textarea:user-invalid{ border-color:#d24b3f; }
.field textarea{
  padding:var(--field-pad-y) var(--field-pad-x);
  min-height:var(--field-msg-h);
  max-height:calc(var(--field-msg-h) * 3);
  resize:vertical;
  overflow-y:auto;
  line-height:1.5;
}

.form-actions{
  margin-top:calc(var(--field-gap) * 0.5);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:calc(var(--gap-obj) * 0.5);
}

.form-status{
  font-size:var(--fs-body);
  color:var(--ch4-gray);
  text-align:right;
}
.form-status.is-success{ color:var(--ink); font-weight:600; }
.form-status:empty{ display:none; }

@media (max-width:768px){
  .ch4-inner{ flex-direction:column; align-items:stretch; }
  .ch4-intro, .contact-form{ flex:0 0 auto; max-width:100%; width:100%; }
}

.site-footer{ border-top:0.8px solid var(--ch4-gray); background:var(--ch4-bg); color:var(--ch4-gray); }
.footer-inner{ max-width:1600px; margin:0 auto; padding:var(--footer-pad-y) var(--edge); font-size:var(--footer-fs); }
.footer-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--gap-obj); }
.footer-row + .footer-row{ margin-top:var(--footer-row-gap); align-items:flex-end; }
.footer-top-link{ color:var(--ink); text-decoration:underline; text-underline-offset:0.2em; }
.footer-copy{ font-weight:400; }
.footer-copy strong{ font-weight:700; }
.footer-group{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.footer-group-label{ font-weight:600; color:var(--ink); margin-bottom:calc(var(--footer-link-gap) * 0.5); }
.footer-link{ display:block; text-decoration:underline; text-underline-offset:0.2em; }
.footer-link + .footer-link{ margin-top:calc(var(--footer-link-gap) * 0.4); }
.footer-email{ text-decoration:none; }

/* WordPress/Flatsome integration: hidden mobile drawer is still emitted by wp_footer(). */
body.patroni-contact-page #main-menu.mobile-sidebar { display:none !important; }
