/* Veraison Construction preview. One motif: the berry (a circle). The page ripens from pale green to wine. */
@font-face{font-family:"Albert Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/albert-sans-400.woff2) format("woff2")}
@font-face{font-family:"Albert Sans";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/albert-sans-500.woff2) format("woff2")}
@font-face{font-family:"Albert Sans";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/albert-sans-600.woff2) format("woff2")}

:root{
  --pale:#eef1dc; --green:#c9d97a; --blush:#e6b4b0; --wine:#5a1127; --deep:#380a17;
  --ink:#1b1a16; --light:#faf1f2;
  --step-small:1rem;
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.375rem,1.1rem + 1vw,1.875rem);
  --step-head:clamp(2rem,1.2rem + 3vw,3.75rem);
  --step-display:clamp(2.25rem,9.4vw,3.5rem);
  --gap:clamp(20px,2.4vw,32px);
  --pad:clamp(88px,11vw,170px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 var(--step-body)/1.55 "Albert Sans",system-ui,sans-serif;background:var(--pale);color:var(--ink);overflow-x:hidden}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-underline-offset:.2em}
::selection{background:var(--wine);color:var(--light)}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--wine);color:var(--light);padding:12px 18px;z-index:50}
.skip:focus{left:8px}
.wrap{padding-inline:var(--gap)}

