/* webwerks360.cloud — one stylesheet, no build step. */

:root{
  --paper:#ffffff;
  --paper-2:#f1f1ee;
  --ink:#111216;
  --muted:#4a4d55;
  --accent:#c03d08;
  --accent-on-dark:#f2762f;
  --dark:#0d1a2b;
  --dark-2:#16253a;
  --dark-muted:#a4a7ad;

  --s-small:0.875rem;                                  /* 14 */
  --s-body:1.125rem;                                   /* 18 */
  --s-lead:clamp(1.125rem,1rem + .4vw,1.25rem);        /* 18–20 */
  --s-head:clamp(1.75rem,1.1rem + 2vw,2.5rem);         /* 28–40 */
  --s-fig:clamp(2rem,4.2vw,3.75rem);                   /* 32–60 */
  --s-display:clamp(3.25rem,9.6vw,9.25rem);            /* 52–148 */

  --pad:clamp(20px,4vw,56px);
  --gap:clamp(52px,5.6vw,84px);
  --brand-w:#ffffff;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--s-body);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}

.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--pad);}

.skip{position:absolute;left:-9999px;}
.skip:focus{left:var(--pad);top:12px;z-index:20;background:var(--ink);color:var(--paper);padding:10px 16px;text-decoration:none;}

:focus-visible{outline:2px solid var(--accent-on-dark);outline-offset:3px;}

/* ---------- header ---------- */

.top{
  position:fixed;inset:0 0 auto;z-index:10;
  background:var(--dark);color:#fff;
  transition:background-color .3s ease,color .3s ease;
}
.top.on-light{background:var(--paper);color:var(--ink);}
.top__row{display:flex;align-items:center;gap:clamp(16px,3vw,40px);min-height:68px;}

.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;}
.brand__mark{width:30px;height:30px;flex:none;}
.brand__name{
  font-family:"Zodiak",Georgia,serif;font-weight:400;font-size:1.25rem;
  letter-spacing:-.01em;white-space:nowrap;
}
.brand__tld{color:#8a8d95;font-size:.86em;}

.top__nav{display:flex;gap:clamp(14px,2.2vw,28px);}
.top__nav a{text-decoration:none;font-size:var(--s-small);font-weight:500;color:var(--dark-muted);padding:8px 0;}
.top__nav a:hover{color:#fff;}
.top.on-light .top__nav a{color:var(--muted);}
.top.on-light .top__nav a:hover{color:var(--ink);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 26px;
  background:var(--accent);color:#fff;
  font-size:var(--s-small);font-weight:600;text-decoration:none;
  transition:transform .18s ease,background-color .18s ease;
}
.btn:hover{background:#a23306;transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn--sm{min-height:44px;padding:0 18px;}
.link{
  font-size:var(--s-small);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
}
.link:hover{color:var(--accent-on-dark);}

/* ---------- hero ---------- */

.hero{
  background:var(--dark);color:#fff;
  min-height:min(86svh,700px);
  display:grid;grid-template-rows:1fr auto;
  padding:96px 0 0;
}
.hero__inner{width:100%;align-self:center;padding-bottom:clamp(28px,3.4vw,48px);}
h1{
  margin:0;
  font-family:"Zodiak",Georgia,serif;font-weight:300;
  font-size:var(--s-display);line-height:.89;letter-spacing:-.035em;
}
.lede{
  margin:clamp(18px,2vw,26px) 0 0;
  max-width:46ch;font-size:var(--s-lead);line-height:1.45;color:#c3c6cd;
}
.hero__actions{display:flex;align-items:center;gap:clamp(18px,3vw,32px);flex-wrap:wrap;margin-top:clamp(20px,2.4vw,30px);}

.hero__status{background:var(--dark-2);}
.hero__status-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px 24px;padding-block:13px;
  font-size:var(--s-small);color:var(--dark-muted);
}
.hero__status-row span:nth-child(2){text-align:center;}
.hero__status-row span:nth-child(3){text-align:right;}

/* ---------- showcase ---------- */

.showcase{margin:0;padding-block:clamp(26px,3vw,44px);background:var(--paper);}
.showcase__frame{position:relative;aspect-ratio:1384/875;background:var(--paper-2);overflow:hidden;}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;pointer-events:none;}
.slide.is-active{opacity:1;pointer-events:auto;}
.slide img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.showcase__bar{display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(16px,3vw,40px);margin-top:12px;}
.showcase__caps{min-height:2.9em;}
.showcase__cap{margin:0;max-width:76ch;font-size:var(--s-small);line-height:1.45;color:var(--muted);}
.showcase__cap a{color:var(--ink);}
.showcase__dots{display:flex;gap:2px;flex:none;margin-top:-9px;}
.dot{width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;position:relative;}
.dot::before{content:"";position:absolute;inset:11px;background:#c9c8c3;transition:background-color .2s ease;}
.dot:hover::before{background:var(--muted);}
.dot.is-active::before{background:var(--ink);}
.dot:focus-visible{outline:2px solid var(--accent);outline-offset:0;}

/* ---------- sections ---------- */

section{padding-block:var(--gap);}
[id]{scroll-margin-top:74px;}
.section-head{
  margin:0 0 clamp(18px,2.2vw,28px);
  font-family:"Zodiak",Georgia,serif;font-weight:300;
  font-size:var(--s-head);line-height:1.05;letter-spacing:-.02em;
}

/* ---------- services ---------- */

.services{background:var(--paper-2);}
.services__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
}
.service h3{
  margin:0 0 10px;
  font-family:"Zodiak",Georgia,serif;font-weight:300;
  font-size:var(--s-fig);line-height:1;letter-spacing:-.025em;
}
.service p{margin:0;max-width:36ch;color:var(--muted);}

/* ---------- numbers ---------- */

.numbers__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.4vw,34px);
}
.numbers__grid li{display:flex;flex-direction:column;gap:6px;}
.numbers__grid strong{
  font-family:"Zodiak",Georgia,serif;font-weight:300;
  font-size:var(--s-fig);line-height:.95;letter-spacing:-.03em;
}
.numbers__grid span{color:var(--muted);font-size:var(--s-small);line-height:1.45;max-width:26ch;}

