/* Ripple studio site. Shared system for /, /offer/, /work/, /terms/, /privacy/.
   (Concept previews and /studio/ still use the older site.css, which is left alone.) */

:root{
  --sky:#DCE9F5;
  --sky-2:#C9DDF0;
  --peach:#F9E4D4;
  --peach-2:#F3D3BC;
  --paper:#FBF8F3;
  --paper-2:#F4EEE5;
  --ink:#1B2631;
  --ink-2:#36434F;
  --muted:#4F5B66;
  --line:rgba(27,38,49,.16);
  --line-2:rgba(27,38,49,.28);
  --coral:#F65324;
  --coral-ink:#B23A15;
  --coral-btn:#C2401A;
  --coral-btn-hover:#A93612;
  --night:#16212B;
  --night-2:#223140;
  --night-text:#E9EEF3;
  --night-muted:#B5C2CE;

  --serif:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap:1180px;
  --gutter:clamp(20px, 4vw, 40px);
  --head-h:72px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --radius:6px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--head-h) + 16px); background:var(--sky)}
html,body{overflow-x:clip}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
@media (min-width:900px){ body{font-size:1.125rem} }
img,video{max-width:100%; height:auto; display:block}
a{color:inherit}
p,h1,h2,h3,h4,ul,ol,dl,dd,figure{margin:0}
ul[role=list],ol[role=list]{list-style:none; padding:0}
h1,h2,h3{font-family:var(--serif); font-weight:420; letter-spacing:-.008em; line-height:1.1}
h1{font-size:clamp(2.35rem, 5.2vw, 4.25rem); letter-spacing:-.012em; line-height:1.06; font-weight:400}
h2{font-size:clamp(1.85rem, 3.4vw, 2.75rem)}
h3{font-size:clamp(1.3rem, 1.9vw, 1.55rem); line-height:1.2; font-variation-settings:'opsz' 36}
strong{font-weight:600}
em{font-style:italic}
::selection{background:var(--peach-2); color:var(--ink)}