/* fields: the page ripens */
.on-pale{--bg:var(--pale);--fg:var(--ink);--soft:#40452f;--b1:var(--wine);--b1i:var(--light);--b2:var(--green);--b2i:var(--ink)}
.on-green{--bg:var(--green);--fg:var(--ink);--soft:#2b3315;--b1:var(--wine);--b1i:var(--light);--b2:var(--pale);--b2i:var(--ink)}
.on-blush{--bg:var(--blush);--fg:var(--ink);--soft:#43211f;--b1:var(--wine);--b1i:var(--light);--b2:var(--pale);--b2i:var(--ink)}
.on-wine{--bg:var(--wine);--fg:var(--light);--soft:#ecd8d2;--b1:var(--pale);--b1i:var(--wine);--b2:var(--blush);--b2i:var(--ink)}
.on-deep{--bg:var(--deep);--fg:var(--light);--soft:#e6d0ca;--b1:var(--pale);--b1i:var(--deep);--b2:var(--blush);--b2i:var(--ink)}
.on-pale,.on-green,.on-blush,.on-wine,.on-deep{background:var(--bg);color:var(--fg)}
.soft{color:var(--soft)}

/* type */
h1{font-size:var(--step-display);font-weight:600;line-height:1;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:var(--step-head);font-weight:600;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.lead{font-size:var(--step-lead);line-height:1.3;letter-spacing:-.015em;font-weight:500;max-width:30ch}
.small{font-size:var(--step-small);line-height:1.45}
.measure{max-width:52ch}

/* buttons: one shape, fully round */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;border:0;font:600 var(--step-body)/1 "Albert Sans",sans-serif;text-decoration:none;cursor:pointer;background:var(--b1);color:var(--b1i);transition:transform .18s var(--ease),background-color .18s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn-2{background:var(--b2);color:var(--b2i)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* header */
.site-header{position:relative;z-index:20}
.bar{display:flex;align-items:center;gap:var(--gap);min-height:84px}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:600;font-size:1.25rem;letter-spacing:-.02em;text-decoration:none}
.brand i{width:22px;height:22px;border-radius:50%;background:var(--b1);flex:none}
.nav{margin-left:auto}
.nav ul{display:flex;gap:6px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;text-decoration:none;font-weight:500;transition:background-color .18s}
.nav a:hover,.nav a[aria-current]{background:var(--b2);color:var(--b2i)}
.bar .btn{min-height:44px;padding:0 22px}
.menu-btn{display:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--b1);padding:0;cursor:pointer;margin-left:auto;position:relative}
.menu-btn span{position:absolute;left:12px;right:12px;height:2px;background:var(--b1i);transition:transform .2s var(--ease),opacity .2s}
.menu-btn span:nth-child(1){top:15px}.menu-btn span:nth-child(2){top:21px}.menu-btn span:nth-child(3){top:27px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* hero */
.hero{position:relative;overflow:hidden}
.hero-grid{position:relative;min-height:min(86vh,820px);display:flex;align-items:center;padding-block:40px 80px}
.hero-copy{position:relative;z-index:2;max-width:51vw;display:grid;gap:28px;justify-items:start}
.hero-copy .lead{max-width:34ch}
.berry{position:absolute;right:-9vw;top:50%;width:min(56vw,860px);aspect-ratio:1;transform:translateY(-50%);border-radius:50%;overflow:hidden;background:var(--green)}
.berry img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .9s var(--ease),transform 12s linear}
.berry img+img{opacity:0}
.js .berry img{will-change:opacity}
.berry[data-stage="1"] img:nth-child(1),.berry[data-stage="2"] img:nth-child(1){opacity:0}
.berry[data-stage="1"] img:nth-child(2){opacity:1}
.berry[data-stage="2"] img:nth-child(3){opacity:1}
.berry[data-stage="2"] img:nth-child(2){opacity:0}
.stage{display:none;gap:10px;flex-wrap:wrap;align-items:center}
.js .stage{display:flex}
.stage button{min-height:44px;padding:0 22px;border:0;border-radius:999px;font:500 var(--step-body)/1 "Albert Sans",sans-serif;background:var(--b2);color:var(--b2i);cursor:pointer;transition:background-color .2s,color .2s,transform .18s var(--ease)}
.stage button:active{transform:scale(.96)}
.stage button[aria-pressed="true"]{background:var(--b1);color:var(--b1i)}
.stage-cap{min-height:1.5em}

/* sections */
.sec{padding-block:var(--pad)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap) calc(var(--gap)*2);align-items:center}
.stack{display:grid;gap:28px;justify-items:start}
.disc{border-radius:50%;overflow:hidden;aspect-ratio:1;background:var(--blush)}
.disc img{width:100%;height:100%;object-fit:cover}
.fig-cap{margin-top:14px}

/* service list: the berry is the bullet */
.list-head{display:flex;justify-content:space-between;align-items:end;gap:var(--gap);margin-bottom:clamp(36px,5vw,72px)}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:0 calc(var(--gap)*2)}
.svc li{display:flex;align-items:center;gap:20px;min-height:44px;padding-block:clamp(14px,1.6vw,22px);font-size:var(--step-lead);line-height:1.15;font-weight:600;letter-spacing:-.02em}
.svc li::before{content:"";flex:none;width:.7em;height:.7em;border-radius:50%;background:var(--b1);transition:transform .3s var(--ease)}
.svc li:hover::before{transform:scale(1.5)}
.svc-one{grid-template-columns:1fr}

/* three stages */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.trio .disc{aspect-ratio:1}
.trio figure{display:grid;gap:14px}

/* public record */
.record{font-size:var(--step-lead);line-height:1.25;font-weight:500;letter-spacing:-.015em;max-width:24ch}

/* closing band */
.close{overflow:hidden}
.close .split{align-items:center}
.close .disc{width:min(100%,520px);justify-self:end}

/* contact */
.reach a{display:block;width:fit-content;font-size:var(--step-lead);font-weight:600;letter-spacing:-.02em;line-height:1.2;padding-block:12px;min-height:44px}
.reach{display:grid;gap:10px}
.form-card{background:var(--pale);color:var(--ink);padding:clamp(24px,3.4vw,48px);display:grid;gap:18px;--soft:#40452f;--b1:var(--wine);--b1i:var(--light)}
.notice{background:var(--green);padding:16px 18px;font-size:var(--step-small);line-height:1.45}
.form-card h2{font-size:var(--step-lead);letter-spacing:-.02em}
form{display:grid;gap:8px}
label{font-weight:500;margin-top:8px}
input,textarea{font:400 var(--step-body)/1.4 "Albert Sans",sans-serif;min-height:52px;width:100%;padding:12px 16px;border:0;border-radius:0;background:#dfe5c3;color:var(--ink)}
textarea{min-height:120px;resize:vertical}
form .btn{margin-top:14px;width:100%}
.demo-result{background:var(--blush);padding:16px 18px}

/* footer */
.site-footer{padding-top:clamp(72px,8vw,120px);padding-bottom:36px}
.foot-name{font-size:8.4vw;font-weight:600;line-height:.95;letter-spacing:-.045em;margin-bottom:clamp(40px,5vw,72px);white-space:nowrap}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--gap) calc(var(--gap)*2)}
.foot-grid a{display:inline-flex;align-items:center;min-height:44px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 24px}
.credits{margin-top:48px;display:grid;gap:8px;color:var(--soft);max-width:70ch}
.credits a{display:inline;min-height:0}
.disclaimer{margin-top:28px;font-weight:500}

/* motion: reveals always end visible */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .berry.drift img{transform:scale(1.08)}

@media (max-width:900px){
  .nav,.bar>.btn{display:none}
  .menu-btn{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--wine);color:var(--light);padding:12px var(--gap) 20px;margin:0}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav a{min-height:52px;font-size:var(--step-lead);padding:0;background:none!important;color:inherit!important}
  .hero-grid{display:grid;min-height:0;padding-block:20px 0;gap:36px}
  .hero-copy{max-width:none}
  h1{font-size:var(--step-display)}
  .berry{position:relative;right:auto;top:auto;transform:none;width:96vw;margin-left:auto;margin-right:-12vw;margin-bottom:56px}
  .split,.foot-grid{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr 1fr 1fr;gap:10px}
  .trio .small{font-size:var(--step-small)}
  .close .disc{justify-self:start;width:78vw}
  .foot-name{font-size:14.5vw;white-space:normal}
}
@media (max-width:600px){
  .svc{grid-template-columns:1fr}
  .list-head{flex-direction:column;align-items:start}
}
@media (min-width:901px){
  h1{font-size:5.6vw}
  .page-head h1{font-size:5.6vw}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}