/* VIICIO Company: loud streetwear (Figma "Fashiom") recoloured to the brand. Inset rounded near-black panels, vivid orange,
   lime and periwinkle only for small sticker tags, Bricolage Grotesque heavy uppercase display and Inter Tight body.
   Orange #FF7C0A only on black or as a fill under black text; #B85200 for orange text on white.
   Motion: reveal (opacity + the translate property) only under html.js, tilt (rotate / transform) straightens on hover,
   arrows nudge; everything still under prefers-reduced-motion. */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/BricolageGrotesque-Variable.ttf") format("truetype"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("fonts/InterTight-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #070707; --ink2: #120e00; --ink3: #1b1b1b; --white: #fff; --paper: #f4f4f4; --paper2: #e9e9e9; --line: #e0e0e0; --mute: #585858;
  --orange: #ff7c0a; --orangeInk: #b85200; --orangeTint: #fff0e2; --lime: #a8ff36; --peri: #80abfe; --onDark2: #c6c6c6;
  --disp: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; --body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(16px, 4vw, 56px); --r: 28px; --ease: cubic-bezier(.2, .75, .2, 1); --focus: var(--ink);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.6 var(--body); }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.05; }
h3 { font: 800 21px/1.15 var(--disp); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--orange); color: var(--ink); }
.small { font-size: 14.5px; color: var(--mute); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.panel, .ft, .sum, .pidx, .ibox.dark, .kbig.dark, .exline, .hyear, .policy-section[data-layout="panel"] { --focus: var(--orange); }
.band, .principle, .kbig.hot, .policy-section[data-layout="orange"] { --focus: var(--ink); }
.skip { position: absolute; left: -9999px; top: 10px; z-index: 100; padding: 12px 18px; border-radius: 99px; background: var(--orange); color: var(--ink); font-weight: 700; }
.skip:focus { left: 16px; }

/* ------------------------------------------------------------ type */
.disp { font: 800 clamp(30px, 4.4vw, 62px)/.96 var(--disp); text-transform: uppercase; letter-spacing: -.015em; margin: 0 0 .45em; text-wrap: balance; overflow-wrap: break-word; }
.disp em { font-style: normal; color: var(--orangeInk); }
.disp.sm { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.02; }
.mega { font: 800 clamp(40px, 7.4vw, 112px)/.88 var(--disp); text-transform: uppercase; letter-spacing: -.02em; margin: .3em 0 .32em; overflow-wrap: break-word; }
.mega em { font-style: normal; color: var(--orange); }
.mega .w { position: relative; display: inline-block; }
.mega .w > .tag { position: absolute; right: 0; bottom: 84%; z-index: 3; }
.kick { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 700 13px/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.kick::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
p.lead { max-width: 54ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--onDark2); }

/* sticker tags: small rotated labels; decoration unless they carry a label */
.tag { display: inline-block; padding: .4em .9em; border-radius: 99px; background: var(--lime); color: var(--ink); font: 700 13px/1.15 var(--body); letter-spacing: .01em;
  text-transform: none; white-space: nowrap; transform: rotate(-7deg); box-shadow: 0 3px 0 rgba(0, 0, 0, .28); vertical-align: middle; }
.tag.peri { background: var(--peri); transform: rotate(6deg); }
.tag.orange { background: var(--orange); transform: rotate(-10deg); }
.tag.st { font-size: 15px; transform: rotate(-3deg); }

/* ------------------------------------------------------------ pills: orange with a black arrow circle */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 6px 6px 6px 22px; border: 2px solid var(--orange); border-radius: 99px;
  background: var(--orange); color: var(--ink); font: 700 15.5px/1.15 var(--body); text-decoration: none; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.pill .ac { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--white); transition: background .3s, color .3s; }
.pill svg, .ac svg { width: 17px; height: 17px; transition: transform .35s var(--ease); }
.pill:hover { background: var(--ink); color: var(--orange); }
.pill:hover .ac { background: var(--orange); color: var(--ink); }
.pill:hover .ac svg, a:hover > .ac svg, .ccard:hover .ac svg, .kcard:hover .ac svg { transform: rotate(45deg); }
button.pill { padding: 6px 22px; }
.pill.sm { min-height: 44px; padding-left: 18px; font-size: 14.5px; }
.pill.sm .ac { width: 30px; height: 30px; }
button.pill.sm { padding: 6px 18px; }
.pill.ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .75); }
.pill.ghost .ac { background: var(--white); color: var(--ink); }
.pill.ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.pill.line { background: transparent; color: var(--ink); border-color: var(--ink); }
.pill.line:hover { background: var(--ink); color: var(--white); }
.pill.dark { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pill.dark .ac { background: var(--orange); color: var(--ink); }
.pill.dark:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.pill.mail span { overflow-wrap: anywhere; }
.pill[aria-disabled="true"] { opacity: .72; }
.acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }

/* ------------------------------------------------------------ header: the top of the black panel */
.hd { position: relative; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 12px 0;
  padding: 16px clamp(18px, 3vw, 40px) 8px; background: var(--ink); color: var(--white); border-radius: var(--r) var(--r) 0 0; --focus: var(--orange); }
.wm { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; text-decoration: none; }
.wm .mk { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px 12px 12px 3px; background: var(--orange); color: var(--ink); font: 800 22px/1 var(--disp);
  transform: rotate(-8deg); transition: transform .4s var(--ease); }
