/* ==========================================================================
   ECOWASH — reset, typography, layout primitives
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ew-bg);
  color:var(--ew-body);
  font-family:var(--ew-font-ui);
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{max-width:100%;height:auto;display:block}

a{color:var(--ew-primary);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ew-primary-hover)}

:focus-visible{outline:2px solid var(--ew-primary);outline-offset:3px;border-radius:4px}

button,input,select,textarea{font:inherit;color:inherit}

/* --------------------------------------------------------------------------
   Headings. Aboreto for display levels, Montserrat below.
   Aboreto ships a single weight — never ask for bold, the browser fakes it.
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{margin:0 0 var(--sp-3);color:var(--ew-ink);text-wrap:balance}

.ew-h1,h1{
  font-family:var(--ew-font-display);font-weight:400;
  font-size:clamp(2.3rem,5.8vw,4rem);line-height:1.06;letter-spacing:.012em;
}
.ew-h2,h2{
  font-family:var(--ew-font-display);font-weight:400;
  font-size:clamp(1.75rem,4.2vw,2.7rem);line-height:1.14;letter-spacing:.014em;
}
.ew-h3,h3{
  font-family:var(--ew-font-ui);font-weight:600;
  font-size:1.26rem;line-height:1.32;letter-spacing:-.02em;
}
.ew-h4,h4{
  font-family:var(--ew-font-ui);font-weight:600;
  font-size:1.08rem;line-height:1.32;letter-spacing:-.015em;
}
h5,h6{font-family:var(--ew-font-ui);font-weight:600;font-size:1rem;line-height:1.4}

p{margin:0 0 var(--sp-4)}
p:last-child{margin-bottom:0}

.ew-lead{
  font-size:1.1rem;line-height:1.62;font-weight:300;
  color:var(--ew-body);max-width:56ch;margin:0 0 var(--sp-5);
}
.ew-body{font-size:1rem;line-height:1.7;max-width:66ch}
.ew-small{font-size:.78rem;line-height:1.6;color:var(--ew-muted);margin:0}

.ew-eyebrow{
  display:block;font-size:.69rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--ew-primary);margin:0 0 var(--sp-3);
}

strong,b{font-weight:600;color:var(--ew-ink)}
blockquote{margin:0 0 var(--sp-4);padding-left:var(--sp-4);border-left:3px solid var(--ew-primary);color:var(--ew-ink)}
hr{border:0;border-top:1px solid var(--ew-line);margin:var(--sp-7) 0}
code,kbd,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.ew-container{
  width:100%;max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;padding-inline:var(--gutter);
}
.ew-container--narrow{max-width:calc(var(--container-narrow) + var(--gutter) * 2)}

.ew-section{padding-block:var(--section-y)}
.ew-section--tight{padding-block:calc(var(--section-y) * .62)}
.ew-section--alt{background:var(--ew-bg-alt)}

/* Dark band: brand navy, droplet pattern, aurora wash. Rounded so it reads
   as a slab rather than a full-bleed stripe. */
.ew-section--dark{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--ew-bg-dark);color:#BCD4E8;
  border-radius:var(--r-xl);
}
.ew-section--dark::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--ew-pattern);background-size:118px;opacity:.05;
}
.ew-section--dark::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(680px 420px at 88% 0%,rgba(3,116,228,.42),transparent 64%),
    radial-gradient(460px 320px at 4% 100%,rgba(122,186,59,.18),transparent 66%);
}
.ew-section--dark h1,.ew-section--dark h2,.ew-section--dark h3,
.ew-section--dark h4,.ew-section--dark .ew-h1,.ew-section--dark .ew-h2{color:#fff}
.ew-section--dark .ew-eyebrow{color:var(--ew-sorgente)}
.ew-section--dark .ew-lead,.ew-section--dark p{color:#BCD4E8}
.ew-section--dark a{color:var(--ew-sorgente)}

.ew-section__head{margin-bottom:var(--sp-7);max-width:64ch}
.ew-section__head--center{margin-inline:auto;text-align:center}

.ew-grid{display:grid;gap:var(--sp-5);grid-template-columns:1fr}
/* Fixed column counts rather than auto-fit: the content sets are six items
   long, and auto-fit leaves an orphan on the last row at desktop widths. */
@media (min-width:600px){
  .ew-grid--2,.ew-grid--3,.ew-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:920px){
  .ew-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ew-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Split: text one side, media the other. Alternates on wide screens. */
.ew-split{display:grid;gap:var(--sp-6);align-items:center}
@media (min-width:900px){
  .ew-split{grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:stretch}
  .ew-split--flip > *:first-child{order:2}
  /* The photograph matches the height of the copy beside it. With a fixed
     aspect ratio it stopped short and left a hole under itself whenever the
     text ran longer than 4:3. */
  .ew-split > .ew-media{aspect-ratio:auto;height:100%;min-height:320px}
  .ew-split > div{align-self:center}
}

.ew-stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.ew-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}

.ew-filo{height:3px;border-radius:2px;background:var(--ew-grad-filo);width:120px}

/* Media placeholder — used until real photography arrives. Honest about it. */
.ew-media{
  border-radius:var(--r-lg);overflow:hidden;background:var(--ew-bg-alt);
  aspect-ratio:4/3;display:grid;place-items:center;position:relative;
}
.ew-media img{width:100%;height:100%;object-fit:cover}
.ew-media--wide{aspect-ratio:16/9}
.ew-media--empty{
  background:
    linear-gradient(135deg,rgba(3,116,228,.06),rgba(122,186,59,.05)),
    var(--ew-bg-alt);
}
.ew-media--empty::after{
  content:"";position:absolute;inset:0;
  background-image:var(--ew-mark);background-repeat:no-repeat;
  background-position:center;background-size:min(34%,120px);opacity:.14;
}

.ew-skip{
  position:absolute;left:-9999px;top:0;z-index:var(--z-modal);
  background:var(--ew-primary);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;
}
.ew-skip:focus{left:0}

.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;
  padding:0;position:absolute;width:1px;white-space:nowrap;
}

/* --------------------------------------------------------------------------
   Editor content (post/page body)
   -------------------------------------------------------------------------- */
.ew-prose{max-width:70ch;font-size:1rem;line-height:1.75}
.ew-prose > * + *{margin-top:var(--sp-4)}
.ew-prose h2{margin-top:var(--sp-7)}
.ew-prose h3{margin-top:var(--sp-6)}
.ew-prose ul,.ew-prose ol{padding-left:1.3em;margin-block:0}
.ew-prose li + li{margin-top:var(--sp-2)}
.ew-prose img{border-radius:var(--r-md)}
.ew-prose table{width:100%;border-collapse:collapse}
.ew-prose th,.ew-prose td{padding:10px 14px;border-bottom:1px solid var(--ew-line);text-align:left}

.ew-wp-nav{display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-7)}