:focus-visible{outline:3px solid var(--coral-btn); outline-offset:3px; border-radius:2px}
.on-night :focus-visible{outline-color:#FFB596}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.prose{max-width:38rem}
.prose > * + *{margin-top:1em}
.lead{font-size:clamp(1.125rem, 1.5vw, 1.3rem); line-height:1.55; color:var(--ink-2); max-width:36rem}
.muted{color:var(--muted)}
.small{font-size:.9375rem; line-height:1.55}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.skip{position:absolute; left:12px; top:-60px; z-index:100; padding:12px 18px; background:var(--ink); color:#fff; border-radius:var(--radius); font-weight:600; text-decoration:none}
.skip:focus{top:12px}

/* ---------- links + buttons ---------- */
.link{color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.22em; text-decoration-color:var(--line-2); transition:text-decoration-color .2s var(--ease)}
.link:hover{text-decoration-color:var(--coral)}
.link-arrow{display:inline-flex; align-items:center; gap:.45em; font-weight:600; text-decoration:none; color:var(--ink); border-bottom:1.5px solid var(--coral); padding-bottom:2px}
.link-arrow svg{width:1em; height:1em; transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(3px)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 24px; border-radius:var(--radius);
  font:600 1rem/1 var(--sans); text-decoration:none; cursor:pointer;
  border:1.5px solid transparent; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn svg{width:18px; height:18px; flex:none; transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:var(--coral-btn); color:#fff}
.btn--primary:hover{background:var(--coral-btn-hover)}
.btn--ink{background:var(--ink); color:#fff}
.btn--ink:hover{background:#000}
.btn--line{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn--line:hover{background:var(--ink); color:#fff}
.btn:active{transform:translateY(1px)}
@media (prefers-reduced-motion: reduce){ .btn,.btn svg,.link-arrow svg{transition:none} }

/* ---------- the Ripple mark ---------- */
.mark{width:30px; height:30px; flex:none; overflow:visible}
.mark circle{fill:none; stroke:var(--coral); stroke-width:1.7; transform-origin:16px 16px; transform-box:view-box}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); min-height:44px}
.brand span{font:500 1.45rem/1 var(--serif); letter-spacing:-.02em; font-variation-settings:'opsz' 72}
@media (prefers-reduced-motion: no-preference){
  .brand:hover .mark circle:nth-child(1){animation:ring 1.1s var(--ease)}
  .brand:hover .mark circle:nth-child(2){animation:ring 1.1s var(--ease) .08s}
  .brand:hover .mark circle:nth-child(3){animation:ring 1.1s var(--ease) .16s}
}
@keyframes ring{0%{transform:scale(1)} 40%{transform:scale(1.12)} 100%{transform:scale(1)}}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:50; height:var(--head-h);
  background:color-mix(in srgb, var(--sky) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid transparent; transition:border-color .25s var(--ease), background .25s var(--ease);
}
.site-head.is-stuck{border-bottom-color:var(--line)}
.site-head.on-paper{background:color-mix(in srgb, var(--paper) 90%, transparent)}
.head-row{height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px}
.nav{display:flex; align-items:center; gap:clamp(18px, 2.6vw, 34px)}
.nav a{font:500 .975rem/1 var(--sans); color:var(--ink-2); text-decoration:none; padding:14px 0; position:relative}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink)}
.nav a[aria-current=page]::after{content:""; position:absolute; left:0; right:0; bottom:6px; height:2px; background:var(--coral)}
.nav .btn{min-height:44px; padding:0 18px; color:#fff; font-size:.95rem}
.nav .btn::after{display:none}
.menu-btn{display:none; width:48px; height:48px; margin-right:-10px; border:0; background:transparent; color:var(--ink); cursor:pointer; border-radius:var(--radius)}
.menu-btn svg{width:26px; height:26px; margin:auto}
.menu-btn .x{display:none}
.menu-btn[aria-expanded=true] .bars{display:none}
.menu-btn[aria-expanded=true] .x{display:block}
.mobile-nav{display:none}
@media (max-width:820px){
  .nav{display:none}
  .menu-btn{display:block}
  .mobile-nav{
    position:fixed; inset:var(--head-h) 0 auto 0; z-index:49; background:var(--paper);
    border-bottom:1px solid var(--line); padding:8px var(--gutter) 24px;
    box-shadow:0 24px 40px -24px rgba(27,38,49,.35);
  }
  .mobile-nav.is-open{display:block}
  .mobile-nav a:not(.btn){display:flex; justify-content:space-between; align-items:center; min-height:56px; border-bottom:1px solid var(--line); font:500 1.125rem/1 var(--sans); text-decoration:none; color:var(--ink)}
  .mobile-nav .btn{width:100%; margin-top:20px}
  .mobile-nav .tel{margin-top:16px; text-align:center; color:var(--ink-2)}
}

/* ---------- sections ---------- */
.section{padding-block:clamp(72px, 10vw, 128px)}
.section--tight{padding-block:clamp(56px, 7vw, 88px)}
.band-paper-2{background:var(--paper-2)}
.band-peach{background:var(--peach)}
.band-sky{background:var(--sky)}
.band-night{background:var(--night); color:var(--night-text)}
.band-night .lead,.band-night .muted{color:var(--night-muted)}
.sec-head{display:grid; grid-template-columns:minmax(0, 1fr); gap:18px; margin-bottom:clamp(36px, 5vw, 60px)}
.sec-head h2{max-width:22ch}
@media (min-width:900px){
  .sec-head--split{grid-template-columns:1fr 1fr; align-items:end; gap:48px}
}
.kicker{display:block; font:600 .8125rem/1.3 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--coral-ink); margin-bottom:14px}
.band-night .kicker{color:#FFB596}

/* hairline rows used for facts, steps and inclusions (instead of cards) */
.rows{border-top:1px solid var(--line)}
.rows > *{border-bottom:1px solid var(--line); padding-block:18px}

/* ---------- browser plate (real screenshots) ---------- */
.plate{background:#fff; border-radius:10px; overflow:hidden; border:1px solid rgba(27,38,49,.14);
  box-shadow:0 1px 2px rgba(27,38,49,.06), 0 30px 60px -32px rgba(27,38,49,.42)}
.plate-bar{display:flex; align-items:center; gap:12px; height:34px; padding:0 12px; background:#EEF1F4; border-bottom:1px solid rgba(27,38,49,.1)}
.plate-bar .dots{display:flex; gap:6px}
.plate-bar .dots i{width:10px; height:10px; border-radius:50%; background:#CED5DC}
.plate-bar .url{flex:1; max-width:340px; margin-inline:auto; height:22px; border-radius:5px; background:#fff; font:500 12px/22px var(--sans); color:#4A5560; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0 10px}
.plate-bar .spacer{width:42px}
.plate picture,.plate img{display:block; width:100%; height:auto}
.phone{border-radius:28px; padding:8px; background:#1B2631; box-shadow:0 30px 60px -30px rgba(27,38,49,.55)}
.phone img{border-radius:21px}

figure figcaption{margin-top:14px; font-size:.9375rem; line-height:1.5; color:var(--muted); max-width:48ch}

/* ---------- reveal (progressive; content visible without JS) ---------- */
.js .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js .reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .js .reveal{opacity:1; transform:none; transition:none} }

/* ---------- contact form ---------- */
.form{display:grid; gap:20px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media (max-width:620px){ .field-row{grid-template-columns:1fr} }
.field{display:grid; gap:8px}
.field label{font:600 .95rem/1.3 var(--sans); color:var(--ink)}
.field label .opt{font-weight:400; color:var(--muted)}
.field input,.field textarea,.field select{
  width:100%; min-height:52px; padding:13px 14px; border-radius:var(--radius);
  border:1.5px solid rgba(27,38,49,.38); background:#fff; color:var(--ink);
  font:400 1rem/1.4 var(--sans); transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{min-height:150px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#6B7681}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(194,64,26,.35)}
.field [aria-invalid=true]{border-color:var(--coral-ink)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-actions{display:flex; flex-wrap:wrap; gap:16px; align-items:center}
.form-status{min-height:1.5em; font-weight:500}
.form-status.err{color:var(--coral-ink)}
.form-note{font-size:.9375rem; color:var(--muted)}
.form-success{padding:28px; border-radius:var(--radius); background:#fff; border:1px solid var(--line)}
.form-success h3{margin-bottom:10px}
.form-success h3:focus{outline:none}

/* ---------- footer ---------- */
.site-foot{background:var(--night); color:var(--night-text); padding-top:clamp(56px, 7vw, 88px); overflow:hidden}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-lead{grid-column:1 / -1} }
@media (max-width:480px){ .foot-grid{grid-template-columns:1fr} }
.foot-lead p{max-width:34ch; color:var(--night-muted)}
.foot-lead .brand{color:var(--night-text); margin-bottom:14px}
.site-foot h2{font:600 .8125rem/1.3 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--night-muted); margin-bottom:14px}
.foot-list{display:grid; gap:4px}
.foot-list a,.foot-list span{color:var(--night-text); text-decoration:none; display:inline-block; padding:5px 0}
.foot-list a:hover{text-decoration:underline; text-underline-offset:.2em}
.foot-word{font:400 clamp(6rem, 22vw, 19rem)/.78 var(--serif); letter-spacing:-.05em; color:var(--night-2); margin-top:clamp(24px, 4vw, 48px); margin-bottom:-.2em; white-space:nowrap; user-select:none}
.foot-fine{border-top:1px solid rgba(233,238,243,.14); margin-top:clamp(40px, 6vw, 64px); padding-block:20px; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:.9rem; color:var(--night-muted); position:relative}
.foot-fine a{color:var(--night-muted)}