.wm:hover .mk { transform: rotate(0); }
.wm b { font: 800 24px/1 var(--disp); letter-spacing: .03em; }
.nav { display: flex; gap: 2px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px; border-radius: 99px; color: #e3e3e3; font-size: 15px; text-decoration: none; transition: background .25s, color .25s; }
.nav a:hover { background: var(--ink3); color: var(--white); }
.nav a[aria-current="page"] { color: var(--orange); }
.mm { display: none; position: relative; }
.mm summary { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--orange); list-style: none; cursor: pointer; }
.mm summary::-webkit-details-marker { display: none; }
.bars, .bars::before, .bars::after { content: ""; display: block; position: relative; width: 20px; height: 2.4px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease), background .2s; }
.bars::before { position: absolute; top: -6.5px; }
.bars::after { position: absolute; top: 6.5px; }
.mm[open] .bars { background: transparent; }
.mm[open] .bars::before { transform: translateY(6.5px) rotate(45deg); }
.mm[open] .bars::after { transform: translateY(-6.5px) rotate(-45deg); }
.mm nav { position: absolute; right: 0; top: 58px; display: grid; width: min(300px, calc(100vw - 40px)); max-height: calc(100vh - 110px); overflow-y: auto; padding: 10px;
  border: 1px solid #2c2c2c; border-radius: 22px; background: var(--ink3); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.mm nav a { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: 12px; color: #ececec; text-decoration: none; }
.mm nav a:hover { background: #2a2a2a; }
.mm nav a[aria-current="page"] { color: var(--orange); }

/* ------------------------------------------------------------ the inset black panel */
.panel { position: relative; margin: 0 12px; padding: clamp(24px, 4.4vw, 60px); border-radius: var(--r); background: var(--ink); color: var(--white); overflow: clip; isolation: isolate; }
main > .panel:first-child { border-radius: 0 0 var(--r) var(--r); }
main > .panel:last-child { margin-bottom: 12px; }
.tc { position: relative; border-radius: 18px; overflow: hidden; background: #2a2a2a; box-shadow: 0 18px 40px rgba(0, 0, 0, .3); transform: rotate(var(--tilt, -4deg)); transition: transform .6s var(--ease); }
.tc img { width: 100%; object-fit: cover; }
.tc:hover { transform: rotate(0deg) scale(1.02); }

/* home hero: huge stacked headline, tilted photo cards and price cards over the letters */
.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-rows: auto 1fr; column-gap: 24px; min-height: 720px; padding-top: clamp(18px, 2.6vw, 36px); }
.hero .hl { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 2; margin: .28em 0 0; font-size: clamp(54px, 12.4vw, 194px); line-height: .84; }
.hl .ln { display: block; }
.hl .l2 { padding-left: 1.05em; }
.hl .l2 em { color: var(--orange); }
.hl .l3 { padding-left: .3em; }
.hl .w > .tag { right: auto; bottom: auto; }
.hl .s1 { left: 8%; top: -.6em; transform: rotate(-6deg); }
.hl .s2 { right: -.4em; top: .2em; transform: rotate(9deg); }
.hpics { grid-column: 2; grid-row: 1 / span 2; position: relative; z-index: 3; min-height: 600px; }
.hpics .tc { position: absolute; }
.hpics .h1c { top: 1%; right: 2%; width: 62%; --tilt: 5deg; }
.hpics .h1c img { aspect-ratio: 4 / 5; }
.hpics .h2c { left: -4%; bottom: 3%; width: 44%; border: 6px solid var(--ink); --tilt: -9deg; }
.hpics .h2c img { aspect-ratio: 1; }
.pcard { position: absolute; z-index: 2; display: grid; gap: 2px; width: 224px; padding: 14px 16px 16px; border-radius: 16px; background: var(--white); color: var(--ink); text-decoration: none;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .4); transform: rotate(var(--tilt)); transition: transform .45s var(--ease); }
.pcard::after { content: ""; position: absolute; left: 30px; bottom: -8px; width: 18px; height: 18px; border-radius: 3px; background: var(--white); transform: rotate(45deg); }
.pcard .pk { justify-self: start; max-width: calc(100% - 42px); margin-bottom: 8px; padding: 2px 10px; border: 1.5px solid var(--ink); border-radius: 99px; font-size: 12.5px; font-weight: 700; }
.pcard b { font: 800 30px/1.05 var(--disp); }
.pcard small { font-size: 13px; color: var(--mute); }
.pcard .ac { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--white); }
.pcard:hover { transform: rotate(0deg) translateY(-4px); }
.pcard.p1 { left: 8%; top: 60%; --tilt: -4deg; }
.pcard.p2 { right: -2%; bottom: 6%; --tilt: 3deg; }
.hcopy { grid-column: 1; grid-row: 2; align-self: end; position: relative; z-index: 4; max-width: 470px; margin-top: 30px; }
.hcopy > p:first-child { color: var(--onDark2); font-size: 17.5px; }
.hpics .s3 { position: absolute; left: -14%; bottom: 2%; z-index: 5; font-size: 15px; }

/* statement: a centred paragraph with two tilted cards peeking behind it */
.stmt { position: relative; padding: clamp(84px, 11vw, 150px) var(--pad); text-align: center; overflow-x: clip; }
.stmt .stx { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; }
.stmt .say { margin: 20px auto 30px; font: 700 clamp(26px, 3.4vw, 48px)/1.1 var(--disp); letter-spacing: -.02em; text-wrap: balance; }
.stmt .say em { font-style: normal; color: var(--orangeInk); }
.peek { position: absolute; z-index: 1; width: clamp(150px, 19vw, 280px); }
.peek img { aspect-ratio: 4 / 3; }
.peek.pl { left: -2.5%; top: 46%; --tilt: -14deg; }
.peek.pr { right: -2.5%; top: 18%; --tilt: 12deg; }
.stmt.plain { margin: 0 12px; padding: clamp(56px, 8vw, 110px) var(--pad); border-radius: var(--r); background: var(--paper); }
.stmt.plain .say { margin-top: 0; }
.stmt.plain .stx > p:not(.say) { max-width: 60ch; margin: 0 auto; color: var(--mute); }

/* ------------------------------------------------------------ sections */
.sec { position: relative; max-width: 1360px; margin: 0 auto; padding: clamp(56px, 7.5vw, 104px) var(--pad); overflow-x: clip; }
.sec + .sec { padding-top: 0; }
.panel + .sec { padding-top: clamp(48px, 6vw, 80px); }
.shead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(26px, 3.6vw, 44px); }
.shead .disp { max-width: 16ch; margin: 0; }
.shead > div, .shead > p { max-width: 420px; margin: 0; color: var(--mute); }
.shead > div p { margin-bottom: 16px; }
.shead.c { flex-direction: column; align-items: center; text-align: center; }
.shead.c .disp { max-width: 20ch; }
.shead.c > p { max-width: 600px; }
.gno { display: inline-block; margin-right: .15em; padding: .22em .5em; border-radius: 99px; background: var(--orange); color: var(--ink); font-size: .42em; vertical-align: .55em; transform: rotate(-6deg); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }

/* the group filter on the activations page (links without JavaScript, a filter with it) */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 1360px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) var(--pad) 0; }
.fp { display: inline-flex; align-items: center; min-height: 46px; padding: 8px 20px; border: 2px solid var(--ink); border-radius: 99px; background: var(--white); color: var(--ink);
  font-size: 15px; font-weight: 650; text-decoration: none; transition: background .25s, color .25s, transform .3s var(--ease); }
.fp:hover { background: var(--paper2); transform: rotate(-2deg); }
.fp[aria-current="true"] { background: var(--ink); color: var(--white); }
.fp[aria-current="true"]::before { content: ""; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--orange); }
.filters + .sec { padding-top: clamp(40px, 5vw, 64px); }

