/* ConWorx SA — stylesheet
   No external requests: fonts are self-hosted (SIL Open Font License, see assets/fonts/OFL-Barlow.txt). */

@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/barlow-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/barlow-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2")}

:root{
  /* Palette sampled from the ConWorx logo */
  --yellow:#FFF033;
  --sun:#FCC30F;
  --amber:#F39A38;
  --signal:#E8403A;
  --steel:#58595B;
  --ink:#2C2D2F;
  --grey:#A7A9AC;
  --concrete:#F2F2F0;
  --line:#D9DADB;
  --white:#FFFFFF;

  --horizon:linear-gradient(90deg,var(--yellow) 0%,var(--sun) 28%,var(--amber) 68%,var(--signal) 100%);

  --display:"Barlow Condensed","Arial Narrow","Roboto Condensed",Arial,sans-serif;
  --body:"Barlow","Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --wrap:1160px;
  --gutter:clamp(20px,5vw,48px);

  /* Logo geometry: the logo's own horizon sits 48.8% of its width down */
  --logo-w:clamp(230px,38vw,470px);
  --logo-horizon:calc(var(--logo-w) * .488);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:1.125rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:.2em}
p{margin:0 0 1em;max-width:62ch}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1;margin:0;color:var(--ink);letter-spacing:.005em}
h1{font-size:clamp(2.9rem,7.2vw,5.4rem);line-height:.94;text-wrap:balance}
h2{font-size:clamp(2rem,4.4vw,3rem)}
h3{font-size:1.65rem;font-weight:600}
ul,ol{margin:0;padding:0;list-style:none}

:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible{outline-color:var(--sun)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--white);padding:.75rem 1rem;z-index:100}
.skip:focus{left:0}

/* ---------- Logo (original file, shown unchanged; CSS only trims the empty margin around it) ---------- */
.logo-crop{display:block;position:relative;overflow:hidden;aspect-ratio:1049/1035;width:100%}
.logo-crop img{position:absolute;max-width:none;width:157.39%;left:-28.69%;top:-22.51%;height:auto}

/* ---------- Header ---------- */
.site-header{background:var(--white);border-bottom:1px solid var(--line);position:relative;z-index:20}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand .logo-crop{width:52px;flex:none}
.brand-name{font-family:var(--display);font-weight:700;font-size:1.7rem;letter-spacing:.01em;line-height:1}
.brand-name span{color:var(--steel);font-weight:600}

.nav-toggle{display:none;background:none;border:2px solid var(--ink);border-radius:4px;color:var(--ink);font:600 1rem var(--body);padding:.45rem .8rem;cursor:pointer}
.site-nav ul{display:flex;align-items:center;gap:.4rem}
.site-nav a{display:inline-block;text-decoration:none;font-weight:600;padding:.55rem .8rem;border-bottom:3px solid transparent}
.site-nav a:hover{border-bottom-color:var(--sun)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--signal)}
.site-nav .nav-cta a{background:var(--ink);color:var(--white);border-radius:4px;border-bottom:0;padding:.6rem 1rem;margin-left:.4rem}
.site-nav .nav-cta a:hover{background:var(--steel)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:600 1.05rem var(--body);text-decoration:none;padding:.85rem 1.4rem;border-radius:4px;border:2px solid var(--ink);cursor:pointer;line-height:1.2;min-height:48px}
.btn-solid{background:var(--ink);color:var(--white)}
.btn-solid:hover{background:var(--steel);border-color:var(--steel)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--concrete)}
.on-dark .btn-solid{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.on-dark .btn-solid:hover{background:var(--yellow);border-color:var(--yellow)}
.on-dark .btn-line{border-color:var(--white);color:var(--white)}
.on-dark .btn-line:hover{background:rgba(255,255,255,.12)}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------- Hero: the logo's horizon becomes the page's horizon ---------- */
.hero{position:relative;overflow:hidden}
.hero-band{background:var(--horizon);padding-top:clamp(36px,6vw,64px);padding-bottom:calc(var(--logo-horizon) + 8px)}
.hero-band h1{font-size:clamp(2.8rem,11vw,4.4rem);max-width:12ch}
.hero-ground{padding-block:clamp(28px,4vw,48px) clamp(56px,7vw,88px)}
.hero-ground p{font-size:1.25rem;max-width:34ch;color:var(--steel)}
.hero-logo{position:relative;z-index:2;width:var(--logo-w);margin:calc(var(--logo-horizon) * -1) auto 0}
.hero-logo .logo-crop{width:100%}

@media (min-width:860px){
  .hero-band{padding-bottom:0;min-height:calc(clamp(36px,6vw,64px) + var(--logo-horizon) + 8px)}
  .hero-logo{position:absolute;right:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));top:clamp(36px,6vw,64px);margin:0}
  .hero-band h1{font-size:clamp(2.8rem,5.4vw,4.4rem);max-width:none}
  .hero-band .wrap,.hero-ground .wrap{padding-right:calc(var(--logo-w) + var(--gutter) * 2)}
}

/* One entrance moment: the horizon wipes in once on load */
@media (prefers-reduced-motion:no-preference){
  .hero-band{animation:horizon .9s cubic-bezier(.2,.7,.2,1) both}
  @keyframes horizon{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
}

/* ---------- Sections ---------- */
.section{padding-block:clamp(56px,8vw,96px)}
.section-tint{background:var(--concrete)}
.section-head{margin-bottom:2.2rem}
.section-head p{color:var(--steel);margin:.9rem 0 0}

/* Page heading band on inner pages (echoes the hero horizon) */
.page-head{background:var(--horizon);padding-block:clamp(40px,6vw,72px)}
.page-head h1{font-size:clamp(2.6rem,6vw,4.4rem)}
.page-head p{margin:1rem 0 0;font-size:1.25rem;max-width:36ch}

/* Service rows (home) */
.rule-list{border-top:6px solid var(--sun);border-image:var(--horizon) 1}
.rule-list li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:1rem 2rem;padding-block:1.5rem;border-bottom:1px solid var(--line);align-items:baseline}
.rule-list p{margin:0;color:var(--steel)}
.more{margin-top:1.8rem}

