/* Warm Walls — static export
   Visual design lives in inline styles on each page (1:1 with the source).
   This file holds global resets, base typography and responsive overrides only. */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'General Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:#FFFFFF;
  color:#2A241F;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:#BE5B38;color:#fff}

/* ---------------------------------------------------------------
   Hover states.
   The markup is inline-styled, so an element's resting colour lives
   in its style="" attribute. Inline styles outrank any selector, so
   these :hover rules need !important to take effect. Each class maps
   1:1 to a hover behaviour in the design.
   --------------------------------------------------------------- */
.hv-accent:hover{color:#BE5B38 !important}
.hv-white:hover{color:#fff !important}
.hv-deep:hover{background:#9E4527 !important}
.hv-lift:hover{transform:translateY(-2px) !important}
.hv-ghost:hover{border-color:#2A241F !important;background:#2A241F !important;color:#F3ECE0 !important}
.hv-uline:hover{border-color:#BE5B38 !important}
.hv-uline-ember:hover{border-color:#E2895B !important}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .hv-lift:hover{transform:none !important}
}
:focus-visible{outline:2px solid #BE5B38;outline-offset:2px}
input:focus,textarea:focus,select:focus{outline:2px solid #BE5B38;outline-offset:1px}

/* ---------------------------------------------------------------
   Responsive overrides.
   The page markup uses inline styles, so these rules use !important
   (a normal external rule cannot beat an inline style). They only
   take effect at smaller widths — the desktop design is untouched.
   --------------------------------------------------------------- */

/* NOTE: selectors that match inline styles are written in BOTH forms —
   compact ("min-width:380px") as authored in the deployed files, and
   spaced ("min-width: 380px") as some engines re-serialise the style
   attribute — so the rules apply reliably everywhere. */

/* Tablet / small laptop — 4-up grids → 2-up */
@media (max-width: 900px){
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"]{grid-template-columns:repeat(2,1fr) !important}
}

/* Header + hero stacking */
@media (max-width: 860px){
  [style*="min-height:calc(100vh - 84px)"],
  [style*="min-height: calc(100vh - 84px)"]{flex-wrap:wrap !important}
  [style*="flex:0 0 44%"],
  [style*="flex: 0 0 44%"]{flex:0 0 100% !important;min-height:320px !important}
}

/* Header bars wrap (structural — serialisation-proof) */
@media (max-width: 820px){
  header nav > div{height:auto !important;flex-wrap:wrap !important;padding-top:12px !important;padding-bottom:12px !important;row-gap:10px !important}
  header nav > div > div:last-child{flex-wrap:wrap !important;justify-content:flex-start !important;gap:12px 16px !important;width:100% !important}
  header > div > div{height:auto !important;flex-wrap:wrap !important;gap:4px 14px !important;padding-top:8px !important;padding-bottom:8px !important}
}

/* Phone — every multi-column grid → single column, and wide flex
   columns allowed to shrink below their min-width so nothing overflows. */
@media (max-width: 640px){
  [style*="grid-template-columns:repeat(4"],[style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(3"],[style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(2"],[style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr !important}

  [style*="min-width:300px"],[style*="min-width: 300px"],
  [style*="min-width:320px"],[style*="min-width: 320px"],
  [style*="min-width:340px"],[style*="min-width: 340px"],
  [style*="min-width:360px"],[style*="min-width: 360px"],
  [style*="min-width:380px"],[style*="min-width: 380px"],
  [style*="min-width:420px"],[style*="min-width: 420px"]{flex-basis:100% !important;min-width:0 !important}

  /* Non-wrapping flex rows that would otherwise force their min-content
     width wider than the screen (tagged in markup). */
  .num-row{flex-direction:column !important;gap:0 !important}
  .num-row > div{border-left:none !important;padding:24px 0 0 !important}
  .num-row > div + div{border-top:1px solid #E2D8C8 !important}
  .founder{flex-direction:column !important}
}

/* Phone — trim the 48px desktop gutters so content isn't cramped
   (structural selectors, serialisation-proof). */
@media (max-width: 560px){
  main > section, body > section, footer{padding-left:22px !important;padding-right:22px !important}
  header nav > div, header > div > div{padding-left:22px !important;padding-right:22px !important}
}

/* ---------------------------------------------------------------
   Motion layer (paired with motion.js).
   Reveal attributes are added by JS, so without JS the page is
   fully visible. Everything below is disabled for users who ask
   for reduced motion.
   --------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .72s cubic-bezier(.16,.84,.44,1),transform .72s cubic-bezier(.16,.84,.44,1);will-change:opacity,transform}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-img]{transform:scale(1.09);transition:transform 1.25s cubic-bezier(.16,.84,.44,1);will-change:transform}
[data-reveal-img].in{transform:scale(1)}
.wz img{transition:transform .65s cubic-bezier(.16,.84,.44,1);will-change:transform}
.wz:hover img{transform:scale(1.05)}
nav{transition:box-shadow .28s ease}
nav.nav-scrolled{box-shadow:0 12px 32px -20px rgba(34,28,22,.6)}

/* ---- Extended motion (layered on the base reveals above) ---- */

/* Scroll progress bar */
#ww-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,#E2895B,#BE5B38);box-shadow:0 0 12px rgba(190,91,56,.5);transition:width .12s linear;pointer-events:none}

/* Headings: soft blur-in (rides on the data-reveal entrance) */
[data-reveal].ww-head{filter:blur(10px);transition:opacity .8s cubic-bezier(.16,.84,.44,1),transform .8s cubic-bezier(.16,.84,.44,1),filter .8s cubic-bezier(.16,.84,.44,1)}
[data-reveal].ww-head.in{filter:blur(0)}

/* Cards: hover-lift. This selector also carries the reveal entrance,
   so opacity + transform stay animated while adding box-shadow on hover. */
.ww-card{transition:opacity .66s cubic-bezier(.16,.84,.44,1),transform .42s cubic-bezier(.16,.84,.44,1),box-shadow .32s ease;will-change:transform}
.ww-card:hover{transform:translateY(-6px) !important;box-shadow:0 26px 52px -30px rgba(34,28,22,.5) !important}

/* Arrow links: nudge the arrow */
.ww-arrow{display:inline-block;transition:transform .28s cubic-bezier(.16,.84,.44,1)}
a:hover > .ww-arrow{transform:translateX(5px)}

/* Primary buttons: a single light sheen sweeps across on hover */
.ww-btn{position:relative;overflow:hidden;isolation:isolate}
.ww-btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);background-size:220% 100%;background-position:150% 0;transition:background-position .7s cubic-bezier(.16,.84,.44,1)}
.ww-btn:hover::after{background-position:-50% 0}

/* CTA band: slow drifting ambient highlight */
.ww-glow{position:relative;overflow:hidden}
.ww-glow > *{position:relative;z-index:1}
.ww-glow::before{content:"";position:absolute;width:55%;height:220%;top:-60%;left:-12%;background:radial-gradient(circle,rgba(255,255,255,.15),transparent 62%);animation:wwdrift 15s ease-in-out infinite;pointer-events:none;z-index:0}
@keyframes wwdrift{0%{transform:translate(0,0)}50%{transform:translate(70%,8%)}100%{transform:translate(0,0)}}

@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-reveal-img]{opacity:1 !important;transform:none !important;transition:none !important}
  .wz:hover img{transform:none !important}
  #ww-progress{display:none}
  [data-reveal].ww-head{filter:none !important}
  .ww-card:hover{transform:none !important;box-shadow:none !important}
  a:hover > .ww-arrow{transform:none !important}
  .ww-btn::after{display:none}
  .ww-glow::before{animation:none !important;display:none}
}