/* category cards: dark-to-grey gradient, tilted picture, orange pill */
.cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.home .cgrid, .cgrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ccard { position: relative; display: flex; flex-direction: column; min-height: 420px; padding: 22px 22px 86px; border-radius: 22px; color: var(--white); text-decoration: none;
  background: linear-gradient(180deg, #0c0c0c 0%, #1a1a1a 34%, #8f8f8f 74%, #e8e8e8 100%); overflow: clip; isolation: isolate; }
.ccard .cname { max-width: 15ch; font: 800 clamp(22px, 2vw, 27px)/1 var(--disp); text-transform: uppercase; letter-spacing: -.01em; }
.ccard .crate { max-width: 32ch; margin-top: 8px; font-size: 15px; color: #d4d4d4; }
.ccard figure { height: 220px; margin: 18px 0 0; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 30px rgba(0, 0, 0, .32); transform: rotate(-2.5deg); transition: transform .55s var(--ease); }
.ccard:nth-child(even) figure { transform: rotate(2.5deg); }
.ccard img { width: 100%; height: 100%; object-fit: cover; }
.ccard .pill { position: absolute; left: 20px; bottom: 20px; }
.ccard:hover figure { transform: rotate(0deg) scale(1.03); }
.ccard:hover .pill { background: var(--ink); color: var(--orange); border-color: var(--ink); }
.ccard:hover .pill .ac { background: var(--orange); color: var(--ink); }

/* wide picture with stat chips overlapping its foot */
.wimg img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 24px; }
.chips-stat { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: -46px 3% 0; padding: 0; list-style: none; }
.chips-stat li { display: grid; align-content: center; gap: 2px; padding: 16px 18px; border-radius: 18px; background: var(--ink); color: var(--white); text-align: center; transform: rotate(-1.5deg); }
.chips-stat li:nth-child(even) { transform: rotate(1.5deg); }
.chips-stat b { font: 800 clamp(22px, 2.2vw, 32px)/1.05 var(--disp); color: var(--orange); }
.chips-stat span { font-size: 14px; color: var(--onDark2); }
.chips-stat.dark { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); max-width: 720px; margin: 26px 0 0; }
.chips-stat.dark li { border: 1px solid #2e2e2e; background: var(--ink3); text-align: left; transform: none; }

/* icon category tiles */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.tile { display: grid; justify-items: center; align-content: start; gap: 8px; min-height: 196px; padding: 26px 14px; border-radius: 22px; background: var(--paper); text-align: center; text-decoration: none; }
.tile .ti { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 6px; border-radius: 50%; background: var(--ink); color: var(--orange); transition: transform .45s var(--ease); }
.tile .ti svg { width: 30px; height: 30px; }
.tile b { font: 800 16.5px/1.12 var(--disp); text-transform: uppercase; }
.tile small { font-size: 13.5px; color: var(--mute); }
.tile:hover { background: var(--paper2); rotate: -2deg; }
.tile:hover .ti { transform: rotate(-14deg) scale(1.06); }
.tile.hot { background: var(--orange); }
.tile.hot small { color: var(--ink); }
.tile.hot:hover { background: #ff8d2b; }

/* service carousel bleeding off both edges (CSS scroll-snap) */
.sec.car { max-width: none; padding-left: 0; padding-right: 0; }
.sec.car .shead { padding: 0 var(--pad); }
.carousel { position: relative; }
.ctrack { position: relative; display: flex; gap: 18px; padding: 10px var(--pad) 26px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--ink) var(--paper2); }
.ctrack:focus-visible { outline-offset: -4px; }
.kcard { display: flex; flex-direction: column; gap: 4px; flex: 0 0 clamp(236px, 22vw, 300px); text-decoration: none; scroll-snap-align: center; }
.kcard figure { margin-bottom: 10px; border-radius: 18px; overflow: hidden; background: var(--paper); }
.kcard img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s var(--ease); }
.kcard:hover img { transform: scale(1.05) rotate(-1.5deg); }
.kcard .kg { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.kcard .kn { font: 800 20px/1.1 var(--disp); text-transform: uppercase; }
.kcard .kp { font-size: 15px; }
.kcard .kp b { font: 800 26px/1.1 var(--disp); }
.kcard .km { margin-top: auto; padding: 10px 14px; border-radius: 99px; background: var(--orange); font-size: 14px; font-weight: 700; text-align: center; transition: background .3s, color .3s; }
.kcard:hover .km { background: var(--ink); color: var(--orange); }
.cnav { display: flex; justify-content: center; gap: 12px; margin: 6px 0 0; }
html:not(.js) .cnav { display: none; }
.cbtn { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--ink); border-radius: 50%; background: var(--white); cursor: pointer; transition: background .3s, color .3s; }
.cbtn svg { width: 20px; height: 20px; transform: rotate(45deg); }
.cbtn[data-dir="-1"] svg { transform: rotate(-135deg); }
.cbtn:hover { background: var(--ink); color: var(--orange); }

/* steps */
.num { display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--orange); color: var(--ink); font: 800 19px/1 var(--disp); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.steps li { position: relative; display: grid; align-content: start; gap: 8px; padding: 26px 22px 28px 0; border-top: 3px solid var(--ink); }
.steps li::after { content: ""; position: absolute; top: 49px; left: 64px; right: 14px; border-top: 2px dashed #b9b9b9; }
.steps li:last-child::after { display: none; }
.steps .num { width: 52px; height: 52px; margin-bottom: 8px; font-size: 22px; }
.steps b { font: 800 21px/1.1 var(--disp); text-transform: uppercase; }
.steps li > span:not(.num) { color: var(--mute); }
.steps.big li { padding: 30px 26px 34px; border: 2px solid var(--paper); border-radius: 26px; background: var(--paper); rotate: -1.5deg; }
.steps.big li::after { display: none; }
.steps.big li:nth-child(2) { border-color: var(--ink); background: var(--ink); color: var(--white); rotate: 1.5deg; }
.steps.big li:nth-child(2) > span:not(.num) { color: var(--onDark2); }
.steps.big li:nth-child(3) { border-color: var(--orange); background: var(--orange); rotate: -1deg; }
.steps.big li:nth-child(3) > span:not(.num) { color: var(--ink); }
.steps.big li:nth-child(3) .num { background: var(--ink); color: var(--orange); }
.steps.big li:nth-child(4) { border-color: var(--ink); background: var(--white); rotate: 2deg; }
.steps.big li:hover { rotate: 0deg; }
.steps.big .num { width: 64px; height: 64px; font-size: 28px; }

/* principle card (orange) and the questions */
.sec.qa { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.principle { position: relative; padding: clamp(30px, 3.6vw, 48px); border-radius: 26px; background: var(--orange); color: var(--ink); rotate: -1.8deg; }
.principle:hover { rotate: 0deg; }
.principle > .tag { position: absolute; top: -14px; left: 26px; }
.principle .say { margin: 10px 0 18px; font: 800 clamp(26px, 2.8vw, 40px)/1.02 var(--disp); text-transform: uppercase; }
.principle .small { color: var(--ink); font-weight: 600; }
.principle.wide { max-width: 980px; margin: 0 auto; rotate: -1deg; }
.faqs .disp { margin-bottom: 22px; }
.qlist { display: grid; gap: 10px; margin-bottom: 22px; padding: clamp(12px, 2vw, 22px); border-radius: 24px; background-color: var(--paper);
  background-image: radial-gradient(#cdcdcd 1.1px, transparent 1.3px); background-size: 18px 18px; }
.q { border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.q summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 12px 14px 12px 20px; font-size: 16.5px; font-weight: 650; line-height: 1.35; list-style: none; cursor: pointer; }
.q summary::-webkit-details-marker { display: none; }
.q .pm { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); transition: transform .35s var(--ease), background .3s; }
.q .pm::before, .q .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.4px; margin: -1.2px 0 0 -7px; border-radius: 2px; background: var(--ink); transition: background .3s; }
.q .pm::after { transform: rotate(90deg); }
.q:not([open]) summary:hover .pm { transform: rotate(90deg); }
.q[open] .pm { background: var(--ink); transform: rotate(45deg); }
.q[open] .pm::before, .q[open] .pm::after { background: var(--orange); }
.q p { max-width: 64ch; margin: 0; padding: 0 20px 18px; color: var(--mute); }
.faqpage .qlist { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; background-color: var(--ink); background-image: radial-gradient(#2c2c2c 1.1px, transparent 1.3px); --focus: var(--orange); }
.faqpage .q { border-color: var(--ink); }
.faqpage .q:focus-within { --focus: var(--ink); }

/* full-width orange band */
.band { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; gap: 26px 56px; margin-top: clamp(40px, 6vw, 80px);
  padding: clamp(52px, 7vw, 100px) max(var(--pad), calc((100% - 1360px) / 2 + var(--pad))); background: var(--orange); color: var(--ink); overflow-x: clip; }
.sec + .band { margin-top: 0; }
.band .disp { margin: 0 0 18px; font-size: clamp(36px, 5.4vw, 84px); line-height: 1.06; }
.band .disp span { padding: 0 .14em; border-radius: .1em; background: var(--ink); color: var(--orange); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.band .btx p { max-width: 54ch; margin: 0; font-size: 18px; font-weight: 500; }
.band .acts { flex-direction: column; align-items: flex-start; margin: 0; }

/* footer */
.ft { padding: clamp(48px, 6vw, 80px) var(--pad) 28px; background: var(--ink); color: var(--white); overflow-x: clip; }
.fcols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; max-width: 1360px; margin: 0 auto; }
.fcols > div { display: grid; align-content: start; }
.fh { margin: 0 0 8px; font: 700 13px/1.3 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.fcols a { display: flex; align-items: center; min-height: 44px; color: #dadada; font-size: 15.5px; line-height: 1.3; text-decoration: none; transition: color .2s; }
.fcols a:hover { color: var(--orange); text-decoration: underline; text-underline-offset: 4px; }
.fcols a.mail { overflow-wrap: anywhere; }
.fcols span { padding: 4px 0; color: #ababab; font-size: 15px; }
.fword { max-width: 1360px; margin: 34px auto 6px; font: 800 clamp(76px, 19vw, 320px)/.78 var(--disp); letter-spacing: -.03em; color: var(--orange); text-align: center; user-select: none; }
.legal { max-width: 1360px; margin: 0 auto; padding-top: 18px; border-top: 1px solid #272727; color: #a8a8a8; font-size: 13.5px; }

/* ------------------------------------------------------------ inner page top panel */
.itop { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 24px; min-height: 480px; }
.itop:not(.withpic) { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-bottom: clamp(36px, 5vw, 72px); }
.itop:not(.withpic) .mega { font-size: clamp(44px, 9vw, 148px); }
.itx { position: relative; z-index: 2; padding: 8px 0; }
.itpics { position: relative; height: clamp(300px, 34vw, 470px); margin-left: -10%; }
.itpics .tc { position: absolute; }
.itpics .tA { top: 0; right: 4%; width: 58%; --tilt: 6deg; }
.itpics .tA img { aspect-ratio: 4 / 5; }
.itpics .tA:only-child { right: 16%; width: 62%; }
.itpics .tB { left: 2%; bottom: 0; width: 46%; border: 6px solid var(--ink); --tilt: -8deg; }
.itpics .tB img { aspect-ratio: 1; }

/* service page */
.spec { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 34px; overflow: hidden; border: 2px solid var(--ink); border-radius: 22px; background: var(--ink); }
.spec > div { flex: 1 1 200px; padding: 18px 20px; background: var(--white); }
.spec dt { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.spec dd { margin: 6px 0 0; font: 800 20px/1.2 var(--disp); }
.item .spec > div:first-child { background: var(--orange); }
.item .spec > div:first-child dt { color: var(--ink); }
.spec.mini { margin: 16px 0 12px; border-radius: 16px; }
.spec.mini > div { flex-basis: 150px; padding: 12px 16px; }
.spec.mini dd { font-size: 16.5px; }
.spec.reg { border-color: var(--ink); background: #333; }
.spec.reg > div { flex-basis: 300px; padding: 22px 24px; background: var(--ink); color: var(--white); }
.spec.reg dt { color: var(--onDark2); }
.spec.reg > div:first-child dd { color: var(--orange); }
.incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; }
.ibox { padding: clamp(22px, 3vw, 36px); border: 2px solid var(--ink); border-radius: 24px; background: var(--white); }
.ibox.yes { border-color: var(--paper); background: var(--paper); }
.ibox.dark { border-color: var(--ink); background: var(--ink); color: var(--white); }
.ibox.dark .disp em { color: var(--orange); }
.ibox h3 { margin: 22px 0 6px; }
.ibox > p:last-child { margin-bottom: 0; }
.ticks, .dashes { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ticks li, .dashes li { position: relative; padding-left: 36px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .12em; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); }
.ticks li::after { content: ""; position: absolute; left: 9px; top: calc(.12em + 5px); width: 6px; height: 11px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.dashes li::before { content: ""; position: absolute; left: 4px; top: .8em; width: 16px; height: 3px; border-radius: 2px; background: currentColor; }
.exline { position: relative; margin: 34px 0 0; padding: 34px clamp(22px, 3vw, 36px) 24px; border-radius: 24px; background: var(--ink); color: var(--white); }
.exline > .tag { position: absolute; top: -13px; left: 24px; }
.exline p { margin: 0 0 8px; font-size: 18px; }
.exline .small { margin: 0; color: var(--onDark2); font-size: 15px; }
.pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.pn a { display: grid; align-content: center; gap: 2px; min-height: 76px; padding: 16px 22px; border-radius: 18px; background: var(--paper); text-decoration: none; transition: background .3s; }
.pn a:last-child { text-align: right; }
.pn small { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.pn a:first-child small::before { content: "\2190  "; }
.pn a:last-child small::after { content: "  \2192"; }
.pn span { font: 800 19px/1.15 var(--disp); text-transform: uppercase; }
.pn a:hover { background: var(--orange); }
.pn a:hover small { color: var(--ink); }

/* how to plan: a tilted cascade of four cards */
.cascade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px 0 10px; }
.tcard { position: relative; margin-left: -18px; padding: 16px 16px 24px; border: 2px solid var(--ink); border-radius: 26px; background: var(--white); box-shadow: 0 18px 36px rgba(0, 0, 0, .14); rotate: -3deg; }
.tcard:first-child { margin-left: 0; }
.tcard:nth-child(4n+1) { border-color: var(--orange); background: var(--orange); }
.tcard:nth-child(4n+2) { z-index: 1; border-color: var(--ink); background: var(--ink); color: var(--white); rotate: 2.5deg; --focus: var(--orange); }
.tcard:nth-child(4n+3) { z-index: 2; rotate: -2deg; }
.tcard:nth-child(4n+4) { z-index: 3; border-color: var(--paper2); background: var(--paper); rotate: 3deg; }
.tcard:hover { z-index: 5; rotate: 0deg; }
.tcard figure { margin-bottom: 14px; border-radius: 16px; overflow: hidden; }
.tcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tcard .num { position: absolute; top: 6px; right: 6px; width: 50px; height: 50px; border: 3px solid var(--white); background: var(--ink); color: var(--orange); font-size: 21px; }
.tcard:nth-child(4n+2) .num { border-color: var(--ink); background: var(--orange); color: var(--ink); }
.tcard h3 { margin: 0 0 8px; font-size: 24px; line-height: 1; text-transform: uppercase; }
.tcard p { margin: 0; font-size: 15.5px; }
.tcard:nth-child(4n+2) p { color: var(--onDark2); }

/* points and permissions */
.prow { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: clamp(26px, 3.4vw, 44px) 0; scroll-margin-top: 20px; }
.prow + .prow { border-top: 2px solid var(--ink); }
.prow.rev figure { order: 2; }
.prow .tc { --tilt: -3deg; box-shadow: 0 16px 34px rgba(0, 0, 0, .18); }
.prow.rev .tc { --tilt: 3deg; }
.prow .tc img { aspect-ratio: 3 / 2; }
.ptx .num { margin-bottom: 14px; }
.ptx > p { color: var(--mute); }
.ptx .small { margin: 0; }
.stickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.stickers li { display: grid; align-content: start; gap: 14px; padding: 28px 22px 24px; border: 2px dashed #bdbdbd; border-radius: 22px; background: var(--white); }
.stickers li .tag { justify-self: start; }
.stickers li:nth-child(even) .tag { transform: rotate(4deg); }
.stickers li > span:not(.tag) { color: var(--mute); }
.pg-company .stickers li { border: 0; background: var(--ink); color: var(--white); }
.pg-company .stickers li > span:not(.tag) { color: var(--onDark2); font-weight: 600; }
.comunas { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.comunas li { padding: 6px 12px; border: 1.5px solid #4a4a4a; border-radius: 99px; color: #e4e4e4; font-size: 14px; }

/* calendar, rates and app: reference cards */
.rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rcard { padding: 26px 24px 28px; border-radius: 24px; background: var(--paper); }
.rcard:hover { rotate: -1.5deg; }
.rcard .big { display: block; margin-bottom: 14px; font: 800 clamp(38px, 4vw, 58px)/1 var(--disp); letter-spacing: -.02em; }
.rcard h3 { margin: 0 0 6px; font-size: 20px; text-transform: uppercase; }
.rcard p { margin: 0; color: var(--mute); font-size: 15.5px; }
.rcard.hot { background: var(--orange); }
.rcard.hot p { color: var(--ink); }
.pg-reference-rates .rcard { border: 2px solid var(--ink); background: var(--white); }
.pg-reference-rates .rcard .big { display: inline-block; padding: .14em .32em; border-radius: 14px; background: var(--ink); color: var(--orange); font-size: clamp(28px, 2.8vw, 38px); }
.pg-reference-rates .rcard.hot { border-color: var(--orange); background: var(--orange); }
.pg-app .rcard { background: var(--ink); color: var(--white); rotate: -1.2deg; }
.pg-app .rcard:nth-child(even) { border: 2px solid var(--ink); background: var(--white); color: var(--ink); rotate: 1.2deg; }
.pg-app .rcard .big { color: var(--orange); }
.pg-app .rcard:nth-child(even) .big { color: var(--orangeInk); }
.pg-app .rcard p { color: var(--onDark2); }
.pg-app .rcard:nth-child(even) p { color: var(--mute); }
.pg-app .rcard:hover { rotate: 0deg; }
.tw { margin-bottom: 18px; overflow-x: auto; border: 2px solid var(--ink); border-radius: 22px; }
.table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.table th, .table td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table thead th { background: var(--ink); color: var(--white); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table th[scope="row"] { font-weight: 600; }
.table th a { text-decoration: none; box-shadow: inset 0 -3px 0 var(--orange); transition: background .2s; }
.table th a:hover { background: var(--orange); }
.table .p { font: 800 17px/1.3 var(--disp); text-align: right; white-space: nowrap; }
.table.rates { min-width: 720px; }
.rates .gh th { background: var(--orange); color: var(--ink); font: 800 15px/1.2 var(--disp); letter-spacing: .02em; text-transform: uppercase; }
.table.lead th[scope="row"] { font-weight: 500; }
.hols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hyear { padding: 26px; border-radius: 24px; background: var(--ink); color: var(--white); }
.hyear h3 { margin: 0 0 16px; font-size: 44px; line-height: 1; color: var(--orange); }
.hyear ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.hyear li { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--ink3); font-size: 14.5px; }
.hyear li span { color: var(--onDark2); }
.hyear:nth-child(2) { background: var(--paper); color: var(--ink); }
.hyear:nth-child(2) h3 { color: var(--orangeInk); }
.hyear:nth-child(2) li { background: var(--white); }
.hyear:nth-child(2) li span { color: var(--mute); }

/* materials */
.mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mats li { display: grid; gap: 8px; padding: 22px; border: 2px solid var(--ink); border-radius: 20px; background: var(--white); box-shadow: 6px 6px 0 var(--ink); }
.mats li:nth-child(3n+2) { box-shadow: 6px 6px 0 var(--orange); }
.mats li:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.mats b { font: 800 20px/1.1 var(--disp); text-transform: uppercase; }
.mats span { color: var(--mute); font-size: 14px; }

/* worked examples */
.exgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: start; }
.excard { position: relative; padding: 36px clamp(20px, 2.6vw, 32px) 24px; border: 2px solid var(--ink); border-radius: 26px; background: var(--white); box-shadow: 8px 8px 0 var(--ink); }
.excard:nth-child(2) { box-shadow: 8px 8px 0 var(--orange); }
.excard > .tag { position: absolute; top: -14px; left: 22px; }
.excard h3 { font-size: 26px; text-transform: uppercase; }
.excard .tw { border-width: 1.5px; border-radius: 16px; }
.ex tr.coo > * { background: var(--orangeTint); }
.ex tr.tot > * { background: var(--ink); color: var(--white); font-weight: 800; }
.ex tr.tot .p { color: var(--orange); font-size: 22px; }

/* contact */
.sec.kgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kbig { position: relative; display: grid; align-content: space-between; gap: 22px; min-height: 230px; padding: 28px; border-radius: 26px; background: var(--paper); color: var(--ink); text-decoration: none; }
.kbig .kick { color: var(--ink); }
.kbig.dark { background: var(--ink); color: var(--white); }
.kbig.dark .kick { color: var(--orange); }
.kbig.hot { background: var(--orange); }
.kbig .big { padding-right: 56px; font: 800 clamp(28px, 3.4vw, 48px)/1.02 var(--disp); letter-spacing: -.01em; text-transform: uppercase; overflow-wrap: break-word; }
.kbig .big.mail { padding-right: 0; font-size: clamp(18px, 2.6vw, 36px); text-transform: none; overflow-wrap: anywhere; }
.kbig > span:last-child:not(.big) { color: var(--mute); }
.kbig .ac { position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--white); }
.kbig.dark .ac { background: var(--orange); color: var(--ink); }
.kbig .ac svg { width: 22px; height: 22px; }
a.kbig { transition: transform .45s var(--ease); }
a.kbig:hover { transform: rotate(-1deg); }

/* terms */
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.terms li { padding: 26px; border-radius: 24px; background: var(--paper); }
.terms li:nth-child(4n+2), .terms li:nth-child(4n+3) { background: var(--ink); color: var(--white); }
.terms h2 { display: flex; align-items: center; gap: 14px; }
.terms p { margin: 0; color: var(--mute); }
.terms li:nth-child(4n+2) p, .terms li:nth-child(4n+3) p { color: var(--onDark2); }

/* ------------------------------------------------------------ planner */
.plan-sec { max-width: 1420px; }
.planner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 410px); gap: 26px; align-items: start; }
.pcol { display: grid; gap: 18px; min-width: 0; }
.box { padding: clamp(20px, 2.6vw, 30px); border: 2px solid var(--ink); border-radius: 24px; background: var(--white); scroll-margin-top: 16px; }
.box h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; font: 800 clamp(22px, 2.2vw, 28px)/1 var(--disp); text-transform: uppercase; }
.box h2 small { color: var(--mute); font: 600 14px/1 var(--body); text-transform: none; }
.qn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px 12px 12px 3px; background: var(--orange); font-size: 16px; rotate: -6deg; }
.box:nth-child(even) .qn { background: var(--ink); color: var(--orange); rotate: 6deg; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.fields.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.f { display: grid; gap: 6px; min-width: 0; font-size: 14px; font-weight: 650; }
.f.full { grid-column: 1 / -1; }
.f input, .f select, .f textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid #c8c8c8; border-radius: 14px; background: var(--white); font-size: 16px; font-weight: 400; transition: border-color .2s; }
.f select { padding-right: 40px; -webkit-appearance: none; appearance: none; background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23070707' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.f textarea { min-height: 96px; line-height: 1.5; resize: vertical; }
.f input:hover, .f select:hover, .f textarea:hover { border-color: #8f8f8f; }
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--ink); }
.lbl { margin: 6px 0 8px; font-size: 14px; font-weight: 650; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip { min-height: 44px; padding: 8px 16px; border: 2px solid var(--ink); border-radius: 99px; background: var(--white); font-size: 15px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.chip:hover { background: var(--paper2); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.chip[aria-pressed="true"]::before { content: "\2713  "; color: var(--orange); }
.ck { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; font-size: 15.5px; line-height: 1.4; cursor: pointer; }
.ck input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--ink); }
.rads { min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
.rads legend { margin-bottom: 2px; padding: 0; font-size: 14px; font-weight: 650; }
.addrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 14px; }
.addrow .f { flex: 1 1 200px; }
.addrow + .f { margin-top: 18px; }
.empty { margin: 4px 0 0; padding: 18px; border: 2px dashed #c4c4c4; border-radius: 16px; color: var(--mute); }
.ptc, .shc, .mat { margin-top: 14px; padding: 18px; border-radius: 20px; background: var(--paper); }
.cardh { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cardh p { display: grid; flex: 1; min-width: 0; margin: 0; line-height: 1.25; }
.cardh b { font: 800 18px/1.15 var(--disp); text-transform: uppercase; }
.cardh small { color: var(--mute); font-size: 13.5px; }
.x { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 99px; background: transparent; font-size: 14px; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.x:hover { background: var(--ink); color: var(--white); text-decoration: none; }
.coms { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0 0 4px; padding: 0; border: 0; }
.coms legend { width: 100%; margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 650; }
.cm { position: relative; cursor: pointer; }
.cm input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cm span { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; background: var(--white); font-size: 15px; font-weight: 700; transition: background .2s, color .2s; }
.cm:hover span { background: var(--paper2); }
.cm input:checked + span { background: var(--ink); color: var(--orange); }
.cm input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.cks { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 4px 0 6px; }
.iss { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.iss:empty { display: none; }
.iss li { padding: 8px 12px; border-left: 4px solid var(--orange); border-radius: 10px; background: var(--white); font-size: 14.5px; }
.iss li.r { border-left-color: var(--peri); color: var(--mute); }
.sday { margin-top: 18px; }
.sdh { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 15.5px; }
.htag { display: inline-block; padding: 4px 10px; border-radius: 99px; background: var(--orange); color: var(--ink); font-size: 12.5px; font-weight: 700; rotate: -3deg; }
.shc .fields { margin-bottom: 6px; }
.shc .small:empty { display: none; }
.tacs { display: grid; gap: 10px; margin-top: 10px; }
.tac { padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--white); }
.tach { display: flex; align-items: center; gap: 10px; }
.tach p { display: grid; flex: 1; min-width: 0; margin: 0; line-height: 1.25; }
.tach small { color: var(--mute); font-size: 13.5px; }
.tf { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.f.s { flex: 1 1 150px; max-width: 220px; }
.tl { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 10px 0 0; color: var(--mute); font-size: 14.5px; }
.tl b { color: var(--ink); font: 800 17px/1.3 var(--disp); }
.warn { margin: 6px 0 0; color: var(--orangeInk); font-size: 14.5px; font-weight: 600; }
.warn:empty { display: none; }
.shcost { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 0; padding-top: 12px; border-top: 2px solid var(--ink); font-weight: 650; }
.shcost b { font: 800 22px/1 var(--disp); }
.prow-i { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1.5px solid var(--line); }
.prow-i:last-child { border-bottom: 0; }
.prow-i p { display: grid; margin: 0; line-height: 1.3; }
.prow-i small { color: var(--mute); font-size: 13.5px; }
.step { display: flex; flex: none; align-items: center; gap: 6px; }
.step button { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; background: var(--white); font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; transition: background .2s; }
.step button:hover:not(:disabled) { background: var(--orange); }
.step button:disabled { opacity: .35; cursor: default; }
.step output { min-width: 2.2ch; font: 800 20px/1 var(--disp); text-align: center; }
.sum { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 26px 24px; border-radius: 26px; background: var(--ink); color: var(--white);
  scrollbar-width: thin; scrollbar-color: #4a4a4a transparent; }
.sum .kick { margin-bottom: 4px; }
.stitle { margin: 0 0 10px; font: 800 22px/1.1 var(--disp); text-transform: uppercase; overflow-wrap: anywhere; }
.status { display: inline-block; margin: 0 0 14px; padding: 5px 12px; border-radius: 99px; background: var(--peri); color: var(--ink); font-size: 13px; font-weight: 700; rotate: -3deg; }
.status.ready { background: var(--lime); }
.total { margin: 0 0 2px; font: 800 clamp(40px, 4vw, 54px)/1 var(--disp); letter-spacing: -.01em; color: var(--orange); }
.sum .small { color: var(--onDark2); }
.sum .warn { color: var(--orange); }
.stab { width: 100%; margin: 14px 0; border-collapse: collapse; font-size: 15px; }
.stab th, .stab td { padding: 9px 0; border-bottom: 1px solid #2b2b2b; font-weight: 500; text-align: left; }
.stab .p { font: 800 16px/1.3 var(--disp); text-align: right; }
.sumday { padding: 12px 0; border-bottom: 1px solid #2b2b2b; }
.sumday .dh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 700; }
.sumday .sl { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0 2px; font-size: 14.5px; }
.sumday ul { margin: 0; padding-left: 18px; color: var(--onDark2); font-size: 13.5px; }
.sum .coo { margin: 6px 0 0; color: var(--orange); font-size: 14px; }
.sum .sh { margin: 18px 0 8px; color: var(--lime); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sum ul { margin: 0; padding-left: 18px; color: var(--onDark2); font-size: 14px; }
.sum ul.blk, .sum ul.saved { padding: 0; }
.roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.roles span { padding: 6px 10px; border-radius: 99px; background: var(--ink3); font-size: 13.5px; }
.roles b { color: var(--orange); }
#s-lead { margin: 14px 0 0; }
.blk { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fix { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-left: 4px solid var(--orange); border-radius: 10px; background: var(--ink3); color: var(--white);
  font-size: 14px; line-height: 1.35; text-align: left; cursor: pointer; transition: background .2s; }
.fix::after { content: "  \2192"; color: var(--orange); }
.fix:hover { background: #2a2a2a; }
.note { margin: 14px 0 0; color: var(--lime); font-size: 14.5px; }
.note:empty { display: none; }
.undo { min-height: 44px; margin-left: 6px; padding: 4px 16px; border: 0; border-radius: 99px; background: var(--lime); color: var(--ink); font-weight: 700; cursor: pointer; }
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.btnrow .pill { flex: 1 1 auto; }
.btnrow + .small { margin-top: 16px; }
.saved { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.saved li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--ink3); color: var(--white); font-size: 14.5px; }
.saved li span { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.saved li button { min-height: 44px; padding: 0 14px; border: 1.5px solid #5a5a5a; border-radius: 99px; background: transparent; color: var(--white); font-size: 14px; cursor: pointer; }
.saved li button:hover { background: var(--white); color: var(--ink); }
.saved li.none { padding: 0; background: transparent; color: var(--onDark2); }
.nojs { padding: 26px; border: 2px solid var(--ink); border-radius: 22px; background: var(--paper); }
.nojs h2 { font: 800 26px/1.1 var(--disp); text-transform: uppercase; }
.nojs a { font-weight: 700; }

/* ------------------------------------------------------------ privacy: index column + six rotating layouts */
.pwrap { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.pidx { position: sticky; top: 16px; display: grid; max-height: calc(100vh - 32px); overflow-y: auto; padding: 14px; border-radius: 24px; background: var(--ink); scrollbar-width: thin; scrollbar-color: #4a4a4a transparent; }
.pidx a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 12px; color: #dedede; font-size: 14.5px; line-height: 1.25; text-decoration: none; transition: background .2s; }
.pidx a span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ink3); color: var(--orange); font: 800 13px/1 var(--disp); transition: background .2s, color .2s; }
.pidx a:hover { background: var(--ink3); color: var(--white); }
.pidx a:hover span { background: var(--orange); color: var(--ink); }
.plist { display: grid; gap: clamp(30px, 4vw, 52px); min-width: 0; }
.policy-section { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "no" "tx" "img"; align-items: center; gap: 16px 30px; scroll-margin-top: 20px; }
.policy-section .pno { grid-area: no; margin: 0; }
.policy-section .ptext { grid-area: tx; min-width: 0; }
.policy-section .pimg { grid-area: img; }
.policy-section .pno span { display: inline-grid; place-items: center; min-width: 58px; height: 58px; padding: 0 10px; border-radius: 99px; background: var(--orange); color: var(--ink); font: 800 24px/1 var(--disp); }
.policy-section h2 { margin: 0 0 12px; font: 800 clamp(24px, 2.6vw, 34px)/1.02 var(--disp); text-transform: uppercase; }
.policy-section .ptext p { max-width: 66ch; margin: 0 0 .8em; color: #2b2b2b; }
.policy-section .ptext p:last-child { margin-bottom: 0; }
.pimg img { width: 100%; border-radius: 18px; object-fit: cover; }
/* 1 tilt-r: picture tilted at the right */
.policy-section[data-layout="tilt-r"], .policy-section[data-layout="panel"], .policy-section[data-layout="orange"] { grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". img" "no img" "tx img" ". img"; row-gap: 12px; }
.policy-section[data-layout="tilt-l"], .policy-section[data-layout="polaroid"] { grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "img ." "img no" "img tx" "img ."; row-gap: 12px; }
.policy-section[data-layout="tilt-r"] { grid-template-columns: minmax(0, 1fr) minmax(0, .6fr); }
.policy-section[data-layout="tilt-r"] .pimg { transform: rotate(4deg); transition: transform .5s var(--ease); }
.policy-section[data-layout="tilt-r"] .pimg img { aspect-ratio: 4 / 5; box-shadow: 0 16px 34px rgba(0, 0, 0, .18); }
/* 2 panel: black card, small square picture */
.policy-section[data-layout="panel"] { grid-template-columns: minmax(0, 1fr) 200px; padding: clamp(24px, 3.4vw, 40px); border-radius: 26px; background: var(--ink); color: var(--white); }
.policy-section[data-layout="panel"] .ptext p { color: var(--onDark2); }
.policy-section[data-layout="panel"] .pimg { border: 4px solid var(--orange); border-radius: 22px; overflow: hidden; transform: rotate(-5deg); transition: transform .5s var(--ease); }
.policy-section[data-layout="panel"] .pimg img { aspect-ratio: 1; border-radius: 0; }
/* 3 banner: wide picture, the number stuck over its foot, text in two columns */
.policy-section[data-layout="banner"] { grid-template-areas: "img" "no" "tx"; gap: 0 30px; }
.policy-section[data-layout="banner"] .pimg img { aspect-ratio: 16 / 5; border-radius: 24px; }
.policy-section[data-layout="banner"] .pno { position: relative; z-index: 1; margin: -34px 0 14px 24px; }
.policy-section[data-layout="banner"] .pno span { border: 5px solid var(--white); transform: rotate(-6deg); }
.policy-section[data-layout="banner"] .ptext:has(p + p) { columns: 2 280px; column-gap: 34px; }
.policy-section[data-layout="banner"] .ptext p { break-inside: avoid; }
.policy-section[data-layout="banner"] h2 { column-span: all; }
/* 4 tilt-l: picture tilted at the left */
.policy-section[data-layout="tilt-l"] { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); }
.policy-section[data-layout="tilt-l"] .pimg { transform: rotate(-4deg); transition: transform .5s var(--ease); }
.policy-section[data-layout="tilt-l"] .pimg img { aspect-ratio: 4 / 3; box-shadow: 0 16px 34px rgba(0, 0, 0, .18); }
/* 5 orange: orange card, round picture */
.policy-section[data-layout="orange"] { grid-template-columns: minmax(0, 1fr) 220px; padding: clamp(24px, 3.4vw, 40px); border-radius: 26px; background: var(--orange); rotate: .8deg; }
.policy-section[data-layout="orange"] .pno span { background: var(--ink); color: var(--orange); }
.policy-section[data-layout="orange"] .ptext p { color: var(--ink); }
.policy-section[data-layout="orange"] .pimg img { aspect-ratio: 1; border: 6px solid var(--ink); border-radius: 50%; }
/* 6 polaroid: outlined card with a hard shadow, the picture in a white frame */
.policy-section[data-layout="polaroid"] { grid-template-columns: 240px minmax(0, 1fr); padding: clamp(22px, 3vw, 34px); border: 2px solid var(--ink); border-radius: 26px; background: var(--white); box-shadow: 8px 8px 0 var(--ink); }
.policy-section[data-layout="polaroid"] .pimg { padding: 10px 10px 36px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 12px 26px rgba(0, 0, 0, .16); transform: rotate(3deg); transition: transform .5s var(--ease); }
.policy-section[data-layout="polaroid"] .pimg img { aspect-ratio: 1; border-radius: 4px; }
.policy-section:hover .pimg { transform: rotate(0deg); }

/* ------------------------------------------------------------ motion: reveal under html.js only (content is visible without JavaScript) */
html.js [data-reveal] { opacity: 0; translate: 0 34px; --dl: calc((var(--d, 0) + var(--i, 0)) * 90ms);
  transition: opacity .75s var(--ease) var(--dl), translate .85s var(--ease) var(--dl), rotate .5s var(--ease), transform .5s var(--ease), background-color .3s, box-shadow .3s, color .3s; }
html.js [data-reveal].in { opacity: 1; translate: none; }
.tile, .rcard, .tcard, .principle, .steps li, .q, .mats li { transition: rotate .5s var(--ease), transform .5s var(--ease), background-color .3s, box-shadow .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 1; translate: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .tc:hover { transform: rotate(var(--tilt, -4deg)); }
  .ccard:hover figure, .kcard:hover img { transform: none; }
  .tile:hover, .rcard:hover { rotate: none; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1120px) {
  .nav { display: none; }
  .mm { display: block; }
  .hcta { margin-left: auto; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chips-stat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li:nth-child(2)::after { display: none; }
  .cascade { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
  .tcard:nth-child(odd) { margin-left: 0; }
  .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planner { grid-template-columns: minmax(0, 1fr) 350px; }
  .fields.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: 0; }
  .hero .hl { grid-column: 1; font-size: clamp(50px, 14.4vw, 124px); }
  .hpics { grid-column: 1; grid-row: 2; height: clamp(380px, 96vw, 600px); min-height: 0; margin-top: -.2em; }
  .hpics .h1c { top: 0; right: 0; width: 58%; }
  .hpics .h2c { top: 6%; bottom: auto; left: 0; width: 42%; }
  .pcard { width: 184px; padding: 12px 14px 14px; }
  .pcard b { font-size: 24px; }
  .pcard.p1 { left: 1%; top: 47%; }
  .pcard.p2 { right: 1%; bottom: 2%; }
  .hcopy { grid-row: 3; max-width: none; }
  .hpics .s3 { left: 5%; bottom: 1%; }
  .stmt { padding: 172px 16px 180px; }
  .peek { width: 156px; }
  .peek.pl { left: -26px; top: 34px; }
  .peek.pr { right: -26px; top: auto; bottom: 30px; }
  .itop, .itop.withpic { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .itpics { height: clamp(260px, 64vw, 380px); margin: 6px 0 0; }
  .itpics .tA { width: 50%; right: 6%; }
  .itpics .tA:only-child { right: 24%; width: 52%; }
  .itpics .tB { width: 42%; }
  .itpics .tA img { aspect-ratio: 1; }
  .home .cgrid, .cgrid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec.qa, .band, .two, .incl, .exgrid, .hols, .terms, .faqpage .qlist { grid-template-columns: minmax(0, 1fr); }
  .band .acts { flex-direction: row; flex-wrap: wrap; }
  .fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prow, .prow.rev { grid-template-columns: minmax(0, 1fr); }
  .prow.rev figure { order: 0; }
  .prow .tc { max-width: 560px; }
  .planner { grid-template-columns: minmax(0, 1fr); }
  .sum { position: static; max-height: none; overflow: visible; }
  .pwrap { grid-template-columns: minmax(0, 1fr); }
  .pidx { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; overflow: visible; }
  .policy-section[data-layout] { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "no" "img" "tx"; }
  .policy-section[data-layout="banner"] { grid-template-areas: "img" "no" "tx"; }
  .policy-section[data-layout="tilt-r"] .pimg, .policy-section[data-layout="tilt-l"] .pimg { width: min(86%, 460px); justify-self: center; margin: 8px 0 14px; }
  .policy-section[data-layout="tilt-r"] .pimg img, .policy-section[data-layout="tilt-l"] .pimg img { aspect-ratio: 16 / 10; }
  .policy-section[data-layout="panel"] .pimg { width: 170px; }
  .policy-section[data-layout="orange"] .pimg { width: 190px; }
  .policy-section[data-layout="polaroid"] .pimg { width: 220px; }
  .policy-section[data-layout="banner"] .pimg img { aspect-ratio: 16 / 7; }
}
@media (max-width: 700px) {
  .table.rates { min-width: 0; }
  .table.rates thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table.rates tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .table.rates tbody tr:last-child { border-bottom: 0; }
  .table.rates tr.gh { padding: 0; }
  .table.rates th, .table.rates td { display: block; padding: 0; border: 0; }
  .table.rates tr.gh th { grid-column: 1 / -1; padding: 12px 16px; }
  .table.rates td.p { grid-column: 2; grid-row: 1; white-space: normal; }
  .table.rates td:nth-of-type(1) { grid-column: 1 / -1; color: var(--mute); font-size: 14.5px; }
  .table.rates td:nth-of-type(3), .table.rates td:nth-of-type(4) { color: var(--mute); font-size: 14px; }
  .table.rates td:nth-of-type(4) { text-align: right; }
  .table.rates td:nth-of-type(3)::before { content: "Minimum: "; }
  .table.rates td:nth-of-type(4)::before { content: "Sundays and holidays: "; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  :root { --r: 22px; }
  .hd { margin: 8px 8px 0; padding: 12px 14px 4px; }
  .hcta { display: none; }
  .panel { margin: 0 8px; padding: 22px 18px 26px; }
  .stmt.plain { margin: 0 8px; }
  .mega { font-size: clamp(34px, 10vw, 60px); }
  .itop:not(.withpic) .mega { font-size: clamp(38px, 11.4vw, 64px); }
  .hero .hl { font-size: clamp(46px, 14.6vw, 80px); }
  .hero .hl { margin-top: .5em; }
  .hl .s1 { left: 36%; top: -2.2em; }
  .hl .s2 { right: -.1em; top: -.15em; }
  .tag { font-size: 12px; }
  .mega .w > .tag { position: static; margin: 0 0 0 .4em; vertical-align: top; }
  .hl .w > .tag { position: absolute; margin: 0; }
  .hpics { height: 400px; }
  .pcard { width: 168px; }
  .pcard .pk { font-size: 11.5px; }
  .pcard small { font-size: 12px; }
  .home .cgrid, .cgrid.three, .rgrid, .steps, .cascade, .sec.kgrid, .fields, .fields.three, .pn, .fcols, .pidx { grid-template-columns: minmax(0, 1fr); }
  .tiles, .chips-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips-stat { margin: -26px 2% 0; }
  .chips-stat li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .chips-stat.dark { margin: 22px 0 0; }
  .wimg img { aspect-ratio: 4 / 3; }
  .ccard { min-height: 0; }
  .ccard figure { height: 200px; }
  .steps li::after { display: none; }
  .steps.big li { rotate: 0deg; }
  .tcard, .tcard:nth-child(odd) { margin: 0; }
  .tcard + .tcard { margin-top: -6px; }
  .pn a:last-child { text-align: left; }
  .exgrid { gap: 34px; }
  .excard { box-shadow: 5px 5px 0 var(--ink); }
  .excard:nth-child(2) { box-shadow: 5px 5px 0 var(--orange); }
  .box { padding: 18px 14px; border-radius: 20px; }
  .ptc, .shc, .mat { padding: 14px 12px; }
  .tac { padding: 12px; }
  .f.s { max-width: none; }
  .policy-section[data-layout="panel"], .policy-section[data-layout="orange"], .policy-section[data-layout="polaroid"] { padding: 22px 18px; }
  .policy-section[data-layout="polaroid"] { box-shadow: 5px 5px 0 var(--ink); }
  .policy-section[data-layout="banner"] .pimg img { aspect-ratio: 16 / 9; }
  .kbig { min-height: 190px; padding: 24px 20px; }
  .kbig .big.mail { font-size: clamp(18px, 5.4vw, 24px); }
  .fword { margin-top: 26px; }
}