/*
Theme Name: Cavity
Theme URI: https://cavity.example
Author: Cavity Acoustics
Author URI: https://cavity.example
Description: Architectural acoustics consultancy theme. Signature feature is a real image-source-method room simulator: visitors tune room dimensions and surface materials and hear the resulting reverberation through actual convolution, not a canned demo.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cavity
*/

/* =====================================================================
   CAVITY — design system
   ---------------------------------------------------------------------
   Brief: an acoustics consultancy that treats sound as a measured,
   engineered quantity — not "ambience". Every past theme in this project
   that reached for warmth or neon would be wrong here. The reference
   point is the anechoic chamber and the test bench: deep blue-grey
   foam wedges, bone-white paperwork, one signal-amber accent for
   anything actionable, and a cool cyan reserved ONLY for traces
   (waveforms, impulse responses) so it reads as data, never chrome.

   Corner-bracket panels (oscilloscope/test-rig bezel ticks) are the
   recurring structural motif — used on every panel/card instead of a
   drop shadow or a rounded card, so the whole site reads like
   instrumentation rather than a brochure.

   Type: IBM Plex Sans Condensed for heads (engineering-drawing
   titling), IBM Plex Sans for body, IBM Plex Mono for every measured
   value — frequency, RT60, NC rating, coordinates. One family, three
   optical purposes, which is exactly how a spec sheet is set.
   ===================================================================== */

:root{
  --bg:      #0D1116;
  --bg-2:    #131922;
  --bg-3:    #1A212B;
  --bg-4:    #212A36;
  --line:        rgba(238,234,222,.10);
  --line-strong: rgba(238,234,222,.20);
  --ink:     #F2EEE3;
  --ink-2:   rgba(242,238,227,.72);
  --ink-3:   rgba(242,238,227,.46);
  --ink-4:   rgba(242,238,227,.24);

  --signal:      #F2A93C;   /* amber — the only "do something" colour */
  --signal-ink:  #1A1206;
  --signal-dim:  rgba(242,169,60,.14);
  --wave:        #63D3C9;   /* cool cyan — reserved for traces/data only */
  --wave-dim:    rgba(99,211,201,.14);
  --danger:      #E06C5C;

  --ff-head: "IBM Plex Sans Condensed", "Archivo Narrow", Arial Narrow, sans-serif;
  --ff-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  --r: 3px;
  --wrap: 1240px;
  --ease: cubic-bezier(.22,.9,.24,1);
}

/* ---------------------------------------------------------------------
   reset & base
   ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure{margin:0}
::selection{background:var(--signal);color:var(--signal-ink)}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body>*:not(script){position:relative;z-index:1}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 20px}}

/* ---------------------------------------------------------------------
   typography
   ------------------------------------------------------------------ */
h1,h2,h3,h4{font-family:var(--ff-head);font-weight:600;letter-spacing:-.01em;line-height:1.06;text-wrap:balance}
h1{font-size:clamp(2.6rem,5.6vw,4.6rem)}
h2{font-size:clamp(2rem,3.6vw,3rem)}
h3{font-size:clamp(1.35rem,2.1vw,1.8rem)}
h4{font-size:1.05rem}
p{color:var(--ink-2)}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-2);max-width:60ch}

.mono{font-family:var(--ff-mono)}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal);
}
.kicker::before{content:"";width:18px;height:1px;background:var(--signal)}
.kicker.is-wave{color:var(--wave)}
.kicker.is-wave::before{background:var(--wave)}

/* measured-value chips: every RT60/NC/frequency figure on the site
   goes through this so numbers always read as instrumentation, never
   as marketing copy set slightly smaller */
.reading{font-family:var(--ff-mono);display:inline-flex;align-items:baseline;gap:.35em}
.reading b{font-size:1.5em;font-weight:600;color:var(--ink)}
.reading span{font-size:.72em;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}

/* ---------------------------------------------------------------------
   buttons
   ------------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;
  border-radius:var(--r);font-family:var(--ff-mono);font-size:.82rem;letter-spacing:.03em;
  transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
  white-space:nowrap;
}
.btn--solid{background:var(--signal);color:var(--signal-ink);font-weight:600}
.btn--solid:hover{transform:translateY(-2px)}
.btn--line{border:1px solid var(--line-strong);color:var(--ink)}
.btn--line:hover{border-color:var(--signal);color:var(--signal)}
.btn--ghost{color:var(--ink-2)}
.btn--ghost:hover{color:var(--ink)}
.btn svg{width:14px;height:14px;flex:none}

/* ---------------------------------------------------------------------
   instrument-panel motif — the recurring structural device.
   Corner ticks like a test-rig bezel, not a drop shadow or a rounded
   card. Every panel/card in the theme carries this.
   ------------------------------------------------------------------ */
