/* Ponamus home, v4 (brand only): a cross-section of water. A pale page above the surface carries the
   company's sentence; the questions sit in the water. Below the hero, each section opens on an "If"
   situation. No figures on this page: proof lives on the product pages. */
:root{
  /* brand/colour_system.md: Ponamus owns tinted neutrals and one warm signal ("datum"). */
  --air:#F4F7F9; --ink:#0D181C; --slate:#4E5E64;
  --water:#071820; --deep:#040F15; --foam:#E9EFF1; --foam-2:#B7C7CE; --mist:#83969E; --rule:rgba(183,199,206,.18);
  --datum:#A63C0C; --datum-dk:#E19D63;
  --sans:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --ital:"Newsreader", Georgia, serif;
  --pad:clamp(20px, 5vw, 80px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--water);color:var(--foam);font:400 18px/1.55 var(--sans)}
a{color:inherit}
p,li{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;font-family:var(--sans);font-weight:600;font-variation-settings:"wdth" 112;text-wrap:balance}
i{font-family:var(--ital);font-weight:400}

.top{position:absolute;inset:0 0 auto 0;z-index:3;display:flex;justify-content:space-between;align-items:baseline;padding:28px var(--pad);color:var(--ink)}
.mark{font-weight:640;font-variation-settings:"wdth" 120;font-size:21px;letter-spacing:.005em;text-decoration:none}
.top nav{display:flex;gap:30px;font-size:15px}
.top nav a{text-decoration:none;color:var(--slate)}
.top nav a:hover{color:var(--ink)}

/* Hero */
.hero{position:relative;height:100svh;min-height:680px;overflow:hidden;background:var(--air)}
#water{position:absolute;inset:0;width:100%;height:100%}
.above{position:absolute;left:var(--pad);right:var(--pad);bottom:55.5%;z-index:2;color:var(--ink)}
.hero h1{font-size:clamp(56px,8.6vw,160px);line-height:.92;font-weight:650;font-variation-settings:"wdth" 118;letter-spacing:-.045em}
.sub{font-size:clamp(17px,1.45vw,21px);color:var(--slate);margin-top:18px;max-width:64ch}
.above .cta{display:inline-block;margin-top:22px}
.cta{font-size:17px;font-weight:500;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:4px}
.cta::after{content:"  \2192"}
.above .cta:hover{border-bottom-width:2.5px}
.below{position:absolute;left:var(--pad);right:var(--pad);top:calc(52% + clamp(40px,6vh,64px));z-index:2;color:var(--foam)}
.sup{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;font-size:clamp(17px,1.35vw,20px)}
.sup i{font-size:1.5em;color:var(--datum-dk);margin-right:4px;line-height:1}
.sup button{font:inherit;color:var(--foam-2);background:none;border:0;border-bottom:1px solid rgba(233,239,241,.22);padding:2px 0;cursor:pointer;text-align:left}
.sup button:hover{color:var(--foam)}
.sup button[aria-pressed="true"]{color:var(--foam);border-bottom:1.5px solid var(--datum-dk)}

/* Sections below the surface */
.band{padding:clamp(88px,9vw,150px) var(--pad) 0;max-width:calc(1440px + var(--pad) * 2);margin:0 auto}
.if-h{font-weight:500;font-variation-settings:"wdth" 108;font-size:clamp(20px,1.7vw,26px);letter-spacing:-.01em;color:var(--foam-2);padding-top:14px;border-top:1px solid rgba(183,199,206,.30);margin-bottom:clamp(32px,4vw,56px)}
.if-h i{color:var(--foam-2);font-size:1.18em;margin-right:.12em}
.statement{font-weight:550;font-variation-settings:"wdth" 110;font-size:clamp(34px,4.4vw,74px);line-height:1.04;letter-spacing:-.03em;max-width:17em;text-wrap:balance}
.statement i{color:var(--datum-dk);font-weight:400}
.aside{margin-top:28px;max-width:46ch;color:var(--foam-2);font-size:clamp(18px,1.4vw,21px)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:28px;row-gap:24px}
.lead{grid-column:1 / span 6;font-size:clamp(24px,2.3vw,36px);line-height:1.22;letter-spacing:-.015em;font-weight:500;font-variation-settings:"wdth" 104}
.claims{grid-column:8 / span 5;list-style:none;margin:0;padding:0}
.claims li{font-size:19px;line-height:1.4;padding:14px 0;border-top:1px solid var(--rule);color:var(--foam-2)}
.claims li:last-child{border-bottom:1px solid var(--rule)}

.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.flow li{display:flex;gap:18px;align-items:flex-start}
.flow img{width:64px;height:64px;flex:none;border-radius:15px;box-shadow:0 0 0 1px rgba(183,199,206,.16)}
.flow h3{font-size:clamp(24px,2vw,30px);letter-spacing:-.02em;line-height:1.05}
.flow p{color:var(--foam-2);margin-top:6px;font-size:17px}
.flow a{display:inline-block;margin-top:12px;font-size:16px;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px}
.flow a::after{content:"  \2192"}

.talk{padding-bottom:clamp(96px,10vw,150px)}
.talk h2{font-size:clamp(52px,7.4vw,128px);line-height:.94;font-weight:650;font-variation-settings:"wdth" 118;letter-spacing:-.045em;margin-bottom:clamp(28px,3vw,44px)}
.talk .lead{grid-column:1 / span 6}
.acts{grid-column:8 / span 5;display:flex;flex-direction:column;align-items:flex-start;gap:14px;align-self:end}
.quiet{font-size:15px;color:var(--mist);text-decoration:none}
.quiet:hover,.flow a:hover,.talk .cta:hover,.sec:hover{color:var(--foam);border-bottom-width:2px}

.foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;flex-wrap:wrap;padding:24px var(--pad) 36px;border-top:1px solid var(--rule);font-size:14px;color:var(--mist)}
.foot .mark{font-size:17px;color:var(--foam);margin-right:10px}
.foot i{font-size:1.1em}

@media (max-width:900px){
  .top nav .wide{display:none}
  .top nav{gap:20px}
  .above{bottom:58%}
  .sup{flex-direction:column;align-items:flex-start;gap:14px}
  .lead,.claims,.talk .lead,.acts{grid-column:1 / -1}
  .flow{grid-template-columns:1fr;gap:32px}
  .flow img{width:52px;height:52px}
}

/* v5 */
.lbl{font-weight:500;font-variation-settings:"wdth" 108;font-size:clamp(20px,1.7vw,26px);letter-spacing:-.01em;color:var(--foam-2);padding-top:14px;border-top:1px solid rgba(183,199,206,.30);margin-bottom:clamp(32px,4vw,56px)}
.hero-acts{display:flex;align-items:baseline;gap:10px 22px;flex-wrap:wrap;margin-top:22px}
.hero-acts .cta{margin-top:0}
.note{font-size:15px;color:var(--slate)}
.note a{color:var(--ink)}
.sup{flex-direction:column;align-items:flex-start;gap:12px}
.sup i{margin-bottom:2px}
.statement{font-weight:550}
.sec{font-size:17px;text-decoration:none;color:var(--foam-2);border-bottom:1px solid rgba(183,199,206,.5);padding-bottom:3px}

/* v5b: hanging question list, calm inactive options, ruled product index, legible small text */
.sup{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;row-gap:10px;align-items:baseline}
.sup i{grid-row:1 / span 4}
.sup button{border-bottom-color:transparent;justify-self:start}
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.index li{display:grid;grid-template-columns:40px minmax(0,4fr) minmax(0,5fr) 160px;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule)}
.index img{width:40px;height:40px;border-radius:9px;box-shadow:0 0 0 1px rgba(183,199,206,.16)}
.index h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.02em;line-height:1}
.index .what{color:var(--foam-2);font-size:18px}
.index .st{color:var(--foam-2);font-size:16px}
.index a{justify-self:start;font-size:16px;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.index a::after{content:"  \2192"}
.index a:hover{border-bottom-width:2px}
.quiet,.foot{font-size:16px}
.quiet,.foot,.foot i{color:var(--foam-2)}
@media (max-width:900px){
  .band{padding-top:clamp(64px,9vw,150px)}
  .index li{grid-template-columns:36px minmax(0,1fr) auto !important;gap:6px 14px}
  .index .what{grid-column:2;grid-row:2;font-size:16px}
  .index img{grid-row:1 / span 2}
  .index a,.index .st{grid-column:3;grid-row:1 / span 2;justify-self:end}
  .above{bottom:57%}
  .below{top:calc(50% + 40px)}
}

/* v6 */
.cta.bring{display:inline-block;margin-top:28px;color:var(--foam);font-size:16px}
.sup button{text-wrap:balance}
.index{margin-top:0}
.foot{font-size:15px}

/* v6b: questions as the hero's second voice; copper only on the surface flash */
.above{bottom:62%}
.below{top:calc(52% + clamp(36px,5vh,56px))}
.sup{font-size:clamp(20px,2.1vw,34px);row-gap:6px;column-gap:20px;max-width:min(1100px,100%)}
.sup i{color:var(--foam-2);font-size:1.25em}
.sup button{line-height:1.25;padding:3px 0}
.sup button[aria-pressed="true"]{border-bottom:0;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:7px;text-decoration-color:var(--foam)}
.note a{text-decoration:none;border-bottom:1px solid currentColor}
.index li{grid-template-columns:40px minmax(0,3fr) minmax(0,6fr) 150px;align-items:baseline}
.index img{align-self:center}
.index a,.index .st{justify-self:end}
.talk .lead{font-size:clamp(20px,1.8vw,25px);max-width:34ch}
@media (max-width:900px){
  .above{bottom:auto;top:96px}
  .below{top:calc(50% + 32px)}
  .top nav .long{display:none}
  .sup{font-size:19px}
  .hero h1{margin-top:24px}
  .foot{flex-direction:column;gap:6px}
}

/* v7: the integrated suite */
.lead.wide{max-width:30em;margin-bottom:clamp(40px,5vw,72px)}
.flows{margin:0}
.flows svg{display:block;width:100%;height:auto;max-width:1240px}
.flows-list{display:none;list-style:none;margin:0;padding:0}
.flows-list li{padding:12px 0;border-top:1px solid var(--rule);color:var(--foam-2)}
.flows-list b{color:var(--foam);font-weight:500}
.after{margin-top:clamp(40px,5vw,72px);align-items:end}
.example{grid-column:1 / span 7;font-size:clamp(20px,1.8vw,26px);line-height:1.4}
.example i{color:var(--foam-2);font-size:1.12em}
.after .small{grid-column:9 / span 4;color:var(--foam-2);font-size:16px}
@media (max-width:900px){
  .flows svg{display:none}
  .flows-list{display:block}
  .example,.after .small{grid-column:1 / -1}
}

@media (max-width:600px){
  .hero{min-height:900px}
  .below{top:calc(63% + 24px)}
  .sup{display:block}
  .sup i{display:block;margin-bottom:8px}
  .sup button:not([aria-pressed="true"]){display:none}
  .sup button{font-size:22px}
  .cta.bring{margin-top:20px}
}

.small-hero{height:auto;min-height:70svh}
.small-hero .above{position:static;padding:180px var(--pad) 120px}