/* ---------- case study ---------- */

.case{background:var(--paper-2);padding-bottom:clamp(40px,4.4vw,64px);}
.case__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,3vw,44px);align-items:start;}
.case__name{
  margin:0 0 16px;
  font-family:"Zodiak",Georgia,serif;font-weight:300;
  font-size:clamp(1.625rem,2.6vw,2.125rem);line-height:1.1;letter-spacing:-.02em;
}
.case__lede{margin:0 0 18px;max-width:40ch;font-size:var(--s-lead);}
.case__points{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px;}
.case__points li{position:relative;padding-left:22px;color:var(--muted);max-width:44ch;}
.case__points li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:8px;height:8px;background:var(--accent);
}
.case__note{margin:0;font-size:var(--s-small);color:var(--muted);}
.case__note a{color:var(--ink);}
.case__shot{margin:0;}
.case__shot img{width:100%;height:auto;}
.case__shot figcaption{margin-top:12px;font-size:var(--s-small);color:var(--muted);}

.also{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(20px,4vw,52px);align-items:center;
  margin:clamp(28px,3.2vw,48px) 0 0;
}
.also img{width:100%;height:auto;}
.also h3{
  margin:0 0 10px;
  font-family:"Zodiak",Georgia,serif;font-weight:300;
  font-size:clamp(1.5rem,2.2vw,1.875rem);line-height:1.1;letter-spacing:-.02em;
}
.also p{margin:0;max-width:46ch;color:var(--muted);}

/* ---------- pricing ---------- */

