/* ==========================================================================
   CryoDragon — site styles
   1. Tokens   2. Base   3. Utilities & buttons   4. Ice text effect
   5. Header & mega menus   6. Slider   7. Ice edges   8. Sections
   9. Footer   10. Responsive   11. Reduced motion
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  --shard: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2012%2022%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22a%22%20x1=%220%22%20y1=%220%22%20x2=%221%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23bff0ff%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%2300a3e6%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d=%22M6%200%2011%206%2010%2016%206%2022%202%2016%201%206z%22%20fill=%22url%28%23a%29%22/%3E%3Cpath%20d=%22M6%200%206%2022%202%2016%201%206z%22%20fill=%22%23ffffff%22%20fill-opacity=%22.45%22/%3E%3Cpath%20d=%22M6%200%2011%206%206%208%201%206z%22%20fill=%22%23ffffff%22%20fill-opacity=%22.7%22/%3E%3Cpath%20d=%22M6%208%2010%2016%206%2022z%22%20fill=%22%230077b6%22%20fill-opacity=%22.35%22/%3E%3C/svg%3E");   /* ice-crystal bullet used in lists across the site */
  --ice-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20720%2064%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0%2065%20H720%20L720.0%2022.5%20L720.0%2022.5%20L712.1%2047.5%20L707.5%2020.8%20L697.7%2034.6%20L691.3%2018.4%20L687.2%2028.0%20L682.0%2017.1%20L672.1%2022.8%20L665.9%2015.2%20L656.1%2023.3%20L645.9%2013.6%20L637.3%2020.1%20L628.3%2012.6%20L625.0%2018.9%20L619.4%2012.0%20L613.0%2026.8%20L604.9%2011.0%20L599.0%2034.9%20L593.5%2010.1%20L583.8%2016.1%20L577.0%208.6%20L570.7%2034.0%20L562.1%207.3%20L552.2%2050.4%20L542.7%206.4%20L533.7%2022.1%20L522.9%206.9%20L516.3%2033.6%20L510.6%207.9%20L501.9%2015.2%20L493.2%2010.0%20L487.7%2050.4%20L482.2%2011.5%20L478.4%2022.2%20L471.8%2012.8%20L464.5%2023.7%20L459.9%2014.2%20L453.4%2035.5%20L449.5%2015.2%20L445.3%2023.1%20L437.5%2016.1%20L428.5%2027.8%20L419.8%2017.1%20L409.3%2033.1%20L399.7%2018.2%20L394.7%2030.8%20L390.2%2018.8%20L383.8%2038.4%20L380.7%2019.6%20L374.7%2026.5%20L367.6%2020.8%20L358.9%2033.9%20L346.2%2023.0%20L339.9%2034.4%20L331.7%2024.1%20L323.8%2048.6%20L317.0%2024.7%20L309.6%2051.7%20L299.3%2024.6%20L289.3%2057.1%20L281.6%2023.8%20L275.7%2059.4%20L266.0%2022.9%20L254.8%2036.6%20L246.0%2022.2%20L237.6%2035.5%20L231.1%2022.2%20L224.1%2038.1%20L213.5%2022.9%20L206.8%2031.5%20L200.3%2023.6%20L190.7%2036.3%20L178.6%2024.7%20L172.8%2060.9%20L169.4%2024.9%20L158.7%2050.5%20L148.9%2024.9%20L140.2%2040.2%20L135.3%2024.5%20L129.1%2050.2%20L119.0%2024.1%20L111.6%2033.6%20L101.8%2024.0%20L91.5%2057.1%20L83.7%2024.5%20L73.9%2059.4%20L63.4%2025.3%20L59.2%2035.6%20L51.8%2025.6%20L41.7%2049.8%20L34.5%2025.5%20L27.5%2053.8%20L24.4%2025.0%20L13.0%2047.8%20L5.2%2023.2%20L0.8%2046.7%20L0.0%2022.5%20Z%22%20fill=%22%23fff%22/%3E%3C/svg%3E");   /* icicle cut-out shape, inline so it also works when the site is opened straight from a folder */
  --navy: #00316d;
  --navy-mid: #0b4486;
  --navy-deep: #00255a;
  --navy-darker: #001c45;
  --cyan: #00bbff;          /* brand accent */
  --cyan-dark: #006fa8;     /* accessible cyan for text on white */
  --frost: #9fe3ff;
  --ice: #e9f7fe;
  --ice-2: #d6f0fc;
  --bg: #f7f7f7;
  --text: #1a1a1a;
  --muted: #4a5566;
  --border: #dde3ea;

  --font-head: "Josefin Sans", "Trebuchet MS", sans-serif;
  --font-body: "Maven Pro", Helvetica, Arial, Verdana, sans-serif;

  --container: 1180px;
  --ridge: 56px;            /* height of the jagged ice ridge on top of navy bands */
  --icicles: 64px;          /* height of the icicles hanging under navy bands */
  --chip: 16px;             /* size of the chipped corners on ice blocks */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* 2. Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--cyan-dark); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
