/* Frigitorium — schematic | styles lifted verbatim from the supplied master */
:root{
    --bg:           #05070c;
    --bg-2:         #0a0f18;
    --surface:      #0d131e;
    --line:         rgba(255,255,255,0.10);
    --line-strong:  rgba(255,255,255,0.18);
    --text:         #eef2f8;
    --text-dim:     #aab3c2;
    --text-mute:    #7a8597;

    /* Editorial highlight — used sparingly per brand guidelines.
       One highlight moment per view; never adjacent to schematic amber. */
    --tangerine:    #f86a3f;

    /* Loop palette — drawn from the Frigitorium brand system */
    --water-in:     #4fd1c5;   /* mains, ambient — teal */
    --water-cold:   #8fd6ff;   /* potable 4 °C — ice */
    --glycol-sup:   #6aa9ff;   /* glycol supply 2 °C — cobalt */
    --glycol-ret:   #6fb6ff;   /* glycol return 4 °C — sky */
    --refrig-liq:   #f5a25d;   /* refrigerant liquid — amber */
    --refrig-vap:   #c098ff;   /* refrigerant vapour — lavender */
    --frost:        #cfe7ff;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ background:var(--bg); color:var(--text); }
  body{
    font-family:"Manrope", system-ui, sans-serif;
    font-weight:400;
    min-height:100vh;
    padding:0 clamp(16px, 3vw, 40px) 48px;
    background:
      radial-gradient(60% 50% at 50% 0%, rgba(111,182,255,0.10), transparent 70%),
      radial-gradient(40% 40% at 90% 30%, rgba(192,152,255,0.06), transparent 70%),
      radial-gradient(40% 40% at 10% 25%, rgba(79,209,197,0.06), transparent 70%),
      var(--bg);
  }
  .wrap{ max-width:1320px; margin:0 auto; padding-top: clamp(20px, 3vw, 36px); }

  /* ───── Top bar (shared with site) ───── */
  .topbar {
    position: sticky; top: 0; z-index: 20;
    margin: 0 calc(-1 * clamp(16px, 3vw, 40px));
    padding: 0 clamp(16px, 3vw, 40px);
    background: linear-gradient(to bottom, rgba(5,7,12,0.92), rgba(5,7,12,0.6));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .topbar-row {
    max-width: 1320px;
    margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    height: 76px;
  }
  .brand { display: inline-flex; align-items: center; text-decoration: none; }
  .brand img { height: 44px; width: auto; display: block; }
  .nav {
    display: flex; gap: 28px;
    font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-dim);
  }
  .nav a {
    text-decoration: none;
    color: inherit;
    transition: color .2s ease;
  }
  .nav a:hover { color: var(--text); }
  .nav a.is-active { color: var(--water-cold); }
  @media (max-width: 720px) { .nav { display: none; } }

  /* ───── Header ───── */
  .head{
    display:flex; flex-direction:column; align-items:center;
    margin-bottom: clamp(20px, 3vw, 36px);
  }
  .head img{
    width: min(420px, 70vw); height:auto;
  }
  .head .eyebrow{
    margin-top: 18px;
    font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--water-cold);
  }
  .head .eyebrow .dot{
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background: currentColor; margin-right:12px; vertical-align: 2px;
    box-shadow: 0 0 12px currentColor;
  }
  .head h1{
    font-family:"Instrument Serif", Georgia, serif;
    font-weight:400;
    font-size: clamp(28px, 4.2vw, 46px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    text-align:center;
    margin-top: 14px;
    max-width: 22ch;
  }
  .head h1 em{ font-style:italic; color:#cfe7ff; }
  .head .sub{
    color: var(--tangerine);
    font-family:"Instrument Serif", serif; font-style:italic;
    font-size: clamp(15px, 1.5vw, 18px);
    margin-top: 8px;
    text-align:center;
    opacity: 0.92;
  }

  /* ───── Diagram frame ───── */
  .frame{
    background:
      linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0)),
      var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: clamp(14px, 1.6vw, 22px);
    box-shadow:
      0 30px 80px rgba(0,0,0,0.45),
      inset 0 0 0 1px rgba(255,255,255,0.02);
  }
  .frame svg{ display:block; width:100%; height:auto; }

  /* ───── SVG text classes ───── */
  .t-title    { font-family:"Instrument Serif", serif; font-size:18px; fill:#eef2f8; }
  .t-section  { font-family:"Manrope", sans-serif; font-size:10px; font-weight:600; fill:#eef2f8; letter-spacing:0.18em; text-transform:uppercase; }
  .t-label    { font-family:"Manrope", sans-serif; font-size:10px; font-weight:500; fill:#d4dcec; letter-spacing:0.02em; }
  .t-sub      { font-family:"Manrope", sans-serif; font-size:8.5px; font-weight:400; fill:#aab3c2; }
  .t-mute     { font-family:"Manrope", sans-serif; font-size:8px;  fill:#7a8597; font-style:italic; }
  .t-temp     { font-family:"Instrument Serif", serif; font-style:italic; font-size:11px; }

  /* ───── Pipe / flow base styles ───── */
  .pipe        { fill:none; stroke-linecap:round; stroke-linejoin:round; }
  .pipe-bg     { stroke: rgba(255,255,255,0.06); stroke-width:6; }
  .pipe-water-in   { stroke: var(--water-in);   stroke-width: 2.2; stroke-dasharray: 7 5; }
  .pipe-water-cold { stroke: var(--water-cold); stroke-width: 2.4; stroke-dasharray: 7 5; }
  .pipe-glycol-sup { stroke: var(--glycol-sup); stroke-width: 2.4; stroke-dasharray: 7 5; }
  .pipe-glycol-ret { stroke: var(--glycol-ret); stroke-width: 2.2; stroke-dasharray: 7 5; }
  .pipe-refrig-liq { stroke: var(--refrig-liq); stroke-width: 1.8; stroke-dasharray: 4 5; }
  .pipe-refrig-vap { stroke: var(--refrig-vap); stroke-width: 1.8; stroke-dasharray: 4 5; }

  @keyframes flow-fwd { to { stroke-dashoffset: -200; } }
  @keyframes flow-fwd-fast { to { stroke-dashoffset: -200; } }
  .anim-water-in   { animation: flow-fwd 8s linear infinite; }
  .anim-water-cold { animation: flow-fwd 7s linear infinite; }
  .anim-glycol-sup { animation: flow-fwd 6s linear infinite; }
  .anim-glycol-ret { animation: flow-fwd 6.5s linear infinite; }
  .anim-refrig-liq { animation: flow-fwd 9s linear infinite; }
  .anim-refrig-vap { animation: flow-fwd 9.5s linear infinite; }

  /* Soft glow on cold elements */
  @keyframes coldPulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
  .cold-glow { animation: coldPulse 4s ease-in-out infinite; transform-origin:center; }

  @keyframes condPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 0.9; } }
  .cond-glow { animation: condPulse 2.4s ease-in-out infinite; }

  /* Pump rotation */
  @keyframes spin { to { transform: rotate(360deg); } }
  .pump-fan { transform-origin: 670px 246px; animation: spin 2.2s linear infinite; }

  /* Condenser fan rotation */
  .cond-fan { transform-origin: 1110px 280px; animation: spin 1.6s linear infinite; }

  /* ───── Mist particles ───── */
  @keyframes mist-down {
    0%   { transform: translate(0, 0)  scale(0.4); opacity: 0; }
    15%  { opacity: 0.9; }
    100% { transform: translate(0, 90px) scale(2.2); opacity: 0; }
  }
  @keyframes mist-up {
    0%   { transform: translate(0, 0)  scale(0.4); opacity: 0; }
    15%  { opacity: 0.9; }
    100% { transform: translate(0, -85px) scale(2.2); opacity: 0; }
  }
  @keyframes mist-right {
    0%   { transform: translate(0, 0)  scale(0.4); opacity: 0; }
    15%  { opacity: 0.9; }
    100% { transform: translate(90px, 0) scale(2.2); opacity: 0; }
  }
  @keyframes mist-left {
    0%   { transform: translate(0, 0)  scale(0.4); opacity: 0; }
    15%  { opacity: 0.9; }
    100% { transform: translate(-90px, 0) scale(2.2); opacity: 0; }
  }
  .mist-particle{
    fill: #cfe7ff;
    transform-box: fill-box;
    transform-origin: center;
  }
  .m-down  { animation: mist-down  2.4s ease-out infinite; }
  .m-up    { animation: mist-up    2.4s ease-out infinite; }
  .m-right { animation: mist-right 2.4s ease-out infinite; }
  .m-left  { animation: mist-left  2.4s ease-out infinite; }

  /* ───── Tank frost shimmer ───── */
  @keyframes shimmer { 0%,100% { opacity: 0.5; } 50% { opacity: 0.85; } }
  .frost-shimmer { animation: shimmer 6s ease-in-out infinite; }

  /* ───── Legend ───── */
  .legend{
    margin-top: clamp(16px, 2vw, 24px);
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px 14px;
    padding: 18px 22px;
    background: var(--bg-2);
    border:1px solid var(--line);
    border-radius: 14px;
  }
  @media (max-width: 980px){ .legend{ grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 560px){ .legend{ grid-template-columns: repeat(2, 1fr); } }
  .leg{
    display:flex; align-items:center; gap:10px;
    font-size: 12px; color:#d4dcec; letter-spacing:0.02em;
  }
  .leg .swatch{
    width: 26px; height: 0; flex:0 0 auto;
    border-top: 2.4px dashed var(--c);
  }
  .leg .name { font-weight:500; }
  .leg .temp { color: var(--text-mute); margin-left: 6px; font-style: italic; font-family: "Instrument Serif", serif; }

  .footnote{
    margin-top: clamp(20px, 2.5vw, 32px);
    text-align:center;
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic;
    font-size: clamp(16px, 1.5vw, 19px);
    color: var(--tangerine);
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.4;
  }
  .footnote .sep{ margin: 0 12px; opacity: 0.55; }

  /* ───── Scalable system configuration block ───── */
  .scalable{
    margin-top: clamp(18px, 2.4vw, 28px);
    padding: clamp(30px, 4vw, 48px) clamp(24px, 3.5vw, 56px);
    background:
      linear-gradient(180deg, rgba(143,214,255,0.04), rgba(143,214,255,0)),
      var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .scalable::before{
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(to right, transparent, rgba(143,214,255,0.45) 30%, rgba(143,214,255,0.45) 70%, transparent);
    opacity: 0.7;
  }
  .scalable .eyebrow{
    font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--water-cold);
    margin-bottom: 14px;
  }
  .scalable .eyebrow .dot{
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; margin-right: 12px; vertical-align: 2px;
    box-shadow: 0 0 12px currentColor;
  }
  .scalable h2{
    font-family: "Instrument Serif", Georgia, serif;
    font-weight: 400;
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 22px;
    color: #eef2f8;
  }
  .scalable h2 em{ font-style: italic; color: #cfe7ff; }
  .scalable p{
    font-family: "Manrope", sans-serif;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.65;
    color: var(--text-dim);
    max-width: 64ch;
    margin: 0 auto 16px;
    text-align: left;
  }
  .scalable p:last-child{ margin-bottom: 0; }
  .scalable p strong{ color: #d4dcec; font-weight: 500; }

  /* Editorial tangerine — for one key inline stat per view.
     Colour carries the emphasis; the weight stays gentle. */
  .scalable p strong.stat,
  .scalable li strong.stat{
    color: var(--tangerine);
    font-weight: 600;
    letter-spacing: 0.005em;
  }
  .scalable ul{
    list-style: none;
    padding: 0;
    margin: 0 auto 18px;
    max-width: 64ch;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 11px;
  }
  .scalable li{
    position: relative;
    padding-left: 22px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.55;
    color: var(--text-dim);
  }
  .scalable li::before{
    content: "";
    position: absolute;
    left: 0; top: 0.55em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--water-cold);
    box-shadow: 0 0 10px rgba(143,214,255,0.5);
  }