.panel{
  position:relative;background:var(--bg-3);border:1px solid var(--line);
  border-radius:var(--r);padding:32px;
}
.panel::before,.panel::after,
.panel .tick-tl,.panel .tick-tr,.panel .tick-bl,.panel .tick-br{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
  border-color:var(--line-strong);border-style:solid;border-width:0;
}
.panel::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.panel::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.panel .tick-tr{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}
.panel .tick-bl{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}
.panel:hover::before,.panel:hover::after,
.panel:hover .tick-tr,.panel:hover .tick-bl{border-color:var(--signal)}

/* ---------------------------------------------------------------------
   header / nav
   ------------------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:40;background:rgba(13,17,22,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--ff-head);font-weight:600;font-size:1.15rem}
.brand-mark{width:30px;height:30px;flex:none;border:1.5px solid var(--signal);border-radius:2px;position:relative}
.brand-mark::before{content:"";position:absolute;inset:6px;border:1px solid var(--wave);border-radius:1px}
.nav{display:flex;align-items:center;gap:36px}
.nav a{font-size:.92rem;color:var(--ink-2);transition:color .2s}
.nav a:hover,.nav a.is-active{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:18px}
.navtoggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:var(--r)}
.navtoggle span,.navtoggle span::before,.navtoggle span::after{content:"";display:block;width:16px;height:1.5px;background:var(--ink);position:relative;transition:transform .25s}
.navtoggle span::before{position:absolute;top:-5px}
.navtoggle span::after{position:absolute;top:5px}

/* Off the mobile breakpoint this panel must take up no space at all —
   without an explicit display:none here it falls back to a static
   block and prints as a bare list of links under the header. */
[data-mnav]{display:none}

@media (max-width:860px){
  .nav{display:none}
  .navtoggle{display:flex}
  [data-mnav]{
    display:flex;flex-direction:column;
    position:fixed;inset:78px 0 0 0;background:var(--bg);z-index:39;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
    padding:32px 20px;overflow-y:auto;
  }
  [data-mnav].open{opacity:1;transform:translateY(0);pointer-events:auto}
  [data-mnav] a{display:block;padding:16px 0;font-size:1.3rem;font-family:var(--ff-head);border-bottom:1px solid var(--line)}
  .mnav-cta{margin-top:24px}
}

/* ---------------------------------------------------------------------
   sections
   ------------------------------------------------------------------ */
.sec{position:relative;padding:110px 0}
.sec--tight{padding:70px 0}
.sec--alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:56px;flex-wrap:wrap}
.sec-head h2{max-width:22ch}

.grid{display:grid;gap:24px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid--3,.grid--2{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   footer
   ------------------------------------------------------------------ */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);padding:80px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px;border-bottom:1px solid var(--line)}
.foot-grid h4{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.foot-grid a{display:block;padding:6px 0;color:var(--ink-2);font-size:.94rem}
.foot-grid a:hover{color:var(--signal)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;font-family:var(--ff-mono);font-size:.78rem;color:var(--ink-4);flex-wrap:wrap;gap:12px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   reveal-on-scroll
   ------------------------------------------------------------------ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* ---------------------------------------------------------------------
   hero simulator — the signature interactive. Copy on the left, the
   working room model on the right; on a phone the model drops below
   the copy rather than shrinking into uselessness.
   ------------------------------------------------------------------ */
.hero-sim{padding:64px 0 100px}
.hero-sim-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.hero-sim-in h1{margin-top:18px}
.hero-sim-in h1 em{font-style:normal;color:var(--signal)}
.hero-sim-in .lede{margin-top:20px}
.hero-sim-in .hero-actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:980px){.hero-sim-in{grid-template-columns:1fr}}

.sim-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px 18px}
@media (max-width:560px){.sim-controls{grid-template-columns:1fr 1fr}}
.sim-field label{display:flex;justify-content:space-between;gap:8px;font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.sim-field label b{color:var(--wave);font-weight:500}
.sim-field select{
  width:100%;background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r);
  color:var(--ink);font-family:var(--ff-body);font-size:.86rem;padding:9px 10px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;
}
.sim-field select:focus{outline:none;border-color:var(--signal)}

/* custom range slider: dark track, amber thumb — matches no browser default */
.sim-field input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:pointer;
}
.sim-field input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line-strong);border-radius:2px}
.sim-field input[type=range]::-moz-range-track{height:3px;background:var(--line-strong);border-radius:2px}
.sim-field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;margin-top:-6.5px;border-radius:2px;
  background:var(--signal);border:2px solid var(--bg-3);box-shadow:0 0 0 1px var(--signal);
}
.sim-field input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:2px;background:var(--signal);border:2px solid var(--bg-3);box-shadow:0 0 0 1px var(--signal);
}

.sim-presets{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;margin-top:-4px}
.sim-presets button{
  font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.03em;padding:9px 15px;
  border:1px solid var(--line-strong);border-radius:var(--r);color:var(--ink-2);
}
.sim-presets button:hover{border-color:var(--wave);color:var(--wave)}