[role="list"] { list-style: none; }
figure { margin: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 .6em;
  letter-spacing: .01em;
}
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 3px; }
.band--navy :focus-visible, .site-footer :focus-visible, .primary-nav :focus-visible { outline-color: #fff; }

/* 3. Utilities & buttons ------------------------------------------------ */
.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  background: var(--navy); color: #fff; padding: .75em 1.25em; border-radius: 0 0 8px 8px;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 0; color: #fff; }
main:focus { outline: none; }

/* Buttons: blocks of ice. Hovering "cracks" the ice. */
.btn {
  --cut: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --inner-cut: polygon(8.8px 0, 100% 0, 100% calc(100% - 8.8px), calc(100% - 8.8px) 100%, 0 100%, 0 8.8px);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .85em 1.45em .75em;
  background: linear-gradient(170deg, #5fd6ff, var(--cyan) 55%, #12a8e6);
  color: var(--navy);
  border: 0;
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: .03em; text-decoration: none;
  clip-path: var(--cut);
  cursor: pointer;
  transition: background .25s, color .25s, transform .2s;
}
.btn::before, .btn::after { content: ""; position: absolute; pointer-events: none; }
.btn::before {                  /* the crack — spreads across on hover */
  inset: 0; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20200%2050%27%20preserveAspectRatio=%27none%27%3E%3Cpath%20d=%27M0%2034%20L22%2030%20L35%2036%20L58%2022%20L74%2027%20L96%2014%20L118%2020%20L134%209%20L156%2015%20L178%205%20L200%208%20M58%2022%20L62%2040%20L70%2050%20M96%2014%20L92%202%20M134%209%20L144%2030%20L139%2050%20M22%2030%20L18%2012%20L26%200%20M178%205%20L186%2026%27%20fill=%27none%27%20stroke=%27%23ffffff%27%20stroke-width=%272.6%27%20stroke-opacity=%27.9%27%20vector-effect=%27non-scaling-stroke%27%20stroke-linejoin=%27bevel%27/%3E%3Cpath%20d=%27M0%2034%20L22%2030%20L35%2036%20L58%2022%20L74%2027%20L96%2014%20L118%2020%20L134%209%20L156%2015%20L178%205%20L200%208%20M58%2022%20L62%2040%20L70%2050%20M96%2014%20L92%202%20M134%209%20L144%2030%20L139%2050%20M22%2030%20L18%2012%20L26%200%20M178%205%20L186%2026%27%20fill=%27none%27%20stroke=%27%2300316d%27%20stroke-width=%271.1%27%20stroke-opacity=%27.75%27%20vector-effect=%27non-scaling-stroke%27%20stroke-linejoin=%27bevel%27%20transform=%27translate%280.6%200.6%29%27/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .45s cubic-bezier(.7, 0, .3, 1);
}
.btn::after {                   /* light glinting across the ice */
  inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s var(--ease);
}
.btn:hover { background: linear-gradient(170deg, #ffffff, #e3f7ff 60%, #c7ecfc); color: var(--navy); transform: translateY(-1px); }
.btn:hover::before, .btn:focus-visible::before { clip-path: inset(0 0 0 0); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(1px); }
@media (hover: hover) { .btn:hover { animation: ice-shudder .25s linear 1; } }
@keyframes ice-shudder { 25% { translate: -1px 0; } 50% { translate: 1px 0; } 75% { translate: -.5px 0; } }

/* Outline button: a clear ice block with a closed navy rim on every corner */
.btn--outline { background: var(--navy); color: var(--navy); }
.btn--outline::after {          /* inner ice (sits 2px inside the rim, so the rim stays closed at the cut corners) */
  inset: 2px; z-index: -2; transform: none; transition: background .25s;
  clip-path: var(--inner-cut);
  background: linear-gradient(170deg, #ffffff 0%, #f1fbff 45%, #d9f2fd 100%);
}
.btn--outline:hover { background: var(--navy); color: var(--navy); }
.btn--outline:hover::after { transform: none; background: linear-gradient(170deg, #ffffff, #e2f6ff 50%, #c4eafb); }
.btn--small { padding: .62em 1.05em .52em; font-size: .92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5em; }

.section { padding: 72px 0; position: relative; }
.section__intro { text-align: center; max-width: 860px; margin: 0 auto 40px; }

.heading { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.85rem); }
.heading__kicker { display: block; font-size: 1rem; font-weight: 600; color: var(--text); letter-spacing: .06em; }
.heading__main { display: block; }
.heading--center { text-align: center; }
.heading--light { color: #fff; }
.heading--light .heading__kicker { color: var(--frost); }

/* 4. Ice text effect -----------------------------------------------------
   Write [ice]words[/ice] (or <span class="ice-text">words</span>).
   Default = simple underline (phones, older browsers). Larger screens with
   modern CSS get frosted lettering and icicles that grow into place. */
.ice-text {
  --ice-a: var(--navy);  --ice-b: #1c8fd0;  --ice-hl: #6fd0ff;
  --icicles: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20240%2034%27%20preserveAspectRatio=%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27g%27%20x1=%270%27%20y1=%270%27%20x2=%270%27%20y2=%271%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%239fe0ff%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%230a7cc4%27%20stop-opacity=%27.9%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d=%27M0.0%200.6%20L10.0%202.9%20L20.0%203.7%20L30.0%204.1%20L40.0%204.3%20L50.0%206.5%20L60.0%207.3%20L70.0%207.1%20L80.0%207.6%20L90.0%207.3%20L100.0%207.0%20L110.0%208.1%20L120.0%208.7%20L130.0%207.3%20L140.0%209.0%20L150.0%207.3%20L160.0%206.9%20L170.0%205.9%20L180.0%207.7%20L190.0%206.4%20L200.0%206.0%20L210.0%204.5%20L220.0%202.1%20L230.0%202.0%20L240.0%201.5%20L240.0%203.5%20L230.0%203.8%20L224.2%2023.6%20L220.0%205.3%20L210.0%207.9%20L203.1%2014.6%20L200.0%2010.1%20L193.0%2030.4%20L190.0%2010.9%20L185.2%2018.8%20L180.0%2012.8%20L176.3%2016.9%20L170.0%2011.3%20L163.4%2019.1%20L160.0%2011.3%20L153.6%2020.2%20L150.0%2012.9%20L144.6%2020.0%20L140.0%2013.9%20L130.0%2013.3%20L120.0%2013.4%20L115.7%2028.6%20L110.0%2013.0%20L100.0%2012.2%20L96.1%2027.2%20L90.0%2012.2%20L85.6%2020.6%20L80.0%2012.6%20L75.6%2017.4%20L70.0%2011.7%20L64.0%2016.8%20L60.0%2012.3%20L50.0%2010.0%20L46.6%2016.9%20L40.0%208.5%20L34.9%2022.0%20L30.0%206.9%20L20.0%206.3%20L16.1%2010.9%20L10.0%206.1%20L4.1%2011.5%20L0.0%202.0%20Z%27%20fill=%27url%28%23g%29%27/%3E%3Cpath%20d=%27M0.0%201.3%20L10.0%203.6%20L20.0%204.4%20L30.0%204.8%20L40.0%205.0%20L50.0%207.2%20L60.0%208.0%20L70.0%207.8%20L80.0%208.3%20L90.0%208.0%20L100.0%207.7%20L110.0%208.8%20L120.0%209.4%20L130.0%208.0%20L140.0%209.7%20L150.0%208.0%20L160.0%207.6%20L170.0%206.6%20L180.0%208.4%20L190.0%207.1%20L200.0%206.7%20L210.0%205.2%20L220.0%202.8%20L230.0%202.7%20L240.0%202.2%27%20fill=%27none%27%20stroke=%27%23ffffff%27%20stroke-width=%27.9%27%20stroke-opacity=%27.85%27%20vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
  position: relative; display: inline-block;
  text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 3px; text-underline-offset: 6px;
}
.heading--light .ice-text, .band--navy .ice-text, .site-footer .ice-text {
  --ice-a: #ffffff; --ice-b: #bfeeff; --ice-hl: #ffffff;
  --icicles: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20240%2034%27%20preserveAspectRatio=%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27g%27%20x1=%270%27%20y1=%270%27%20x2=%270%27%20y2=%271%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23e9fbff%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%237fd8ff%27%20stop-opacity=%27.9%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d=%27M0.0%202.7%20L10.0%201.5%20L20.0%202.1%20L30.0%205.5%20L40.0%204.2%20L50.0%204.8%20L60.0%206.8%20L70.0%206.7%20L80.0%208.6%20L90.0%207.3%20L100.0%209.5%20L110.0%208.0%20L120.0%208.8%20L130.0%209.6%20L140.0%208.7%20L150.0%209.1%20L160.0%208.1%20L170.0%205.9%20L180.0%207.4%20L190.0%206.0%20L200.0%204.5%20L210.0%203.4%20L220.0%204.2%20L230.0%202.6%20L240.0%202.6%20L240.0%204.3%20L236.0%2018.7%20L230.0%205.7%20L220.0%207.4%20L214.7%2011.4%20L210.0%206.5%20L204.6%2016.0%20L200.0%208.2%20L194.4%2021.7%20L190.0%2010.1%20L183.3%2017.1%20L180.0%2012.5%20L173.2%2019.1%20L170.0%209.8%20L163.2%2030.8%20L160.0%2013.1%20L157.0%2020.8%20L150.0%2013.5%20L146.8%2019.9%20L140.0%2013.5%20L133.1%2022.4%20L130.0%2015.2%20L125.5%2022.1%20L120.0%2014.7%20L116.9%2021.2%20L110.0%2012.8%20L104.9%2018.5%20L100.0%2015.0%20L95.5%2031.8%20L90.0%2013.1%20L83.2%2018.1%20L80.0%2014.0%20L76.0%2020.8%20L70.0%2011.0%20L64.9%2028.7%20L60.0%2012.0%20L56.7%2015.4%20L50.0%208.5%20L43.2%2013.2%20L40.0%208.1%20L35.8%2020.0%20L30.0%209.1%20L26.4%2020.0%20L20.0%205.1%20L14.0%2011.5%20L10.0%204.7%20L0.0%205.1%20Z%27%20fill=%27url%28%23g%29%27/%3E%3Cpath%20d=%27M0.0%203.4%20L10.0%202.2%20L20.0%202.8%20L30.0%206.2%20L40.0%204.9%20L50.0%205.5%20L60.0%207.5%20L70.0%207.4%20L80.0%209.3%20L90.0%208.0%20L100.0%2010.2%20L110.0%208.7%20L120.0%209.5%20L130.0%2010.3%20L140.0%209.4%20L150.0%209.8%20L160.0%208.8%20L170.0%206.6%20L180.0%208.1%20L190.0%206.7%20L200.0%205.2%20L210.0%204.1%20L220.0%204.9%20L230.0%203.3%20L240.0%203.3%27%20fill=%27none%27%20stroke=%27%23ffffff%27%20stroke-width=%27.9%27%20stroke-opacity=%27.85%27%20vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E");
}

@media (min-width: 601px) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .ice-text {
      text-decoration: none;
      padding-bottom: .05em;
      margin-bottom: .4em;          /* room for the icicles when a heading wraps */
      background-image: linear-gradient(110deg, var(--ice-a) 0 38%, var(--ice-b) 46%, var(--ice-hl) 50%, var(--ice-b) 54%, var(--ice-a) 62% 100%);
      background-size: 260% 100%;
      background-position: 100% 0;
      -webkit-background-clip: text; background-clip: text;
      color: transparent; -webkit-text-fill-color: transparent;
      animation: ice-shine 8s ease-in-out 1.5s infinite;
    }
    /* frost bar + icicles */
    .ice-text::after {
      content: ""; position: absolute; left: -.08em; right: -.08em; top: calc(100% - .16em);
      height: .62em; min-height: 14px;
      background: var(--icicles) no-repeat 0 0 / 100% 100%;   /* one slightly sagging, uneven ice ledge */
      transform-origin: top; pointer-events: none;
    }
    .ice-js .ice-text::after { clip-path: inset(0 0 100% 0); }
    .ice-js .ice-text.is-frozen::after { animation: icicles-grow 1.6s var(--ease) .2s forwards; }
  }
}
@keyframes ice-shine { 0%, 70% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes icicles-grow { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* Ice block: [iceblock]words[/iceblock] — words frozen in a glinting block of ice.
   Navy text on pale ice keeps a contrast ratio above 9:1. */
.ice-block {
  position: relative; display: inline-block; overflow: hidden;
  padding: .1em .35em 0; margin: 0 .04em; line-height: 1.15;
  color: var(--navy); -webkit-text-fill-color: var(--navy);
  background:
    linear-gradient(160deg, rgba(255,255,255,.95) 0%, #effaff 28%, #cdeefc 62%, #e3f6fe 100%);
  border: 1.5px solid #8fdcff;
  border-radius: 7px 3px 8px 2px / 4px 7px 3px 8px;      /* slightly uneven, like a cut block */
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.95), inset -3px -4px 10px rgba(0, 111, 168, .18), 0 3px 8px rgba(0, 49, 109, .12);
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
.ice-block::before {            /* faint frost streaks inside the ice */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background:
    repeating-linear-gradient(118deg, transparent 0 9px, rgba(255,255,255,.55) 9px 10px, transparent 10px 23px),
    radial-gradient(60% 50% at 85% 85%, rgba(0, 187, 255, .18), transparent 70%);
}
.ice-block::after {             /* the shine sweeping across */
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.95), transparent);
  transform: skewX(-18deg);
  animation: ice-glint 5.5s ease-in-out 1s infinite;
}
@keyframes ice-glint { 0%, 62% { left: -60%; } 85%, 100% { left: 130%; } }

/* ---------- Frost sparkles: [ice] on DARK backgrounds (navy sections, footer, slider) ----------
   Frosty sparkles twinkle around the word; the word keeps its solid white colour. */
.ice-frost { position: relative; display: inline-block; }
.ice-frost::before, .ice-frost::after {
  content: ""; position: absolute; inset: -.45em -.4em; pointer-events: none;
  background:
    radial-gradient(circle, #fff 0 2px, transparent 3px) 6% 18% / 14px 14px no-repeat,
    radial-gradient(circle, #fff 0 1px, transparent 2px) 92% 8% / 10px 10px no-repeat,
    radial-gradient(circle, #bfeeff 0 1.5px, transparent 2.5px) 78% 92% / 12px 12px no-repeat,
    radial-gradient(circle, #fff 0 1px, transparent 2px) 30% 96% / 10px 10px no-repeat;
  opacity: 0;
}
.ice-frost::after {
  background:
    conic-gradient(from 0deg at 50% 50%, transparent 0 40deg, #fff 45deg, transparent 50deg 130deg, #fff 135deg, transparent 140deg 220deg, #fff 225deg, transparent 230deg 310deg, #fff 315deg, transparent 320deg) 98% 50% / 22px 22px no-repeat,
    conic-gradient(from 0deg at 50% 50%, transparent 0 40deg, #dff6ff 45deg, transparent 50deg 130deg, #dff6ff 135deg, transparent 140deg 220deg, #dff6ff 225deg, transparent 230deg 310deg, #dff6ff 315deg, transparent 320deg) 2% 70% / 16px 16px no-repeat,
    conic-gradient(from 0deg at 50% 50%, transparent 0 40deg, #fff 45deg, transparent 50deg 130deg, #fff 135deg, transparent 140deg 220deg, #fff 225deg, transparent 230deg 310deg, #fff 315deg, transparent 320deg) 55% 0% / 18px 18px no-repeat;
}
.band--navy .ice-frost { text-shadow: 0 0 10px rgba(159, 227, 255, .55); }
.ice-frost.is-frozen::before { animation: twinkle 2.6s ease-in-out infinite; }
.ice-frost.is-frozen::after  { animation: twinkle 3.4s ease-in-out .9s infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.05); } }


/* 5. Header & mega menus ------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 2px 10px rgba(0, 30, 70, .08); }

.topbar { background: var(--navy-darker); color: #fff; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 30px; }
.topbar__specialties { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topbar__label { font-weight: 700; color: var(--frost); }
.topbar ul { display: flex; flex-wrap: wrap; list-style: none; }
.topbar li + li::before { content: "❄"; color: var(--cyan); opacity: .7; margin: 0 8px; font-size: .9em; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: var(--cyan); }
.topbar__hours { margin: 0; font-weight: 700; white-space: nowrap; }

.brandbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.brand img { width: 290px; transition: width .3s var(--ease); }
.site-header.is-scrolled .brand img { width: 220px; }
.brandbar__contact { text-align: right; }
.brandbar__cta { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: .85rem; text-transform: uppercase; color: var(--navy); letter-spacing: .04em; }
.brandbar__links { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.45rem; color: var(--cyan); }
.brandbar__links a { color: var(--cyan); text-decoration: none; transition: color .2s; }
.brandbar__links a:hover { color: var(--navy); }

.nav-toggle { display: none; }

.primary-nav { background: var(--navy); position: relative; }
.menu { display: flex; list-style: none; position: relative; }
/* Every top-level item takes an equal share of the space and centres its label,
   so each title sits in the middle between the dividers. */
.menu__item { flex: 1 1 auto; position: relative; display: flex; justify-content: center; }
.menu__item.has-mega { position: static; }
.menu__item + .menu__item {   /* divider (works for every item type) */
  background: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)) left 50% / 1px 18px no-repeat;
}
.menu__row { display: flex; align-items: center; }
.menu__link {
  display: block; padding: 14px 4px 11px; white-space: nowrap;
  color: #fff; text-decoration: none; text-transform: uppercase;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem; letter-spacing: .03em;
}
.menu__link:hover, .menu__link[aria-current="page"] { color: var(--cyan); }
.menu__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

.submenu-toggle { width: 22px; height: 22px; margin-left: 2px; padding: 0; background: none; border: 0; cursor: pointer; color: #fff; }
.submenu-toggle::before {
  content: ""; display: block; width: 7px; height: 7px; margin: 4px auto 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s;
}
.submenu-toggle[aria-expanded="true"]::before { transform: rotate(-135deg); margin-top: 9px; }

/* Dropdown panels: dark glacier glass */
.submenu {
  position: absolute; top: 100%; z-index: 50;
  color: #fff;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(0, 187, 255, .18), transparent 60%),
    linear-gradient(160deg, rgba(0, 49, 109, .97), rgba(0, 28, 69, .98));
  border: 1px solid rgba(159, 227, 255, .35);
  border-top: 0;
  box-shadow: 0 24px 50px rgba(0, 20, 50, .45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  clip-path: inset(0 0 100% 0);
  transition: opacity .25s, transform .35s var(--ease), clip-path .45s var(--ease), visibility 0s .45s;
}
.submenu::before {          /* frosted ice rim along the top */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--frost), var(--cyan), transparent);
}
.menu__item.is-open > .submenu,
.menu__item:hover > .submenu {
  opacity: 1; visibility: visible; transform: none; clip-path: inset(0 -40px -60px -40px);
  transition: opacity .25s, transform .35s var(--ease), clip-path .45s var(--ease);
}
.submenu a { color: #fff; text-decoration: none; }

.submenu--simple { left: 50%; translate: -50% 0; min-width: 250px; list-style: none; padding: 14px 0 12px; }
.submenu--simple a { display: block; padding: 8px 22px; font-size: .95rem; position: relative; transition: color .2s, padding .2s, background .2s; }
.submenu--simple a:hover { color: var(--cyan); padding-left: 30px; background: rgba(255,255,255,.05); }
.submenu--simple a::before, .mega__col a::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  background: var(--cyan); transform: rotate(45deg) scale(0); transition: transform .2s;
}
.submenu--simple a:hover::before, .mega__col a:hover::before { transform: rotate(45deg) scale(1); }
.submenu__indent a { padding-left: 38px; font-size: .9rem; color: #cfe9ff; }
.submenu__indent a:hover { padding-left: 46px; }

.submenu--mega {
  left: 0; right: 0; width: 100%;
  display: grid; grid-template-columns: 1fr 270px; gap: 0;
}
.mega__cols { display: grid; gap: 22px 26px; padding: 26px 28px 28px; }
.mega--services .mega__cols { grid-template-columns: repeat(4, 1fr); }
.mega--solutions .mega__cols { grid-template-columns: 1fr 2fr; }
.mega__head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(159, 227, 255, .2); }
.mega__icon {
  flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center;
  color: var(--navy-darker);
  background: linear-gradient(145deg, #e9fbff, var(--frost) 55%, var(--cyan));
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
.mega__heading { display: block; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; color: #fff; font-size: .98rem; letter-spacing: .04em; }
.mega__blurb { display: block; font-size: .78rem; color: var(--frost); line-height: 1.3; margin-top: 2px; }
.mega__col ul { list-style: none; }
.mega__col--wide ul { columns: 2; column-gap: 24px; }
.mega__col li { break-inside: avoid; }
.mega__col a {
  display: block; position: relative; padding: 5px 0 5px 0; font-size: .92rem; color: #e6f5ff;
  transition: color .2s, padding .2s;
}
.mega__col a::before { left: 0; }
.mega__col a:hover { color: var(--cyan); padding-left: 16px; }

.mega__promo {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  padding: 26px 24px;
  background:
    linear-gradient(180deg, rgba(0, 28, 69, .2), rgba(0, 28, 69, .92) 70%),
    var(--promo-bg) no-repeat 0 50% / cover,
    var(--navy-deep);
  border-left: 1px solid rgba(159, 227, 255, .25);
}
.mega__promo-kicker { margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cyan); font-weight: 700; }
.mega__promo-title { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; line-height: 1.2; text-transform: uppercase; }
.mega__promo-text { margin: 0 0 6px; font-size: .9rem; color: #d8eeff; }
.mega__promo .btn { align-self: flex-start; }

/* 6. Slider ------------------------------------------------------------- */
.hero {
  /* Slider height: grows with the screen but never more than ~70% of the window or 720px,
     so the scene (and the dragon) stays in proportion on laptops and wide monitors alike */
  --hero-h: clamp(360px, min(48vw, 70vh), 720px);
  position: relative; overflow: hidden;
  height: var(--hero-h);
  background: #0d5fae;
}
.hero__track, .slide { position: absolute; inset: 0; }
.slide { opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s 1s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 1s ease; }
/* The scene = the background picture plus everything placed on it, scaled together by the slider's
   HEIGHT (never by its width, so wide monitors don't blow the dragon up). Layers are placed in % of
   this scene, so nothing drifts, stretches, or floats in mid-air. On screens wider than the scene,
   the backdrop (a mirrored panorama of the same picture, at the same scale) fills the sides. */
.slide__stage {
  position: absolute; left: 50%; bottom: 0;
  height: 100%;
  aspect-ratio: 1800 / 840;
  translate: -50% 0;
}
.slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.slide__backdrop { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center bottom; background-size: auto 100%; }
.layer { position: absolute; height: auto; max-width: none; transition: translate .5s ease-out; will-change: transform; }
.float--bob   { animation: bob 6s ease-in-out infinite; }
.float--drift { animation: drift 11s ease-in-out infinite; }
.float--hover { animation: hover 7s ease-in-out infinite; }
@keyframes bob   { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(5px) rotate(-1.2deg); } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) rotate(0); } 33% { transform: translate(10px, 3px) rotate(.6deg); } 66% { transform: translate(-6px, 5px) rotate(-.5deg); } }
@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.hero__snow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

.slide__content { position: absolute; left: 0; right: 0; top: 6%; z-index: 4; text-align: center; }
.slide__tagline {
  margin: 0;
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; line-height: 1.2;
  font-size: clamp(1.05rem, .55rem + 2.2vw, 2.4rem);
  color: #fff;
  text-shadow: 0 0 14px rgba(159, 227, 255, .95), 0 2px 8px rgba(0, 30, 70, .55);
}
.wind__word { display: inline-block; white-space: nowrap; }
.wind__ch {
  display: inline-block;
  animation: wind-in 1.15s cubic-bezier(.25, .75, .3, 1) both;
  animation-delay: calc(.45s + var(--i) * 34ms + var(--j, 0ms));
}
/* Each letter is carried on its own swirl: lifted or dropped (--dy), spun (--rot), overshoots, then settles */
@keyframes wind-in {
  0%   { opacity: 0; transform: translate(-2.4em, var(--dy)) rotate(var(--rot)) skewX(-30deg) scale(.5); filter: blur(8px); color: var(--frost); }
  30%  { opacity: .75; transform: translate(-1em, calc(var(--dy) * -.7)) rotate(calc(var(--rot) * -.6)) skewX(-18deg) scale(1.15); filter: blur(3px); }
  58%  { opacity: 1; transform: translate(.18em, calc(var(--dy) * .35)) rotate(calc(var(--rot) * .25)) skewX(6deg) scale(.96); filter: blur(.6px); }
  80%  { transform: translate(-.05em, calc(var(--dy) * -.1)) rotate(calc(var(--rot) * -.06)) skewX(-2deg) scale(1.02); filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; color: #fff; }
}
/* curling gusts that sweep across once as the letters arrive */
.gust {
  position: absolute; left: 0; top: 2%; width: 100%; height: 20%; z-index: 4; pointer-events: none; overflow: visible;
}
.gust path {
  fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 220 1400; stroke-dashoffset: 220; opacity: 0;
  animation: gust 1.9s cubic-bezier(.35, .1, .25, 1) forwards;
}
.gust path:nth-child(1) { animation-delay: .3s; }
.gust path:nth-child(2) { animation-delay: .5s; stroke-dasharray: 320 1400; stroke-dashoffset: 320; }
.gust path:nth-child(3) { animation-delay: .75s; stroke-dasharray: 160 1400; stroke-dashoffset: 160; }
@keyframes gust { 0% { opacity: 0; } 15% { opacity: .9; } 85% { opacity: .6; } 100% { stroke-dashoffset: -1150; opacity: 0; } }

.slide__title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; color: #fff; font-size: clamp(1.4rem, 1rem + 2.4vw, 3rem); margin: .3em 0; text-shadow: 0 2px 14px rgba(0, 30, 70, .7); }

.hero__controls {
  position: absolute; z-index: 5; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px;
  background: rgba(0, 49, 109, .75); padding: 6px 10px; border-radius: 30px;
}
.hero__btn, .hero__dot { background: none; border: 0; cursor: pointer; color: #fff; padding: 0; }
.hero__btn { width: 28px; height: 28px; display: grid; place-items: center; }
.hero__prev::before, .hero__next::before { content: ""; width: 8px; height: 8px; border-top: 2px solid #fff; border-left: 2px solid #fff; }
.hero__prev::before { transform: rotate(-45deg); margin-left: 4px; }
.hero__next::before { transform: rotate(135deg); margin-right: 4px; }
.hero__pause::before { content: ""; width: 10px; height: 12px; border-inline: 3px solid #fff; }
.hero__pause[aria-pressed="true"]::before { width: 0; height: 0; border: 0; border-left: 11px solid #fff; border-block: 7px solid transparent; margin-left: 3px; }
.hero__dots { display: flex; gap: 6px; }
.hero__dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; }
.hero__dot[aria-current="true"] { background: var(--cyan); border-color: var(--cyan); }

/* 7. Ice edges ----------------------------------------------------------
   Navy bands draw their own jagged ridge (top) and icicles (bottom) inside their padding.
   The gaps between the ice show --above / --below, so set those to the colour of the
   neighbouring sections and the edge always blends in. */
.band--navy {
  --above: var(--bg);
  --below: var(--bg);
  background: linear-gradient(180deg, var(--navy) 0, var(--navy) var(--ridge), #003a80 50%, var(--navy) calc(100% - var(--icicles)), var(--navy) 100%);
  color: #fff;
  padding-top: calc(var(--ridge) + 56px);
  padding-bottom: calc(var(--icicles) + 56px);
}
.band--navy::before, .band--navy::after, .site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; pointer-events: none;
}
.band--navy::before, .site-footer::before { top: 0; height: var(--ridge); background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20720%2056%27%20preserveAspectRatio=%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27r%27%20x1=%270%27%20y1=%270%27%20x2=%270%27%20y2=%2756%27%20gradientUnits=%27userSpaceOnUse%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%231d64b0%27/%3E%3Cstop%20offset=%27.55%27%20stop-color=%27%23073f82%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%2300316d%27/%3E%3C/linearGradient%3E%3ClinearGradient%20id=%27f%27%20x1=%270%27%20y1=%270%27%20x2=%270%27%20y2=%2756%27%20gradientUnits=%27userSpaceOnUse%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23ffffff%27%20stop-opacity=%27.28%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%23ffffff%27%20stop-opacity=%270%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d=%27M0%2056%20L0.0%2030.8%20L17.0%2016.1%20L46.0%2038.6%20L75.0%203.1%20L93.0%2015.1%20L125.0%2038.5%20L150.0%2036.9%20L167.0%2042.2%20L193.0%2036.7%20L227.0%204.2%20L255.0%2029.0%20L291.0%2022.2%20L324.0%2048.6%20L359.0%2023.4%20L394.0%2040.9%20L408.0%2047.7%20L422.0%2013.9%20L453.0%2037.8%20L472.0%2012.2%20L500.0%2010.7%20L528.0%2033.2%20L538.0%2022.0%20L569.0%2018.4%20L589.0%2049.6%20L617.0%2030.3%20L647.0%2021.4%20L666.0%2030.8%20L696.0%2025.0%20L720.0%2030.8%20L720%2056%20Z%27%20fill=%27url%28%23r%29%27/%3E%3Cpath%20d=%27M17.0%2016.1%20L31.5%2056.0%20L46.0%2038.6%20Z%20M75.0%203.1%20L84.0%2056.0%20L93.0%2015.1%20Z%20M150.0%2036.9%20L158.5%2056.0%20L167.0%2042.2%20Z%20M227.0%204.2%20L241.0%2056.0%20L255.0%2029.0%20Z%20M291.0%2022.2%20L307.5%2056.0%20L324.0%2048.6%20Z%20M359.0%2023.4%20L376.5%2056.0%20L394.0%2040.9%20Z%20M422.0%2013.9%20L437.5%2056.0%20L453.0%2037.8%20Z%20M500.0%2010.7%20L514.0%2056.0%20L528.0%2033.2%20Z%20M569.0%2018.4%20L579.0%2056.0%20L589.0%2049.6%20Z%20M647.0%2021.4%20L656.5%2056.0%20L666.0%2030.8%20Z%20M696.0%2025.0%20L708.0%2056.0%20L720.0%2030.8%20Z%20%27%20fill=%27url%28%23f%29%27/%3E%3Cpolyline%20points=%270.0,30.8%2017.0,16.1%2046.0,38.6%2075.0,3.1%2093.0,15.1%20125.0,38.5%20150.0,36.9%20167.0,42.2%20193.0,36.7%20227.0,4.2%20255.0,29.0%20291.0,22.2%20324.0,48.6%20359.0,23.4%20394.0,40.9%20408.0,47.7%20422.0,13.9%20453.0,37.8%20472.0,12.2%20500.0,10.7%20528.0,33.2%20538.0,22.0%20569.0,18.4%20589.0,49.6%20617.0,30.3%20647.0,21.4%20666.0,30.8%20696.0,25.0%20720.0,30.8%27%20fill=%27none%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.85%27%20stroke-width=%271.4%27%20stroke-linejoin=%27bevel%27/%3E%3C/svg%3E") repeat-x 0 0 / 720px 100%, var(--above, var(--bg)); }
.band--navy::after { bottom: 0; height: var(--icicles); background: url("../img/edges/icicles-navy.svg") repeat-x 0 0 / 720px 100%, var(--below); }
.band--navy a:not(.btn) { color: var(--cyan); }
.services { --above: #ffffff; }
.process  { --above: #e3f2fa; }

/* 8. Sections ----------------------------------------------------------- */

/* Intro */
.intro { background: #fff; }
.intro__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.intro .lead { font-family: var(--font-head); font-style: italic; font-weight: 600; font-size: 1.25rem; line-height: 1.45; color: var(--navy); }
.intro__text a:not(.btn) { font-weight: 700; text-decoration: none; }
.intro__text a:not(.btn):hover { text-decoration: underline; color: var(--navy); }
.rotator { position: relative; aspect-ratio: 800 / 803; }
.rotator__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: scale(.98); transition: opacity 1s ease, transform 1.2s var(--ease);
}
.rotator__img.is-active { opacity: 1; transform: none; }

/* Service cards: ice blocks */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.card {
  --cut: polygon(var(--chip) 0, 100% 0, 100% calc(100% - var(--chip)), calc(100% - var(--chip)) 100%, 0 100%, 0 var(--chip));
  filter: drop-shadow(0 10px 18px rgba(0, 10, 40, .35));
  transition: transform .35s var(--ease), filter .35s;
}
.card__frame {              /* the 2px icy rim */
  height: 100%; padding: 2px; clip-path: var(--cut);
  background: linear-gradient(150deg, #ffffff, var(--frost) 35%, rgba(0, 187, 255, .55) 65%, #ffffff);
}
.card__body {
  position: relative; height: 100%; display: flex; flex-direction: column;
  clip-path: var(--cut); overflow: hidden;
  background:
    linear-gradient(170deg, #ffffff 0%, #f3fbff 45%, var(--ice-2) 100%);
  padding: 0 22px 18px;
}
.card__body::after {        /* light glinting over the ice on hover */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform .9s var(--ease);
}
.card__media { margin: 0 -22px; position: relative; }
.card__media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100.0% 96.0%, 92.9% 98.8%, 85.7% 98.1%, 78.6% 96.2%, 71.4% 98.4%, 64.3% 94.6%, 57.1% 94.4%, 50.0% 93.6%, 42.9% 97.2%, 35.7% 99.5%, 28.6% 98.9%, 21.4% 97.2%, 14.3% 99.3%, 7.1% 98.3%, 0.0% 96.0%);
  transition: transform .8s var(--ease);
}
.card__media::after {       /* frosty tint at the cracked edge */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(214, 240, 252, .55));
  clip-path: polygon(0 0, 100% 0, 100.0% 96.0%, 92.9% 98.8%, 85.7% 98.1%, 78.6% 96.2%, 71.4% 98.4%, 64.3% 94.6%, 57.1% 94.4%, 50.0% 93.6%, 42.9% 97.2%, 35.7% 99.5%, 28.6% 98.9%, 21.4% 97.2%, 14.3% 99.3%, 7.1% 98.3%, 0.0% 96.0%);
}
.card__icon {
  position: relative; z-index: 2; margin-top: -30px; margin-bottom: 10px;
  width: 56px; height: 56px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--cyan), var(--navy) 85%);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
.card__icon svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card__title { font-size: 1.08rem; margin-bottom: 10px; color: var(--navy); }
.card__text { font-size: .95rem; line-height: 1.55; color: #24324a; flex: 1; }
.card__link {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  color: var(--cyan-dark) !important; font-family: var(--font-head); font-weight: 700;
  text-transform: uppercase; font-size: .88rem; letter-spacing: .05em; text-decoration: none;
}
.card__link::before {        /* whole card is clickable */
  content: ""; position: absolute; inset: 0; z-index: 3;
}
.card__link span:first-child { position: relative; }
/* Ice-shard arrow: a crystal tip on a frosty shaft that slides forward and glints on hover */
.shard-arrow { width: 34px; height: 14px; overflow: visible; flex: 0 0 auto; transition: transform .35s var(--ease); }
.shard-arrow__tail { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 3; transition: stroke-dasharray .35s; }
.shard-arrow__head { fill: currentColor; }
.shard-arrow__facet { fill: #9fe3ff; opacity: .9; }
.card:hover .shard-arrow, .card:focus-within .shard-arrow { transform: translateX(6px); }
.card:hover .shard-arrow__tail, .card:focus-within .shard-arrow__tail { stroke-dasharray: 21 0; }
.card:hover .shard-arrow__facet { animation: shard-glint .6s ease-out; }
@keyframes shard-glint { 0% { fill: #9fe3ff; } 40% { fill: #ffffff; } 100% { fill: #9fe3ff; } }
.card:hover, .card:focus-within { transform: translateY(-6px); filter: drop-shadow(0 16px 26px rgba(0, 187, 255, .45)); }
.card:hover .card__body::after, .card:focus-within .card__body::after { transform: translateX(130%); }
.card:hover .card__media img { transform: scale(1.04); }
.card .card__link:focus-visible { outline: none; }
.card:focus-within .card__frame { background: linear-gradient(150deg, #fff, var(--cyan), #fff); }

.graphics { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 64px; }
.graphics p { max-width: 740px; margin: 0; }
.graphics strong { color: #fff; }
.graphics .btn { flex-shrink: 0; }

/* FAQ */
.faq { padding: 48px 0 40px; }
.faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.faq__text > p { margin-bottom: .75em; }
.faq__art { position: relative; align-self: center; }
.faq__art img { width: 100%; position: relative; z-index: 1; }
.faq__art::after {          /* ice floe they stand on */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 1%; height: 9%;
  background: linear-gradient(180deg, #f2fbff, var(--ice-2) 60%, #b9e3f7);
  border-radius: 50%;
  clip-path: polygon(0 50%, 4% 30%, 12% 20%, 22% 8%, 35% 3%, 50% 0, 65% 3%, 78% 8%, 88% 20%, 96% 30%, 100% 50%, 96% 70%, 88% 82%, 78% 92%, 65% 97%, 50% 100%, 35% 97%, 22% 92%, 12% 82%, 4% 70%);
}
.accordion { margin-top: 14px; border-top: 1px solid var(--border); }
.accordion details { border-bottom: 1px solid var(--border); }
.accordion summary { list-style: none; cursor: pointer; position: relative; padding: 9px 8px 9px 28px; color: var(--navy); font-weight: 500; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::before {
  content: ""; position: absolute; left: 6px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  background: var(--cyan); transform: rotate(45deg); transition: transform .25s, background .25s;
}
.accordion details[open] summary::before { transform: rotate(45deg) scale(1.25); background: var(--navy); }
.accordion summary:hover { color: var(--cyan-dark); }
.accordion__body { padding: 2px 8px 14px 28px; font-size: .97rem; }
.accordion__body ul { padding-left: 1.2em; margin-bottom: 1em; }
.accordion__body li { margin-bottom: .4em; }

/* Featured news & resources */
.news { background: linear-gradient(180deg, var(--bg), #eef7fc); padding-top: 56px; }
.news__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.news__header .heading { margin: 0; }
.news__layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.chip {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 9px 2px; color: var(--navy); background: var(--ice-2);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.chip--tip { background: #fff2c9; }

.feature {
  position: relative; min-height: 440px; display: flex; align-items: flex-end; overflow: hidden;
  clip-path: polygon(var(--chip) 0, 100% 0, 100% calc(100% - var(--chip)), calc(100% - var(--chip)) 100%, 0 100%, 0 var(--chip));
  background: var(--navy);
}
.feature__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 28, 69, 0) 30%, rgba(0, 28, 69, .92) 85%); }
.feature__body { position: relative; z-index: 2; padding: 28px; color: #fff; }
.feature .chip { background: var(--cyan); }
.feature__title { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); margin-bottom: 8px; }
.feature__title a { color: #fff; text-decoration: none; }
.feature__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.feature__meta { margin: 0 0 12px; font-size: .85rem; color: var(--frost); }
.feature__more { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; color: var(--cyan); }
.feature__more::after { content: " →"; }
.feature:hover .feature__img { transform: scale(1.05); }
.feature:focus-within { outline: 3px solid var(--cyan); outline-offset: 3px; }

.news__list { display: grid; gap: 16px; align-content: start; }
.mini {
  position: relative; display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: center;
  padding: 12px; background: #fff; border: 1px solid var(--border);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: background .25s, border-color .25s;
}
.mini__img { width: 130px; aspect-ratio: 3 / 2; object-fit: cover; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.mini__title { font-size: .98rem; line-height: 1.3; margin: 0 0 4px; }
.mini__title a { color: var(--navy); text-decoration: none; }
.mini__title a::after { content: ""; position: absolute; inset: 0; }
.mini__meta { margin: 0; font-size: .8rem; color: var(--muted); }
.mini:hover { background: var(--ice); border-color: var(--frost); }
.mini:hover .mini__title a { color: var(--cyan-dark); }

/* Process / CTA */
.process { background: url("../img/brand/dragon-outline.png") no-repeat 2% center / auto calc(100% - var(--ridge) - var(--icicles)), linear-gradient(180deg, var(--navy) 0, var(--navy) var(--ridge), #003a80 50%, var(--navy) calc(100% - var(--icicles)), var(--navy) 100%); }
.process__grid { display: grid; grid-template-columns: 1fr 1fr; }
.process__text { grid-column: 2; }
.typed { color: var(--cyan); position: relative; }
.typed::after {             /* caret takes no space, so "Together" always sits one space away */
  content: ""; position: absolute; right: -6px; top: .05em; width: 3px; height: .9em;
  background: var(--cyan); animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.steps { list-style: none; margin: 0 0 24px; counter-reset: step; }
.steps li { position: relative; padding-left: 36px; margin-bottom: 10px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 1px; width: 24px; height: 24px;
  background: var(--cyan); color: var(--navy); font-weight: 700; font-size: .8rem;
  display: grid; place-items: center;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}

/* Awards */
.awards { padding-top: 56px; }
.awards__badges { display: grid; grid-template-columns: 1fr 1.6fr; gap: 24px; align-items: center; margin: 24px 0 40px; }
.awards__logos { display: flex; justify-content: center; flex-wrap: wrap; gap: 32px; }
.awards__logos img { width: 190px; mix-blend-mode: multiply; }

/* Local: Waterloo Region */
.local { padding-top: 24px; }
.local__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.local__areas {
  padding: 24px 26px;
  background: linear-gradient(165deg, #ffffff, var(--ice) 60%, var(--ice-2));
  border: 1px solid var(--frost);
  clip-path: polygon(var(--chip) 0, 100% 0, 100% calc(100% - var(--chip)), calc(100% - var(--chip)) 100%, 0 100%, 0 var(--chip));
}
.local__label { margin: 0 0 12px; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--navy); }
.local__areas ul { display: flex; flex-wrap: wrap; gap: 8px; }
.local__areas a {
  display: inline-block; padding: 6px 12px 5px; font-size: .92rem; font-weight: 500; text-decoration: none;
  color: var(--navy); background: #fff; border: 1px solid var(--frost);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: background .2s, color .2s;
}
.local__areas a:hover { background: var(--navy); color: #fff; }

/* 9. Footer ------------------------------------------------------------- */
.site-footer { --above: var(--bg); background: var(--navy); color: #fff; font-size: .9rem; position: relative; padding-top: var(--ridge); }
.site-footer::before { background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20720%2056%27%20preserveAspectRatio=%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27r%27%20x1=%270%27%20y1=%270%27%20x2=%270%27%20y2=%2756%27%20gradientUnits=%27userSpaceOnUse%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%231d64b0%27/%3E%3Cstop%20offset=%27.55%27%20stop-color=%27%23073f82%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%2300316d%27/%3E%3C/linearGradient%3E%3ClinearGradient%20id=%27f%27%20x1=%270%27%20y1=%270%27%20x2=%270%27%20y2=%2756%27%20gradientUnits=%27userSpaceOnUse%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23ffffff%27%20stop-opacity=%27.28%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%23ffffff%27%20stop-opacity=%270%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d=%27M0%2056%20L0.0%2030.8%20L24.0%2022.2%20L58.0%2013.2%20L86.0%2032.3%20L111.0%2042.1%20L124.0%2012.8%20L151.0%2046.1%20L162.0%2016.1%20L186.0%2042.6%20L201.0%2016.8%20L213.0%204.1%20L230.0%2041.4%20L250.0%2012.7%20L276.0%208.0%20L286.0%2042.8%20L304.0%2011.9%20L340.0%2029.9%20L374.0%207.9%20L386.0%2040.6%20L399.0%2021.8%20L409.0%2047.0%20L425.0%2023.6%20L447.0%2050.0%20L459.0%2015.5%20L490.0%2034.0%20L510.0%203.1%20L523.0%2031.0%20L533.0%204.1%20L548.0%2043.3%20L574.0%207.1%20L588.0%2037.4%20L610.0%2012.2%20L628.0%2047.4%20L656.0%2034.8%20L672.0%2032.2%20L701.0%2042.4%20L720.0%2030.8%20L720%2056%20Z%27%20fill=%27url%28%23r%29%27/%3E%3Cpath%20d=%27M58.0%2013.2%20L72.0%2056.0%20L86.0%2032.3%20Z%20M124.0%2012.8%20L137.5%2056.0%20L151.0%2046.1%20Z%20M162.0%2016.1%20L174.0%2056.0%20L186.0%2042.6%20Z%20M213.0%204.1%20L221.5%2056.0%20L230.0%2041.4%20Z%20M276.0%208.0%20L281.0%2056.0%20L286.0%2042.8%20Z%20M304.0%2011.9%20L322.0%2056.0%20L340.0%2029.9%20Z%20M374.0%207.9%20L380.0%2056.0%20L386.0%2040.6%20Z%20M399.0%2021.8%20L404.0%2056.0%20L409.0%2047.0%20Z%20M425.0%2023.6%20L436.0%2056.0%20L447.0%2050.0%20Z%20M459.0%2015.5%20L474.5%2056.0%20L490.0%2034.0%20Z%20M510.0%203.1%20L516.5%2056.0%20L523.0%2031.0%20Z%20M533.0%204.1%20L540.5%2056.0%20L548.0%2043.3%20Z%20M574.0%207.1%20L581.0%2056.0%20L588.0%2037.4%20Z%20M610.0%2012.2%20L619.0%2056.0%20L628.0%2047.4%20Z%20M672.0%2032.2%20L686.5%2056.0%20L701.0%2042.4%20Z%20%27%20fill=%27url%28%23f%29%27/%3E%3Cpolyline%20points=%270.0,30.8%2024.0,22.2%2058.0,13.2%2086.0,32.3%20111.0,42.1%20124.0,12.8%20151.0,46.1%20162.0,16.1%20186.0,42.6%20201.0,16.8%20213.0,4.1%20230.0,41.4%20250.0,12.7%20276.0,8.0%20286.0,42.8%20304.0,11.9%20340.0,29.9%20374.0,7.9%20386.0,40.6%20399.0,21.8%20409.0,47.0%20425.0,23.6%20447.0,50.0%20459.0,15.5%20490.0,34.0%20510.0,3.1%20523.0,31.0%20533.0,4.1%20548.0,43.3%20574.0,7.1%20588.0,37.4%20610.0,12.2%20628.0,47.4%20656.0,34.8%20672.0,32.2%20701.0,42.4%20720.0,30.8%27%20fill=%27none%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.85%27%20stroke-width=%271.4%27%20stroke-linejoin=%27bevel%27/%3E%3C/svg%3E") repeat-x 0 0 / 720px 100%, var(--above); }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--cyan); }
.footer__main { padding: 36px 0 48px; }
.footer__grid { display: grid; grid-template-columns: 1.1fr 1fr 1.1fr; gap: 40px; }
.footer__logo { width: 220px; margin-bottom: 14px; }
.footer__heading { color: #fff; font-size: 1.05rem; margin-bottom: 14px; }
.footer__heading--center { text-align: center; margin-bottom: 6px; }
.footer__label { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; margin-right: 6px; }
.stars { color: #ffc531; letter-spacing: 2px; font-size: 1.1rem; }
.social { display: flex; gap: 12px; margin-top: 12px; }
.social a { display: grid; place-items: center; width: 36px; height: 36px; transition: background .2s; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.social a:hover { background: rgba(0, 187, 255, .25); }
.social svg { fill: currentColor; }
.footer__contact dl { margin: 0; }
.footer__contact dt { font-weight: 700; text-transform: uppercase; font-size: .8rem; letter-spacing: .04em; margin-top: 10px; color: var(--frost); }
.footer__contact dd { margin: 0; }
.footer__contact address { font-style: normal; }
.newsletter label { display: block; font-weight: 700; margin-bottom: 6px; }
.newsletter__row { display: flex; gap: 8px; }
.newsletter input { flex: 1; min-width: 0; padding: .65em .8em; font: inherit; font-size: 1rem; border: 2px solid transparent; }
.newsletter input:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 0 3px rgba(0, 187, 255, .4); }
.footer__bottom { background: var(--navy-darker); padding: 20px 0 22px; text-align: center; }
.areas { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; color: var(--cyan); margin-bottom: 10px; }
.site-footer .areas a { color: var(--cyan); text-decoration: none; }
.site-footer .areas a:hover { color: #fff; text-decoration: underline; }
.copyright { margin: 0; font-size: .8rem; }
.to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 90; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--navy); color: #fff;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: .3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.site-footer .to-top:hover { color: var(--navy); background: var(--cyan); }

/* 10. Responsive -------------------------------------------------------- */
@media (max-width: 1100px) {
  .menu__link { font-size: .86rem; }
  .submenu--mega { grid-template-columns: 1fr; }
  .mega__promo { display: none; }
}

@media (max-width: 960px) {
  :root { --ridge: 40px; --icicles: 46px; }
  .topbar__specialties { display: none; }
  .topbar__inner { justify-content: center; }
  .brand img, .site-header.is-scrolled .brand img { width: 200px; }
  .brandbar__contact { display: none; }

  .nav-toggle {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--navy); color: #fff; border: 0; padding: 10px 14px;
    font-family: var(--font-head); font-weight: 700; text-transform: uppercase; cursor: pointer;
  }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 20px; height: 2px; background: #fff; position: relative; transition: .25s; }
  .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -6px; }
  .nav-toggle__bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

  .primary-nav { display: none; max-height: calc(100vh - 100px); overflow-y: auto; }
  .primary-nav.is-open { display: block; }
  .menu { flex-direction: column; padding: 8px 0 16px; }
  .menu__item, .menu__item.has-mega { flex: none; display: block; position: relative; border-bottom: 1px solid rgba(255,255,255,.12); }
  .menu__item + .menu__item { background: none; }
  .menu__row { justify-content: space-between; }
  .menu__link { padding: 14px 4px; font-size: 1rem; }
  .submenu-toggle { width: 44px; height: 44px; margin: 0; }
  .submenu, .submenu--simple, .submenu--mega {
    position: static; display: none; width: 100%; translate: none; transform: none; clip-path: none;
    opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: 4px 0 10px;
    background: rgba(255,255,255,.06);
  }
  .submenu::before { display: none; }
  .menu__item:hover > .submenu { display: none; }
  .menu__item.is-open > .submenu { display: block; clip-path: none; }
  .mega__cols { padding: 8px 16px; gap: 14px; }
  .mega--services .mega__cols, .mega--solutions .mega__cols { grid-template-columns: 1fr; }
  .mega__col--wide ul { columns: 1; }
  .mega__icon { width: 34px; height: 34px; }
  .submenu--simple a { padding: 9px 16px; }

  .intro__grid, .faq__grid, .local__grid { grid-template-columns: 1fr; }
  .faq__art { max-width: 480px; margin: 0 auto; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .graphics { flex-direction: column; align-items: flex-start; }
  .process { background: var(--navy); }
  .process__grid { grid-template-columns: 1fr; }
  .process__text { grid-column: 1; }
  .news__layout { grid-template-columns: 1fr; }
  .feature { min-height: 340px; }
  .awards__badges { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__newsletter { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  :root { --ridge: 28px; --icicles: 34px; }
  .section { padding: 48px 0; }
  .cards, .footer__grid { grid-template-columns: 1fr; }
  .news__header { flex-direction: column; align-items: flex-start; }
  .mini { grid-template-columns: 96px 1fr; }
  .mini__img { width: 96px; }
  .hero { --hero-h: 340px; }
  .slide__stage { translate: -40% 0; }   /* keep the dragon's head (and its breath) on screen */
  .newsletter__row { flex-direction: column; }
  .btn-row .btn { flex: 1 1 100%; }
}

/* 11. Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .gust, .hero__snow { display: none; }
  .typed::after { display: none; }
}

/* 12. Click puffs ------------------------------------------------------- */
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9990; }

/* 13. Accessibility panel ----------------------------------------------- */
.a11y { position: fixed; left: 16px; bottom: 16px; z-index: 9995; font-size: 1rem; }
.a11y__fab {
  width: 54px; height: 54px; display: grid; place-items: center; cursor: pointer; border: 0; padding: 0;
  color: var(--navy);
  background: linear-gradient(150deg, #ffffff, var(--frost) 55%, var(--cyan));
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  transition: transform .2s, background .2s;
}
.a11y__fab:hover { transform: scale(1.06); background: linear-gradient(150deg, #ffffff, #d6f5ff 55%, #5fd6ff); }
.a11y__fab:focus-visible { outline: none; background: #fff; box-shadow: none; }
.a11y__fab:focus-visible svg { outline: 3px solid var(--navy); outline-offset: 4px; border-radius: 50%; }
.a11y__fab[aria-expanded="true"] { background: #fff; }

.a11y__panel {
  position: absolute; left: 0; bottom: 64px; width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 110px); overflow-y: auto;
  color: #fff;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(0, 187, 255, .2), transparent 60%),
    linear-gradient(165deg, #00316d, #001c45);
  border: 1px solid rgba(159, 227, 255, .45);
  box-shadow: 0 22px 50px rgba(0, 20, 50, .5);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  padding: 18px 18px 16px;
  opacity: 0; transform: translateY(10px) scale(.98); transform-origin: bottom left;
  transition: opacity .22s, transform .25s var(--ease);
}
.a11y__panel.is-open { opacity: 1; transform: none; }
.a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(159, 227, 255, .25); }
.a11y__title { margin: 0; color: #fff; font-size: 1.15rem; letter-spacing: .06em; }
.a11y__title::before { content: "❄ "; color: var(--cyan); }
.a11y__close { width: 34px; height: 34px; border: 0; background: rgba(255,255,255,.08); cursor: pointer; position: relative; border-radius: 4px; }
.a11y__close::before, .a11y__close::after { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 2px; background: #fff; }
.a11y__close::before { transform: rotate(45deg); }
.a11y__close::after { transform: rotate(-45deg); }
.a11y__close:hover { background: rgba(0, 187, 255, .35); }
.a11y__label { margin: 0 0 6px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--frost); }
.a11y__sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.a11y__size {
  padding: 8px 0; cursor: pointer; font: 700 1rem var(--font-head); color: #fff;
  background: rgba(255,255,255,.07); border: 1px solid rgba(159, 227, 255, .35);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.a11y__size:hover { background: rgba(0, 187, 255, .25); }
.a11y__size[aria-pressed="true"] { background: linear-gradient(160deg, #ffffff, var(--frost)); color: var(--navy); border-color: #fff; }
.a11y__list { display: grid; gap: 6px; margin-bottom: 14px; }
.a11y__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left;
  padding: 9px 10px; cursor: pointer; color: #fff; font: inherit;
  background: rgba(255,255,255,.05); border: 1px solid transparent;
}
.a11y__toggle:hover { background: rgba(255,255,255,.1); border-color: rgba(159, 227, 255, .3); }
.a11y__name { display: block; font-weight: 700; font-size: .95rem; }
.a11y__hint { display: block; font-size: .78rem; color: #cfe9ff; line-height: 1.3; }
.a11y__switch {          /* an ice slider */
  flex: 0 0 auto; position: relative; width: 44px; height: 24px; border-radius: 12px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(159, 227, 255, .5); transition: background .2s;
}
.a11y__switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  background: #fff; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  transition: transform .2s var(--ease);
}
.a11y__toggle[aria-checked="true"] .a11y__switch { background: var(--cyan); border-color: #fff; }
.a11y__toggle[aria-checked="true"] .a11y__switch::after { transform: translateX(20px); background: var(--navy); }
.a11y__reset {
  width: 100%; padding: 9px; cursor: pointer; font: 700 .85rem var(--font-head); text-transform: uppercase; letter-spacing: .06em;
  color: var(--frost); background: none; border: 1px dashed rgba(159, 227, 255, .5);
}
.a11y__reset:hover { color: #fff; border-style: solid; }
.a11y__panel :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* --- Visitor display modes (set from the accessibility panel) --- */

/* Readable font */
html.a11y-font { --font-head: Verdana, Tahoma, "Segoe UI", sans-serif; --font-body: Verdana, Tahoma, "Segoe UI", sans-serif; }

/* Underline links */
html.a11y-links a:not(.btn):not(.brand):not(.card__link) { text-decoration: underline !important; text-decoration-thickness: 2px !important; }

/* Text spacing (WCAG 1.4.12 values) */
html.a11y-spacing body { line-height: 1.9; letter-spacing: .08em; word-spacing: .16em; }
html.a11y-spacing p { margin-bottom: 2em; }

/* Pause animations */
html.a11y-calm *, html.a11y-calm *::before, html.a11y-calm *::after { animation: none !important; transition: none !important; }
html.a11y-calm .hero__snow, html.a11y-calm .gust, html.a11y-calm .fx-canvas, html.a11y-calm .typed::after { display: none; }
html.a11y-calm .ice-text::after { clip-path: none !important; }
html.a11y-calm .ice-block::after { display: none; }

/* High contrast */
html.a11y-contrast { --cyan-dark: #004b73; --muted: #1f1f1f; --text: #000; --bg: #ffffff; }
html.a11y-contrast body { color: #000; }
html.a11y-contrast .ice-text { background: none !important; color: inherit !important; -webkit-text-fill-color: currentColor !important; }
html.a11y-contrast a:not(.btn) { text-decoration: underline; }
html.a11y-contrast .brandbar__links a, html.a11y-contrast .brandbar__links { color: var(--navy); }
html.a11y-contrast .btn { background: var(--navy); color: #fff; }
html.a11y-contrast .btn:hover { background: #000; color: #fff; }
html.a11y-contrast .btn--outline::after { background: #fff; }
html.a11y-contrast .btn--outline:hover::after { background: #fff; }
html.a11y-contrast .btn--outline, html.a11y-contrast .btn--outline:hover { color: var(--navy); }
html.a11y-contrast .band--navy .btn, html.a11y-contrast .mega__promo .btn, html.a11y-contrast .site-footer .btn { background: #fff; color: var(--navy); }
html.a11y-contrast .band--navy, html.a11y-contrast .site-footer, html.a11y-contrast .submenu { --frost: #ffffff; }
html.a11y-contrast .band--navy a:not(.btn), html.a11y-contrast .areas { color: #fff; }
html.a11y-contrast .mega__blurb, html.a11y-contrast .a11y__hint, html.a11y-contrast .submenu__indent a { color: #fff; }
html.a11y-contrast .slide__tagline { background: rgba(0, 28, 69, .85); display: inline-block; padding: .2em .6em; text-shadow: none; }
html.a11y-contrast .feature::after { background: linear-gradient(180deg, rgba(0, 28, 69, .55), rgba(0, 28, 69, .95) 55%); }
html.a11y-contrast .card__text, html.a11y-contrast .mini__meta, html.a11y-contrast .launch__meta { color: #000; }
html.a11y-contrast .card__body { background: #fff; }
html.a11y-contrast .post__meta, html.a11y-contrast .feature__meta { color: #fff; }
html.a11y-contrast :focus-visible { outline: 3px solid #000 !important; }
html.a11y-contrast .band--navy :focus-visible, html.a11y-contrast .site-footer :focus-visible, html.a11y-contrast .primary-nav :focus-visible, html.a11y-contrast .a11y__panel :focus-visible { outline-color: #fff !important; }

@media (max-width: 600px) {
  .a11y { left: 10px; bottom: 10px; }
  .a11y__fab { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .ice-block::after { display: none; } }


/* 14. Press-and-hold frost and screen crack ----------------------------- */
.fx-frost {
  position: fixed; inset: 0; z-index: 9989; pointer-events: none; opacity: 0;
  transition: opacity .6s;
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(214, 240, 252, .55) 75%, rgba(255, 255, 255, .92) 100%),
    repeating-conic-gradient(from 10deg at 0 0, rgba(255,255,255,.18) 0 2deg, transparent 2deg 9deg),
    repeating-conic-gradient(from 190deg at 100% 100%, rgba(255,255,255,.18) 0 2deg, transparent 2deg 9deg);
  -webkit-mask: radial-gradient(ellipse at center, transparent 40%, #000 80%);
          mask: radial-gradient(ellipse at center, transparent 40%, #000 80%);
}
.fx-crack-wrap { position: fixed; inset: 0; z-index: 9991; pointer-events: none; }
.fx-crack { width: 100%; height: 100%; }
.fx-crack path { fill: none; stroke-linecap: round; stroke-linejoin: bevel; }
.fx-crack__glow { stroke: rgba(0, 120, 200, .35); }
.fx-crack__line { stroke: rgba(255, 255, 255, .95); }
.fx-crack__impact { fill: rgba(255, 255, 255, .55); stroke: #fff; stroke-width: 1.5; transform-origin: center; transform-box: fill-box; transform: scale(0); }
.fx-crack-wrap.is-cracking path { transition: stroke-dashoffset .55s cubic-bezier(.2, .8, .2, 1); stroke-dashoffset: 0 !important; }
.fx-crack-wrap.is-cracking .fx-crack__impact { transition: transform .25s ease-out; transform: scale(1); }
.fx-crack-wrap.is-thawing { transition: opacity 1.5s ease; opacity: 0; }
html.fx-shake :is(.site-header, main, .site-footer) { animation: fx-shake .42s linear; }
html.fx-shaking :is(.site-header, main, .site-footer) { translate: var(--sx, 0) var(--sy, 0); }
@keyframes fx-shake { 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-2px, 1px); } 80% { transform: translate(2px, 0); } }
html.a11y-calm .fx-frost, html.a11y-calm .fx-crack-wrap { display: none; }


/* 15. "Thin ice" hint (right edge) -------------------------------------- */
.crack-hint {
  position: fixed; right: 0; top: calc(50% - 90px); z-index: 9993;
  display: flex; align-items: stretch;
  transform: translateX(100%); transition: transform .6s var(--ease), opacity .5s;
}
.crack-hint.is-in { transform: translateX(calc(100% - 42px)); }
.crack-hint.is-in.is-open { transform: none; }
.crack-hint.is-gone { opacity: 0; transform: translateX(100%); }
.crack-hint__tab {
  flex: 0 0 42px; align-self: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 0; padding: 12px 0 14px 2px; color: var(--navy);
  background: linear-gradient(160deg, #ffffff, var(--frost) 55%, var(--cyan));
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  animation: tab-shimmer 6s ease-in-out 2s infinite;
}
/* rotated label, read bottom to top */
.crack-hint__label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; line-height: 1;
}
@keyframes tab-shimmer {
  0%, 82%, 100% { background-position: 0 0; filter: none; }
  88% { filter: brightness(1.12) drop-shadow(0 0 6px rgba(0, 187, 255, .8)); }
}
.crack-hint__tab svg { animation: hint-spin 9s linear infinite; }
@keyframes hint-spin { to { transform: rotate(360deg); } }
.crack-hint__msg {
  position: relative; width: 230px; padding: 12px 34px 12px 14px;
  color: #fff; font-size: .86rem; line-height: 1.45; font-style: italic;
  background: linear-gradient(165deg, rgba(0, 49, 109, .96), rgba(0, 28, 69, .97));
  border: 1px solid rgba(159, 227, 255, .45); border-right: 0;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.crack-hint__msg::before {     /* a hairline crack across the note */
  content: ""; position: absolute; left: 10px; right: 30px; bottom: 6px; height: 6px; opacity: .5;
  background: linear-gradient(170deg, transparent 45%, var(--frost) 48%, transparent 52%) 0 0 / 40% 100% no-repeat,
              linear-gradient(10deg, transparent 45%, var(--frost) 48%, transparent 52%) 100% 0 / 62% 100% no-repeat;
}
.crack-hint__msg p { margin: 0; }
.crack-hint__close { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; background: none; cursor: pointer; }
.crack-hint__close::before, .crack-hint__close::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: #cfe9ff; }
.crack-hint__close::before { transform: rotate(45deg); }
.crack-hint__close::after { transform: rotate(-45deg); }
.crack-hint__close:hover::before, .crack-hint__close:hover::after { background: #fff; }
.crack-hint :focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.crack-hint__tab:focus-visible { outline-color: var(--navy); }
html.a11y-calm .crack-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .crack-hint { display: none; } }
@media (max-width: 600px) { .crack-hint { top: auto; bottom: 74px; } .crack-hint__msg { width: 210px; } }


/* 16. Icy cursor and scrollbar ------------------------------------------ */
html { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2724%27%20height=%2730%27%20viewBox=%270%200%2024%2030%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27i%27%20x1=%270%27%20y1=%270%27%20x2=%271%27%20y2=%271%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%231d6fb5%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%23062f63%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d=%27M3%202.5%20L3%2023%20L8.6%2017.8%20L12.6%2026.6%20L16.4%2024.9%20L12.4%2016.3%20L19.6%2016.3%20Z%27%20fill=%27none%27%20stroke=%27%23001634%27%20stroke-width=%273.4%27%20stroke-linejoin=%27round%27/%3E%3Cpath%20d=%27M3%202.5%20L3%2023%20L8.6%2017.8%20L12.6%2026.6%20L16.4%2024.9%20L12.4%2016.3%20L19.6%2016.3%20Z%27%20fill=%27url%28%23i%29%27%20stroke=%27%23d6f2ff%27%20stroke-width=%271.4%27%20stroke-linejoin=%27round%27/%3E%3Cpath%20d=%27M5%207%20L5%2017.5%20L8.2%2014.6%27%20fill=%27none%27%20stroke=%27%237fd2ff%27%20stroke-width=%271.3%27%20stroke-linecap=%27round%27/%3E%3C/svg%3E") 3 2, auto; }
a, button, summary, label[for], [role="switch"], select, .btn, .frozen, .card { cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2724%27%20height=%2730%27%20viewBox=%270%200%2024%2030%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27i%27%20x1=%270%27%20y1=%270%27%20x2=%271%27%20y2=%271%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%231580cc%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%230a3f80%27/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d=%27M3%202.5%20L3%2023%20L8.6%2017.8%20L12.6%2026.6%20L16.4%2024.9%20L12.4%2016.3%20L19.6%2016.3%20Z%27%20fill=%27none%27%20stroke=%27%23001634%27%20stroke-width=%273.4%27%20stroke-linejoin=%27round%27/%3E%3Cpath%20d=%27M3%202.5%20L3%2023%20L8.6%2017.8%20L12.6%2026.6%20L16.4%2024.9%20L12.4%2016.3%20L19.6%2016.3%20Z%27%20fill=%27url%28%23i%29%27%20stroke=%27%23d6f2ff%27%20stroke-width=%271.4%27%20stroke-linejoin=%27round%27/%3E%3Cpath%20d=%27M18.5%201.5v6M15.5%204.5h6M16.4%202.4l4.2%204.2M20.6%202.4l-4.2%204.2%27%20stroke=%27%230a5aa8%27%20stroke-width=%271.4%27%20stroke-linecap=%27round%27/%3E%3Cpath%20d=%27M5%207%20L5%2017.5%20L8.2%2014.6%27%20fill=%27none%27%20stroke=%27%239fe3ff%27%20stroke-width=%271.3%27%20stroke-linecap=%27round%27/%3E%3C/svg%3E") 3 2, pointer; }
input, textarea { cursor: text; }
html.a11y-contrast, html.a11y-contrast * { cursor: auto; }
html.a11y-contrast :is(a, button, summary, label[for], [role="switch"]) { cursor: pointer; }

/* Scrollbar: a frozen track with a glacier-blue thumb (Chrome, Edge, Safari) */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track {
  background: linear-gradient(90deg, #d6f0fc, #f2fbff 45%, #d6f0fc);
  border-left: 1px solid #b9e3f7;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #5fd6ff, #1c8fd0 45%, #00316d);
  border: 3px solid transparent; background-clip: padding-box;
  border-radius: 3px 8px 3px 8px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #9fe3ff, #00bbff 45%, #0b4486); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: #e9f7fe; }
/* Firefox (only where the WebKit styling above isn't supported, so newer Chrome keeps the gradient look) */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: #1c8fd0 #dff3fc; scrollbar-width: auto; }
}

/* 17. The Frozen Gallery ------------------------------------------------- */
.gallery { background: linear-gradient(180deg, #eef7fc, #e3f2fa); padding-top: 24px; }
.gallery__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.gallery__header .heading { margin-bottom: .4em; }
.gallery__intro { max-width: 620px; margin: 0; color: var(--muted); }
.gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 18px; }
.frozen--hero { grid-column: span 2; grid-row: span 2; }

.frozen {
  --cut: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  position: relative; overflow: hidden; clip-path: var(--cut);
  background: #e9f7fe;
  filter: drop-shadow(0 8px 16px rgba(0, 49, 109, .16));
}
.frozen__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); filter: saturate(.75) brightness(1.04); transition: transform 1.2s var(--ease), filter .8s; }

/* the ice: frosted, blurred edges and a clear centre, a bright rim and a glint that passes now and then */
.frozen__ice { position: absolute; inset: 0; pointer-events: none; transition: opacity .9s var(--ease); }
.frozen__ice::before {
  content: ""; position: absolute; inset: 0;
  -webkit-backdrop-filter: blur(5px) saturate(.8); backdrop-filter: blur(5px) saturate(.8);
  background:
    radial-gradient(120% 90% at 0 0, rgba(255,255,255,.75), transparent 45%),
    radial-gradient(110% 80% at 100% 100%, rgba(255,255,255,.65), transparent 42%),
    repeating-linear-gradient(125deg, rgba(255,255,255,.18) 0 2px, transparent 2px 14px),
    rgba(214, 240, 252, .28);
  -webkit-mask: radial-gradient(ellipse 70% 65% at 50% 45%, transparent 30%, #000 85%);
          mask: radial-gradient(ellipse 70% 65% at 50% 45%, transparent 30%, #000 85%);
}
.frozen__ice::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), inset 0 0 0 5px rgba(159, 227, 255, .45), inset 0 0 40px rgba(159, 227, 255, .55);
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%) -150% 0 / 60% 100% no-repeat;
  animation: frozen-glint 7s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes frozen-glint { 0%, 70% { background-position: -150% 0; } 100% { background-position: 250% 0; } }

.frozen__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 44px 18px 16px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 28, 69, .82) 45%, rgba(0, 28, 69, .94));
}
.frozen__type {
  display: inline-block; margin: 0 0 6px; padding: 2px 9px 1px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--navy); background: var(--frost);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.frozen__title { margin: 0; font-size: 1rem; line-height: 1.25; }
.frozen--hero .frozen__title { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); }
.frozen__title a { color: #fff; text-decoration: none; }
.frozen__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }   /* whole tile clickable */
.frozen__more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--frost);
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: .78rem; letter-spacing: .06em;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease), opacity .4s;
}
.frozen__more .shard-arrow__head { fill: var(--cyan); }

/* thaw on hover / keyboard focus */
.frozen:hover .frozen__ice, .frozen:focus-within .frozen__ice { opacity: 0; }
.frozen:hover .frozen__img, .frozen:focus-within .frozen__img { transform: scale(1); filter: none; }
.frozen:hover .frozen__more, .frozen:focus-within .frozen__more { max-height: 30px; opacity: 1; }
.frozen:focus-within { outline: 3px solid var(--cyan); outline-offset: -3px; }
.frozen .frozen__title a:focus-visible { outline: none; }

/* touch screens can't hover: show the work with only a light frost */
@media (hover: none) {
  .frozen__ice { opacity: .45; }
  .frozen__img { transform: none; filter: none; }
  .frozen__more { max-height: 30px; opacity: 1; }
}
@media (max-width: 960px) {
  .gallery__header { flex-direction: column; align-items: flex-start; }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
}
@media (max-width: 600px) {
  .gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .frozen--hero { grid-column: auto; grid-row: span 1; }
}
html.a11y-contrast .frozen__ice { display: none; }
html.a11y-contrast .frozen__img { filter: none; transform: none; }

/* hint: found state */
.crack-hint__title { margin: 0 0 4px !important; font-family: var(--font-head); font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; color: var(--cyan); }
.crack-hint__cta { margin-top: 10px; font-style: normal; }
.crack-hint.is-found .crack-hint__msg { width: 260px; box-shadow: 0 0 0 1px var(--cyan), 0 0 28px rgba(0, 187, 255, .45); }
.crack-hint.is-found .crack-hint__tab svg { animation-duration: 2s; }


/* 18. Homepage refinements (round 9) ----------------------------------- */
/* Hint tab: shorter label, centred */
.crack-hint__tab { justify-content: center; min-height: 150px; padding: 10px 0 12px 2px; }

/* Service card link: the line grows across the card on hover and the ice tip rides to the edge */
.card__link { align-self: stretch; display: flex; align-items: center; gap: 12px; }
.card__link > span:first-child { flex: 0 0 auto; }
.card__arrow { flex: 1 1 auto; display: flex; align-items: center; min-width: 40px; }
.card__arrow-line {
  display: block; height: 2px; width: 26px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan-dark), var(--cyan) 60%, var(--frost));
  background-size: 200% 100%;
  transition: width .6s cubic-bezier(.65, 0, .35, 1);
}
.card__arrow-head { width: 16px; height: 14px; margin-left: -2px; flex: 0 0 auto; fill: var(--cyan-dark); transition: transform .3s; }
.card__arrow-facet { fill: var(--frost); }
.card:hover .card__arrow-line, .card:focus-within .card__arrow-line {
  width: calc(100% - 14px);
  animation: arrow-glint 1.2s linear .5s infinite;
}
.card:hover .card__arrow-head, .card:focus-within .card__arrow-head { transform: scale(1.15); }
@keyframes arrow-glint { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* FAQ: intro + art side by side, then questions in two balanced columns */
.faq { padding: 40px 0 48px; }
.faq__grid { grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.faq__art { align-self: center; }
.faq__art img { max-height: 360px; width: auto; margin: 0 auto; }
.accordion--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 18px; border-top: 0; align-items: start; }
.accordion__col { border-top: 1px solid var(--border); }
.accordion summary { padding: 7px 8px 7px 28px; }
.accordion__body { padding: 0 8px 12px 28px; }

/* Logos, branding & scientific illustration */
.crafts { padding-top: 40px; }
.crafts__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.craft {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
  clip-path: polygon(var(--chip) 0, 100% 0, 100% calc(100% - var(--chip)), calc(100% - var(--chip)) 100%, 0 100%, 0 var(--chip));
}
.craft__gallery { display: grid; gap: 4px; background: var(--ice-2); }
.craft__gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; transition: transform .6s var(--ease), filter .6s; filter: saturate(.9); }
.craft__gallery--logos { grid-template-columns: 1fr 1fr; }
.craft__gallery--science { grid-template-columns: 1fr 1fr; }
.craft__gallery--science .craft__hero-img { grid-column: 1 / -1; aspect-ratio: 2 / 1; object-position: center 40%; }
.craft__gallery--science img:not(.craft__hero-img) { aspect-ratio: 16 / 9; }
.craft__gallery img:hover { filter: saturate(1.1); }
.craft__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.craft__body .btn { align-self: flex-start; margin-top: auto; }
.craft__kicker { margin: 0 0 4px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--cyan-dark); }
.craft__title { font-size: 1.3rem; margin-bottom: 10px; }
.craft__list { list-style: none; margin: 0 0 20px; }
.craft__list li { position: relative; padding-left: 22px; margin-bottom: 6px; }
.craft__list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; background: var(--cyan); transform: rotate(45deg); }
.trusted { margin-top: 40px; text-align: center; }
.trusted__label { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; color: var(--muted); }
.trusted__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 40px; }
.trusted__logos img { height: 44px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1) contrast(.9); opacity: .75; transition: filter .3s, opacity .3s; }
.trusted__logos img:hover { filter: none; opacity: 1; }

@media (max-width: 960px) {
  .crafts__grid, .accordion--cols { grid-template-columns: 1fr; }
  .accordion__col + .accordion__col { border-top: 0; }
  .faq__grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   INNER PAGES
   19. Page banner   20. Breadcrumbs   21. Layout helpers   22. Team & values
   23. Testimonials & logos   24. Packages   25. Process tabs   26. Forms
   27. Contact   28. Free estimate   29. Case study   30. Blog & articles
   ========================================================================== */

/* 19. Page banner -----------------------------------------------------------
   The dragon is a separate transparent picture, so it is placed (not stretched)
   at every screen size. Swap it per page with --banner-dragon or a different <img>. */
.page-banner {
  --below: var(--bg);
  position: relative; overflow: hidden; isolation: isolate;
  color: #fff;
  background:
    radial-gradient(70% 90% at 88% 10%, rgba(0, 187, 255, .28), transparent 60%),
    radial-gradient(50% 60% at 60% 100%, rgba(159, 227, 255, .12), transparent 70%),
    linear-gradient(180deg, #003a80 0%, var(--navy) 55%, var(--navy) 100%);
  padding: 56px 0 calc(var(--icicles) + 56px);
  min-height: 380px;
}
.page-banner__art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.page-banner__shards {
  position: absolute; inset: 0 0 0 30%;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20900%20500%27%20preserveAspectRatio=%27xMaxYMid%20slice%27%3E%3Cpath%20d=%27M620%20120L745%20126L776%20206Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.024%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M620%20120L776%20206L676%20260Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.068%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M620%20120L676%20260L573%20245Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.075%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M620%20120L573%20245L457%20199Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.082%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M620%20120L457%20199L508%20110Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.084%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M620%20120L508%20110L472%20-34Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.034%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M620%20120L472%20-34L582%2015Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.036%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M620%20120L582%2015L634%2014Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.076%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M620%20120L634%2014L814%2019Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.082%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M620%20120L814%2019L745%20126Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.074%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M780%20330L914%20324L930%20433Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.080%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M780%20330L930%20433L808%20471Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.043%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M780%20330L808%20471L618%20447Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.082%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M780%20330L618%20447L660%20347Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.029%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M780%20330L660%20347L652%20175Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.084%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M780%20330L652%20175L797%20241Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.055%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M780%20330L797%20241L870%20257Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.060%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M780%20330L870%20257L914%20324Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.058%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M480%20380L622%20375L548%20456Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.069%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M480%20380L548%20456L476%20492Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.087%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M480%20380L476%20492L322%20525Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.037%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M480%20380L322%20525L320%20409Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.063%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M480%20380L320%20409L406%20299Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.023%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M480%20380L406%20299L460%20162Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.046%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M480%20380L460%20162L568%20321Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.067%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M480%20380L568%20321L622%20375Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.061%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M860%2060L963%2075L928%20179Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.077%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M860%2060L928%20179L847%20175Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.042%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M860%2060L847%20175L680%20110Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.040%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M860%2060L680%20110L704%20-6Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.056%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M860%2060L704%20-6L817%20-35Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.024%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M860%2060L817%20-35L927%20-46Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.047%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M860%2060L927%20-46L963%2075Z%27%20fill=%27%239fe3ff%27%20fill-opacity=%270.059%27%20stroke=%27%23bdeeff%27%20stroke-opacity=%27.16%27%20stroke-width=%271%27/%3E%3C/svg%3E") no-repeat right center / cover;
  animation: shard-drift 18s ease-in-out infinite alternate;
}
@keyframes shard-drift { from { transform: translateX(0); } to { transform: translateX(-24px); } }
.page-banner__aurora {
  position: absolute; right: -10%; top: -40%; width: 70%; height: 140%;
  background: conic-gradient(from 200deg at 50% 50%, transparent, rgba(0, 187, 255, .22), rgba(120, 255, 220, .12), transparent 40%);
  filter: blur(40px); opacity: .8;
  animation: aurora 14s ease-in-out infinite alternate;
}
@keyframes aurora { from { transform: rotate(-8deg) scale(1); } to { transform: rotate(8deg) scale(1.1); } }
.page-banner__dragon {
  position: absolute; right: max(0px, calc((100vw - var(--container)) / 2 - 140px)); bottom: calc(var(--icicles) - 70px);
  height: 118%; width: auto; max-width: none;
  filter: drop-shadow(0 10px 30px rgba(0, 10, 40, .5));
  animation: dragon-rise 1.2s var(--ease) both;
}
@keyframes dragon-rise { from { opacity: 0; transform: translate(40px, 30px) scale(.96); } to { opacity: 1; transform: none; } }
.page-banner .hero__snow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.page-banner__inner { position: relative; z-index: 2; }
.page-banner__content { max-width: 620px; }
.page-banner__kicker { margin: 0 0 6px; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--frost); font-size: .9rem; }
.page-banner__title { color: #fff; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); margin: 0 0 .35em; text-shadow: 0 2px 18px rgba(0, 20, 60, .5); }
.page-banner__lead { font-size: 1.12rem; line-height: 1.6; color: #e3f4ff; max-width: 560px; }
.page-banner .btn-row { margin-top: 1.2em; }
.page-banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--icicles); z-index: 3;
  background: url("../img/edges/icicles-navy.svg") repeat-x 0 0 / 720px 100%, var(--below);
}
.page-banner--short { min-height: 0; padding-bottom: calc(var(--icicles) + 40px); }
.page-banner--short .page-banner__dragon { height: 140%; opacity: .9; }

@media (max-width: 960px) {
  .page-banner { padding-bottom: calc(var(--icicles) + 190px); min-height: 0; }
  .page-banner__dragon { height: 250px; right: -20px; bottom: calc(var(--icicles) - 40px); }
  .page-banner--short { padding-bottom: calc(var(--icicles) + 150px); }
  .page-banner--short .page-banner__dragon { height: 200px; }
  .page-banner__shards { inset: 30% 0 0 0; }
}
@media (max-width: 600px) {
  .page-banner { padding-top: 36px; }
  .page-banner__dragon { height: 210px; }
}

/* 20. Breadcrumbs */
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; font-size: .85rem; }
.breadcrumbs li { color: #cfe9ff; }
.breadcrumbs li + li::before { content: "❄"; color: var(--cyan); margin-right: 6px; font-size: .75em; }
.breadcrumbs a { color: #fff; text-decoration: none; }
.breadcrumbs a:hover { color: var(--cyan); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--frost); }

/* 21. Layout helpers */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.split--reverse > :first-child { order: 2; }
.split--top { align-items: start; }
.frame {                              /* chipped ice frame around a photo */
  position: relative; padding: 8px;
  background: linear-gradient(150deg, #fff, var(--frost) 40%, var(--cyan) 70%, #fff);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
.frame img { clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); width: 100%; }
.prose p, .prose li { max-width: 72ch; }
.prose h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem); margin-top: 1.2em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.2em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .35em; }
.callout {
  position: relative; margin: 24px 0; padding: 18px 22px 18px 64px;
  background: linear-gradient(160deg, #ffffff, var(--ice) 50%, var(--ice-2));
  border: 1px solid var(--frost);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.callout::before {
  content: "❄"; position: absolute; left: 18px; top: 50%; translate: 0 -50%;
  width: 32px; height: 32px; display: grid; place-items: center; color: #fff; font-size: 1.1rem;
  background: linear-gradient(145deg, var(--cyan), var(--navy)); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
.callout p:last-child { margin-bottom: 0; }
.section--ice { background: linear-gradient(180deg, #eef7fc, #e3f2fa); }
.cta-band .container { text-align: center; }
.cta-band p { max-width: 680px; margin: 0 auto 1.4em; }
.kicker-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 1em; }
.kicker-list li { padding: 4px 12px 3px; font-size: .85rem; font-weight: 600; color: var(--navy); background: var(--ice-2); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }

/* 22. Team & values */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 30px; }
.member { display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: start; }
.member__photo {
  position: relative; padding: 6px; background: linear-gradient(150deg, #fff, var(--frost), var(--cyan));
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
.member__photo img { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); aspect-ratio: 1; object-fit: cover; width: 100%; }
.member__name { margin: 0; color: #fff; font-size: 1.5rem; text-transform: none; font-style: italic; letter-spacing: .01em; }
.member__role { margin: 2px 0 12px; color: var(--cyan); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; }
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 30px; }
.value {
  position: relative; padding: 24px 20px 20px; background: #fff; border: 1px solid var(--border);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.value:hover { transform: translateY(-4px); }
.value__icon {
  width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 12px; color: #fff;
  background: linear-gradient(145deg, var(--cyan), var(--navy) 85%);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
.value__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.value h3 { font-size: 1.02rem; margin-bottom: 8px; }
.value p { font-size: .95rem; margin: 0; }
.timeline { list-style: none; position: relative; margin: 30px 0 0; padding-left: 34px; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 4px; bottom: 4px; width: 3px; background: linear-gradient(var(--cyan), var(--frost), var(--cyan)); border-radius: 3px; }
.timeline li { position: relative; margin-bottom: 22px; }
.timeline li::before {
  content: ""; position: absolute; left: -31px; top: 3px; width: 18px; height: 18px;
  background: linear-gradient(145deg, #fff, var(--cyan)); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
.timeline__year { display: block; font-family: var(--font-head); font-weight: 700; color: var(--cyan-dark); letter-spacing: .06em; }
.band--navy .timeline__year { color: var(--cyan); }

/* 23. Testimonials & logo wall */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.quote {
  position: relative; margin: 0; padding: 28px 24px 22px; background: #fff; color: var(--text);
  border: 1px solid var(--border);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  display: flex; flex-direction: column;
}
.quote::before { content: "\201C"; position: absolute; right: 18px; top: -6px; font: 700 5rem/1 Georgia, serif; color: var(--ice-2); }
.quote blockquote { margin: 0 0 16px; font-size: .97rem; flex: 1; position: relative; }
.quote figcaption { font-weight: 700; color: var(--navy); }
.quote figcaption span { display: block; font-weight: 500; font-size: .88rem; color: var(--cyan-dark); }
.logo-wall { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 26px; }
.logo-wall li { display: grid; place-items: center; padding: 14px; background: #fff; border: 1px solid var(--border); aspect-ratio: 3 / 2; }
.logo-wall img { max-height: 60px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .3s, opacity .3s; }
.logo-wall li:hover img { filter: none; opacity: 1; }

/* 24. Packages: three temperatures of ice */
.packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; align-items: stretch; }
.package {
  --tint: #9fe3ff;
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(175deg, #ffffff 0%, #f3fbff 60%, var(--ice-2) 100%);
  border: 2px solid var(--tint);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  padding: 0 0 22px;
  transition: transform .3s var(--ease);
}
.package:hover { transform: translateY(-6px); }
.package--arctic { --tint: #3fb5ee; }
.package--cryo { --tint: #0b4486; }
.package__head { position: relative; padding: 22px 24px 18px; color: #fff; background: linear-gradient(150deg, var(--tint), var(--navy)); }
.package--frozen .package__head { background: linear-gradient(150deg, #5fc8f5, #1c6fb5); }
.package__temp { position: absolute; right: 18px; top: 18px; font-family: var(--font-head); font-weight: 700; font-size: .85rem; padding: 3px 10px 2px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.5); }
.package__name { margin: 0; color: #fff; font-size: 1.6rem; letter-spacing: .08em; }
.package__tag { margin: 0; color: #dff6ff; font-size: .92rem; }
.package__price { padding: 18px 24px 4px; }
.package__amount { font-family: var(--font-head); font-weight: 700; font-size: 2.3rem; color: var(--navy); line-height: 1; }
.package__per { display: block; margin-top: 6px; color: var(--muted); font-size: .9rem; }
.package ul { list-style: none; margin: 10px 24px 18px; flex: 1; }
.package li { position: relative; padding: 6px 0 6px 24px; border-bottom: 1px dashed var(--border); font-size: .95rem; }
.package li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 8px; height: 8px; background: var(--tint); transform: rotate(45deg); }
.package .btn { margin: 0 24px; align-self: flex-start; }
.package__example { margin: 12px 24px 0; font-size: .85rem; color: var(--muted); }
.package--featured::before {
  content: "Most popular"; position: absolute; left: 50%; top: 0; translate: -50% 0; z-index: 2;
  padding: 3px 12px 2px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy); background: var(--frost);
}
.thermo { height: 8px; margin: 14px 24px 0; background: var(--ice-2); position: relative; overflow: hidden; }
.thermo i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--frost), var(--tint)); }
.features { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 22px; margin-top: 22px; }
.features li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(159, 227, 255, .25); }
.features li::before { content: "❄"; color: var(--cyan); }
.features a { color: #fff; }
.features small { color: var(--frost); margin-left: auto; }

/* 25. Tabs (process phases) */
.tabs__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.tabs__tab {
  flex: 1 1 160px; display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer;
  font: 700 .95rem var(--font-head); text-transform: uppercase; letter-spacing: .05em; color: var(--navy);
  background: #fff; border: 1px solid var(--border); border-bottom: 3px solid var(--border);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  transition: background .2s, border-color .2s;
}
.tabs__tab span { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; background: linear-gradient(145deg, var(--cyan), var(--navy)); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); font-size: .85rem; }
.tabs__tab[aria-selected="true"] { background: var(--ice); border-bottom-color: var(--cyan); }
.tabs__tab:hover { background: var(--ice); }
.tabs__panel { padding: 26px 28px; background: #fff; border: 1px solid var(--border); border-top: 0; }
.tabs__panel[hidden] { display: none; }
.tabs__panel p:last-child { margin-bottom: 0; }

/* 26. Forms */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field legend { font-weight: 700; color: var(--navy); font-size: .95rem; }
.field .req { color: #b3261e; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 1rem; padding: .7em .85em; color: var(--text);
  background: linear-gradient(180deg, #ffffff, #f6fcff); border: 1.5px solid #b9dcef; border-radius: 3px;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan-dark); box-shadow: 0 0 0 3px rgba(0, 187, 255, .3); }
.field__hint { font-size: .85rem; color: var(--muted); }
fieldset.field { border: 0; padding: 0; margin: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: inline-block; padding: 8px 14px; border: 1.5px solid #b9dcef; background: #fff; color: var(--navy); font-weight: 500; font-size: .93rem;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); transition: background .2s, color .2s, border-color .2s;
}
.choice input:checked + span { background: var(--navy); color: #fff; border-color: var(--navy); }
.choice input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }
.form__note { font-size: .85rem; color: var(--muted); }

/* 27. Contact */
.reach { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 26px; }
.reach__card {
  padding: 22px 20px; text-align: center; background: linear-gradient(170deg, #fff, var(--ice) 70%, var(--ice-2)); border: 1px solid var(--frost);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.reach__card .value__icon { margin: 0 auto 12px; }
.reach__card h3 { font-size: 1rem; margin-bottom: 6px; }
.reach__card p { margin: 0; }
.reach__card a { font-weight: 700; }
.areas-cloud { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.areas-cloud a { display: inline-block; padding: 6px 12px 5px; background: #fff; border: 1px solid var(--frost); text-decoration: none; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.areas-cloud a:hover { background: var(--navy); color: #fff; }
.form-card { padding: 30px; background: #fff; border: 1px solid var(--border); clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); }

/* 29. Case study */
.facts { list-style: none; margin: 0; padding: 22px 24px; background: linear-gradient(170deg, #fff, var(--ice) 70%, var(--ice-2)); border: 1px solid var(--frost); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.facts li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.facts li:last-child { border-bottom: 0; }
.facts dt, .facts strong { color: var(--navy); }
.wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
.device-shot { margin: 0; }
.device-shot img { width: 100%; }
.next-project { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* 30. Blog & articles */
.blog-tools { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.blog-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-filter button {
  padding: 7px 14px 6px; cursor: pointer; font: 700 .82rem var(--font-head); text-transform: uppercase; letter-spacing: .06em;
  color: var(--navy); background: #fff; border: 1.5px solid var(--frost);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.blog-filter button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.blog-search input { font: inherit; padding: .55em .8em; border: 1.5px solid #b9dcef; min-width: 240px; }
.blog-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card {
  position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: transform .3s var(--ease);
}
.post-card:hover { transform: translateY(-4px); }
.post-card[hidden] { display: none; }
.post-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.post-card__title { font-size: 1.02rem; line-height: 1.3; margin: 6px 0 8px; }
.post-card__title a { color: var(--navy); text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card__excerpt { font-size: .92rem; color: var(--muted); margin: 0 0 10px; flex: 1; }
.post-card__meta { font-size: .8rem; color: var(--muted); margin: 0; }
.blog-more { text-align: center; margin-top: 30px; }
.article { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
.article__hero { margin: 0 0 26px; }
.article__hero img { width: 100%; }
.article__body { font-size: 1.05rem; }
.article__body img { height: auto; margin: 18px 0; }
.article__body figure { margin: 18px 0; }
.article__body figcaption, .article__body .wp-caption-text { font-size: .85rem; color: var(--muted); }
.article__body iframe { max-width: 100%; }
.article__body blockquote { margin: 18px 0; padding: 12px 20px; border-left: 4px solid var(--cyan); background: var(--ice); }
.article__body table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.article__body td, .article__body th { border: 1px solid var(--border); padding: 6px 10px; }
.article__aside { display: flex; flex-direction: column; gap: 22px; }
.aside-card { padding: 20px 22px; background: linear-gradient(170deg, #fff, var(--ice) 70%, var(--ice-2)); border: 1px solid var(--frost); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.aside-card h2 { font-size: 1rem; margin-bottom: 10px; }
.aside-card ul { list-style: none; }
.aside-card li { padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: .93rem; }
.aside-card li:last-child { border: 0; }
.aside-card a { text-decoration: none; }
.aside-card a:hover { text-decoration: underline; }
.aside-card--dark { background: linear-gradient(165deg, var(--navy), var(--navy-darker)); color: #fff; border-color: rgba(159,227,255,.4); }
.aside-card--dark h2 { color: #fff; }
.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; }
.article-nav a { display: block; padding: 14px 18px; background: #fff; border: 1px solid var(--border); text-decoration: none; }
.article-nav a:hover { border-color: var(--cyan); }
.article-nav span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--cyan-dark); font-weight: 700; }
.article-nav .next { text-align: right; }

@media (max-width: 1100px) {
  .values { grid-template-columns: repeat(2, 1fr); }
  .reach { grid-template-columns: repeat(2, 1fr); }
  .logo-wall { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 960px) {
  .split, .team, .packages, .quotes, .wins, .article { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 0; }
  .member { grid-template-columns: 140px 1fr; }
  .features, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .form__row { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .values, .reach, .features, .blog-grid, .article-nav { grid-template-columns: 1fr; }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .member { grid-template-columns: 1fr; }
  .member__photo { max-width: 180px; }
  .form-card { padding: 20px; }
}

/* A call-to-action band placed right before the footer flows straight into it */
.cta-band--end { padding-bottom: 64px; }
.cta-band--end::after { display: none; }
body.has-cta-end .site-footer { padding-top: 0; }
body.has-cta-end .site-footer::before { display: none; }
body.has-cta-end .footer__main { border-top: 1px solid rgba(159, 227, 255, .2); }
.page-banner .ice-text { --ice-a: #ffffff; --ice-b: #bfeeff; --ice-hl: #ffffff; }
.gallery__grid--three { grid-template-columns: 2fr 1fr; }
.gallery__grid--three .frozen--hero { grid-column: 1; grid-row: span 2; }
@media (max-width: 600px) { .gallery__grid--three { grid-template-columns: 1fr; } .gallery__grid--three .frozen--hero { grid-row: auto; } }
.values[style*="repeat(3"] { }
@media (max-width: 960px) { .values[style*="repeat(3"] { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 600px) { .values[style*="repeat(3"] { grid-template-columns: 1fr !important; } }

/* 31. Form status + demo forms */
.form__status { margin: 0; font-weight: 600; color: var(--cyan-dark); min-height: 1.2em; }
.form__status.is-error { color: #b3261e; }
.form__status.is-ok { padding: 12px 16px; color: var(--navy); background: var(--ice); border-left: 4px solid var(--cyan); }
.choice--block { display: block; }
.choice--block span { display: block; padding: 12px 16px; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: #b3261e; }
fieldset.field.is-invalid legend { color: #b3261e; }

/* 32. Free estimate wizard */
.estimate-section { position: relative; }
.quest { list-style: none; display: flex; justify-content: center; gap: 0; margin: 26px auto 34px; padding: 0; max-width: 760px; counter-reset: q; }
.quest__step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.quest__step::before { content: ""; position: absolute; top: 22px; left: -50%; width: 100%; height: 3px; background: var(--border); z-index: 0; }
.quest__step:first-child::before { display: none; }
.quest__step.is-done::before, .quest__step.is-current::before { background: linear-gradient(90deg, var(--cyan), var(--frost)); box-shadow: 0 0 8px rgba(0, 187, 255, .6); }
.quest__hex {
  position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; font-family: var(--font-head); font-weight: 700; color: var(--navy);
  background: #fff; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  box-shadow: inset 0 0 0 2px var(--border); transition: background .3s, color .3s, transform .3s var(--ease);
}
.quest__hex::after { content: ""; position: absolute; inset: 0; clip-path: inherit; background: linear-gradient(145deg, rgba(255,255,255,.6), transparent 50%); pointer-events: none; }
.quest__step.is-done .quest__hex { color: #fff; background: linear-gradient(145deg, var(--cyan-dark), var(--navy)); }
.quest__step.is-current .quest__hex { color: #fff; background: linear-gradient(145deg, var(--cyan), var(--navy-mid)); transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(0, 187, 255, .7)); }
.quest__name { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.quest__step.is-current .quest__name { color: var(--navy); }

.estimate { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 30px; align-items: start; }
.estimate__form {
  position: relative; padding: 32px; background: #fff; border: 1px solid var(--border);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
.estimate__step { border: 0; margin: 0; padding: 0; display: grid; gap: 18px; min-width: 0; }
.estimate__step[hidden] { display: none; }
.estimate__step.is-entering { animation: est-in .45s var(--ease); }
@keyframes est-in { from { opacity: 0; transform: translateX(24px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.estimate__legend { font-family: var(--font-head); font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700; color: var(--navy); padding: 0; margin-bottom: 4px; outline: none; }
.estimate__error { margin: 16px 0 0; color: #b3261e; font-weight: 600; min-height: 0; }
.estimate__error:empty { display: none; }
.estimate__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px dashed var(--border); }
.estimate__nav [data-prev][disabled] { visibility: hidden; }
.estimate__nav [hidden], .estimate__nav[hidden] { display: none; }
.estimate__nav .btn:last-child, .estimate__nav [data-next] { margin-left: auto; }
.estimate__done { text-align: center; padding: 10px 0; outline: none; }
.estimate__done[hidden] { display: none; }
.estimate__done img { width: 140px; height: auto; margin: 0 auto 10px; filter: drop-shadow(0 6px 18px rgba(0, 120, 200, .35)); animation: done-roar 1.2s var(--ease); }
.estimate__done h3 { font-size: 1.6rem; color: var(--navy); }
@keyframes done-roar { 0% { transform: scale(.6) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.08) rotate(2deg); opacity: 1; } 100% { transform: none; } }
.estimate.is-sent .icemeter { opacity: .75; }

/* Service + package tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tile { position: relative; display: block; cursor: pointer; }
.tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 2; }
.tile__box {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; min-height: 120px;
  padding: 18px 12px; text-align: center; background: linear-gradient(170deg, #fff, var(--ice) 75%); border: 1.5px solid #b9dcef;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: transform .25s var(--ease), background .25s, border-color .25s, box-shadow .25s; overflow: hidden;
}
.tile__box::before { /* frost that creeps in when chosen */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at 0 0, rgba(255,255,255,.55), transparent 40%), radial-gradient(circle at 100% 100%, rgba(159,227,255,.5), transparent 45%),
              repeating-linear-gradient(60deg, transparent 0 14px, rgba(255,255,255,.12) 14px 15px);
}
.tile__box .value__icon { margin: 0; transition: transform .3s var(--ease); }
.tile__label { font-weight: 700; color: var(--navy); font-size: .92rem; line-height: 1.25; }
.tile:hover .tile__box { transform: translateY(-3px); border-color: var(--cyan); }
.tile:hover .value__icon { transform: rotate(-8deg) scale(1.06); }
.tile input:checked + .tile__box { background: linear-gradient(160deg, var(--navy-mid), var(--navy-darker)); border-color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(159,227,255,.4); }
.tile input:checked + .tile__box::before { opacity: 1; }
.tile input:checked + .tile__box .tile__label, .tile input:checked + .tile__box .tile__desc { color: #fff; }
.tile input:checked + .tile__box::after { content: "✓"; position: absolute; top: 6px; right: 10px; color: var(--frost); font-weight: 700; }
.tile input:focus-visible + .tile__box { outline: 3px solid var(--cyan); outline-offset: -3px; }
.tiles--pkg { grid-template-columns: repeat(4, 1fr); }
.tile--pkg .tile__box { min-height: 170px; justify-content: flex-start; padding-top: 22px; }
.tile__temp { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--cyan-dark); }
.tile__desc { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.tile--frozen .tile__temp { color: #2a8fc9; }
.tile--arctic .tile__temp { color: #0b5fa8; }
.tile--cryo .tile__temp { color: #00316d; }
.tile input:checked + .tile__box .tile__temp { color: var(--frost); text-shadow: 0 0 12px rgba(159,227,255,.8); }
.estimate__step.is-disabled .tiles--pkg, .estimate__step.is-disabled .field { opacity: .45; }

/* Icy range slider */
.field label output { display: inline-grid; place-items: center; min-width: 2.2em; margin-left: 6px; padding: 1px 8px; color: #fff; background: var(--navy); font-family: var(--font-head); clip-path: var(--cut); }
.ice-range { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; cursor: pointer; --p: 10%; }
.ice-range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--cyan) 0 var(--p), #d7e9f3 var(--p) 100%); }
.ice-range::-moz-range-track { height: 8px; border-radius: 4px; background: #d7e9f3; }
.ice-range::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--cyan); }
.ice-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; background: linear-gradient(145deg, #fff, var(--frost) 40%, var(--cyan-dark)); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ice-range::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 0; background: linear-gradient(145deg, #fff, var(--frost) 40%, var(--cyan-dark)); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ice-range:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* Review list */
.review { display: grid; grid-template-columns: 170px 1fr; gap: 0; margin: 0; background: var(--ice); border: 1px solid var(--frost); }
.review dt, .review dd { margin: 0; padding: 10px 14px; border-bottom: 1px dashed #c4e4f4; }
.review dt { font-weight: 700; color: var(--navy); }
.review dd { color: var(--text); overflow-wrap: anywhere; }
.review dt:nth-last-child(2), .review dd:last-child { border-bottom: 0; }
.review button { margin-left: 8px; padding: 0; font: inherit; font-size: .82rem; color: var(--cyan-dark); text-decoration: underline; background: none; border: 0; cursor: pointer; }

/* The Ice-o-Meter */
.icemeter {
  position: sticky; top: 110px; padding: 26px 24px 22px; color: #e7f6ff; text-align: center;
  background: radial-gradient(120% 70% at 50% 0, #0d5aa6 0, var(--navy) 45%, var(--navy-darker) 100%);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); transition: opacity .3s;
}
.icemeter::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(159,227,255,.05) 22px 23px); }
.icemeter__title { font-size: 1.15rem; color: #fff; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.icemeter__gauge { position: relative; width: 44px; height: 170px; margin: 0 auto 16px; border-radius: 22px; background: rgba(0, 20, 50, .55); box-shadow: inset 0 0 0 2px rgba(159,227,255,.35), 0 0 22px rgba(0,187,255,.25); overflow: hidden; --lvl: .5; }
.icemeter__fill {
  position: absolute; left: 6px; right: 6px; bottom: 6px; height: calc((100% - 12px) * var(--lvl)); border-radius: 16px;
  background: linear-gradient(0deg, var(--cyan-dark), var(--cyan) 50%, #e6fbff); box-shadow: 0 0 14px rgba(0,187,255,.8);
  transition: height .8s var(--ease);
}
.icemeter__fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(255,255,255,.35) 12px 13px); }
.icemeter__crystal { position: absolute; left: 50%; bottom: calc(6px + (100% - 12px) * var(--lvl) - 9px); width: 18px; height: 18px; transform: translateX(-50%) rotate(45deg); background: #fff; box-shadow: 0 0 12px #fff, 0 0 24px var(--cyan); transition: bottom .8s var(--ease); }
.icemeter__label { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--frost); }
.icemeter__price { margin: 4px 0 14px; font-family: var(--font-head); font-size: 2.3rem; font-weight: 700; line-height: 1.1; color: #fff; text-shadow: 0 0 18px rgba(0,187,255,.6); }
.icemeter__price small { font-size: .9rem; color: var(--frost); }
.icemeter__price.is-bump { animation: est-bump .5s var(--ease); }
@keyframes est-bump { 40% { transform: scale(1.08); text-shadow: 0 0 28px #fff; } }
.icemeter__lines { margin: 0 0 14px; text-align: left; font-size: .9rem; }
.icemeter__lines div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(159,227,255,.25); }
.icemeter__lines dt { color: var(--frost); }
.icemeter__lines dd { margin: 0; font-weight: 700; color: #fff; }
.icemeter__note, .icemeter__help { font-size: .8rem; line-height: 1.5; color: #cfe9f8; margin: 0 0 10px; text-align: left; }
.icemeter__help { margin: 0; }
.icemeter a { color: #9fe3ff; }
.icemeter.is-idle .icemeter__price { font-size: 1.5rem; }

@media (max-width: 1100px) { .tiles, .tiles--pkg { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) {
  .estimate { grid-template-columns: 1fr; }
  .icemeter { position: relative; top: 0; order: -1; display: grid; grid-template-columns: 60px 1fr; gap: 4px 18px; text-align: left; padding: 20px; }
  .icemeter__title { grid-column: 1 / -1; margin-bottom: 4px; }
  .icemeter__gauge { grid-row: span 3; width: 34px; height: 110px; margin: 0; }
  .icemeter__lines, .icemeter__note, .icemeter__help { grid-column: 1 / -1; }
  .icemeter__price { font-size: 1.8rem; margin-bottom: 4px; }
  .tiles--pkg { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .estimate__form { padding: 20px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile__box { min-height: 104px; padding: 14px 8px; }
  .quest__name { display: none; }
  .quest__hex { width: 38px; height: 38px; }
  .quest__step::before { top: 18px; }
  .review { grid-template-columns: 1fr; }
  .review dt { border-bottom: 0; padding-bottom: 0; }
  .icemeter__help { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .estimate__step.is-entering, .estimate__done img, .icemeter__price.is-bump { animation: none; }
}

/* 33. Blog index + article extras */
.blog-filter button span { display: inline-block; margin-left: 4px; font-size: .72rem; opacity: .7; }
.blog-filter button:hover { border-color: var(--cyan); }
.blog-count { font-size: .9rem; color: var(--muted); margin: -10px 0 18px; }
.blog-empty { text-align: center; padding: 30px; }
.blog-more { text-align: center; margin-top: 34px; }
.blog-more[hidden] { display: none; }
.post-card__noimg { display: block; aspect-ratio: 16 / 10; background: linear-gradient(150deg, var(--navy), var(--cyan-dark)); }
.post-card .chips { margin: 0; }
.post-card.is-new { animation: est-in .5s var(--ease); }
.article__main { min-width: 0; }
.article__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 18px; font-size: .9rem; color: var(--muted); }
.article__meta span { color: var(--cyan); font-size: .8rem; }
.article__body > *:first-child { margin-top: 0; }
.article__body a { color: var(--cyan-dark); }
.article__body img { display: block; max-width: 100%; }
.article__body img.aligncenter, .article__body .aligncenter { margin-left: auto; margin-right: auto; }
.article__body img.alignright, .article__body figure.alignright { float: right; max-width: 45%; margin: 6px 0 14px 22px; }
.article__body img.alignleft, .article__body figure.alignleft { float: left; max-width: 45%; margin: 6px 22px 14px 0; }
.article__body::after { content: ""; display: block; clear: both; }
.article__body figure { text-align: center; }
.article__body figure img { margin: 0 auto 6px; }
.article__body h2, .article__body h3 { clear: both; }
.article__tags { margin-top: 26px; }
.post-video { position: relative; aspect-ratio: 16 / 9; margin: 20px 0; background: #000; }
.post-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 20px 0; }
.post-gallery__item { margin: 0 !important; overflow: hidden; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.post-gallery__item img { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; transition: transform .5s var(--ease); }
.post-gallery__item:hover img { transform: scale(1.04); }
.post-series { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.article__body .post-series__link {
  padding: 7px 14px 6px; font: 700 .82rem var(--font-head); letter-spacing: .06em; color: #fff; text-decoration: none;
  background: var(--navy); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.article__body .post-series__link:hover, .article__body .post-series__link[aria-current] { background: var(--cyan-dark); }
.aside-card .btn { margin-top: 6px; }
.aside-card--dark p { color: #d7ecf8; font-size: .93rem; }
.aside-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.aside-card .aside-cats li { padding: 0; border: 0; }
.aside-cats a { display: inline-block; padding: 4px 10px; font-size: .82rem; background: #fff; border: 1px solid var(--frost); }
.page-banner--short .page-banner__title { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); }
@media (max-width: 960px) { .article__aside { order: 2; } }
@media (max-width: 600px) {
  .article__body img.alignright, .article__body img.alignleft, .article__body figure.alignright, .article__body figure.alignleft { float: none; max-width: 100%; margin: 14px auto; }
  .blog-search input { min-width: 0; width: 100%; }
  .blog-search { width: 100%; }
}
@media (max-width: 600px) { .page-banner--short .breadcrumbs li[aria-current] { display: none; } }

/* =====================================================================
   34. Round 10: light ice bands, service groups, science, pre-footer,
       award shelves, icy image frames, summon-the-dragon night sky
   ===================================================================== */

/* Light ice band: the same jagged ridge on top and curved icicles underneath as the dark bands,
   in pale ice. --above / --below are filled in automatically from the neighbouring sections. */
.band--ice {
  --above: var(--bg); --below: var(--bg);
  position: relative;
  background: linear-gradient(180deg, #eef7fc 0, #eef7fc var(--ridge), #e3f2fa 60%, #e3f2fa 100%);
  padding-top: calc(var(--ridge) + 44px);
  padding-bottom: calc(var(--icicles) + 44px);
}
.band--ice::before, .band--ice::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.band--ice::before { top: 0; height: var(--ridge); background: url("../img/edges/ridge-ice.svg") repeat-x 0 0 / 720px 100%, var(--above); }
.band--ice::after { bottom: 0; height: var(--icicles); background: url("../img/edges/icicles-ice.svg") repeat-x 0 0 / 720px 100%, var(--below); filter: drop-shadow(0 4px 4px rgba(0, 80, 140, .08)); }
.gallery.band--ice { padding-top: calc(var(--ridge) + 36px); }

/* Service cards: four website cards on a row */
.cards--four { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cards--four .card__text { font-size: .95rem; }
.cards--light .card { filter: drop-shadow(0 10px 18px rgba(0, 49, 109, .16)); }
.cards--light .card__frame { background: linear-gradient(150deg, #cfeaf7, var(--frost) 35%, rgba(0, 150, 220, .55) 65%, #cfeaf7); }

/* Hosting, care & email: three compact ice tiles */
.upkeep {
  display: grid; grid-template-columns: .9fr 2.1fr; gap: 28px; align-items: center; margin-top: 46px; padding: 26px 28px;
  background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(159,227,255,.06)); border: 1px solid rgba(159,227,255,.28);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.upkeep__kicker { margin: 0 0 2px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--frost); }
.upkeep__title { color: #fff; font-size: 1.35rem; margin-bottom: 8px; }
.upkeep__intro p:last-child { margin: 0; color: #d7ecf8; font-size: .95rem; }
.upkeep__list { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.upkeep__item a {
  position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; height: 100%; padding: 16px; text-decoration: none; color: #fff;
  background: linear-gradient(165deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid rgba(159,227,255,.35);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: background .3s, transform .3s var(--ease);
}
.upkeep__item a:hover { background: linear-gradient(165deg, rgba(159,227,255,.3), rgba(255,255,255,.08)); transform: translateY(-3px); }
.upkeep__icon { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; background: linear-gradient(145deg, var(--cyan), var(--navy-mid)); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.upkeep__icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.upkeep__name { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.upkeep__text { font-size: .88rem; color: #cfe7f6; line-height: 1.45; }
.upkeep__new { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px 1px; color: var(--navy); background: linear-gradient(135deg, #fff, var(--frost)); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); animation: new-glint 3s ease-in-out infinite; }
@keyframes new-glint { 50% { box-shadow: 0 0 12px rgba(159,227,255,.9); filter: brightness(1.15); } }
.graphics__actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }
.btn--light { background: rgba(255,255,255,.85); color: #fff; }
.btn--light::after { background: linear-gradient(170deg, #0b4486, var(--navy-darker)); }
.btn--light:hover { color: var(--navy); }
.btn--light:hover::after { background: linear-gradient(170deg, #ffffff, #e2f6ff 50%, #c4eafb); }

/* Icy image frame (same rim + chipped corners + cracked-ice lower edge as the service cards) */
.ice-frame {
  position: relative; margin: 0; padding: 3px;
  background: linear-gradient(150deg, #ffffff, var(--frost) 35%, rgba(0, 187, 255, .7) 65%, #ffffff);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  filter: drop-shadow(0 12px 20px rgba(0, 49, 109, .22));
}
.ice-frame img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  clip-path: polygon(14px 0, 100% 0, 100% 95%, 93% 98%, 86% 96.5%, 78% 99%, 70% 96%, 62% 98.5%, calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: transform .8s var(--ease);
}
.ice-frame::after {
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%) -150% 0 / 60% 100% no-repeat,
              linear-gradient(180deg, transparent 70%, rgba(214, 240, 252, .4));
  transition: background-position 1s var(--ease);
}
.ice-frame:hover::after { background-position: 250% 0, 0 0; }
.ice-frame:hover img { transform: scale(1.03); }
.ice-frame--plain { background: none; padding: 0; filter: drop-shadow(0 14px 24px rgba(0, 49, 109, .25)); }
.ice-frame--plain::after { display: none; }

/* Science: overlapping journal covers on the left, text and logos on the right */
.science__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.science__art { position: relative; aspect-ratio: 1.15 / 1; }
.science__cover { position: absolute; width: 66%; aspect-ratio: 3 / 2; transition: transform .5s var(--ease), z-index 0s .25s; }
.science__cover--a { left: 0; top: 0; transform: rotate(-3deg); z-index: 2; }
.science__cover--b { right: 0; top: 30%; transform: rotate(2.5deg); z-index: 3; }
.science__cover--c { left: 8%; bottom: 0; transform: rotate(-1deg); z-index: 1; }
.science__cover:hover { transform: rotate(0) scale(1.04); z-index: 4; transition: transform .5s var(--ease), z-index 0s; }
.science .trusted { text-align: left; margin: 24px 0 26px; }
.science .trusted__logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 22px; justify-items: center; }
.science .trusted__logos img { height: 36px; max-width: 100%; mix-blend-mode: multiply; }

/* Pre-footer: Let's ___ Together / Ready to Wake the Dragon? */
.prefooter { background: linear-gradient(180deg, var(--navy) 0, var(--navy) var(--ridge), #003a80 50%, var(--navy) calc(100% - var(--icicles)), var(--navy) 100%); }
.prefooter__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.prefooter__kicker { margin: 0 0 4px; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--frost); }
.prefooter__text > p { color: #e3f4ff; }
.prefooter .steps { margin-bottom: 8px; }
.wake { position: relative; margin: 0; aspect-ratio: 1600 / 1013; }
.wake__glow { position: absolute; inset: 15% 5% 0; background: radial-gradient(closest-side, rgba(0, 187, 255, .35), transparent); filter: blur(10px); opacity: .5; transition: opacity 1.4s; }
.wake__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 1.2s ease, transform 1.4s var(--ease); filter: drop-shadow(0 16px 26px rgba(0, 10, 40, .5)); }
.wake__img--awake { opacity: 0; transform: translateY(14px) scale(.97); }
.wake.is-awake .wake__img--asleep { opacity: 0; transform: scale(1.02); }
.wake.is-awake .wake__img--awake { opacity: 1; transform: none; }
.wake.is-awake .wake__glow { opacity: 1; }
.wake__z { position: absolute; left: 30%; top: 30%; font-family: var(--font-head); font-weight: 700; color: var(--frost); font-size: 1.6rem; opacity: 0; animation: zzz 3.6s ease-in infinite; }
.wake__z:nth-of-type(2) { animation-delay: 1.2s; font-size: 2rem; }
.wake__z:nth-of-type(3) { animation-delay: 2.4s; font-size: 2.5rem; }
.wake.is-awake .wake__z { display: none; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 0) rotate(-10deg); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(-60px, -90px) rotate(10deg); } }

/* Award shelves */
.awards { background: #fff; }
.trophies { display: grid; grid-template-columns: 1fr; gap: 22px; margin: 26px 0 36px; }
.trophy-shelf {
  position: relative; padding: 20px 20px 26px;
  background: linear-gradient(170deg, #fff, var(--ice) 70%, var(--ice-2));
  border: 1px solid var(--frost);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.trophy-shelf::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 14px; height: 6px; background: linear-gradient(90deg, transparent, rgba(0, 111, 168, .35), transparent); border-radius: 50%; filter: blur(2px); }
.trophy-shelf__label { margin: 0 0 14px; text-align: center; font-size: .92rem; color: var(--muted); }
.trophy-shelf__label strong { color: var(--navy); font-family: var(--font-head); font-size: 1.05rem; }
.trophy-shelf__row { list-style: none; margin: 0; display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: 4px 10px; }
.trophy-shelf__row li { flex: 0 0 auto; }
.trophy-shelf__row img { height: 112px; width: auto; transition: transform .35s var(--ease), filter .35s; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .15)); }
.trophy-shelf--wide .trophy-shelf__row img { height: 84px; }
.trophy-shelf__row img:hover { transform: translateY(-6px) scale(1.12) rotate(-3deg); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .25)); position: relative; z-index: 2; }
.awards__logos { margin-top: 0; }

/* Summon the dragon (inner pages): night sky, moon, dragon flight, free-estimate scroll */
.night { position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: 0; transition: opacity .3s linear;
  background: radial-gradient(120% 80% at 50% 120%, #0d3b7a 0, #071e48 45%, #020b22 100%); }
.night.is-full { transition: opacity 1.2s ease; }
.night__stars, .night__stars--2 { position: absolute; inset: 0;
  background-image: radial-gradient(1.4px 1.4px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #cfefff, transparent), radial-gradient(1.6px 1.6px at 200px 150px, #fff, transparent), radial-gradient(1px 1px at 280px 40px, #fff, transparent), radial-gradient(1.2px 1.2px at 340px 190px, #bfe9ff, transparent), radial-gradient(1px 1px at 60px 220px, #fff, transparent);
  background-size: 380px 260px; animation: twinkle 3s ease-in-out infinite alternate; }
.night__stars--2 { background-size: 520px 340px; background-position: 90px 60px; animation-delay: 1.5s; opacity: .7; }
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
.night__moon { position: absolute; right: 12%; top: 12%; width: clamp(80px, 11vw, 150px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, #e6f4ff 45%, #b9d9f0 75%, #9cc6e6);
  box-shadow: 0 0 40px 10px rgba(200, 235, 255, .45), 0 0 120px 40px rgba(120, 190, 255, .2); }
.night__moon::before, .night__moon::after { content: ""; position: absolute; border-radius: 50%; background: rgba(140, 180, 215, .35); }
.night__moon::before { width: 22%; height: 22%; left: 55%; top: 30%; }
.night__moon::after { width: 14%; height: 14%; left: 30%; top: 60%; }
.night__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: url("../img/edges/ridge-ice.svg") repeat-x 0 0 / 720px 40px, linear-gradient(180deg, transparent 0 39px, #bfe6f8 39px, #e3f2fa); opacity: .55; }
.flight { position: fixed; left: 0; top: 0; z-index: 9995; pointer-events: none; width: clamp(260px, 38vw, 560px); will-change: transform; }
.flight img { width: 100%; height: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .45)); animation: wingbeat .9s ease-in-out infinite; transform-origin: 50% 60%; }
.flight.is-right img { scale: -1 1; }
@keyframes wingbeat { 50% { transform: translateY(-10px) rotate(-1.5deg); } }

.summon { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; }
.summon[hidden] { display: none; }
.summon__card { position: relative; width: min(520px, 100%); text-align: center; animation: summon-in .8s var(--ease) both; }
@keyframes summon-in { from { opacity: 0; transform: translateY(40px) scale(.9); } to { opacity: 1; transform: none; } }
.summon__art { width: min(300px, 70%); margin: 0 auto -18px; filter: drop-shadow(0 18px 26px rgba(0,0,0,.45)); position: relative; z-index: 2; }
.summon__body {
  position: relative; padding: 34px 28px 26px; color: var(--navy);
  background: linear-gradient(170deg, #ffffff, #eaf8ff 55%, #cdeefc);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  box-shadow: inset 0 0 0 3px rgba(159,227,255,.9);
}
.summon__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: 8px; }
.summon__text { margin: 0 auto 18px; max-width: 40ch; color: var(--text); }
.summon__close { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border: 0; background: none; cursor: pointer; color: var(--navy); font-size: 1.6rem; line-height: 1; }
.summon__close:focus-visible { outline: 3px solid var(--cyan); }
.summon .btn-row { justify-content: center; }

@media (max-width: 1100px) {
  .cards--four { grid-template-columns: repeat(2, 1fr); }
  .upkeep { grid-template-columns: 1fr; }
  .trophies { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .science__grid, .prefooter__grid { grid-template-columns: 1fr; }
  .science__art { max-width: 560px; width: 100%; margin: 0 auto; }
  .wake { max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 760px) {
  .upkeep__list { grid-template-columns: 1fr; }
  .upkeep { padding: 20px; }
}
@media (max-width: 600px) {
  .cards--four { grid-template-columns: 1fr; }
  .science .trusted__logos { grid-template-columns: repeat(2, 1fr); }
  .trophy-shelf__row img { height: 70px; }
  .trophy-shelf--wide .trophy-shelf__row img { height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .wake__z, .upkeep__new, .flight img, .night__stars, .night__stars--2 { animation: none; }
}
.band--navy .upkeep__item a { color: #fff; }
.page-banner__dragon--art { height: 104%; bottom: calc(var(--icicles) - 34px); }
.page-banner--short .page-banner__dragon--art { height: 118%; }
@media (max-width: 960px) {
  .page-banner__dragon--art, .page-banner--short .page-banner__dragon--art { height: 220px; bottom: calc(var(--icicles) - 24px); }
}

/* 35. About page */
.about-lead { font-family: var(--font-head); font-style: italic; font-weight: 600; font-size: 1.2rem; line-height: 1.5; color: var(--navy); }
.story-art { display: grid; gap: 18px; }
.story-art__main { aspect-ratio: 1036 / 852; background-color: #e9f7fe; }
.story-art__main img { object-fit: contain; background: radial-gradient(circle at 50% 60%, #ffffff, #d6f0fc); }
.name-rune { padding: 16px 20px; background: linear-gradient(160deg, var(--navy), var(--navy-darker)); color: #fff; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.name-rune__title { margin: 0 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--frost); font-weight: 700; }
.name-rune__eq { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 6px; }
.name-rune__eq span { display: flex; flex-direction: column; font-family: var(--font-head); font-size: 1.35rem; }
.name-rune__eq small { font-family: var(--font-body); font-size: .72rem; color: #bfe3f6; }
.name-rune__eq b { color: var(--cyan); font-size: 1.4rem; }
.name-rune__result { color: var(--cyan); font-weight: 700; text-shadow: 0 0 14px rgba(0,187,255,.6); }
.name-rune__note { margin: 0; font-size: .85rem; color: #d7ecf8; }

.stats-strip { padding: 0 0 56px; }
.stats { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stats li { position: relative; text-align: center; padding: 22px 12px 18px; background: linear-gradient(170deg, #fff, var(--ice) 70%, var(--ice-2)); border: 1px solid var(--frost); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.stats__num { display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1; color: var(--navy); background: linear-gradient(180deg, var(--navy), #1c8fd0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stats__label { display: block; margin-top: 6px; font-size: .88rem; color: var(--muted); font-weight: 600; }

.riders { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; }
.rider { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rider__card { position: relative; width: 100%; perspective: 1400px; }
.rider__face {
  padding: 3px; background: linear-gradient(150deg, #ffffff, var(--frost) 35%, rgba(0, 187, 255, .7) 65%, #ffffff);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  transition: transform .7s var(--ease), opacity .4s;
}
.rider__front { display: grid; grid-template-columns: 38% 1fr; color: var(--text); }
.rider__front > * { background: linear-gradient(170deg, #ffffff 0%, #f3fbff 45%, var(--ice-2) 100%); }
.rider__art { display: flex; align-items: flex-end; justify-content: center; padding: 18px 8px 0; background: radial-gradient(circle at 50% 75%, #ffffff, #bfe6f8 60%, #8fd1f1) !important; clip-path: polygon(17px 0, 100% 0, 100% 100%, 0 100%, 0 17px); }
.rider__art img { width: 100%; max-height: 420px; object-fit: contain; object-position: bottom; transition: transform .5s var(--ease); }
.rider:hover .rider__art img { transform: translateY(-6px) rotate(-1deg); }
.rider__info { padding: 20px 22px 20px; font-size: .93rem; }
.rider__name { font-size: 1.35rem; margin: 0 0 2px; color: var(--navy); }
.rider__role { margin: 0 0 10px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--cyan-dark); }
.rider__power { margin: 0 0 12px; padding: 8px 12px; background: var(--navy); color: #fff; font-size: .88rem; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.rider__power strong { color: var(--frost); }
.rider__skills { list-style: none; margin: 0 0 12px; display: grid; gap: 6px; }
.rider__skills li { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px; font-size: .82rem; font-weight: 600; color: var(--navy); }
.rider__bar { height: 8px; background: #d7e9f3; border-radius: 4px; overflow: hidden; }
.rider__bar i { display: block; height: 100%; width: var(--v); background: linear-gradient(90deg, var(--cyan-dark), var(--cyan), #e6fbff); box-shadow: 0 0 8px rgba(0,187,255,.6); transform-origin: left; animation: bar-grow 1.6s var(--ease) both; }
@keyframes bar-grow { from { transform: scaleX(0); } }
.rider__info p:last-child { margin: 0; }
.rider__back { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 30px 34px; color: #fff; background: linear-gradient(160deg, #0b4486, var(--navy-darker)); transform: rotateY(-180deg); opacity: 0; backface-visibility: hidden; overflow: hidden; }
.rider__back[hidden] { display: flex; visibility: hidden; }
.rider__back .rider__name { color: #fff; font-size: 1.5rem; margin-bottom: 14px; }
.rider__back-art { position: absolute; right: -30px; bottom: -10px; width: 46%; opacity: .35; pointer-events: none; }
.rider__facts { position: relative; margin: 0; padding-left: 0; list-style: none; display: grid; gap: 10px; max-width: 70%; }
.rider__facts li { position: relative; padding-left: 26px; }
.rider__facts li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 10px; background: var(--cyan); transform: rotate(45deg); box-shadow: 0 0 8px var(--cyan); }
.rider.is-flipped .rider__front { transform: rotateY(180deg); opacity: 0; }
.rider.is-flipped .rider__back { transform: none; opacity: 1; visibility: visible; }

.code-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 30px; align-items: center; margin-top: 26px; }
.code { list-style: none; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; counter-reset: none; }
.code__rule { position: relative; padding: 22px 20px 18px 22px; background: linear-gradient(170deg, #fff, var(--ice) 70%, var(--ice-2)); border: 1px solid var(--frost); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); transition: transform .3s var(--ease); }
.code__rule:hover { transform: translateY(-4px); }
.code__rule h3 { font-size: 1.05rem; margin: 10px 0 6px; }
.code__rule p { margin: 0; font-size: .92rem; }
.code__num { position: absolute; right: 16px; top: 8px; font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; line-height: 1; color: rgba(0, 111, 168, .14); }
.code__art img { width: 100%; filter: drop-shadow(0 16px 24px rgba(0, 49, 109, .2)); }

.journey { overflow: hidden; }
.flightpath { list-style: none; margin: 30px 0 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; position: relative; }
.flightpath::before { content: ""; position: absolute; left: 4%; right: 4%; top: 22px; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--cyan) 0 14px, transparent 14px 22px); opacity: .7; }
.flightpath__stop { position: relative; padding: 52px 10px 0; text-align: center; }
.flightpath__stop::before { content: ""; position: absolute; left: 50%; top: 12px; width: 24px; height: 24px; margin-left: -12px; background: linear-gradient(145deg, #fff, var(--frost) 40%, var(--cyan-dark)); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); filter: drop-shadow(0 0 6px rgba(0,187,255,.7)); transition: transform .3s var(--ease); }
.flightpath__stop:hover::before { transform: scale(1.3) rotate(45deg); }
.flightpath__year { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--navy); }
.flightpath__title { font-size: .95rem; margin: 2px 0 6px; color: var(--cyan-dark); }
.flightpath__stop p { margin: 0; font-size: .84rem; line-height: 1.5; }
.flightpath__dragon { display: block; width: 300px; margin: 18px 0 0 auto; animation: swoop 6s ease-in-out infinite; }
@keyframes swoop { 50% { transform: translate(-30px, -12px) rotate(-2deg); } }

@media (max-width: 1100px) {
  .riders { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
  .flightpath { grid-template-columns: 1fr; gap: 18px; padding-left: 40px; }
  .flightpath::before { left: 16px; right: auto; top: 0; bottom: 0; width: 4px; height: auto; background: repeating-linear-gradient(180deg, var(--cyan) 0 14px, transparent 14px 22px); }
  .flightpath__stop { padding: 0; text-align: left; }
  .flightpath__stop::before { left: -36px; top: 4px; margin: 0; }
}
@media (max-width: 960px) {
  .code-grid { grid-template-columns: 1fr; }
  .code__art { max-width: 460px; margin: 0 auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .rider__front { grid-template-columns: 1fr; }
  .rider__art { max-height: 300px; }
  .rider__art img { max-height: 280px; }
  .rider__skills li { grid-template-columns: 110px 1fr; }
  .rider__facts { max-width: 100%; }
  .code { grid-template-columns: 1fr; }
  .flightpath__dragon { width: 200px; }
}
@media (prefers-reduced-motion: reduce) { .flightpath__dragon, .rider__bar i { animation: none; } }
.rider__art { position: relative; min-height: 340px; }
.rider__art img { position: absolute; left: 6%; right: 6%; bottom: 0; top: 18px; width: 88%; height: calc(100% - 18px); max-height: none; object-fit: contain; object-position: bottom center; }
@media (max-width: 600px) { .rider__art { min-height: 300px; } .rider__art img { max-height: none; } }
.journey .container { position: relative; }
.flightpath__dragon { position: absolute; right: 0; top: -10px; width: 230px; margin: 0; }
@media (max-width: 1100px) { .flightpath__dragon { position: static; margin: 16px 0 0 auto; width: 200px; } }
/* rider cards: dragon scene across the top, details underneath */
.rider__front { grid-template-columns: 1fr; }
.rider__art { min-height: 0; aspect-ratio: 1600 / 810; padding: 10px 10px 0; background: radial-gradient(120% 90% at 50% 100%, #ffffff, #cfeefb 55%, #8fd1f1) !important; }
.rider__art img { position: static; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.rider__back-art { width: 34%; right: 4%; bottom: 0; opacity: .55; }
@media (max-width: 600px) { .rider__art { min-height: 0; } }
.rider__card { flex: 1; display: flex; }
.rider__front { flex: 1; }

/* 36. Web design page: recent work wall + the quest map (design process) */
.work-wall { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.work-wall .ice-frame { aspect-ratio: 3 / 2; }

.quest-map { list-style: none; margin: 30px 0 0; position: relative; display: grid; gap: 34px; }
.quest-map::before {            /* the icy trail the dragon follows */
  content: ""; position: absolute; left: 50%; top: 20px; bottom: 20px; width: 6px; margin-left: -3px; border-radius: 3px;
  background: repeating-linear-gradient(180deg, rgba(0, 150, 220, .45) 0 16px, transparent 16px 26px);
}
.quest-map::after {             /* the part of the trail already travelled */
  content: ""; position: absolute; left: 50%; top: 20px; width: 6px; margin-left: -3px; border-radius: 3px;
  height: calc((100% - 40px) * var(--p, 0)); background: linear-gradient(180deg, var(--cyan), #e6fbff); box-shadow: 0 0 12px rgba(0, 187, 255, .8);
}
.quest-map__stop { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.quest-map__stop:nth-child(even) .quest-map__art { order: 2; }
.quest-map__stop::before {      /* waypoint crystal on the trail */
  content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; z-index: 2;
  background: linear-gradient(145deg, #fff, var(--frost) 40%, var(--cyan-dark)); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: transform .5s var(--ease), filter .5s; filter: grayscale(.6);
}
.quest-map__stop.is-reached::before { transform: scale(1.25); filter: drop-shadow(0 0 10px var(--cyan)); }
.quest-map__art { margin: 0; text-align: center; transform: translateY(24px); opacity: 0; transition: transform .8s var(--ease), opacity .8s; }
.quest-map__art img { width: 100%; max-width: 420px; height: auto; filter: drop-shadow(0 16px 24px rgba(0, 49, 109, .22)); }
.quest-map__stop.is-reached .quest-map__art { transform: none; opacity: 1; }
.quest-map__card {
  position: relative; padding: 26px 28px 22px; background: linear-gradient(170deg, #fff, #f3fbff 55%, var(--ice-2));
  border: 1px solid var(--frost); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  filter: drop-shadow(0 10px 18px rgba(0, 49, 109, .12));
}
.quest-map__card p:last-child { margin-bottom: 0; }
.quest-map__num { position: absolute; right: 18px; top: 6px; font-family: var(--font-head); font-weight: 700; font-size: 3.4rem; line-height: 1; color: rgba(0, 111, 168, .12); }
.quest-map__kicker { margin: 0 0 2px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--cyan-dark); }
.quest-map__title { font-size: 1.6rem; margin: 0 0 10px; }
@media (max-width: 960px) {
  .work-wall { grid-template-columns: repeat(2, 1fr); }
  .quest-map::before, .quest-map::after { left: 18px; }
  .quest-map__stop { grid-template-columns: 1fr; gap: 14px; padding-left: 50px; }
  .quest-map__stop:nth-child(even) .quest-map__art { order: 0; }
  .quest-map__stop::before { left: 18px; top: 40px; }
  .quest-map__art img { max-width: 300px; }
}
@media (max-width: 600px) { .work-wall { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .quest-map__art { transform: none; opacity: 1; } }
.band--joined::before { display: none; }
.band--joined { padding-top: 56px; }
.night__ground { opacity: 1; height: 18%; background: url("../img/edges/ridge-ice.svg") repeat-x 0 0 / 720px 40px, linear-gradient(180deg, transparent 0 39px, #6f9fc6 39px, #2b5c8f); filter: brightness(.7) saturate(1.2); }
.summon__art { width: min(190px, 46%); }
.page-banner__dragon--art { width: min(54vw, 780px); max-width: 54vw; object-fit: contain; object-position: right bottom; }
@media (max-width: 960px) { .page-banner__dragon--art { width: min(70vw, 360px); max-width: 70vw; } }
@media (max-width: 960px) { .page-banner--short:has(.page-banner__dragon--art) { padding-bottom: calc(var(--icicles) + 200px); } }

/* ==========================================================================
   37. Round 11
   ========================================================================== */

/* (Round 12: the faceted ridge and gradient icicles from earlier rounds are back; see section 38.) */

/* One arrow everywhere: the solid ice arrow that grows to the end of its box on hover.
   Markup:  <a class="arrow-link" href="…"><span>Read more</span>[ARROW]</a>
   The arrow grows when the link OR any card/tile that contains it is hovered. */
.arrow-link {
  display: flex; align-items: center; gap: 12px; width: 100%;
  color: var(--cyan-dark); font-family: var(--font-head); font-weight: 700;
  text-transform: uppercase; font-size: .86rem; letter-spacing: .05em; text-decoration: none;
}
.arrow-link > span:first-child { flex: 0 0 auto; }
.band--navy .arrow-link, .arrow-link--light { color: var(--frost); }
.band--navy .card__arrow-head, .arrow-link--light .card__arrow-head { fill: var(--frost); }
.band--navy .card__arrow-facet, .arrow-link--light .card__arrow-facet { fill: #fff; }
:is(.arrow-link, .frozen, .feature, .upkeep__item, .post-card, .pf-tile, .work-tile, .svc-tile, .solution, .city-card, .related-card, .riders-mini):is(:hover, :focus-within) .card__arrow-line {
  width: calc(100% - 14px);
  animation: arrow-glint 1.2s linear .5s infinite;
}
:is(.arrow-link, .frozen, .feature, .upkeep__item, .post-card, .pf-tile, .work-tile, .svc-tile, .solution, .city-card, .related-card):is(:hover, :focus-within) .card__arrow-head { transform: scale(1.15); }
.feature__more::after { content: none; }
.feature__more { display: flex; align-items: center; gap: 12px; color: var(--frost); }
.feature__more .card__arrow-head { fill: var(--frost); }
.feature__more .card__arrow-facet { fill: #fff; }
.frozen__more { display: flex !important; align-items: center; gap: 12px; width: 100%; }
.frozen__more .card__arrow-head { fill: var(--frost); }
.frozen__more .card__arrow-facet { fill: #fff; }

/* Cartoon art never gets a frame: the artwork speaks for itself */
.art { margin: 0; }
.art img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 22px rgba(0, 49, 109, .18)); }

/* ---------- Homepage ---------- */
.cards--three { grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cards--three .card__media { aspect-ratio: 16 / 10; }
.services__more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; margin-top: 34px; text-align: center; }
.services__more p { margin: 0; color: #d7ecf8; }

/* After launch day: three image tiles, capital titles, growing arrows */
.upkeep { display: block; margin-top: 54px; padding: 0; background: none; border: 0; clip-path: none; }
.upkeep__intro { max-width: 760px; margin: 0 auto 24px; text-align: center; }
.upkeep__list { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.upkeep__item { position: relative; display: flex; flex-direction: column; background: linear-gradient(170deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); border: 1px solid rgba(159, 227, 255, .3); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); transition: transform .35s var(--ease), background .35s; }
.upkeep__item:hover, .upkeep__item:focus-within { transform: translateY(-5px); background: linear-gradient(170deg, rgba(159,227,255,.24), rgba(255,255,255,.06)); }
.upkeep__media { position: relative; aspect-ratio: 16 / 8; overflow: hidden; }
.upkeep__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.upkeep__item:hover .upkeep__media img { transform: scale(1.05); }
.upkeep__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 22px; background: #0d3f7f; -webkit-mask: var(--ice-mask) repeat-x 0 0 / 360px 100%; mask: var(--ice-mask) repeat-x 0 0 / 360px 100%; transform: scaleY(-1); }
.upkeep__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 14px 20px 18px; }
.upkeep__name { font-size: .98rem; text-transform: uppercase; letter-spacing: .1em; color: #fff; }
.upkeep__text { flex: 1; }
.upkeep__item .arrow-link { color: var(--frost); }
.upkeep__item .arrow-link::before { content: ""; position: absolute; inset: 0; z-index: 2; }
.upkeep__item .card__arrow-head { fill: var(--frost); }
.upkeep__item .card__arrow-facet { fill: #fff; }

/* Featured news flows straight into "Proudly based in Waterloo": one continuous gradient */
.news { background: linear-gradient(180deg, var(--bg) 0%, #eef7fc 100%); padding-bottom: 40px; }
.local { background: linear-gradient(180deg, #eef7fc 0%, var(--bg) 100%); padding-top: 40px; }

/* Hint notes: big, friendly first line */
.crack-hint__msg { width: 270px; padding: 16px 38px 16px 18px; }
.crack-hint__title { font-size: 1.7rem !important; line-height: 1.1; letter-spacing: .02em !important; text-transform: none !important; margin-bottom: 6px !important; color: #fff !important; text-shadow: 0 0 16px rgba(0, 187, 255, .7); }
.crack-hint__text { font-size: .98rem; line-height: 1.5; }
.crack-hint.is-found .crack-hint__msg { width: 290px; }
.crack-hint.is-found .crack-hint__title { color: var(--cyan) !important; }
@media (max-width: 600px) { .crack-hint__msg { width: 230px; } .crack-hint__title { font-size: 1.4rem !important; } }

/* Summon scroll: kicker + small print */
.summon__kicker { margin: 0 0 4px; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--cyan-dark); }
.summon__note { margin: 14px 0 0; font-size: .8rem; color: var(--muted); }

/* The sleeping dragon: Zzz's drift up slowly and keep coming; hovering wakes it */
.wake { cursor: pointer; }
.wake__z { animation-duration: 6s; }
.wake__z:nth-of-type(2) { animation-delay: 1.5s; }
.wake__z:nth-of-type(3) { animation-delay: 3s; }
.wake__z:nth-of-type(4) { animation-delay: 4.5s; font-size: 1.8rem; left: 34%; }
.wake.is-awake .wake__z { display: block; animation: none; opacity: 0; }

/* Awards: two columns, no boxes, oldest left → newest right, bigger partner logos */
.trophies { grid-template-columns: 1fr 1.35fr; gap: 40px; align-items: end; }
.trophy-shelf { padding: 0; background: none; border: 0; clip-path: none; }
.trophy-shelf::after { display: none; }
.trophy-shelf__label { display: flex; flex-direction: column; gap: 2px; }
.trophy-shelf__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; justify-items: center; align-items: end; }
.trophy-shelf--wide .trophy-shelf__row { grid-template-columns: repeat(6, 1fr); }
.trophy-shelf__row img { height: auto; width: 100%; max-width: 120px; }
.trophy-shelf--wide .trophy-shelf__row img { height: auto; max-width: 104px; }
.awards__logos { gap: 46px; margin-top: 10px; }
.awards__logos img { width: 260px; }
@media (max-width: 960px) {
  .trophies { grid-template-columns: 1fr; }
  .trophy-shelf--wide .trophy-shelf__row { grid-template-columns: repeat(4, 1fr); }
  .awards__logos img { width: 200px; }
}

/* Footer column 3: meet the dragon riders */
.footer__riders-card { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: end; }
.footer__riders-art { width: 96px; height: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); transition: transform .4s var(--ease); }
.footer__riders:hover .footer__riders-art { transform: translateY(-4px) rotate(-2deg); }
.footer__riders p { margin: 0 0 12px; color: #d7ecf8; }
.footer__riders .footer__riders-alt { margin: 10px 0 0; font-size: .85rem; }
.footer__riders-alt a { color: var(--frost); }
@media (max-width: 960px) { .footer__riders { grid-column: 1 / -1; } }

/* ---------- Fun facts: a frozen specimen label (same design on every page) ----------
   <aside class="funfact"><p class="funfact__label">Fun fact</p><h3 class="funfact__title">…</h3><p>…</p>
   <p class="funfact__sci"><strong>The science:</strong> …</p></aside> */
.funfact {
  --ff-pad: 26px;
  position: relative; isolation: isolate; margin: 34px auto 0; max-width: 900px;
  display: grid; grid-template-columns: 96px 1fr; gap: 6px 24px; align-items: start;
  padding: var(--ff-pad) calc(var(--ff-pad) + 6px) var(--ff-pad) var(--ff-pad);
  color: #eaf7ff;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(0, 187, 255, .28), transparent 55%),
    linear-gradient(155deg, #0b4486 0%, var(--navy) 45%, var(--navy-darker) 100%);
  clip-path: polygon(0 18px, 18px 0, 60% 0, calc(60% + 10px) 8px, calc(100% - 22px) 8px, 100% 30px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 34% 100%, calc(34% - 10px) calc(100% - 8px), 0 calc(100% - 8px));
}
.funfact::before {           /* frost creeping across the specimen glass */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .14) 45%, transparent 60%) -120% 0 / 60% 100% no-repeat,
    repeating-linear-gradient(135deg, rgba(159, 227, 255, .06) 0 2px, transparent 2px 14px);
  transition: background-position 1.4s var(--ease);
}
.funfact:hover::before { background-position: 260% 0, 0 0; }
.funfact__crystal {
  grid-row: span 4; position: relative; width: 96px; aspect-ratio: 1; display: grid; place-items: center;
  background: linear-gradient(145deg, #ffffff, var(--frost) 40%, #1c8fd0);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
}
.funfact__crystal::after { content: ""; position: absolute; inset: 4px; background: linear-gradient(160deg, var(--navy-mid), var(--navy-darker)); clip-path: inherit; z-index: 0; }
.funfact__crystal svg { position: relative; z-index: 1; width: 48px; height: 48px; fill: none; stroke: var(--frost); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; animation: hint-spin 24s linear infinite; }
.funfact__label { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
.funfact__label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0, 187, 255, .7), transparent); }
.funfact__title { margin: 2px 0 4px; color: #fff; font-size: 1.3rem; }
.funfact p { margin: 0 0 8px; line-height: 1.6; }
.funfact .funfact__sci { margin: 6px 0 0; padding: 10px 14px; font-size: .9rem; color: #cfe9f8; background: rgba(0, 10, 40, .35); border-left: 3px solid var(--cyan); }
.funfact__sci strong { color: var(--frost); font-family: var(--font-head); letter-spacing: .04em; }
.funfact a { color: var(--frost); }
.band--navy .funfact { background: radial-gradient(120% 140% at 0% 0%, rgba(0, 187, 255, .3), transparent 55%), linear-gradient(155deg, #145aa5, #0b4486 50%, var(--navy-deep)); }
@media (max-width: 600px) {
  .funfact { grid-template-columns: 1fr; --ff-pad: 20px; }
  .funfact__crystal { grid-row: auto; width: 64px; }
  .funfact__crystal svg { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .funfact__crystal svg { animation: none; } }

/* ---------- Image tiles with a title (work wall, portfolio): caption slides up, click to enlarge ---------- */
.work-tile, .pf-tile { position: relative; overflow: hidden; margin: 0; background: var(--navy);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.work-tile > button, .pf-tile > a, .pf-tile > button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; color: inherit; text-align: left; }
.pf-tile > a { cursor: pointer; }
.work-tile img, .pf-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .5s; }
.work-tile:hover img, .pf-tile:hover img, .work-tile:focus-within img, .pf-tile:focus-within img { transform: scale(1.06); filter: saturate(1.1) brightness(.85); }
.tile__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 28, 69, .55) 30%, rgba(0, 28, 69, .94));
  transform: translateY(calc(100% - 64px)); transition: transform .5s var(--ease);
}
.work-tile:hover .tile__cap, .pf-tile:hover .tile__cap, .work-tile:focus-within .tile__cap, .pf-tile:focus-within .tile__cap { transform: none; }
.tile__type { display: block; margin: 0 0 2px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--frost); }
.tile__title { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; line-height: 1.25; margin: 0 0 10px; color: #fff; }
.tile__cap .arrow-link { color: var(--frost); font-size: .8rem; }
.tile__cap .card__arrow-head { fill: var(--frost); }
.tile__cap .card__arrow-facet { fill: #fff; }
.work-tile { aspect-ratio: 3 / 2; }
.work-tile .tile__zoom { position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; display: grid; place-items: center; background: rgba(0, 28, 69, .7); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); opacity: 0; transition: opacity .3s; }
.work-tile:hover .tile__zoom, .work-tile:focus-within .tile__zoom { opacity: 1; }
.tile__zoom svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }

/* Lightbox (click a work tile): the picture pops up large; click anywhere or press Esc to close */
.lightbox { position: fixed; inset: 0; z-index: 9995; display: grid; place-items: center; padding: 30px; background: rgba(0, 18, 46, .88); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: lb-in .3s ease both; cursor: zoom-out; }
.lightbox figure { margin: 0; max-width: min(1200px, 100%); text-align: center; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); animation: lb-pop .45s var(--ease) both; }
.lightbox figcaption { margin-top: 14px; color: #fff; font-family: var(--font-head); font-size: 1.15rem; }
.lightbox figcaption small { display: block; font-family: var(--font-body); color: var(--frost); font-size: .85rem; }
.lightbox__close { position: absolute; right: 18px; top: 14px; width: 44px; height: 44px; border: 0; background: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.lightbox__close:focus-visible { outline: 3px solid var(--cyan); }
@keyframes lb-in { from { opacity: 0; } }
@keyframes lb-pop { from { transform: scale(.9); opacity: 0; } }

/* Small "View case study / View launch announcement" link under portfolio thumbnails */
.case-link { margin-top: 10px; }


/* ---------- About (round 11) ---------- */
.split--story { align-items: start; }
.story-art__main { aspect-ratio: auto; background: none; }
.story-art__main img { background: none; object-fit: contain; }
.name-rune { padding: 20px 22px 18px; }
.name-rune__title { text-align: center; }
.name-rune__eq { display: grid; grid-template-columns: 1fr auto 1fr auto 1.15fr; align-items: center; gap: 10px; margin: 6px 0 12px; text-align: center; }
.name-rune__part { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 74px; padding: 8px 6px; border: 1px solid rgba(159, 227, 255, .35); background: rgba(255, 255, 255, .05); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.name-rune__part em { font-family: var(--font-head); font-size: 1.4rem; font-style: italic; line-height: 1; }
.name-rune__part small { font-size: .72rem; line-height: 1.3; color: #bfe3f6; }
.name-rune__eq b { color: var(--cyan); font-size: 1.5rem; line-height: 1; }
.name-rune__result em { font-style: normal; font-weight: 700; color: var(--cyan); text-shadow: 0 0 14px rgba(0, 187, 255, .6); font-size: 1.3rem; }
.name-rune__note { text-align: center; }
@media (max-width: 600px) {
  .name-rune__eq { grid-template-columns: 1fr auto 1fr; }
  .name-rune__eq b:nth-of-type(2) { display: none; }
  .name-rune__result { grid-column: 1 / -1; }
}
.rider__art--face { aspect-ratio: 1600 / 810; display: flex; align-items: flex-end; justify-content: center; }
.rider__art--face img { width: auto !important; height: 112% !important; max-width: none; object-fit: contain; margin-bottom: -2px; border-radius: 0; }
.code-section .section__intro { max-width: 760px; }
.code { grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
.code__rule { padding: 26px 22px 22px; }
.code__rule h3 { font-size: 1.25rem; margin: 12px 0 8px; }
.code__rule p { font-size: 1rem; line-height: 1.6; }
.code__art { max-width: 640px; margin: 34px auto 0; }
@media (max-width: 1100px) { .code { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .code { grid-template-columns: 1fr; } }

/* Flight path: a vertical timeline, years running down an icy trail */
.journey { position: relative; }
.timeline { list-style: none; margin: 34px auto 0; max-width: 980px; position: relative; display: grid; gap: 22px; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--cyan) 0 14px, transparent 14px 22px); opacity: .75; }
.timeline__stop { position: relative; display: grid; grid-template-columns: 1fr 90px 1fr; align-items: center; }
.timeline__year { grid-column: 2; justify-self: center; position: relative; z-index: 1; display: grid; place-items: center; width: 82px; height: 82px; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: #fff; background: linear-gradient(145deg, #1c8fd0, var(--navy)); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); box-shadow: 0 0 0 4px #fff; transition: transform .4s var(--ease); }
.timeline__stop:hover .timeline__year { transform: scale(1.08) rotate(-4deg); }
.timeline__card { grid-column: 3; padding: 18px 22px; background: linear-gradient(170deg, #fff, #f3fbff 60%, var(--ice-2)); border: 1px solid var(--frost); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.timeline__stop:nth-child(even) .timeline__card { grid-column: 1; grid-row: 1; text-align: right; }
.timeline__title { font-size: 1.12rem; margin: 0 0 6px; color: var(--navy); }
.timeline__card p { margin: 0; font-size: .95rem; line-height: 1.6; }
.timeline__dragon { position: absolute; right: 2%; top: 90px; width: 240px; z-index: 1; animation: swoop 6s ease-in-out infinite; pointer-events: none; }
@media (max-width: 960px) {
  .timeline::before { left: 41px; }
  .timeline__stop { grid-template-columns: 82px 1fr; gap: 14px; }
  .timeline__year { grid-column: 1; }
  .timeline__card, .timeline__stop:nth-child(even) .timeline__card { grid-column: 2; grid-row: 1; text-align: left; }
  .timeline__dragon { position: static; display: block; width: 180px; margin: 0 0 0 auto; }
}

/* ---------- Blog cards: icy edge between picture and text, excerpt, Read more arrow ---------- */
.post-card { position: relative; display: flex; flex-direction: column; overflow: visible; background: none; border: 0; filter: drop-shadow(0 10px 18px rgba(0, 49, 109, .14)); transition: transform .35s var(--ease), filter .35s; }
.post-card:hover, .post-card:focus-within { transform: translateY(-6px); filter: drop-shadow(0 16px 26px rgba(0, 187, 255, .35)); }
.post-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
.post-card__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; background: #fff; -webkit-mask: var(--ice-mask) repeat-x 0 0 / 360px 100%; mask: var(--ice-mask) repeat-x 0 0 / 360px 100%; pointer-events: none; }
.post-card__media img, .post-card__media .post-card__noimg { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { flex: 1; display: flex; flex-direction: column; margin-top: -1px; padding: 8px 20px 20px; background: linear-gradient(175deg, #ffffff, #f3fbff 60%, var(--ice-2)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); }
.post-card__title { font-size: 1.08rem; line-height: 1.3; margin: 4px 0 6px; }
.post-card__title a { color: var(--navy); text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.post-card:hover .post-card__title a { color: var(--cyan-dark); }
.post-card__meta { order: 0; margin: 0 0 10px; font-size: .8rem; color: var(--muted); }
.post-card__excerpt { flex: 1; margin: 0 0 14px; font-size: .92rem; line-height: 1.6; color: #2c3a50; }

/* ---------- Articles: date in the banner, glossy hero picture flush with the sidebar ---------- */
.page-banner__date { margin: 8px 0 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; font-weight: 600; font-size: .92rem; color: var(--navy); background: linear-gradient(135deg, #fff, var(--frost)); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.article__main > .article__hero { margin-top: 0; }
.gloss { position: relative; margin: 0 0 28px; overflow: hidden; border-radius: 6px; box-shadow: 0 18px 36px rgba(0, 49, 109, .22), inset 0 0 0 1px rgba(255, 255, 255, .6); }
.gloss img { display: block; width: 100%; height: auto; }
.gloss::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 32%, transparent 33%, transparent 70%, rgba(255, 255, 255, .08)); mix-blend-mode: screen; }
.gloss::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .5) 50%, transparent 60%) -150% 0 / 50% 100% no-repeat; transition: background-position 1.2s var(--ease); }
.gloss:hover::after { background-position: 250% 0; }
.article { align-items: start; }

/* Sidebar */
.aside-stack { display: grid; gap: 22px; }
.aside-archive__pick { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-bottom: 12px; }
.aside-archive select, .aside-search input { width: 100%; padding: 9px 10px; font: inherit; font-size: .92rem; color: var(--navy); background: #fff; border: 1px solid #b9dbee; border-radius: 0; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.aside-archive select:focus, .aside-search input:focus { outline: 2px solid var(--cyan); outline-offset: 0; }
.aside-archive__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aside-archive__list a { font-weight: 600; }
.aside-archive__list small, .aside-search__list small { display: block; font-size: .78rem; color: var(--muted); font-weight: 400; }
.aside-search__box { position: relative; }
.aside-search__list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; list-style: none; margin: 0; padding: 6px 0; max-height: 320px; overflow: auto; background: #fff; border: 1px solid var(--frost); box-shadow: 0 16px 30px rgba(0, 49, 109, .2); }
.aside-search__list li a { display: block; padding: 8px 12px; color: var(--navy); text-decoration: none; font-size: .9rem; line-height: 1.35; }
.aside-search__list li a:hover, .aside-search__list li.is-active a { background: var(--ice); color: var(--cyan-dark); }
.aside-search__none { padding: 8px 12px; font-size: .88rem; color: var(--muted); }
.aside-search__all { margin: 10px 0 0; font-size: .85rem; }

/* ---------- Banners: the roaring head fades out at the neck instead of being cut off ---------- */
.page-banner__dragon:not(.page-banner__dragon--art) {
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 62%, transparent 92%);
}
.page-banner__dragon--art { bottom: calc(var(--icicles) - 8px); }
.page-banner--displace .page-banner__art .layer { transition: translate .25s ease-out; }
.page-banner--displace:hover .page-banner__dragon { filter: drop-shadow(0 18px 40px rgba(0, 187, 255, .45)); }
.recaptcha { margin: 6px 0 14px; }
.recaptcha__placeholder { margin: 0; display: inline-block; padding: 14px 16px; font-size: .85rem; color: var(--muted); background: #f9f9f9; border: 1px dashed #b9dbee; }
.upkeep__item a.arrow-link { display: flex; height: auto; padding: 0; background: none; border: 0; clip-path: none; transform: none; grid-template-columns: none; color: var(--frost); }
.upkeep__item a.arrow-link:hover { background: none; transform: none; }
.upkeep__media::after { background: #12437f; }
.features__cost { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 8px; font-family: var(--font-head); font-weight: 700; font-size: .85rem; color: var(--navy); background: linear-gradient(135deg, #fff, var(--frost)); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); vertical-align: middle; }
.features__key { display: flex; align-items: center; gap: 10px; color: #d7ecf8; }
.features__key .features__cost { margin: 0; flex: 0 0 auto; }

/* ---------- Portfolio ---------- */
.split--wide { grid-template-columns: .9fr 1.1fr; }
.pf-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 20px; margin-bottom: 14px; }
.pf-search { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-search input, .pf-search select { padding: 10px 12px; font: inherit; font-size: .95rem; color: var(--navy); background: #fff; border: 1px solid #b9dbee; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.pf-search input { min-width: 250px; }
.pf-count { margin: 0 0 16px; font-size: .9rem; color: var(--muted); }
.pf-grid { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 16px; }
.pf-grid--three { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; }
.pf-tile { height: 100%; }
.pf-tile[hidden] { display: none; }
.pf-tile--big { grid-column: span 2; grid-row: span 2; }
.pf-tile__frost { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(233, 247, 254, .55), rgba(159, 227, 255, .2) 45%, rgba(0, 49, 109, .15)); -webkit-backdrop-filter: blur(1.5px) saturate(.8); backdrop-filter: blur(1.5px) saturate(.8); transition: opacity .6s var(--ease); }
.pf-tile:hover .pf-tile__frost, .pf-tile:focus-within .pf-tile__frost { opacity: 0; }
.pf-tile .tile__cap { transform: translateY(100%); }
.pf-tile:hover .tile__cap, .pf-tile:focus-within .tile__cap { transform: none; }
.pf-tile > a:focus-visible, .pf-tile > button:focus-visible, .work-tile > button:focus-visible { outline: 4px solid var(--cyan); outline-offset: -4px; }
.pf-empty { text-align: center; padding: 30px 0; }
@media (max-width: 1100px) { .pf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .pf-grid, .pf-grid--three { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; } .pf-tile--big { grid-column: span 2; } .pf-search input { min-width: 0; flex: 1; } }
@media (max-width: 520px) { .pf-grid, .pf-grid--three { grid-template-columns: 1fr; grid-auto-rows: 210px; } .pf-tile--big { grid-column: auto; grid-row: auto; } }
@media (hover: none) { .pf-tile .tile__cap { transform: translateY(calc(100% - 58px)); } .pf-tile__frost { opacity: .35; } }

/* Featured case study: the big tile */
.case-feature a { position: relative; display: block; overflow: hidden; color: #fff; text-decoration: none; background: var(--navy); clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
.case-feature__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.case-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.case-feature a:hover .case-feature__media img, .case-feature a:focus-visible .case-feature__media img { transform: scale(1.04); }
.case-feature__body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 60px 26px 22px; background: linear-gradient(180deg, transparent, rgba(0, 28, 69, .75) 35%, rgba(0, 28, 69, .96)); }
.case-feature__kicker { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--frost); }
.case-feature__title { font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; line-height: 1.15; }
.case-feature__text { color: #d7ecf8; max-width: 52ch; }
.case-feature .arrow-link { color: var(--frost); margin-top: 6px; }
.case-feature .card__arrow-head { fill: var(--frost); }
.case-feature .card__arrow-facet { fill: #fff; }
.case-feature a:hover .card__arrow-line, .case-feature a:focus-visible .card__arrow-line { width: calc(100% - 14px); animation: arrow-glint 1.2s linear .5s infinite; }

/* Project pages */
.project__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: start; }
.project__hero { aspect-ratio: 3 / 2; }
.project__media { display: grid; gap: 22px; position: sticky; top: 110px; }
.work-wall--two { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.checklist { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; }
.checklist li { position: relative; padding-left: 28px; }
.checklist li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 12px; background: linear-gradient(145deg, var(--frost), var(--cyan-dark)); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.project__links { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 420px; }
.project__facts { padding: 16px 18px; background: var(--ice); border-left: 3px solid var(--cyan); }
.project__facts-title { margin: 0 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-dark); }
.tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list a, .tag-list span { display: inline-block; padding: 6px 12px; font-size: .86rem; font-weight: 600; color: var(--navy); background: #fff; border: 1px solid var(--frost); text-decoration: none; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); transition: background .25s, color .25s; }
.tag-list a:hover { background: var(--navy); color: #fff; }
@media (max-width: 960px) { .project__grid, .split--wide { grid-template-columns: 1fr; } .project__media { position: static; } }

/* Case study: project file card with a solid icy rim all the way round, including the cut corners */
.split--middle { align-items: center; }
.dossier { position: relative; padding: 2px; background: linear-gradient(150deg, var(--frost), var(--cyan) 40%, var(--navy-mid) 70%, var(--frost)); clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); filter: drop-shadow(0 14px 24px rgba(0, 49, 109, .18)); }
.dossier__inner { position: relative; padding: 0 0 8px; background: linear-gradient(175deg, #ffffff, #f3fbff 70%, var(--ice-2)); clip-path: polygon(21px 0, 100% 0, 100% calc(100% - 21px), calc(100% - 21px) 100%, 0 100%, 0 21px); }
.dossier__title { margin: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 22px 12px 30px; font-family: var(--font-head); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; color: #fff; background: linear-gradient(120deg, var(--navy), #0b4486); }
.dossier__no { font-size: .72rem; color: var(--frost); letter-spacing: .1em; }
.dossier__list { margin: 0; padding: 6px 22px 6px; }
.dossier__list > div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px dashed #b9dbee; }
.dossier__list > div:last-child { border-bottom: 0; }
.dossier__list dt { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-dark); padding-top: 2px; }
.dossier__list dd { margin: 0; color: var(--navy); font-weight: 600; }
.showcase { background: none; padding: 0 0 20px; }
.showcase .device-shot { margin: 0; }
.showcase .device-shot img { width: 100%; height: auto; display: block; }
.heading--small .heading__kicker { font-size: .85rem; }
.pf-grid--stack { grid-template-columns: 1fr; grid-auto-rows: 200px; margin-top: 10px; }

/* ---------- Solution & industry pages ---------- */
.intro-shot { aspect-ratio: 3 / 2; }
.types { margin-top: 40px; }
.types__title { margin: 0 0 14px; font-size: .85rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-dark); }
.types__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.types__list li { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 12px 16px; font-weight: 600; color: var(--navy); line-height: 1.3; background: linear-gradient(170deg, #fff, var(--ice)); border: 1px solid var(--frost); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: transform .3s var(--ease), background .3s; }
.types__list li::before { content: ""; flex: 0 0 auto; width: 12px; height: 12px; background: linear-gradient(145deg, var(--frost), var(--cyan-dark)); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.types__list li:hover { transform: translateY(-3px); background: linear-gradient(170deg, #fff, var(--ice-2)); }
@media (max-width: 960px) { .types__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .types__list { grid-template-columns: 1fr; } }
.values--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .values--three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .values--three { grid-template-columns: 1fr; } }
.steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: st; }
.steps-list li { position: relative; display: grid; gap: 4px; padding: 16px 18px 16px 70px; color: #d7ecf8; background: linear-gradient(165deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border: 1px solid rgba(159, 227, 255, .3); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); counter-increment: st; }
.steps-list li::before { content: counter(st); position: absolute; left: 16px; top: 50%; width: 38px; height: 38px; margin-top: -19px; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; color: var(--navy); background: linear-gradient(145deg, #fff, var(--frost)); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.steps-list__name { font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 1.08rem; }
.gallery .pf-grid { grid-auto-rows: 220px; }
.solutions { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.solution a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--text); background: linear-gradient(175deg, #fff, #f3fbff 60%, var(--ice-2)); border: 1px solid var(--frost); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); transition: transform .35s var(--ease), filter .35s; }
.solution a:hover, .solution a:focus-visible { transform: translateY(-5px); filter: drop-shadow(0 14px 22px rgba(0, 187, 255, .3)); }
.solution__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.solution__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.solution a:hover .solution__media img { transform: scale(1.05); }
.solution__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 22px; background: #fff; -webkit-mask: var(--ice-mask) repeat-x 0 0 / 360px 100%; mask: var(--ice-mask) repeat-x 0 0 / 360px 100%; }
.solution__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 12px 20px 20px; }
.solution__name { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); }
.solution__text { flex: 1; font-size: .92rem; line-height: 1.55; color: #2c3a50; }
@media (max-width: 960px) { .solutions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .solutions { grid-template-columns: 1fr; } }

/* ---------- Service pages ---------- */
.packages--2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.packages--4 { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.packages--4 .package__name { font-size: 1.4rem; }
@media (max-width: 1100px) { .packages--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .packages--2, .packages--4 { grid-template-columns: 1fr; } }
.rate-card { max-width: 720px; margin: 26px auto 0; padding: 30px 34px; text-align: center; background: linear-gradient(170deg, #fff, #f3fbff 60%, var(--ice-2)); border: 1px solid var(--frost); clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); }
.rate-card__price { margin: 0 0 10px; font-family: var(--font-head); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--navy); }
.rate-card__price small { font-size: 1rem; margin-left: 6px; color: var(--muted); }
.heading__kicker .upkeep__new { font-size: .62rem; vertical-align: middle; }
.solution__name .upkeep__new { font-size: .6rem; margin-left: 6px; vertical-align: middle; }

/* ---------- Contact ---------- */
.contact-split { grid-template-columns: .95fr 1.05fr; }
.contact-art { max-width: 420px; margin: 26px auto 0; }
.estimate-promo { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: center; margin: 26px 0 0; padding: 22px 24px; color: #e3f4ff; background: radial-gradient(120% 140% at 100% 0%, rgba(0, 187, 255, .3), transparent 55%), linear-gradient(150deg, #0b4486, var(--navy) 55%, var(--navy-darker)); clip-path: polygon(0 16px, 16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
.estimate-promo p { margin: 0 0 12px; }
.estimate-promo__kicker { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: 2px !important; }
.estimate-promo__title { color: #fff; font-size: 1.3rem; margin: 0 0 8px; }
.estimate-promo__gauge { position: relative; width: 110px; height: 60px; border-radius: 110px 110px 0 0; background: conic-gradient(from 270deg at 50% 100%, #9fe3ff 0deg, #00bbff 60deg, #0b4486 120deg, #001c45 180deg, transparent 180deg); }
.estimate-promo__gauge::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 60px; height: 30px; margin-left: -30px; border-radius: 60px 60px 0 0; background: #0a3a78; }
.estimate-promo__needle { z-index: 1; }
.estimate-promo__needle { position: absolute; left: 50%; bottom: 0; width: 3px; height: 54px; margin-left: -1.5px; background: #fff; transform-origin: 50% 100%; transform: rotate(-60deg); animation: needle 4s ease-in-out infinite; border-radius: 2px; }
@keyframes needle { 0%, 100% { transform: rotate(-60deg); } 50% { transform: rotate(45deg); } }
.estimate-promo__scale { position: absolute; left: -6px; right: -6px; bottom: -20px; font-size: .7rem; letter-spacing: .4em; text-align: center; color: var(--frost); }
.estimate-promo__gauge { overflow: visible; }
@media (max-width: 600px) { .estimate-promo { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .estimate-promo__needle { animation: none; } }
.page-banner--displace .page-banner__dragon { -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 96%); mask-image: linear-gradient(180deg, #000 60%, transparent 96%); transition: translate .2s ease-out, transform .5s var(--ease); }
.page-banner--displace:hover .page-banner__dragon { transform: scale(1.06) rotate(-2deg); }
.page-banner--displace .page-banner__dragon--art { height: 96%; width: auto; max-width: 40vw; bottom: calc(var(--icicles) - 4px); }
@media (max-width: 960px) { .page-banner--displace .page-banner__dragon--art { height: 200px; } }

/* ---------- Free estimate: the Dragon Scale ---------- */
.icemeter__extras { margin: 12px 0 4px; padding: 12px 14px; background: rgba(255, 255, 255, .08); border-left: 3px solid var(--cyan); }
.icemeter__extras-title { margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.icemeter__extras ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .86rem; }
.icemeter__extras li { position: relative; padding-left: 16px; animation: est-in .4s var(--ease); }
.icemeter__extras li::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; background: var(--frost); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.icemeter__gauge { margin-top: 16px; }
.field__flake { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 4px; vertical-align: middle; background: linear-gradient(145deg, var(--cyan), var(--navy-mid)); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.field__flake svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.overview { margin: 0 0 22px; padding: 18px 20px; background: linear-gradient(170deg, #fff, var(--ice)); border: 1px solid var(--frost); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.overview__title { margin: 0 0 10px; font-family: var(--font-head); font-weight: 700; color: var(--navy); }
.overview dl { margin: 0; display: grid; gap: 0; }
.overview dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #b9dbee; }
.overview dl > div:last-child { border-bottom: 0; }
.overview dt { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan-dark); padding-top: 2px; }
.overview dd { margin: 0; color: var(--navy); }

/* ---------- Testimonials, giving, discounts ---------- */
.tquotes { columns: 2 380px; column-gap: 24px; margin-top: 30px; }
.tquote { position: relative; break-inside: avoid; margin: 0 0 24px; padding: 30px 28px 22px; background: linear-gradient(170deg, #fff, #f3fbff 60%, var(--ice-2)); border: 1px solid var(--frost); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.tquote__mark { position: absolute; right: 18px; top: -6px; font-family: Georgia, serif; font-size: 6rem; line-height: 1; color: rgba(0, 111, 168, .12); }
.tquote blockquote { margin: 0 0 16px; font-size: 1rem; line-height: 1.7; color: #24324a; }
.tquote figcaption { display: grid; gap: 2px; }
.tquote figcaption strong { font-family: var(--font-head); color: var(--navy); font-size: 1.05rem; }
.tquote figcaption > span:not(.stars) { font-size: .88rem; color: var(--muted); }
.tquote .stars { color: #f5b301; letter-spacing: 2px; }
.tquote .arrow-link { margin-top: 10px; max-width: 280px; }
.google-cta { display: flex; align-items: center; gap: 16px; max-width: 760px; margin: 10px auto 0; padding: 16px 22px; background: var(--ice); border-left: 3px solid var(--cyan); }
.google-cta p { margin: 0; }
.google-cta .stars { color: #f5b301; font-size: 1.3rem; letter-spacing: 2px; flex: 0 0 auto; }
.steps-cards { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: sc; }
.steps-cards li { position: relative; padding: 54px 20px 20px; background: linear-gradient(170deg, #fff, #f3fbff); border: 1px solid var(--frost); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); counter-increment: sc; }
.steps-cards li::before { content: counter(sc); position: absolute; left: 20px; top: 14px; width: 32px; height: 32px; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; color: #fff; background: linear-gradient(145deg, var(--cyan), var(--navy)); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.steps-cards h3 { font-size: 1.1rem; margin: 0 0 6px; }
.steps-cards p { margin: 0; font-size: .94rem; }
@media (max-width: 960px) { .steps-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps-cards { grid-template-columns: 1fr; } }
.discounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.discount { position: relative; padding: 26px 26px 22px; background: linear-gradient(170deg, #fff, #f3fbff 60%, var(--ice-2)); border: 1px solid var(--frost); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.discount__pct { margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; }
.discount__pct span { font-family: var(--font-head); font-weight: 700; font-size: 2.8rem; line-height: 1; background: linear-gradient(180deg, var(--navy), #1c8fd0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.discount__pct small { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.discount h3 { font-size: 1.2rem; margin: 0 0 8px; }
.discount--custom { background: linear-gradient(160deg, #0b4486, var(--navy) 55%, var(--navy-darker)); color: #d7ecf8; border: 0; }
.discount--custom h3 { color: #fff; }
.discount--custom .discount__pct span { background: linear-gradient(180deg, #fff, var(--frost)); -webkit-background-clip: text; background-clip: text; }
.discount--custom .discount__pct small { color: var(--frost); }
@media (max-width: 960px) { .discounts { grid-template-columns: 1fr; } }

/* ---------- Location pages ---------- */
.values--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .values--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .values--four { grid-template-columns: 1fr; } }
.city-cards { list-style: none; margin: 26px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 980px; }
.city-card a { padding: 16px 18px; background: linear-gradient(170deg, #fff, var(--ice)); border: 1px solid var(--frost); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); font-size: .95rem; transition: background .3s; }
.city-card a:hover { background: linear-gradient(170deg, #fff, var(--ice-2)); }
@media (max-width: 760px) { .city-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .city-cards { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.lost { position: relative; overflow: clip; color: #fff; padding: 56px 0 calc(var(--icicles) + 40px); background: radial-gradient(70% 90% at 80% 20%, rgba(0, 187, 255, .28), transparent 60%), linear-gradient(180deg, #003a80, var(--navy)); --below: var(--bg); }
.lost::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: calc(var(--icicles) + 1px); background: var(--bg); -webkit-mask: var(--ice-mask) repeat-x 0 0 / 720px 100%; mask: var(--ice-mask) repeat-x 0 0 / 720px 100%; }
.lost .hero__snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lost__grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; }
.lost__title { color: #fff; font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem); margin: 0 0 .3em; }
.lost__art { position: relative; margin: 0; max-width: 460px; justify-self: center; animation: lost-bob 5s ease-in-out infinite; }
.lost__art img { width: 100%; height: auto; filter: drop-shadow(0 20px 30px rgba(0, 10, 40, .5)); }
.lost__sign { position: absolute; left: 23%; right: 23%; top: 63%; height: 25%; display: grid; place-content: center; text-align: center; color: var(--navy); transform: rotate(-1deg); }
.lost__sign b { font-family: var(--font-head); font-size: clamp(2.6rem, 2rem + 3vw, 4.6rem); line-height: .9; text-shadow: 0 2px 0 #fff, 0 0 18px rgba(0, 187, 255, .55); }
.lost__sign small { font-family: var(--font-head); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; font-size: .9rem; }
.lost__search { margin-top: 26px; max-width: 460px; }
.lost__search label { display: block; margin-bottom: 6px; color: var(--frost); font-weight: 600; }
@keyframes lost-bob { 50% { transform: translateY(-10px) rotate(1deg); } }
@media (max-width: 860px) { .lost__grid { grid-template-columns: 1fr; } .lost__art { max-width: 320px; } }
@media (prefers-reduced-motion: reduce) { .lost__art { animation: none; } }
.lost .ice-text, .funfact .ice-text { --ice-a: #ffffff; --ice-b: #bfeeff; --ice-hl: #ffffff; }
.timeline { padding-left: 0; } .timeline li.timeline__stop { margin-bottom: 0; } .timeline li.timeline__stop::before { display: none; }

/* ==========================================================================
   38. Round 12
   ========================================================================== */
.band--ice::after { filter: none; }

/* Banner bottom: the curved, sagging ice ledge with icicles that brighten toward their tips.
   The gaps between the icicles are cut out in the next section's colour (--below), and the
   icicles themselves are part of the banner, so the dragon art and ice shards run into them
   without a seam. */
.page-banner { overflow: hidden; }
.page-banner::after {
  bottom: -1px; height: calc(var(--icicles) + 1px);
  background: var(--below, var(--bg));
  -webkit-mask: var(--ice-mask) repeat-x 0 0 / 720px 100%;
          mask: var(--ice-mask) repeat-x 0 0 / 720px 100%;
}
.page-banner::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--icicles); z-index: 3; pointer-events: none;
  background: url("../img/edges/icicles-glow.svg") repeat-x 0 0 / 720px 100%;
}

/* Banner art: always a whole 2025 dragon picture, centred vertically in the space above the
   icicles (never cropped), with only a whisper of mouse parallax. */
.page-banner .page-banner__dragon--art,
.page-banner--short .page-banner__dragon--art,
.page-banner--displace .page-banner__dragon--art {
  top: 22px; bottom: auto; right: max(8px, calc((100vw - var(--container)) / 2 - 40px));
  height: calc(100% - var(--icicles) - 30px); width: min(46vw, 700px); max-width: 46vw;
  object-fit: contain; object-position: center center;
  -webkit-mask-image: none; mask-image: none;
  filter: drop-shadow(0 10px 26px rgba(0, 10, 40, .45));
  opacity: 1; animation: banner-art-in 1s var(--ease) both;
}
@keyframes banner-art-in { from { opacity: 0; } to { opacity: 1; } }
.page-banner--displace:hover .page-banner__dragon { transform: none; }
.page-banner__art .layer { transition: translate .4s ease-out; }
@media (max-width: 960px) {
  .page-banner .page-banner__dragon--art,
  .page-banner--short .page-banner__dragon--art,
  .page-banner--displace .page-banner__dragon--art {
    top: auto; bottom: calc(var(--icicles) - 6px); height: 190px; width: auto; max-width: 80vw; right: 8px;
  }
}

/* About: dragon-rider power and skill labels never clip against the slanted edges */
.rider__power { padding: 10px 26px 10px 18px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); line-height: 1.5; }
.rider__skills li { grid-template-columns: minmax(150px, 42%) 1fr; }
@media (max-width: 600px) { .rider__skills li { grid-template-columns: 1fr; gap: 4px; } }
.rider__art--face img { object-position: center bottom; }

/* Portfolio tiles: the work is always crystal clear. Only an icy rim and a glint of light
   that sweeps across now and then (like the homepage Lair); the title slides up on hover. */
.pf-tile__frost {
  -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1 !important;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%) -150% 0 / 60% 100% no-repeat;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), inset 0 0 0 5px rgba(159, 227, 255, .4), inset 0 0 30px rgba(159, 227, 255, .45);
  animation: frozen-glint 7s ease-in-out infinite;
}
.pf-tile:nth-child(3n+2) .pf-tile__frost { animation-delay: 1.6s; }
.pf-tile:nth-child(3n) .pf-tile__frost { animation-delay: 3.2s; }
.pf-tile:nth-child(4n) .pf-tile__frost { animation-delay: 4.6s; }
.pf-tile img { filter: none !important; }
.pf-tile:hover img, .pf-tile:focus-within img { transform: scale(1.04); }
@media (hover: none) { .pf-tile__frost { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pf-tile__frost { animation: none; } }

/* No shadows under the custom graphics: the cartoon art sits cleanly on the page */
.art img, .ice-frame--plain, .page-banner__dragon, .page-banner .page-banner__dragon--art,
.page-banner--displace:hover .page-banner__dragon, .wake__img, .flight img, .summon__art,
.code__art img, .quest-map__art img, .footer__riders-art, .lost__art img, .estimate__done img,
.rider__art img, .timeline__dragon, .story-art img, .split img[src*="/characters/"],
img[src*="/characters/"], img[src*="/illustrations/"] { filter: none !important; box-shadow: none; }


/* Grids never push past the screen on phones */
.riders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.riders > *, .cards > *, .form__row > *, .split > * { min-width: 0; }
@media (max-width: 960px) {
  .riders { grid-template-columns: minmax(0, 1fr); }
  .cards--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cards, .cards--three, .cards--four { grid-template-columns: minmax(0, 1fr); }
  .rider__power { padding-right: 18px; }
}
.rider__face { min-width: 0; }
.rider__front { grid-template-columns: minmax(0, 1fr); }
.rider__art img { max-width: 100%; }
@media (max-width: 760px) { .upkeep__list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .form__row { grid-template-columns: minmax(0, 1fr) !important; } .form__row > * { min-width: 0; } }
@media (max-width: 860px) { .contact-split { grid-template-columns: minmax(0, 1fr) !important; } }
.prose a, .article__body a { overflow-wrap: anywhere; }
.crack-hint { max-width: 100vw; }
.project__links { padding-left: 0; } .project__links > li { min-width: 0; }
.arrow-link > span:first-child { flex: 0 1 auto; min-width: 0; }
@media (max-width: 1200px) and (min-width: 961px) { .page-banner .page-banner__dragon--art, .page-banner--short .page-banner__dragon--art { width: 40vw; max-width: 40vw; } }

/* Phones and tablets: the banner art sits under the buttons, centred, with breathing room above the icicles */
@media (max-width: 960px) {
  .page-banner, .page-banner--short, .page-banner--short:has(.page-banner__dragon--art) { padding-bottom: calc(var(--icicles) + 250px); }
  .page-banner .page-banner__dragon--art,
  .page-banner--short .page-banner__dragon--art,
  .page-banner--displace .page-banner__dragon--art {
    top: auto; bottom: calc(var(--icicles) + 18px); height: 200px; width: auto; max-width: calc(100% - 32px);
    left: 0; right: 0; margin-inline: auto; object-position: center bottom;
  }
}
@media (max-width: 600px) {
  .page-banner, .page-banner--short, .page-banner--short:has(.page-banner__dragon--art) { padding-bottom: calc(var(--icicles) + 220px); }
  .page-banner .page-banner__dragon--art, .page-banner--short .page-banner__dragon--art, .page-banner--displace .page-banner__dragon--art { height: 175px; }
}

/* Awards (cryo21 layout): earlier years as small badges, the newest award large beside them */
.trophies { display: grid; grid-template-columns: 1fr 1.45fr; gap: 28px 46px; align-items: center; margin: 26px 0 34px; }
.trophy-case { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "past latest" "label label"; align-items: center; gap: 10px 14px; }
.trophy-case__past { grid-area: past; list-style: none; margin: 0; padding: 0; display: grid; justify-items: center; align-items: center; gap: 6px 0; }
.trophy-case--cca .trophy-case__past { grid-template-columns: repeat(3, 1fr); }
.trophy-case--tbr .trophy-case__past { grid-template-columns: repeat(5, 1fr); }
.trophy-case__past img { width: 100%; max-width: 92px; height: auto; transition: transform .35s var(--ease); }
.trophy-case--tbr .trophy-case__past img { max-width: 88px; }
.trophy-case__latest { grid-area: latest; margin: 0; }
.trophy-case__latest img { display: block; width: 170px; height: auto; transition: transform .35s var(--ease); }
.trophy-case--tbr .trophy-case__latest img { width: 160px; }
.trophy-case__past img:hover, .trophy-case__latest img:hover { transform: translateY(-4px) scale(1.06); }
.trophy-case__label { grid-area: label; margin: 0; text-align: center; font-size: .9rem; color: var(--muted); }
.trophy-case__label strong { display: block; color: var(--navy); font-family: var(--font-head); font-size: 1rem; }
@media (max-width: 1000px) { .trophies { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; } }
@media (max-width: 520px) {
  .trophy-case__latest img { width: 110px; } .trophy-case--tbr .trophy-case__latest img { width: 104px; }
  .trophy-case--tbr .trophy-case__past { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .trophy-case--tbr .trophy-case__past { grid-template-columns: repeat(5, 1fr); }
  .trophy-case { gap: 10px 8px; }
  .awards__logos { gap: 16px 20px; } .awards__logos li { flex: 0 1 44%; } .awards__logos img { width: 100%; }
}

/* "Most popular": a strip across the very top of the card, so it never covers the package name */
.package--featured::before {
  left: 0; right: 0; top: 0; translate: none; text-align: center;
  padding: 6px 12px 5px; font-size: .74rem; letter-spacing: .14em;
  background: linear-gradient(90deg, var(--frost), #ffffff 50%, var(--frost));
}
.package--featured .package__head { padding-top: 46px; }
.package--featured .package__temp { top: 42px; }

/* Recent work tiles: the type and company name always show in full; "click to enlarge" appears on hover */
.work-tile .tile__cap { transform: none; padding: 34px 16px 14px; }
.work-tile .tile__title { margin: 0; }
.work-tile .tile__cap .arrow-link { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height .4s var(--ease), opacity .4s, margin-top .4s; }
.work-tile:hover .tile__cap .arrow-link, .work-tile:focus-within .tile__cap .arrow-link { max-height: 30px; opacity: 1; margin-top: 8px; }

/* Portfolio page: three columns */
.pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 250px; }
@media (max-width: 800px) { .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 190px; } }
@media (max-width: 520px) { .pf-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; } }

/* Blog index: the same ice-block cards as "Custom Websites That Work as Hard as You Do" (no icon) */
.blog-grid .post-card {
  --cut: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  padding: 2px; clip-path: var(--cut);
  background: linear-gradient(150deg, #cfeaf7, var(--frost) 35%, rgba(0, 150, 220, .55) 65%, #cfeaf7);
  filter: drop-shadow(0 10px 18px rgba(0, 49, 109, .16));
}
.blog-grid .post-card__media { clip-path: none; background: #f3fbff; }
.blog-grid .post-card__media::after { content: none; }
.blog-grid .post-card__media img, .blog-grid .post-card__media .post-card__noimg {
  clip-path: polygon(0 0, 100% 0, 100.0% 96.0%, 92.9% 98.8%, 85.7% 98.1%, 78.6% 96.2%, 71.4% 98.4%, 64.3% 94.6%, 57.1% 94.4%, 50.0% 93.6%, 42.9% 97.2%, 35.7% 99.5%, 28.6% 98.9%, 21.4% 97.2%, 14.3% 99.3%, 7.1% 98.3%, 0.0% 96.0%);
}
.blog-grid .post-card > * { position: relative; }
.blog-grid .post-card__media, .blog-grid .post-card__body { clip-path: none; }
.blog-grid .post-card__body { background: linear-gradient(170deg, #ffffff 0%, #f3fbff 45%, var(--ice-2) 100%); padding: 14px 22px 18px; margin-top: 0; }
.blog-grid .post-card__media { background: linear-gradient(170deg, #ffffff, #fbfeff); }
.blog-grid .post-card__title { font-size: 1.02rem; text-transform: uppercase; letter-spacing: .02em; }
.blog-grid .post-card__excerpt { color: #24324a; font-size: .95rem; }
.blog-grid .post-card .arrow-link { color: var(--cyan-dark); font-size: .88rem; }
.blog-grid .post-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%); transform: translateX(-130%); transition: transform .9s var(--ease); }
.blog-grid .post-card:hover::after, .blog-grid .post-card:focus-within::after { transform: translateX(130%); }
.rider__front { grid-template-rows: auto 1fr; }

/* Homepage "You broke the ice" pop-up: the dragon peeks in from the right edge of the screen */
.summon--found { background: radial-gradient(circle at 50% 45%, rgba(0, 49, 109, .35), rgba(0, 20, 50, .7)); animation: found-fade .5s ease both; overflow: hidden; }
@keyframes found-fade { from { opacity: 0; } to { opacity: 1; } }
.summon__peek {
  position: fixed; right: 0; bottom: 8vh; z-index: 1; pointer-events: none;
  width: min(52vw, 700px); height: auto;
  transform: translateX(42%) rotate(-6deg); transform-origin: 100% 50%;
  animation: dragon-peek 1.1s cubic-bezier(.2, .9, .3, 1.2) .25s both, dragon-bob 3.6s ease-in-out 1.4s infinite;
}
@keyframes dragon-peek { from { transform: translateX(105%) rotate(-6deg); } to { transform: translateX(42%) rotate(-6deg); } }
@keyframes dragon-bob { 0%, 100% { translate: 0 0; } 50% { translate: -10px -8px; } }
.summon--found .summon__card { position: relative; z-index: 2; }
.summon--found .summon__body { padding-top: 34px; }
@media (max-width: 760px) {
  .summon__peek { top: 2vh; bottom: auto; width: 86vw; transform: translateX(30%) rotate(-4deg); animation-name: dragon-peek-m, dragon-bob; }
  @keyframes dragon-peek-m { from { transform: translateX(105%) rotate(-4deg); } to { transform: translateX(30%) rotate(-4deg); } }
  .summon--found { align-items: end; padding-bottom: 6vh; }
}
@media (prefers-reduced-motion: reduce) { .summon__peek { animation: none; } }

/* Bullets everywhere: a small faceted ice crystal (shard) instead of the diamond */
.craft__list li::before, .package li::before, .rider__facts li::before, .checklist li::before,
.types__list li::before, .icemeter__extras li::before, .accordion summary::before,
.submenu--simple a::before, .mega__col a::before {
  width: 11px; height: 18px; background: var(--shard) center / contain no-repeat; clip-path: none;
  transform: rotate(18deg); box-shadow: none; border-radius: 0;
}
.rider__facts li::before { width: 10px; height: 18px; top: .3em; filter: drop-shadow(0 0 5px rgba(0, 187, 255, .8)); }
.package li::before { top: 9px; }
.craft__list li::before, .checklist li::before, .icemeter__extras li::before { top: .35em; }
.accordion summary::before { margin-top: -8px; }
.accordion details[open] summary::before { transform: rotate(18deg) scale(1.25); background: var(--shard) center / contain no-repeat; filter: hue-rotate(8deg) brightness(.75); }
.submenu--simple a::before, .mega__col a::before { transform: rotate(18deg) scale(0); }
.submenu--simple a:hover::before, .mega__col a:hover::before { transform: rotate(18deg) scale(1); }
.submenu--simple a::before, .mega__col a::before { margin-top: -8px; }

/* Awards intro line */
.awards__intro { max-width: 720px; margin: -6px auto 6px; text-align: center; color: var(--muted); font-size: 1.02rem; }
.trophy-case { grid-template-areas: "past latest"; }

/* Pricing: no "Most popular" tag, so every package box lines up flush */
.package--featured::before { content: none; }
.package--featured .package__head { padding-top: 22px; }
.package--featured .package__temp { top: 18px; }

/* Homepage "found the dragon" pop-up: the whole dragon, as big as the screen allows, beside the message */
.summon--found { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 50px); padding: 24px clamp(16px, 4vw, 60px); }
.summon--found .summon__card { flex: 0 1 480px; }
.summon__peek {
  position: relative; right: auto; bottom: auto; top: auto; order: 2; flex: 0 1 auto;
  width: min(52vw, 900px, calc((100vh - 60px) * 1.637)); height: auto; max-height: calc(100vh - 60px); object-fit: contain;
  transform: none; animation: dragon-swoop-in 1.1s cubic-bezier(.2, .9, .3, 1.15) .2s both, dragon-bob 3.6s ease-in-out 1.4s infinite;
}
@keyframes dragon-swoop-in { from { opacity: 0; transform: translate(60vw, -12vh) scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .summon--found { flex-direction: column; justify-content: center; gap: 0; padding: 14px 16px; overflow-y: auto; }
  .summon__peek { order: 0; width: min(100%, 560px); max-height: 34vh; margin-bottom: -18px; z-index: 3; }
  .summon--found .summon__card { flex: 0 0 auto; width: min(520px, 100%); }
}
@media (max-width: 760px) { .summon--found { align-items: center; } .summon--found .summon__body { padding: 30px 20px 20px; } }

/* Press-and-hold on phones and tablets: no text selection, callout menu or tap flash while holding */
html.fx-holding, html.fx-holding * { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; }
@media (pointer: coarse) { body { -webkit-tap-highlight-color: transparent; } }

/* Homepage: Hosting, Care & Business Email use the same ice-block cards as the website services */
.upkeep__cards { margin-top: 6px; }
.card__badge { position: absolute; right: 12px; top: 12px; z-index: 2; font-family: var(--font-head); font-weight: 700; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px 2px; color: var(--navy); background: linear-gradient(135deg, #fff, var(--frost)); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }

/* Every image card on the site uses the same jagged, cracked-ice photo edge (no icicles) */
.post-card__media::after, .solution__media::after, .upkeep__media::after { content: none !important; }
.post-card__media img, .post-card__media .post-card__noimg, .solution__media img {
  clip-path: polygon(0 0, 100% 0, 100.0% 96.0%, 92.9% 98.8%, 85.7% 98.1%, 78.6% 96.2%, 71.4% 98.4%, 64.3% 94.6%, 57.1% 94.4%, 50.0% 93.6%, 42.9% 97.2%, 35.7% 99.5%, 28.6% 98.9%, 21.4% 97.2%, 14.3% 99.3%, 7.1% 98.3%, 0.0% 96.0%);
}
.post-card__media { background: transparent; }

/* Case study pages */
.values--case { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.features--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .values--case { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .values--case, .features--two { grid-template-columns: minmax(0, 1fr); } }

/* Portfolio: case studies are large tiles in a dark, notched "specimen case" frame (like the fun facts);
   snapshots fill in around them (dense masonry-style grid) */
.pf-grid[data-portfolio] { grid-auto-flow: row dense; grid-auto-rows: 220px; }
.pf-tile--case {
  grid-column: span 2; grid-row: span 2; position: relative; padding: 10px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(0, 187, 255, .35), transparent 55%), linear-gradient(155deg, #0b4486 0%, var(--navy) 45%, var(--navy-darker) 100%);
  clip-path: polygon(0 18px, 18px 0, 60% 0, calc(60% + 10px) 8px, calc(100% - 22px) 8px, 100% 30px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 34% 100%, calc(34% - 10px) calc(100% - 8px), 0 calc(100% - 8px));
}
.pf-tile--case > a { position: relative; overflow: hidden; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.pf-tile--case .tile__title { font-size: 1.45rem; }
.pf-tile--case .tile__cap { padding: 50px 22px 18px; }
.pf-tile__badge {
  position: absolute; left: 22px; top: 20px; z-index: 3; pointer-events: none;
  font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 12px 3px; color: var(--navy); background: linear-gradient(135deg, #fff, var(--frost));
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.pf-filter--view { margin-bottom: 10px; }
.pf-filter--view button[aria-pressed="true"] { background: var(--navy); color: #fff; }
@media (max-width: 800px) { .pf-grid[data-portfolio] { grid-auto-rows: 180px; } }
@media (max-width: 520px) { .pf-tile--case { grid-column: auto; grid-row: span 1; } .pf-grid[data-portfolio] { grid-auto-rows: 230px; } }

/* Logo wall (scientific illustrations) */
.logo-wall { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 26px 34px; align-items: center; justify-items: center; }
.logo-wall img { max-height: 68px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .8; transition: filter .3s, opacity .3s; }
.logo-wall li:hover img { filter: none; opacity: 1; }
.logo-wall__more { text-align: center; margin: 24px auto 0; max-width: 720px; color: var(--muted); }
.prose--wide { max-width: 860px; }

/* Recommended plugins: jagged ice-block cards */
.plugin-cards { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.plugin-card {
  position: relative; display: flex; flex-direction: column; padding: 22px 22px 18px;
  background: linear-gradient(170deg, #ffffff 0%, #f3fbff 45%, var(--ice-2) 100%);
  border: 1px solid var(--frost);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  transition: transform .3s var(--ease);
}
.plugin-card:hover { transform: translateY(-4px); }
.plugin-card__cat { margin: 0 0 4px; font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-dark); }
.plugin-card__name { margin: 0 0 8px; font-size: 1.1rem; color: var(--navy); }
.plugin-card__text { flex: 1; margin: 0 0 12px; font-size: .95rem; }
.plugin-card .arrow-link::after { content: ""; position: absolute; inset: 0; }
.plugin-cards__custom { text-align: center; margin-top: 24px; }
@media (max-width: 900px) { .plugin-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plugin-cards { grid-template-columns: minmax(0, 1fr); } }
.logo-wall li { width: 100%; height: 104px; display: grid; place-items: center; padding: 14px 18px; background: #fff; border: 1px solid var(--border);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.logo-wall li img { border: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
.dossier__list dd { min-width: 0; overflow-wrap: anywhere; }

/* Portfolio page: 4 columns; case studies take half the width (2 x 2) with four smaller tiles beside them */
.pf-grid[data-portfolio] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 14px; }
.pf-grid[data-portfolio] .pf-tile--case .tile__title { font-size: 1.3rem; }
@media (max-width: 1000px) { .pf-grid[data-portfolio] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 170px; } }
@media (max-width: 520px) { .pf-grid[data-portfolio] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; } .pf-grid[data-portfolio] .pf-tile--case { grid-column: auto; grid-row: span 1; } }

/* Sitemap: the Dragon's Realm, one icy region card per part of the site */
.realms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 30px; align-items: start; }
.realm {
  position: relative; padding: 26px 24px 20px; color: #eaf7ff;
  background: radial-gradient(120% 140% at 0% 0%, rgba(0, 187, 255, .28), transparent 55%), linear-gradient(155deg, #0b4486 0%, var(--navy) 45%, var(--navy-darker) 100%);
  clip-path: polygon(0 18px, 18px 0, 60% 0, calc(60% + 10px) 8px, calc(100% - 22px) 8px, 100% 30px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 34% 100%, calc(34% - 10px) calc(100% - 8px), 0 calc(100% - 8px));
}
.realm__icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 10px; background: linear-gradient(145deg, var(--cyan), var(--navy-mid)); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.realm__icon svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.realm__kicker { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.realm__title { margin: 2px 0 12px; color: #fff; font-size: 1.3rem; }
.realm__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.realm__links a { display: block; position: relative; padding: 5px 0 5px 20px; color: #dff3ff; text-decoration: none; font-size: .95rem; border-bottom: 1px dashed rgba(159, 227, 255, .2); }
.realm__links a::before { content: ""; position: absolute; left: 2px; top: .7em; width: 8px; height: 14px; background: var(--shard) center / contain no-repeat; transform: rotate(18deg); }
.realm__links a:hover, .realm__links a:focus-visible { color: #fff; padding-left: 24px; }
@media (max-width: 960px) { .realms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .realms { grid-template-columns: minmax(0, 1fr); } }

/* Policy pages */
.policy { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 46px; align-items: start; }
.policy__toc { position: sticky; top: 110px; padding: 20px 22px; background: linear-gradient(170deg, #fff, var(--ice)); border: 1px solid var(--frost);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.policy__toc-title { margin: 0 0 8px; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--navy); }
.policy__toc ol { margin: 0; padding-left: 20px; font-size: .92rem; } .policy__toc li { margin: 4px 0; }
.policy__updated { margin: 12px 0 0; font-size: .82rem; color: var(--muted); }
.policy__body section + section { margin-top: 30px; }
.policy__body h2 { font-size: 1.35rem; color: var(--navy); }
@media (max-width: 860px) { .policy { grid-template-columns: minmax(0, 1fr); gap: 24px; } .policy__toc { position: static; } }

/* Footer: policy links */
.copyright__links { margin-top: 6px; } .copyright__links a { color: inherit; } .copyright__links span { margin: 0 8px; opacity: .6; }

/* ==========================================================
   40. Round 16: custom coded websites, Sculpted package, content blocks
   ========================================================== */
.mega__indent a { padding-left: 16px; font-size: .86rem; color: #cfe9ff; }
.mega__indent a::before { left: 4px; }
.mega__indent a:hover { padding-left: 28px; }

/* Sculpted (hand-coded) package: one wide card below the fun fact */
.sculpted { margin-top: 56px; }
.sculpted__heading { margin-bottom: 26px; }
.package--sculpted { --tint: #2aa7d8; }
.package--sculpted .package__head { background: linear-gradient(150deg, #7fdcf4, #0b4486 85%); }
.package--wide { max-width: 1020px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 10px; }
.package--wide:hover { transform: none; }
.package--wide .package__head { grid-column: 1 / -1; }
.package--wide .package__side { display: flex; flex-direction: column; padding-bottom: 4px; }
.package--wide > .thermo { grid-column: 1 / -1; }
.package__blurb { margin: 12px 24px 16px; font-size: .95rem; }
.package--wide .btn-row { margin: 0 24px; }
.package--wide .btn-row .btn { margin: 0; }
.package--wide ul { columns: 2; column-gap: 26px; margin: 22px 24px 4px 6px; }
.package--wide li { break-inside: avoid; }
@media (max-width: 820px) {
  .package--wide { grid-template-columns: 1fr; }
  .package--wide ul { columns: 1; margin: 18px 24px 4px; }
}

/* Content block with a checklist card (Shopify, website builders, AI-built sites) */
.callout-card {
  padding: 28px 30px 24px;
  background: linear-gradient(170deg, #fff, #f3fbff 60%, var(--ice-2));
  border: 1px solid var(--frost); color: var(--text, #10223a);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.callout-card__title { margin: 0 0 12px; font-size: 1.15rem; color: var(--navy); text-transform: uppercase; letter-spacing: .05em; }
.callout-card ul { list-style: none; margin: 0; padding: 0; }
.callout-card li { position: relative; padding: 7px 0 7px 26px; border-bottom: 1px dashed var(--border); }
.callout-card li:last-child { border-bottom: 0; }
.callout-card li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 9px; height: 16px; background: var(--shard, #3fb5ee) center / contain no-repeat; }
.callout-card__note { margin: 14px 0 0; font-size: .9rem; color: var(--muted); }
.band--navy .callout-card { color: #10223a; }
.band--navy .callout-card a { color: var(--navy); }
.svc-block .btn-row { margin-top: 20px; }

/* ==========================================================
   41. Round 17: no empty gaps in featured project grids
   ========================================================== */
/* one or two projects: plain tiles, no empty column beside them */
.pf-grid--three:has(> li:only-child) { grid-template-columns: minmax(0, 760px); justify-content: center; grid-auto-rows: 360px; }
.pf-grid--three:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 300px; }
@media (max-width: 800px) {
  /* two-column layout: stretch a lone last tile across the row */
  .pf-grid--three:not(:has(> .pf-tile--big)) > li:last-child:nth-child(odd) { grid-column: span 2; }
  .pf-grid--three:has(> .pf-tile--big) > li:last-child:nth-child(even) { grid-column: span 2; }
  .pf-grid--three:has(> li:only-child) { grid-auto-rows: 220px; }
}
@media (max-width: 520px) {
  .pf-grid--three > li:last-child { grid-column: auto !important; }
}

/* ==========================================================
   42. Round 18: homepage solutions & industries CTA, visibility tabs
   ========================================================== */
.paths {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px; align-items: center; margin-top: 46px; padding: 34px 36px;
  background: linear-gradient(150deg, rgba(63,181,238,.28), rgba(11,68,134,.35) 55%, rgba(255,255,255,.06));
  border: 1px solid rgba(159,227,255,.45);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
.paths__kicker, .visibility__kicker, .paths__label { margin: 0 0 4px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--frost); }
.paths__title { color: #fff; font-size: 1.6rem; margin: 0 0 10px; }
.paths__intro p:not([class]) { color: #d7ecf8; margin: 0 0 18px; }
.paths__lists { display: grid; gap: 18px; }
.paths__chips, .visibility__tabs { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.band--navy .paths__chips a, .paths__chips a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font-weight: 700; font-size: .92rem; color: #fff; text-decoration: none;
  background: rgba(255,255,255,.08); border: 1px solid rgba(159,227,255,.5);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background .2s, color .2s, transform .2s;
}
.paths__chips a::before { content: ""; width: 7px; height: 12px; background: var(--shard) center / contain no-repeat; flex: none; }
.band--navy .paths__chips a:hover, .band--navy .paths__chips a:focus-visible { background: #fff; color: var(--navy); transform: translateY(-2px); }

.visibility {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 26px; padding: 20px 26px;
  background: rgba(255,255,255,.06); border: 1px dashed rgba(159,227,255,.55);
}
.visibility__intro { display: flex; align-items: center; gap: 14px; }
.visibility__icon { width: 46px; height: 46px; display: grid; place-items: center; flex: none; background: linear-gradient(145deg, var(--cyan), var(--navy-mid)); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.visibility__icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.visibility__title { color: #fff; font-size: 1.25rem; margin: 0; }
.visibility__tabs { margin: 0; }
@media (max-width: 900px) {
  .paths { grid-template-columns: 1fr; padding: 26px 22px; }
  .visibility { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================
   43. Closed rims on cut corners (lines added by main.js section 18)
   ========================================================== */
.cut-line { position: absolute; z-index: 5; width: var(--cs); height: var(--cs); pointer-events: none; }
.cut-line--tl { top: var(--co); left: var(--co); background: linear-gradient(135deg, transparent 50%, var(--cl) 50%, var(--cl) calc(50% + var(--ct)), transparent calc(50% + var(--ct))); }
.cut-line--br { bottom: var(--co); right: var(--co); background: linear-gradient(135deg, transparent calc(50% - var(--ct)), var(--cl) calc(50% - var(--ct)), var(--cl) 50%, transparent 50%); }

/* Round 19: homepage tweaks */
.visibility__tabs { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; }
.visibility__tabs .btn { min-width: 0; }
.upkeep__intro .upkeep__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.services__more { margin-top: 40px; }
.local .btn-row { margin-top: 1.2em; }
/* news side list: picture flush with the card edge, padding only between picture and text */
.mini { padding: 0; align-items: stretch; grid-template-columns: 150px 1fr; gap: 0; }
.mini__img { width: 100%; height: 100%; min-height: 104px; aspect-ratio: auto; clip-path: none; display: block; }
.mini > div { padding: 12px 16px 12px 16px; align-self: center; }
@media (max-width: 960px) { .mini { grid-template-columns: 110px 1fr; } .mini__img { width: 100%; } }

/* Round 20: range of work under the Dragon's Lair, and "read more" panels search engines can still read */
.lair-range { display: grid; grid-template-columns: 1fr 1.15fr; gap: 34px; margin-top: 40px; align-items: start; }
.lair-range__title { font-size: 1.3rem; color: var(--navy); margin: 0 0 10px; }
.lair-range__intro > p { margin: 0 0 14px; }
.lair-range__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--frost); }
.lair-range__list li { display: grid; grid-template-columns: 210px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--frost); font-size: .95rem; }
.lair-range__label { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; color: var(--navy); padding-top: 2px; }
.lair-range__list a { color: var(--navy); text-decoration-color: var(--cyan); text-underline-offset: 3px; }
.lair-range__list a:hover { color: var(--cyan-dark, #0077b6); }
.more-text summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; color: var(--navy);
}
.more-text summary::-webkit-details-marker { display: none; }
.more-text summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.more-text[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.more-text summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.more-text__body { margin-top: 12px; }
.more-text__body p { margin: 0 0 12px; }
@media (max-width: 860px) {
  .lair-range { grid-template-columns: 1fr; gap: 22px; }
  .lair-range__list li { grid-template-columns: 1fr; gap: 4px; }
}
.lair-range { display: block; max-width: 920px; }
.lair-range > p { margin: 0 0 14px; }
.btn-row--center { justify-content: center; margin-top: 40px; }
.logo-wall img{max-width:100%;height:auto}
/* Round 22: long-form text sections on core pages */
.longform__body{max-width:860px}
.longform__body p+p{margin-top:1em}
.longform__body ul{margin:1em 0 0 1.2em;list-style:disc}
.longform__body li+li{margin-top:.4em}
.longform__body h3{margin-top:1.4em;font-size:1.15rem}
/* Round 23: long-form layouts (split + art, card grids, checklist panels) */
.longform__body{max-width:none}
.lf-split .prose p+p{margin-top:1em}
.lf-split .prose .heading{margin-bottom:18px}
.lf-art{max-width:520px;justify-self:center}
.lf-panel{position:relative;background:#fff;border:1px solid var(--border);padding:30px 32px;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  box-shadow:0 18px 40px rgba(0,49,109,.08)}
.band--ice .lf-panel{background:#fff}
.lf-checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lf-checks li{position:relative;padding-left:26px;line-height:1.5}
.lf-checks li::before{content:"";position:absolute;left:0;top:.2em;width:11px;height:20px;background:var(--shard) no-repeat center/contain}
.lf-intro{max-width:820px;margin-left:auto;margin-right:auto;text-align:center}
.lf-intro p+p{margin-top:.8em}
.lf-cards{margin-top:34px}
.lf-card p{font-size:.96rem;line-height:1.6}
.lf-card p+p{margin-top:.6em}
.lf-card ul{margin:.6em 0 0 1.1em;list-style:disc;font-size:.95rem}
.lf-outro{max-width:820px;margin:30px auto 0;text-align:center}
.lf-outro p+p{margin-top:.8em}
.lf-outro ul{display:inline-block;text-align:left}
.values--two{grid-template-columns:repeat(2,1fr)}
@media (max-width:700px){.values--two{grid-template-columns:1fr}}
@media (max-width:900px){.lf-panel{padding:24px 22px}}
/* Round 23: long-form layouts (split + art, card grids, checklist panels) */
.lf-split .prose p+p{margin-top:1em}
.lf-split .prose .heading{margin-bottom:18px}
.lf-art{max-width:520px;width:100%;justify-self:center}
.lf-panel{position:relative;background:#fff;border:1px solid var(--border);padding:30px 32px;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  box-shadow:0 18px 40px rgba(0,49,109,.08)}
.lf-checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lf-checks li{position:relative;padding-left:26px;line-height:1.5}
.lf-checks li::before{content:"";position:absolute;left:0;top:.2em;width:11px;height:20px;background:var(--shard) no-repeat center/contain}
.lf-intro{max-width:820px;margin-left:auto;margin-right:auto;text-align:center}
.lf-intro p+p{margin-top:.8em}
.lf-cards{margin-top:34px}
.lf-card p{font-size:.96rem;line-height:1.6}
.lf-card p+p{margin-top:.6em}
.lf-card ul{margin:.6em 0 0 1.1em;list-style:disc;font-size:.95rem}
.lf-outro{max-width:820px;margin:30px auto 0;text-align:center}
.lf-outro p+p{margin-top:.8em}
.lf-outro ul{display:inline-block;text-align:left}
.lf-plain{max-width:none}
.lf-plain p+p{margin-top:1em}
.values--two{grid-template-columns:repeat(2,1fr)}
@media (max-width:700px){.values--two{grid-template-columns:1fr}}
@media (max-width:900px){.lf-panel{padding:24px 22px}}
/* Round 23 widgets ------------------------------------------------------- */
/* Launch countdown */
.launch-seq{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;position:relative}
.launch-seq::before{content:"";position:absolute;left:4%;right:4%;top:34px;height:3px;background:linear-gradient(90deg,var(--frost),var(--cyan));z-index:0}
.launch-seq__step{position:relative;z-index:1;background:#fff;border:1px solid var(--border);padding:66px 16px 18px;text-align:center;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.launch-seq__t{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:50px;height:50px;display:grid;place-items:center;color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:.95rem;background:linear-gradient(145deg,var(--cyan),var(--navy) 85%);
  clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%)}
.launch-seq__title{font-size:1.02rem;margin:0 0 6px}
.launch-seq__step p{font-size:.92rem;line-height:1.55;margin:0}
.launch-seq__step--go{background:linear-gradient(160deg,var(--navy),var(--navy-deep));border-color:var(--navy);color:#fff}
.launch-seq__step--go .launch-seq__title{color:#fff}
.launch-seq__step--go .launch-seq__t{background:linear-gradient(145deg,#fff,var(--frost));color:var(--navy)}
.launch-seq__art{max-width:380px;margin:30px auto 0}
@media (max-width:1100px){.launch-seq{grid-template-columns:repeat(3,1fr)}.launch-seq::before{display:none}}
@media (max-width:640px){.launch-seq{grid-template-columns:1fr}}
/* Attack plans */
.attack{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.attack__plan{background:rgba(255,255,255,.06);border:1px solid rgba(159,227,255,.35);padding:26px 24px;color:#fff;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.attack__kicker{font-family:var(--font-head);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--frost);margin:0}
.attack__name{color:#fff;font-size:1.6rem;margin:6px 0 2px}
.attack__type{font-size:.9rem;color:var(--frost);margin:0 0 14px}
.attack__stats{margin:0 0 16px;display:grid;gap:10px}
.attack__stats dt{font-family:var(--font-head);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--frost)}
.attack__stats dd{margin:2px 0 0;font-size:.95rem;line-height:1.55}
.attack__plan .lf-checks li{font-size:.94rem}
.attack__art{max-width:420px;margin:28px auto 0}
@media (max-width:960px){.attack{grid-template-columns:1fr}}
/* Partner */
.partner{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:center}
.partner__text p+p{margin-top:1em}
.partner__card{background:#fff;border:1px solid var(--border);padding:28px;box-shadow:0 18px 40px rgba(0,49,109,.08);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.partner__label{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--cyan-dark);margin:0}
.partner__name{font-family:var(--font-head);font-weight:700;font-size:1.5rem;color:var(--navy);margin:4px 0 14px}
.partner__card .btn{margin-top:18px}
@media (max-width:900px){.partner{grid-template-columns:1fr}}
/* AODA call to action */
.aoda-cta-section{padding-top:40px;padding-bottom:40px}
.aoda-cta{display:flex;gap:24px;align-items:center;justify-content:space-between;background:linear-gradient(120deg,var(--navy),var(--navy-mid));color:#fff;
  padding:26px 32px;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.aoda-cta__kicker{margin:0;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:var(--frost)}
.aoda-cta__title{margin:4px 0 0;font-family:var(--font-head);font-weight:700;font-size:1.3rem;line-height:1.3}
@media (max-width:700px){.aoda-cta{flex-direction:column;align-items:flex-start}}
/* WCAG levels */
.wcag-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.wcag-level{position:relative;background:#fff;border:1px solid var(--border);padding:30px 24px 24px;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.wcag-level--aa{border-color:var(--cyan);box-shadow:0 18px 40px rgba(0,111,168,.15)}
.wcag-level__badge{display:inline-grid;place-items:center;min-width:58px;height:58px;padding:0 8px;font-family:var(--font-head);font-weight:700;font-size:1.25rem;color:#fff;
  background:linear-gradient(145deg,var(--cyan),var(--navy) 85%);clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);margin-bottom:12px}
.wcag-level h3{margin:0}
.wcag-level__tag{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;color:var(--cyan-dark);margin:2px 0 10px}
.wcag-level p{font-size:.95rem;line-height:1.6}
.wcag-level .lf-checks{margin-top:14px}
.wcag-level .lf-checks li{font-size:.93rem}
.wcag-versions{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wcag-versions li{display:grid;gap:2px;background:rgba(255,255,255,.7);border-left:4px solid var(--cyan);padding:14px 18px;font-size:.93rem}
.wcag-versions strong{font-family:var(--font-head);color:var(--navy);font-size:1.05rem}
.wcag-note{text-align:center;max-width:820px;margin:22px auto 0;font-size:.95rem}
@media (max-width:900px){.wcag-levels,.wcag-versions{grid-template-columns:1fr}}
/* Law tabs */
.law-tabs{margin-top:28px}
.law-tabs__list{display:flex;flex-wrap:wrap;gap:8px;border-bottom:2px solid var(--border)}
.law-tabs__list [role=tab]{font-family:var(--font-head);font-weight:700;font-size:1rem;padding:12px 20px;background:var(--ice);color:var(--navy);border:1px solid var(--border);
  border-bottom:none;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px)}
.law-tabs__list [role=tab][aria-selected=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.law-tabs__list [role=tab]:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.law-panel{background:#fff;border:1px solid var(--border);border-top:none;padding:28px 30px}
.law-panel p{margin:0 0 1em}
.law-timeline{list-style:none;margin:0 0 1em;padding:0 0 0 22px;border-left:3px solid var(--frost);display:grid;gap:14px}
.law-timeline li{position:relative;line-height:1.6}
.law-timeline li::before{content:"";position:absolute;left:-31px;top:.35em;width:15px;height:15px;background:var(--cyan);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.law-timeline strong{display:block;font-family:var(--font-head);color:var(--navy)}
.law-note{background:var(--ice);border-left:4px solid var(--cyan);padding:12px 16px;font-size:.95rem}
.law-disclaimer{font-size:.88rem;color:var(--muted);margin-top:18px;text-align:center}
.law-disclaimer--light{color:rgba(255,255,255,.8)}
.law-disclaimer--light a{color:var(--frost)}
/* AODA quiz */
.aoda-quiz{max-width:760px;margin:30px auto 0;background:#fff;color:var(--text);padding:30px;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.aoda-quiz__q{font-family:var(--font-head);font-weight:700;font-size:1.25rem;color:var(--navy);margin:0 0 16px}
.aoda-quiz__opts{display:grid;gap:10px}
.aoda-quiz__opt{text-align:left;font:inherit;font-size:1rem;padding:14px 18px;background:var(--ice);border:1px solid var(--border);color:var(--navy);cursor:pointer;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:background .2s,border-color .2s}
.aoda-quiz__opt:hover,.aoda-quiz__opt:focus-visible{background:var(--ice-2);border-color:var(--cyan);outline:none}
.aoda-quiz__result p{margin:0 0 .8em}
.aoda-quiz__verdict{font-family:var(--font-head);font-weight:700;font-size:1.4rem;color:var(--navy)}
.aoda-quiz__result .btn-row{margin-top:18px}
.aoda-quiz__nav{margin-top:16px}
.band--navy .aoda-quiz a:not(.btn){color:var(--cyan-dark)}
.aoda-quiz [hidden]{display:none!important}
.aoda-quiz__result{scroll-margin-top:140px}