.pricing{background:var(--dark);color:#fff;}
.pricing .section-head{color:#fff;}
.pricing__rows{list-style:none;margin:0;padding:0;}
.pricing__rows li{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:6px 32px;padding-block:clamp(12px,1.5vw,20px);
}
.pricing__name{
  font-family:"Zodiak",Georgia,serif;font-weight:300;
  font-size:var(--s-head);line-height:1.1;letter-spacing:-.02em;
}
.pricing__price{
  font-family:"Zodiak",Georgia,serif;font-weight:300;
  font-size:var(--s-fig);line-height:1;letter-spacing:-.03em;
  color:var(--accent-on-dark);text-align:right;font-variant-numeric:tabular-nums;
}
.pricing__what{grid-column:1;color:var(--dark-muted);max-width:52ch;}
.pricing__price--note{font-size:var(--s-head);line-height:1.15;letter-spacing:-.02em;padding-top:4px;}
.pricing__note{
  margin:clamp(20px,2.4vw,32px) 0 0;max-width:56ch;
  color:#c3c6cd;font-size:var(--s-body);line-height:1.55;
}

/* ---------- process ---------- */

.process__steps{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(14px,1.6vw,20px);
  max-width:88ch;
}
.process__step{font-size:clamp(1.0625rem,1.45vw,1.375rem);line-height:1.5;color:var(--muted);}
.process h3{
  display:inline;margin:0;
  font-family:"Zodiak",Georgia,serif;font-weight:400;
  font-size:1.18em;letter-spacing:-.015em;line-height:1.2;color:var(--ink);
}
.process h3::after{content:" — \2009";}
.process p{display:inline;margin:0;color:inherit;}

/* ---------- about ---------- */

.about{background:var(--paper-2);}
.about__cols{
  columns:2;column-gap:clamp(24px,4vw,56px);
  font-family:"Zodiak",Georgia,serif;font-weight:300;
  font-size:clamp(1.125rem,1.45vw,1.5rem);
  line-height:1.45;letter-spacing:-.005em;hyphens:auto;
}
.about__cols p{margin:0;}
.about__cols strong{font-weight:500;color:var(--ink);}

/* ---------- contact ---------- */

.contact{background:var(--dark);color:#fff;padding-bottom:clamp(56px,6vw,88px);}
.contact .section-head{color:#fff;}
.contact__grid{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(24px,3.6vw,56px);align-items:start;
}
.contact__lede{margin:0;max-width:36ch;color:#c3c6cd;font-size:var(--s-lead);line-height:1.45;}
.contact__alt{margin:clamp(16px,2vw,24px) 0 0;font-size:var(--s-small);color:var(--dark-muted);line-height:2;}
.contact__points{
  list-style:none;margin:clamp(16px,2vw,24px) 0 0;padding:0;
  display:grid;gap:7px;font-size:var(--s-small);color:#c3c6cd;
}
.contact__points li{position:relative;padding-left:20px;}
.contact__points li::before{
  content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;background:var(--accent-on-dark);
}
.contact__alt a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);}
.contact__alt a:hover{border-color:var(--accent-on-dark);}

.cform{display:grid;gap:clamp(14px,1.7vw,20px);}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.7vw,20px);}
.cform__field,.cform__hp{margin:0;}
.cform label{
  display:block;margin-bottom:8px;
  font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--dark-muted);
}
.cform label span{text-transform:none;letter-spacing:0;font-weight:400;color:#74777e;}
.cform input,.cform select,.cform textarea{
  width:100%;padding:10px 0;
  background:transparent;color:#fff;
  border:0;border-bottom:1px solid #3a3d44;border-radius:0;
  font-family:inherit;font-size:var(--s-body);line-height:1.4;
  transition:border-color .2s ease;
}
.cform textarea{min-height:92px;resize:vertical;padding-top:4px;}
.cform select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a4a7ad' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;padding-right:26px;
}
.cform select option{background:var(--paper);color:var(--ink);}
.cform input::placeholder,.cform textarea::placeholder{color:#74777e;}
.cform input:focus-visible,.cform select:focus-visible,.cform textarea:focus-visible{
  outline:none;border-color:var(--accent-on-dark);
}
.cform input[aria-invalid="true"],.cform textarea[aria-invalid="true"]{border-color:#ff9a6e;}
.cform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.cform__foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.cform__status{margin:0;font-size:var(--s-small);color:var(--dark-muted);}
.cform__status--ok{color:#8ed6a0;}
.cform__status--err{color:#ff9a6e;}
.cform .btn:disabled{opacity:.6;transform:none;cursor:default;}

/* ---------- footer ---------- */

.foot{
  background:var(--paper);color:var(--ink);
  padding-block:clamp(36px,4.4vw,60px) clamp(16px,2vw,24px);
}
.foot__top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px 48px;flex-wrap:wrap;}
.foot__call{margin:0;font-size:var(--s-body);line-height:1.75;color:var(--muted);}
.foot__call a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(17,18,22,.25);}
.foot__call a:hover{border-color:var(--accent);}
.foot__addr{margin:0;font-size:var(--s-small);line-height:1.8;color:var(--muted);text-align:right;}
.foot__place{color:var(--ink);font-weight:500;}
.foot__word{
  margin:clamp(18px,2.6vw,34px) 0 0;
  font-family:"Zodiak",Georgia,serif;font-weight:300;
  font-size:clamp(1.9rem,9.2vw,8.25rem);line-height:.86;letter-spacing:-.035em;
  white-space:nowrap;
}
.foot__word span{color:#bfc1c6;}
.foot__credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.foot__credit a:hover{color:var(--ink);}

.foot__base{
  display:flex;justify-content:space-between;gap:8px 32px;flex-wrap:wrap;
  margin-top:clamp(12px,1.6vw,18px);
  font-size:var(--s-small);color:var(--muted);
}

/* ---------- motion ---------- */

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .slide{transition:none;}
  .btn,.top{transition:none;}
}

/* ---------- small screens ---------- */

@media (max-width:900px){
  .services__list{grid-template-columns:1fr;gap:32px;}
  .service p{max-width:52ch;}
  .numbers__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px;}
  .case__grid{grid-template-columns:1fr;}
  .also{grid-template-columns:1fr;gap:18px;}
  .process__step{max-width:none;}
  .process__steps{max-width:none;}
  .about__cols{columns:1;font-size:1.375rem;}
  .pricing__rows li{grid-template-columns:1fr;gap:4px;}
  .pricing__price{text-align:left;}
  .pricing__what{grid-column:1;}
}

@media (max-width:640px){
  .hero{min-height:auto;grid-template-rows:auto auto;padding-top:104px;padding-bottom:0;}
  h1{font-size:clamp(2.75rem,12.5vw,4.5rem);}
  .lede{margin-top:20px;}
  .hero__actions{gap:20px;margin-top:26px;}
  .btn{width:100%;}
  .btn--sm{width:auto;}
  .hero__status-row{grid-template-columns:1fr;gap:4px;padding-block:16px;}
  .hero__status-row span:nth-child(2),.hero__status-row span:nth-child(3){text-align:left;}
  .top__nav{display:none;}
  .top__row{min-height:64px;}
  .brand__name{font-size:1.0625rem;}
  .brand__mark{width:26px;height:26px;}
  .showcase__bar{flex-direction:column;gap:10px;}
  .showcase__dots{margin-top:0;}
  .contact__grid{grid-template-columns:1fr;gap:28px;}
  .cform__row{grid-template-columns:1fr;gap:18px;}
  .cform__foot{gap:14px;}
  .cform__foot .btn{width:100%;}
  .foot__top{gap:18px;}
  .foot__addr{text-align:left;}
}

@media print{
  .top,.skip{display:none;}
  body{background:#fff;color:#000;font-size:11pt;}
  .hero,.pricing,.foot{background:#fff;color:#000;}
  .hero{min-height:auto;padding-block:0 24pt;}
  .hero__status,.hero__status-row{background:#fff;color:#333;}
  .lede,.pricing__what,.pricing__note,.hero__status-row{color:#333;}
  .pricing__price{color:#000;}
  section{padding-block:24pt;break-inside:avoid;}
  .contact__alt a{color:#333;}
  .foot__base,.foot__call,.foot__addr{color:#333;}
  .reveal{opacity:1;transform:none;}
}