/* Sequence */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;counter-reset:step}
.steps li{counter-increment:step;border-top:4px solid var(--sun);padding-top:1rem}
.steps li::before{content:counter(step);display:block;font-family:var(--display);font-weight:700;font-size:3.4rem;line-height:1;color:var(--ink);margin-bottom:.5rem}
.steps h3{margin-bottom:.4rem}
.steps p{margin:0;color:var(--steel);font-size:1.05rem}

/* Dark contact band */
.contact-band{background:var(--ink);color:var(--white);border-top:6px solid var(--sun);border-image:var(--horizon) 1;padding-block:clamp(56px,8vw,88px)}
.contact-band h2{color:var(--white)}
.contact-band .lead{color:#DADBDC;margin:.9rem 0 0}
.contact-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:2.4rem}
.method{border-left:4px solid var(--sun);padding-left:1.1rem}
.method dt{font-weight:600;color:var(--sun);margin-bottom:.15rem}
.method dd{margin:0}
.method a{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);text-decoration:none;overflow-wrap:anywhere;line-height:1.15}
.method a:hover{text-decoration:underline}
.method small{display:block;color:#C4C5C7;font-size:1rem;margin-top:.3rem}

/* ---------- Services page ---------- */
.service{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:1rem 3rem;padding-block:2.6rem;border-bottom:1px solid var(--line)}
.service:first-child{padding-top:0}
.service h2{font-size:clamp(1.9rem,3.4vw,2.5rem)}
.service p{color:var(--steel)}
.jobs{columns:2;column-gap:2rem;margin-top:1rem}
.jobs li{break-inside:avoid;padding:.25rem 0 .25rem 1.3rem;position:relative}
.jobs li::before{content:"";position:absolute;left:0;top:.85em;width:.6rem;height:.6rem;background:var(--sun)}
.note-box{background:var(--concrete);border-left:6px solid var(--amber);padding:1.4rem 1.6rem;margin-top:3rem}
.note-box p{margin:0 0 1rem}

/* ---------- Contact page ---------- */
.contact-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3rem}
.contact-list{display:grid;gap:2rem;align-content:start}
.contact-item{border-top:4px solid var(--sun);padding-top:1rem}
.contact-item h2{font-size:1.5rem;font-weight:600;margin-bottom:.2rem}
.contact-item a.big{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.4rem);text-decoration:none;line-height:1.1;overflow-wrap:anywhere;display:inline-block}
.contact-item a.big:hover{text-decoration:underline}
.contact-item p{margin:.4rem 0 0;color:var(--steel);font-size:1.05rem}

.composer{background:var(--concrete);border:1px solid var(--line);border-radius:6px;padding:clamp(1.3rem,3vw,2rem)}
.composer h2{font-size:2rem;margin-bottom:.4rem}
.composer .hint{color:var(--steel);font-size:1rem;margin-bottom:1.4rem}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;margin-bottom:.3rem}
.field input,.field select,.field textarea{width:100%;font:400 1.05rem var(--body);color:var(--ink);background:var(--white);border:2px solid var(--steel);border-radius:4px;padding:.7rem .8rem;min-height:48px}
.field textarea{min-height:130px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--sun);outline-offset:1px;border-color:var(--ink)}
.composer .btn-row{margin-top:1.4rem}
.privacy{font-size:.98rem;color:var(--steel);margin:1.2rem 0 0}

/* ---------- 404 ---------- */
.lost{padding-block:clamp(64px,10vw,120px)}
.lost .code{font-family:var(--display);font-weight:700;font-size:clamp(6rem,22vw,13rem);line-height:.85;background:none;color:var(--ink);border-bottom:10px solid var(--sun);border-image:var(--horizon) 1;display:inline-block;padding-bottom:.05em;margin-bottom:1.6rem}
.lost h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--concrete);border-top:1px solid var(--line);padding-block:2.6rem 2rem;font-size:1rem}
.footer-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:2rem}
.site-footer h2{font-family:var(--body);font-size:1rem;font-weight:600;margin-bottom:.5rem}
.site-footer li{margin-bottom:.3rem}
.site-footer p{margin:0 0 .5rem;color:var(--steel)}
.footer-brand .logo-crop{width:84px;margin-bottom:.8rem}
.legal{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line);color:var(--steel);font-size:.95rem}
.legal p{margin:0;max-width:none}

/* ---------- Responsive ---------- */
@media (max-width:859px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-methods{grid-template-columns:1fr}
  .contact-layout{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:719px){
  .rule-list li,.service{grid-template-columns:1fr}
  .jobs{columns:1}
  .steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}

  .js .nav-toggle{display:inline-block}
  .js .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--line);padding:.6rem var(--gutter) 1.2rem}
  .js .site-nav.is-open{display:block}
  .js .site-nav ul{flex-direction:column;align-items:stretch;gap:.2rem}
  .js .site-nav a{display:block;padding:.8rem .2rem}
  .js .site-nav .nav-cta a{margin:.6rem 0 0;text-align:center}
  .site-nav ul{flex-wrap:wrap;justify-content:flex-end}
  .site-header .wrap{flex-wrap:wrap;padding-block:.6rem}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
@media print{.site-nav,.nav-toggle,.skip{display:none}.hero-band,.page-head{background:none}}