.sim-viz{display:grid;grid-template-columns:1fr 1.4fr;gap:16px;margin-top:28px}
@media (max-width:760px){.sim-viz{grid-template-columns:1fr}}
.sim-viz figure{margin:0;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:10px}
.sim-viz canvas{width:100%;height:180px}
.sim-viz figcaption{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);padding:8px 2px 0}

.sim-readout{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.sim-readings{display:flex;gap:32px;flex-wrap:wrap}
.sim-play{display:flex;gap:10px;flex-wrap:wrap}
.sim-play button{font-size:.78rem;padding:11px 18px}
.sim-note{margin-top:20px;font-size:.72rem;line-height:1.6;color:var(--ink-4)}

/* ---------------------------------------------------------------------
   project cards
   ------------------------------------------------------------------ */
.proj-card{display:flex;flex-direction:column;overflow:hidden}
.proj-card{padding:0}
.proj-card figure{margin:0;aspect-ratio:9/6.6;overflow:hidden;background:var(--bg-4)}
.proj-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.proj-card:hover img{transform:scale(1.045)}
.proj-card .proj-body{padding:22px 24px 26px}
.proj-card .proj-type{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--wave)}
.proj-card h3{margin-top:10px}
.proj-card p{margin-top:8px;font-size:.9rem}
.proj-specs{display:flex;gap:18px;margin-top:16px;flex-wrap:wrap}

.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spec-grid>div{background:var(--bg-3);padding:20px}
@media (max-width:760px){.spec-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------------
   testimonials / quotes
   ------------------------------------------------------------------ */
.quote-card p{font-size:1.05rem;color:var(--ink);line-height:1.65}
.quote-card footer{margin-top:20px;font-family:var(--ff-mono);font-size:.78rem;color:var(--ink-3)}
.quote-card footer b{color:var(--ink-2);font-weight:600;display:block;font-family:var(--ff-body);font-size:.94rem;margin-bottom:2px}

/* ---------------------------------------------------------------------
   stats
   ------------------------------------------------------------------ */
.stat{padding:26px}
.stat b{display:block;font-family:var(--ff-head);font-size:clamp(2.2rem,4vw,3rem);color:var(--signal)}
.stat span{display:block;margin-top:8px;color:var(--ink-3);font-size:.86rem}

/* ---------------------------------------------------------------------
   post/article cards (field notes)
   ------------------------------------------------------------------ */
.post-card{padding:24px}
.post-card .post-date{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.post-card h3{margin-top:12px;font-size:1.2rem}
.post-card p{margin-top:8px;font-size:.9rem}
.post-card .post-more{margin-top:16px;display:inline-block;font-family:var(--ff-mono);font-size:.76rem;color:var(--signal)}

/* ---------------------------------------------------------------------
   services rows
   ------------------------------------------------------------------ */
.svc-row{display:grid;grid-template-columns:.4fr 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--line)}
.svc-row:last-child{border-bottom:1px solid var(--line)}
.svc-row h3{font-size:1.15rem}
@media (max-width:640px){.svc-row{grid-template-columns:1fr;gap:8px}}

/* ---------------------------------------------------------------------
   generic page hero + prose
   ------------------------------------------------------------------ */
.pghero{padding:64px 0 40px;border-bottom:1px solid var(--line)}
.pghero .kicker{margin-bottom:16px}

.prose{max-width:70ch;font-size:1.06rem;line-height:1.8;color:var(--ink-2)}
.prose h2{font-family:var(--ff-head);font-size:1.7rem;margin:1.6em 0 .5em;color:var(--ink)}
.prose h3{font-family:var(--ff-head);font-size:1.3rem;margin:1.4em 0 .4em;color:var(--ink)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 1.2em}
.prose a{color:var(--signal);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{margin:0 0 1.2em 1.3em;padding:0}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:.5em}
.prose blockquote{margin:1.5em 0;padding:18px 24px;border-left:2px solid var(--signal);background:var(--bg-3);border-radius:0 var(--r) var(--r) 0;font-family:var(--ff-head);font-size:1.15rem;color:var(--ink)}
.prose strong{color:var(--ink);font-weight:600}
.prose img{border-radius:var(--r);margin:1.4em 0}

/* archive filter pills (space-type / general listing) */
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:44px}
.pill{font-family:var(--ff-mono);font-size:.76rem;padding:9px 16px;border:1px solid var(--line-strong);border-radius:20px;color:var(--ink-2)}
.pill.is-active{background:var(--signal);border-color:var(--signal);color:var(--signal-ink)}
.pill:hover{border-color:var(--signal);color:var(--signal)}

/* ---------------------------------------------------------------------
   forms (search, contact)
   ------------------------------------------------------------------ */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.field label{font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field textarea,.field select{
  background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:13px 15px;color:var(--ink);font-family:var(--ff-body);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--signal)}