/* Nikkah Navigator landing — editorial, warm, dignified. Ivory paper, deep emerald, gold leaf. */
:root {
  --zel-main: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Crect width='72' height='72' fill='%23F3EEE3'/%3E%3Cpolygon points='36.0,12.0 42.6,20.0 53.0,19.0 52.0,29.4 60.0,36.0 52.0,42.6 53.0,53.0 42.6,52.0 36.0,60.0 29.4,52.0 19.0,53.0 20.0,42.6 12.0,36.0 20.0,29.4 19.0,19.0 29.4,20.0' fill='%231D4F9E' stroke='%23F3EEE3' stroke-width='1.6'/%3E%3Cpolygon points='36.0,21.4 40.0,26.3 46.3,25.7 45.7,32.0 50.6,36.0 45.7,40.0 46.3,46.3 40.0,45.7 36.0,50.6 32.0,45.7 25.7,46.3 26.3,40.0 21.4,36.0 26.3,32.0 25.7,25.7 32.0,26.3' fill='%232BA3A0' stroke='%23F3EEE3' stroke-width='1.6'/%3E%3Ccircle cx='36' cy='36' r='5' fill='%23F3EEE3'/%3E%3Cpolygon points='0.0,-24.0 6.6,-16.0 17.0,-17.0 16.0,-6.6 24.0,0.0 16.0,6.6 17.0,17.0 6.6,16.0 0.0,24.0 -6.6,16.0 -17.0,17.0 -16.0,6.6 -24.0,0.0 -16.0,-6.6 -17.0,-17.0 -6.6,-16.0' fill='%231D4F9E' stroke='%23F3EEE3' stroke-width='1.6'/%3E%3Cpolygon points='0.0,-14.6 4.0,-9.7 10.3,-10.3 9.7,-4.0 14.6,0.0 9.7,4.0 10.3,10.3 4.0,9.7 0.0,14.6 -4.0,9.7 -10.3,10.3 -9.7,4.0 -14.6,0.0 -9.7,-4.0 -10.3,-10.3 -4.0,-9.7' fill='%232BA3A0' stroke='%23F3EEE3' stroke-width='1.6'/%3E%3Ccircle cx='0' cy='0' r='5' fill='%23F3EEE3'/%3E%3Cpolygon points='72.0,-24.0 78.6,-16.0 89.0,-17.0 88.0,-6.6 96.0,0.0 88.0,6.6 89.0,17.0 78.6,16.0 72.0,24.0 65.4,16.0 55.0,17.0 56.0,6.6 48.0,0.0 56.0,-6.6 55.0,-17.0 65.4,-16.0' fill='%231D4F9E' stroke='%23F3EEE3' stroke-width='1.6'/%3E%3Cpolygon points='72.0,-14.6 76.0,-9.7 82.3,-10.3 81.7,-4.0 86.6,0.0 81.7,4.0 82.3,10.3 76.0,9.7 72.0,14.6 68.0,9.7 61.7,10.3 62.3,4.0 57.4,0.0 62.3,-4.0 61.7,-10.3 68.0,-9.7' fill='%232BA3A0' stroke='%23F3EEE3' stroke-width='1.6'/%3E%3Ccircle cx='72' cy='0' r='5' fill='%23F3EEE3'/%3E%3Cpolygon points='0.0,48.0 6.6,56.0 17.0,55.0 16.0,65.4 24.0,72.0 16.0,78.6 17.0,89.0 6.6,88.0 0.0,96.0 -6.6,88.0 -17.0,89.0 -16.0,78.6 -24.0,72.0 -16.0,65.4 -17.0,55.0 -6.6,56.0' fill='%231D4F9E' stroke='%23F3EEE3' stroke-width='1.6'/%3E%3Cpolygon points='0.0,57.4 4.0,62.3 10.3,61.7 9.7,68.0 14.6,72.0 9.7,76.0 10.3,82.3 4.0,81.7 0.0,86.6 -4.0,81.7 -10.3,82.3 -9.7,76.0 -14.6,72.0 -9.7,68.0 -10.3,61.7 -4.0,62.3' fill='%232BA3A0' stroke='%23F3EEE3' stroke-width='1.6'/%3E%3Ccircle cx='0' cy='72' r='5' fill='%23F3EEE3'/%3E%3Cpolygon points='72.0,48.0 78.6,56.0 89.0,55.0 88.0,65.4 96.0,72.0 88.0,78.6 89.0,89.0 78.6,88.0 72.0,96.0 65.4,88.0 55.0,89.0 56.0,78.6 48.0,72.0 56.0,65.4 55.0,55.0 65.4,56.0' fill='%231D4F9E' stroke='%23F3EEE3' stroke-width='1.6'/%3E%3Cpolygon points='72.0,57.4 76.0,62.3 82.3,61.7 81.7,68.0 86.6,72.0 81.7,76.0 82.3,82.3 76.0,81.7 72.0,86.6 68.0,81.7 61.7,82.3 62.3,76.0 57.4,72.0 62.3,68.0 61.7,61.7 68.0,62.3' fill='%232BA3A0' stroke='%23F3EEE3' stroke-width='1.6'/%3E%3Ccircle cx='72' cy='72' r='5' fill='%23F3EEE3'/%3E%3Crect x='29.5' y='-6.5' width='13' height='13' transform='rotate(45 36 0)' fill='%231E7A55'/%3E%3Crect x='33.5' y='-2.5' width='5' height='5' transform='rotate(45 36 0)' fill='%23D9982B'/%3E%3Crect x='-6.5' y='29.5' width='13' height='13' transform='rotate(45 0 36)' fill='%231E7A55'/%3E%3Crect x='-2.5' y='33.5' width='5' height='5' transform='rotate(45 0 36)' fill='%23D9982B'/%3E%3Crect x='29.5' y='65.5' width='13' height='13' transform='rotate(45 36 72)' fill='%231E7A55'/%3E%3Crect x='33.5' y='69.5' width='5' height='5' transform='rotate(45 36 72)' fill='%23D9982B'/%3E%3Crect x='65.5' y='29.5' width='13' height='13' transform='rotate(45 72 36)' fill='%231E7A55'/%3E%3Crect x='69.5' y='33.5' width='5' height='5' transform='rotate(45 72 36)' fill='%23D9982B'/%3E%3C/svg%3E");
  --zel-her: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Crect width='72' height='72' fill='%23F6EEE6'/%3E%3Cpolygon points='36.0,12.0 42.6,20.0 53.0,19.0 52.0,29.4 60.0,36.0 52.0,42.6 53.0,53.0 42.6,52.0 36.0,60.0 29.4,52.0 19.0,53.0 20.0,42.6 12.0,36.0 20.0,29.4 19.0,19.0 29.4,20.0' fill='%23B9566F' stroke='%23F6EEE6' stroke-width='1.6'/%3E%3Cpolygon points='36.0,21.4 40.0,26.3 46.3,25.7 45.7,32.0 50.6,36.0 45.7,40.0 46.3,46.3 40.0,45.7 36.0,50.6 32.0,45.7 25.7,46.3 26.3,40.0 21.4,36.0 26.3,32.0 25.7,25.7 32.0,26.3' fill='%23E9A3B4' stroke='%23F6EEE6' stroke-width='1.6'/%3E%3Ccircle cx='36' cy='36' r='5' fill='%23F6EEE6'/%3E%3Cpolygon points='0.0,-24.0 6.6,-16.0 17.0,-17.0 16.0,-6.6 24.0,0.0 16.0,6.6 17.0,17.0 6.6,16.0 0.0,24.0 -6.6,16.0 -17.0,17.0 -16.0,6.6 -24.0,0.0 -16.0,-6.6 -17.0,-17.0 -6.6,-16.0' fill='%23B9566F' stroke='%23F6EEE6' stroke-width='1.6'/%3E%3Cpolygon points='0.0,-14.6 4.0,-9.7 10.3,-10.3 9.7,-4.0 14.6,0.0 9.7,4.0 10.3,10.3 4.0,9.7 0.0,14.6 -4.0,9.7 -10.3,10.3 -9.7,4.0 -14.6,0.0 -9.7,-4.0 -10.3,-10.3 -4.0,-9.7' fill='%23E9A3B4' stroke='%23F6EEE6' stroke-width='1.6'/%3E%3Ccircle cx='0' cy='0' r='5' fill='%23F6EEE6'/%3E%3Cpolygon points='72.0,-24.0 78.6,-16.0 89.0,-17.0 88.0,-6.6 96.0,0.0 88.0,6.6 89.0,17.0 78.6,16.0 72.0,24.0 65.4,16.0 55.0,17.0 56.0,6.6 48.0,0.0 56.0,-6.6 55.0,-17.0 65.4,-16.0' fill='%23B9566F' stroke='%23F6EEE6' stroke-width='1.6'/%3E%3Cpolygon points='72.0,-14.6 76.0,-9.7 82.3,-10.3 81.7,-4.0 86.6,0.0 81.7,4.0 82.3,10.3 76.0,9.7 72.0,14.6 68.0,9.7 61.7,10.3 62.3,4.0 57.4,0.0 62.3,-4.0 61.7,-10.3 68.0,-9.7' fill='%23E9A3B4' stroke='%23F6EEE6' stroke-width='1.6'/%3E%3Ccircle cx='72' cy='0' r='5' fill='%23F6EEE6'/%3E%3Cpolygon points='0.0,48.0 6.6,56.0 17.0,55.0 16.0,65.4 24.0,72.0 16.0,78.6 17.0,89.0 6.6,88.0 0.0,96.0 -6.6,88.0 -17.0,89.0 -16.0,78.6 -24.0,72.0 -16.0,65.4 -17.0,55.0 -6.6,56.0' fill='%23B9566F' stroke='%23F6EEE6' stroke-width='1.6'/%3E%3Cpolygon points='0.0,57.4 4.0,62.3 10.3,61.7 9.7,68.0 14.6,72.0 9.7,76.0 10.3,82.3 4.0,81.7 0.0,86.6 -4.0,81.7 -10.3,82.3 -9.7,76.0 -14.6,72.0 -9.7,68.0 -10.3,61.7 -4.0,62.3' fill='%23E9A3B4' stroke='%23F6EEE6' stroke-width='1.6'/%3E%3Ccircle cx='0' cy='72' r='5' fill='%23F6EEE6'/%3E%3Cpolygon points='72.0,48.0 78.6,56.0 89.0,55.0 88.0,65.4 96.0,72.0 88.0,78.6 89.0,89.0 78.6,88.0 72.0,96.0 65.4,88.0 55.0,89.0 56.0,78.6 48.0,72.0 56.0,65.4 55.0,55.0 65.4,56.0' fill='%23B9566F' stroke='%23F6EEE6' stroke-width='1.6'/%3E%3Cpolygon points='72.0,57.4 76.0,62.3 82.3,61.7 81.7,68.0 86.6,72.0 81.7,76.0 82.3,82.3 76.0,81.7 72.0,86.6 68.0,81.7 61.7,82.3 62.3,76.0 57.4,72.0 62.3,68.0 61.7,61.7 68.0,62.3' fill='%23E9A3B4' stroke='%23F6EEE6' stroke-width='1.6'/%3E%3Ccircle cx='72' cy='72' r='5' fill='%23F6EEE6'/%3E%3Crect x='29.5' y='-6.5' width='13' height='13' transform='rotate(45 36 0)' fill='%231E5B44'/%3E%3Crect x='33.5' y='-2.5' width='5' height='5' transform='rotate(45 36 0)' fill='%23D9982B'/%3E%3Crect x='-6.5' y='29.5' width='13' height='13' transform='rotate(45 0 36)' fill='%231E5B44'/%3E%3Crect x='-2.5' y='33.5' width='5' height='5' transform='rotate(45 0 36)' fill='%23D9982B'/%3E%3Crect x='29.5' y='65.5' width='13' height='13' transform='rotate(45 36 72)' fill='%231E5B44'/%3E%3Crect x='33.5' y='69.5' width='5' height='5' transform='rotate(45 36 72)' fill='%23D9982B'/%3E%3Crect x='65.5' y='29.5' width='13' height='13' transform='rotate(45 72 36)' fill='%231E5B44'/%3E%3Crect x='69.5' y='33.5' width='5' height='5' transform='rotate(45 72 36)' fill='%23D9982B'/%3E%3C/svg%3E");
  --zel-him: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Crect width='72' height='72' fill='%23F1EEE4'/%3E%3Cpolygon points='36.0,12.0 42.6,20.0 53.0,19.0 52.0,29.4 60.0,36.0 52.0,42.6 53.0,53.0 42.6,52.0 36.0,60.0 29.4,52.0 19.0,53.0 20.0,42.6 12.0,36.0 20.0,29.4 19.0,19.0 29.4,20.0' fill='%231E5B44' stroke='%23F1EEE4' stroke-width='1.6'/%3E%3Cpolygon points='36.0,21.4 40.0,26.3 46.3,25.7 45.7,32.0 50.6,36.0 45.7,40.0 46.3,46.3 40.0,45.7 36.0,50.6 32.0,45.7 25.7,46.3 26.3,40.0 21.4,36.0 26.3,32.0 25.7,25.7 32.0,26.3' fill='%232BA3A0' stroke='%23F1EEE4' stroke-width='1.6'/%3E%3Ccircle cx='36' cy='36' r='5' fill='%23F1EEE4'/%3E%3Cpolygon points='0.0,-24.0 6.6,-16.0 17.0,-17.0 16.0,-6.6 24.0,0.0 16.0,6.6 17.0,17.0 6.6,16.0 0.0,24.0 -6.6,16.0 -17.0,17.0 -16.0,6.6 -24.0,0.0 -16.0,-6.6 -17.0,-17.0 -6.6,-16.0' fill='%231E5B44' stroke='%23F1EEE4' stroke-width='1.6'/%3E%3Cpolygon points='0.0,-14.6 4.0,-9.7 10.3,-10.3 9.7,-4.0 14.6,0.0 9.7,4.0 10.3,10.3 4.0,9.7 0.0,14.6 -4.0,9.7 -10.3,10.3 -9.7,4.0 -14.6,0.0 -9.7,-4.0 -10.3,-10.3 -4.0,-9.7' fill='%232BA3A0' stroke='%23F1EEE4' stroke-width='1.6'/%3E%3Ccircle cx='0' cy='0' r='5' fill='%23F1EEE4'/%3E%3Cpolygon points='72.0,-24.0 78.6,-16.0 89.0,-17.0 88.0,-6.6 96.0,0.0 88.0,6.6 89.0,17.0 78.6,16.0 72.0,24.0 65.4,16.0 55.0,17.0 56.0,6.6 48.0,0.0 56.0,-6.6 55.0,-17.0 65.4,-16.0' fill='%231E5B44' stroke='%23F1EEE4' stroke-width='1.6'/%3E%3Cpolygon points='72.0,-14.6 76.0,-9.7 82.3,-10.3 81.7,-4.0 86.6,0.0 81.7,4.0 82.3,10.3 76.0,9.7 72.0,14.6 68.0,9.7 61.7,10.3 62.3,4.0 57.4,0.0 62.3,-4.0 61.7,-10.3 68.0,-9.7' fill='%232BA3A0' stroke='%23F1EEE4' stroke-width='1.6'/%3E%3Ccircle cx='72' cy='0' r='5' fill='%23F1EEE4'/%3E%3Cpolygon points='0.0,48.0 6.6,56.0 17.0,55.0 16.0,65.4 24.0,72.0 16.0,78.6 17.0,89.0 6.6,88.0 0.0,96.0 -6.6,88.0 -17.0,89.0 -16.0,78.6 -24.0,72.0 -16.0,65.4 -17.0,55.0 -6.6,56.0' fill='%231E5B44' stroke='%23F1EEE4' stroke-width='1.6'/%3E%3Cpolygon points='0.0,57.4 4.0,62.3 10.3,61.7 9.7,68.0 14.6,72.0 9.7,76.0 10.3,82.3 4.0,81.7 0.0,86.6 -4.0,81.7 -10.3,82.3 -9.7,76.0 -14.6,72.0 -9.7,68.0 -10.3,61.7 -4.0,62.3' fill='%232BA3A0' stroke='%23F1EEE4' stroke-width='1.6'/%3E%3Ccircle cx='0' cy='72' r='5' fill='%23F1EEE4'/%3E%3Cpolygon points='72.0,48.0 78.6,56.0 89.0,55.0 88.0,65.4 96.0,72.0 88.0,78.6 89.0,89.0 78.6,88.0 72.0,96.0 65.4,88.0 55.0,89.0 56.0,78.6 48.0,72.0 56.0,65.4 55.0,55.0 65.4,56.0' fill='%231E5B44' stroke='%23F1EEE4' stroke-width='1.6'/%3E%3Cpolygon points='72.0,57.4 76.0,62.3 82.3,61.7 81.7,68.0 86.6,72.0 81.7,76.0 82.3,82.3 76.0,81.7 72.0,86.6 68.0,81.7 61.7,82.3 62.3,76.0 57.4,72.0 62.3,68.0 61.7,61.7 68.0,62.3' fill='%232BA3A0' stroke='%23F1EEE4' stroke-width='1.6'/%3E%3Ccircle cx='72' cy='72' r='5' fill='%23F1EEE4'/%3E%3Crect x='29.5' y='-6.5' width='13' height='13' transform='rotate(45 36 0)' fill='%231D4F9E'/%3E%3Crect x='33.5' y='-2.5' width='5' height='5' transform='rotate(45 36 0)' fill='%23D9982B'/%3E%3Crect x='-6.5' y='29.5' width='13' height='13' transform='rotate(45 0 36)' fill='%231D4F9E'/%3E%3Crect x='-2.5' y='33.5' width='5' height='5' transform='rotate(45 0 36)' fill='%23D9982B'/%3E%3Crect x='29.5' y='65.5' width='13' height='13' transform='rotate(45 36 72)' fill='%231D4F9E'/%3E%3Crect x='33.5' y='69.5' width='5' height='5' transform='rotate(45 36 72)' fill='%23D9982B'/%3E%3Crect x='65.5' y='29.5' width='13' height='13' transform='rotate(45 72 36)' fill='%231D4F9E'/%3E%3Crect x='69.5' y='33.5' width='5' height='5' transform='rotate(45 72 36)' fill='%23D9982B'/%3E%3C/svg%3E");
  --zel-wali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Crect width='72' height='72' fill='%23F5EEDF'/%3E%3Cpolygon points='36.0,12.0 42.6,20.0 53.0,19.0 52.0,29.4 60.0,36.0 52.0,42.6 53.0,53.0 42.6,52.0 36.0,60.0 29.4,52.0 19.0,53.0 20.0,42.6 12.0,36.0 20.0,29.4 19.0,19.0 29.4,20.0' fill='%23A97A2C' stroke='%23F5EEDF' stroke-width='1.6'/%3E%3Cpolygon points='36.0,21.4 40.0,26.3 46.3,25.7 45.7,32.0 50.6,36.0 45.7,40.0 46.3,46.3 40.0,45.7 36.0,50.6 32.0,45.7 25.7,46.3 26.3,40.0 21.4,36.0 26.3,32.0 25.7,25.7 32.0,26.3' fill='%23E2C17E' stroke='%23F5EEDF' stroke-width='1.6'/%3E%3Ccircle cx='36' cy='36' r='5' fill='%23F5EEDF'/%3E%3Cpolygon points='0.0,-24.0 6.6,-16.0 17.0,-17.0 16.0,-6.6 24.0,0.0 16.0,6.6 17.0,17.0 6.6,16.0 0.0,24.0 -6.6,16.0 -17.0,17.0 -16.0,6.6 -24.0,0.0 -16.0,-6.6 -17.0,-17.0 -6.6,-16.0' fill='%23A97A2C' stroke='%23F5EEDF' stroke-width='1.6'/%3E%3Cpolygon points='0.0,-14.6 4.0,-9.7 10.3,-10.3 9.7,-4.0 14.6,0.0 9.7,4.0 10.3,10.3 4.0,9.7 0.0,14.6 -4.0,9.7 -10.3,10.3 -9.7,4.0 -14.6,0.0 -9.7,-4.0 -10.3,-10.3 -4.0,-9.7' fill='%23E2C17E' stroke='%23F5EEDF' stroke-width='1.6'/%3E%3Ccircle cx='0' cy='0' r='5' fill='%23F5EEDF'/%3E%3Cpolygon points='72.0,-24.0 78.6,-16.0 89.0,-17.0 88.0,-6.6 96.0,0.0 88.0,6.6 89.0,17.0 78.6,16.0 72.0,24.0 65.4,16.0 55.0,17.0 56.0,6.6 48.0,0.0 56.0,-6.6 55.0,-17.0 65.4,-16.0' fill='%23A97A2C' stroke='%23F5EEDF' stroke-width='1.6'/%3E%3Cpolygon points='72.0,-14.6 76.0,-9.7 82.3,-10.3 81.7,-4.0 86.6,0.0 81.7,4.0 82.3,10.3 76.0,9.7 72.0,14.6 68.0,9.7 61.7,10.3 62.3,4.0 57.4,0.0 62.3,-4.0 61.7,-10.3 68.0,-9.7' fill='%23E2C17E' stroke='%23F5EEDF' stroke-width='1.6'/%3E%3Ccircle cx='72' cy='0' r='5' fill='%23F5EEDF'/%3E%3Cpolygon points='0.0,48.0 6.6,56.0 17.0,55.0 16.0,65.4 24.0,72.0 16.0,78.6 17.0,89.0 6.6,88.0 0.0,96.0 -6.6,88.0 -17.0,89.0 -16.0,78.6 -24.0,72.0 -16.0,65.4 -17.0,55.0 -6.6,56.0' fill='%23A97A2C' stroke='%23F5EEDF' stroke-width='1.6'/%3E%3Cpolygon points='0.0,57.4 4.0,62.3 10.3,61.7 9.7,68.0 14.6,72.0 9.7,76.0 10.3,82.3 4.0,81.7 0.0,86.6 -4.0,81.7 -10.3,82.3 -9.7,76.0 -14.6,72.0 -9.7,68.0 -10.3,61.7 -4.0,62.3' fill='%23E2C17E' stroke='%23F5EEDF' stroke-width='1.6'/%3E%3Ccircle cx='0' cy='72' r='5' fill='%23F5EEDF'/%3E%3Cpolygon points='72.0,48.0 78.6,56.0 89.0,55.0 88.0,65.4 96.0,72.0 88.0,78.6 89.0,89.0 78.6,88.0 72.0,96.0 65.4,88.0 55.0,89.0 56.0,78.6 48.0,72.0 56.0,65.4 55.0,55.0 65.4,56.0' fill='%23A97A2C' stroke='%23F5EEDF' stroke-width='1.6'/%3E%3Cpolygon points='72.0,57.4 76.0,62.3 82.3,61.7 81.7,68.0 86.6,72.0 81.7,76.0 82.3,82.3 76.0,81.7 72.0,86.6 68.0,81.7 61.7,82.3 62.3,76.0 57.4,72.0 62.3,68.0 61.7,61.7 68.0,62.3' fill='%23E2C17E' stroke='%23F5EEDF' stroke-width='1.6'/%3E%3Ccircle cx='72' cy='72' r='5' fill='%23F5EEDF'/%3E%3Crect x='29.5' y='-6.5' width='13' height='13' transform='rotate(45 36 0)' fill='%231E5B44'/%3E%3Crect x='33.5' y='-2.5' width='5' height='5' transform='rotate(45 36 0)' fill='%231D4F9E'/%3E%3Crect x='-6.5' y='29.5' width='13' height='13' transform='rotate(45 0 36)' fill='%231E5B44'/%3E%3Crect x='-2.5' y='33.5' width='5' height='5' transform='rotate(45 0 36)' fill='%231D4F9E'/%3E%3Crect x='29.5' y='65.5' width='13' height='13' transform='rotate(45 36 72)' fill='%231E5B44'/%3E%3Crect x='33.5' y='69.5' width='5' height='5' transform='rotate(45 36 72)' fill='%231D4F9E'/%3E%3Crect x='65.5' y='29.5' width='13' height='13' transform='rotate(45 72 36)' fill='%231E5B44'/%3E%3Crect x='69.5' y='33.5' width='5' height='5' transform='rotate(45 72 36)' fill='%231D4F9E'/%3E%3C/svg%3E");
  --ivory: #F8F2E7;
  --ivory-2: #F1E8D8;
  --paper: #FFFCF6;
  --ink: #15241D;
  --muted: #36423C;
  --emerald: #1E5B44;
  --emerald-2: #2A7556;
  --deep: #0F2E23;
  --deep-2: #143B2D;
  --gold: #C29548;
  --gold-hi: #E8C987;
  --gold-ink: #7A581C;
  --rose: #C98670;
  --hair: rgba(21, 36, 29, .14);
  --hair-gold: rgba(122, 88, 28, .3);
  --shadow: 0 1px 2px rgba(60, 40, 10, .05), 0 30px 60px -34px rgba(60, 40, 10, .35);
  --f-brand: "Cinzel", Georgia, serif;
  --f-serif: "Cormorant Garamond", Georgia, serif;
  --f-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px;
  --gut: clamp(20px, 4.4vw, 56px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --nav: 74px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav) + 12px); }
html.rm { scroll-behavior: auto; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 18px/1.7 var(--f-sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--deep); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 8px; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gut)); margin-inline: auto; }
.sec { padding-block: clamp(90px, 12vw, 160px); }
.center { text-align: center; }

/* type */
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font: 700 13px/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.eyebrow--light { color: var(--gold-hi); }
.h2 { font: 500 clamp(40px, 5.2vw, 70px)/1.02 var(--f-serif); letter-spacing: -.015em; text-wrap: balance; }
.h2--xl { font-size: clamp(46px, 6.4vw, 92px); line-height: .98; }
.h2 em, .hero__title em, .arrive__title em, .close__title em { font-style: italic; color: var(--emerald); }
.h2--light { color: #F7F1E4; }
.h2--light em { color: var(--gold-hi); }
.k { display: inline-block; width: 22px; height: 4px; border-radius: 4px; vertical-align: middle; margin-right: 8px; }
.k--him { background: var(--emerald-2); }
.k--her { background: var(--rose); }
.k--wali { background: var(--gold); }

/* buttons */
.btn { --h: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 30px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; font: 700 16px/1 var(--f-sans); letter-spacing: .01em; transition: transform .3s var(--ease), background .3s, box-shadow .3s, color .3s; }
.btn--sm { --h: 46px; padding: 0 22px; font-size: 15px; }
.btn--ink { background: var(--deep); color: #FBF6EC; box-shadow: 0 14px 30px -16px rgba(15, 46, 35, .8); }
.btn--ink:hover { background: var(--emerald); transform: translateY(-2px); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(21, 36, 29, .3); }
.btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-2px); }
.btn--gold { background: linear-gradient(180deg, #F0D394, #CFA556); color: #1D1608; box-shadow: 0 14px 30px -14px rgba(194, 149, 72, .8); }
.btn--gold:hover { transform: translateY(-2px); }
.btn--line-light { background: transparent; color: #FBF6EC; box-shadow: inset 0 0 0 1.5px rgba(251, 246, 236, .5); }
.btn--line-light:hover { box-shadow: inset 0 0 0 1.5px #FBF6EC; transform: translateY(-2px); }
.link-quiet { text-decoration: none; font-weight: 700; font-size: 15.5px; padding: 10px 6px; }
.link-quiet:hover { color: var(--emerald); }
.link { display: inline-block; margin-top: 24px; font-weight: 800; color: var(--gold-ink); text-decoration: none; }
.link:hover { text-decoration: underline; text-underline-offset: 5px; }

/* nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 60; transition: background .3s, box-shadow .3s; }
.nav.is-scrolled { background: rgba(248, 242, 231, .94); box-shadow: 0 1px 0 var(--hair); }
.nav__inner { width: min(1360px, 100% - 2 * var(--gut)); margin-inline: auto; height: var(--nav); display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark { width: 30px; height: 47px; }
.brand__word { font: 700 17px/1 var(--f-brand); letter-spacing: .07em; white-space: nowrap; }
.nav__links { display: flex; gap: 30px; margin-left: auto; }
.nav__links a { text-decoration: none; font-weight: 700; font-size: 15.5px; padding: 8px 0; position: relative; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta { display: flex; align-items: center; gap: 14px; }
.nav__toggle { display: none; margin-left: auto; width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer; position: relative; }
.nav__toggle span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); }
.nav__toggle span:first-child { top: 19px; } .nav__toggle span:last-child { top: 28px; }
.nav__toggle[aria-expanded="true"] span:first-child { top: 23px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { top: 23px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 55; padding: calc(var(--nav) + 24px) var(--gut) 32px; background: var(--ivory); display: flex; flex-direction: column; justify-content: space-between; }
.menu[hidden] { display: none; }
.menu nav { display: grid; }
.menu nav a { font: 500 36px/1.2 var(--f-serif); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.menu__cta { display: grid; gap: 12px; }
body.menu-open { overflow: hidden; }
body.menu-open .nav { background: var(--ivory); }
@media (max-width: 1060px) { .nav__links, .nav__cta { display: none; } .nav__toggle { display: block; } }

/* =====================================================================
   THE STORY
   ===================================================================== */
.story { position: relative; background: radial-gradient(120% 80% at 75% 20%, #FFF8EC, var(--ivory) 55%); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; pointer-events: none; }
.stage__sun { position: absolute; right: 8%; top: 12%; width: 46vmax; height: 46vmax; border-radius: 50%; background: radial-gradient(circle, rgba(255, 228, 180, .55), rgba(255, 228, 180, 0) 65%); }
.stage__still, .stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage__still { object-fit: cover; object-position: 70% 50%; transition: opacity .8s; }
.stage__canvas { opacity: 0; transition: opacity 1s; }
.gl-ready .stage__canvas { opacity: 1; }
.gl-ready .stage__still { opacity: 0; }
.flow { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; width: min(1360px, 100% - 2 * var(--gut)); margin-inline: auto; }

.hero { min-height: 100vh; min-height: 100svh; max-width: 660px; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav) + 30px) 0 70px; }
.hero__card, .walk__card, .step__card, .arrive__card { background: rgba(255, 252, 246, .8); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); box-shadow: var(--shadow), inset 0 0 0 1px var(--hair-gold); border-radius: 4px; }
.hero__card { padding: 40px 40px 34px; }
.hero__place { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font: 700 13px/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.hero__place span { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald-2); box-shadow: 0 0 0 4px rgba(42, 117, 86, .18); }
.hero__title { font: 500 clamp(54px, 6.4vw, 100px)/.94 var(--f-serif); letter-spacing: -.025em; }
.hero__title em { display: block; }
.hero__lede { margin-top: 28px; max-width: 50ch; font-size: clamp(18px, 1.45vw, 20px); line-height: 1.7; color: var(--muted); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero__facts { display: flex; gap: 34px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--hair); }
.hero__facts dt { font: 700 12px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 8px; }
.hero__facts dd { font: 600 22px/1.15 var(--f-serif); }
.hero__key { display: none; }

.walk { padding-bottom: 6vh; }
.walk__head { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; }
.walk__card { display: flex; flex-direction: column; width: min(560px, 100%); padding: 38px 36px 36px; border-radius: 4px; }
.walk__intro { margin-top: 20px; font-size: 19px; color: var(--muted); }
.walk__skip { align-self: flex-start; margin-top: 26px; display: inline-flex; gap: 8px; padding: 12px 20px; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 15px; color: var(--deep); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair-gold); }
.walk__skip:hover { background: #fff; }
.step { min-height: 92vh; display: flex; align-items: center; }
.step__card { width: min(460px, 100%); padding: 34px 34px 32px; transition: opacity .6s var(--ease), transform .7s var(--ease); }
.step__n { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; font: 500 italic 46px/1 var(--f-serif); color: var(--gold); }
.step__n span { font: 700 12px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); font-style: normal; }
.step h3 { font: 600 clamp(30px, 2.6vw, 38px)/1.08 var(--f-serif); margin-bottom: 12px; }
.step__card p:last-child { color: var(--muted); }
.js .step:not(.is-active) .step__card { opacity: .35; transform: translateY(14px); }
.arrive { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.arrive__card { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; width: min(540px, 100%); padding: 38px 36px 36px; }
.arrive__title { font: 500 clamp(40px, 4.6vw, 64px)/1.02 var(--f-serif); text-wrap: balance; }

.walkbar { position: fixed; z-index: 50; left: max(var(--gut), calc((100vw - 1360px) / 2)); bottom: 26px; display: flex; align-items: center; gap: 6px; padding: 7px 7px 7px 10px; border-radius: 999px; background: rgba(255, 252, 246, .96); box-shadow: var(--shadow), inset 0 0 0 1px var(--hair-gold); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .35s, transform .45s var(--ease); }
.walkbar.is-on { opacity: 1; transform: none; pointer-events: auto; }
.walkbar ol { display: flex; gap: 4px; }
.walkbar button { min-width: 40px; height: 40px; padding: 0 8px; border-radius: 999px; border: 0; cursor: pointer; background: transparent; color: var(--muted); font: 500 italic 19px/1 var(--f-serif); transition: background .3s, color .3s; }
.walkbar button.is-done { color: var(--gold-ink); }
.walkbar button.is-current { background: var(--deep); color: #FBF6EC; }
.walkbar__skip { margin-left: 4px; padding: 11px 18px; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 14.5px; color: var(--deep); background: var(--ivory-2); }
.no-js .step__card, .rm .step__card { opacity: 1 !important; transform: none !important; }

@media (max-width: 900px) {
  .stage__still { object-position: 60% 20%; }
  .hero { min-height: 100svh; justify-content: flex-end; padding: 30svh 0 16px; max-width: 620px; }
  .hero__card { padding: 22px 20px 20px; }
  .hero__place { margin-bottom: 14px; }
  .hero__title { font-size: clamp(44px, 12vw, 68px); }
  .hero__lede { font-size: 16px; line-height: 1.55; margin-top: 12px; }
  .hero__cta { margin-top: 20px; gap: 10px; }
  .hero__cta .btn { --h: 52px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__facts { gap: 10px 16px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; }
  .hero__facts dt { font-size: 11px; margin-bottom: 5px; }
  .hero__facts dd { font-size: 16.5px; white-space: nowrap; }
  .hero__cta .btn { --h: 48px; }
  .walk__head { min-height: 100svh; justify-content: flex-start; padding: 50svh 0 0; }
  .walk__card { padding: 26px 22px; }
  .step { min-height: 100svh; align-items: flex-start; padding: 50svh 0 0; }
  .step__card { padding: 24px 22px; }
  .arrive__card { padding: 26px 22px; }
  .step__n { font-size: 38px; }
  .arrive { min-height: 100svh; justify-content: flex-start; padding: 50svh 0 40px; }
  .walkbar { left: 50%; top: calc(var(--nav) + 10px); bottom: auto; transform: translate(-50%, -12px); }
  .walkbar.is-on { transform: translate(-50%, 0); }
  .walkbar button { min-width: 36px; height: 36px; font-size: 17px; }
}

/* =====================================================================
   PROMISES
   ===================================================================== */
.promises { border-block: 1px solid var(--hair); background: var(--ivory); }
.promises ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.promises li { display: flex; align-items: baseline; gap: 14px; padding: 30px 22px; font: 500 24px/1.2 var(--f-serif); border-left: 1px solid var(--hair); }
.promises li:first-child { border-left: 0; padding-left: 0; }
.promises span { font: 700 12px/1 var(--f-sans); letter-spacing: .14em; color: var(--gold-ink); }
@media (max-width: 900px) { .promises ul { grid-template-columns: 1fr 1fr; } .promises li { padding: 20px 14px; font-size: 20px; border-left: 0; border-top: 1px solid var(--hair); } .promises li:nth-child(-n+2) { border-top: 0; } .promises li:first-child { padding-left: 14px; } }

/* =====================================================================
   WHY
   ===================================================================== */
/* the noise outside the walls … */
.vs { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(18px, 2.6vw, 34px); align-items: stretch; }
.vs__title { display: flex; align-items: center; gap: 12px; font: 700 13px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.vs__mark { width: 16px; height: 25px; }
.noise { position: relative; min-height: 480px; padding: clamp(26px, 3vw, 40px); border-radius: 4px; overflow: hidden; background: radial-gradient(circle at 1px 1px, rgba(21, 36, 29, .13) 1px, transparent 1.5px) 0 0 / 18px 18px, var(--ivory-2); box-shadow: inset 0 0 0 1px var(--hair); }
.noise__chips { position: absolute; inset: 76px 0 0; }
.chip { position: absolute; display: flex; align-items: center; gap: 12px; max-width: 78%; padding: 14px 22px 14px 14px; border-radius: 16px; background: #FFFEFB; color: #3F4741; font-size: 16.5px; font-weight: 600; line-height: 1.3; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 18px 34px -20px rgba(40, 30, 10, .45); transform: rotate(var(--r)); animation: drift var(--d, 7s) ease-in-out infinite alternate; }
.chip__ic { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: #F1E3DD; fill: none; stroke: #9A4E3C; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chip__x { position: absolute; right: -9px; top: -9px; width: 24px; height: 24px; border-radius: 50%; background: #B05A44; box-shadow: 0 0 0 3px var(--ivory-2); }
.chip__x::before, .chip__x::after { content: ""; position: absolute; left: 6px; right: 6px; top: 11px; height: 2px; border-radius: 2px; background: #fff; transform: rotate(45deg); }
.chip__x::after { transform: rotate(-45deg); }
.chip--1 { left: 6%; top: 3%; --r: -6deg; --d: 6s; }
.chip--2 { left: 28%; top: 22%; --r: 4deg; --d: 8s; }
.chip--3 { left: 4%; top: 43%; --r: 2.5deg; --d: 7s; }
.chip--4 { left: 38%; top: 62%; --r: -4deg; --d: 9s; }
.chip--5 { left: 7%; top: 80%; --r: -1.5deg; --d: 6.5s; }
@keyframes drift { from { transform: translate(0, 0) rotate(var(--r)); } to { transform: translate(10px, -8px) rotate(calc(var(--r) * -0.6)); } }
/* … and the walled garden inside */
.walled { padding: 14px; border-radius: 4px; background: var(--zel-main) 0 0 / 54px 54px; box-shadow: var(--shadow); }
.walled__in { height: 100%; padding: clamp(28px, 3.4vw, 46px); border-radius: 2px; background: radial-gradient(120% 120% at 100% 0%, var(--deep-2), var(--deep) 65%); color: #F7F1E4; box-shadow: 0 0 0 2px rgba(232, 201, 135, .5); }
.walled .vs__title { color: var(--gold-hi); margin-bottom: 12px; }
.calm li { position: relative; padding: 18px 0 18px 40px; border-top: 1px solid rgba(255, 255, 255, .12); font: 600 clamp(21px, 1.9vw, 26px)/1.25 var(--f-serif); }
.calm li::before { content: ""; position: absolute; left: 0; top: 22px; width: 20px; height: 20px; background: var(--gold-hi); clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%); }
@media (max-width: 860px) {
  .vs { grid-template-columns: 1fr; }
  .noise { min-height: 0; }
  .noise__chips { position: static; display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
  .chip { position: relative; left: auto; top: auto; max-width: 92%; }
  .chip:nth-child(even) { align-self: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .chip { animation: none; } }
.why__head { max-width: 900px; margin-bottom: clamp(50px, 6vw, 80px); }

/* =====================================================================
   TRY IT (emerald band)
   ===================================================================== */
.try { position: relative; overflow: hidden; color: #F7F1E4; padding-block: clamp(90px, 11vw, 150px); background: radial-gradient(60% 80% at 75% 50%, #1C5440, var(--deep) 70%); }
.try__grid { display: grid; grid-template-columns: 1fr minmax(320px, 1fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.try .h2 { font-size: clamp(48px, 6vw, 92px); }
.try__prompt { margin-top: clamp(36px, 4.5vw, 56px); min-height: 2.6em; font: 500 italic clamp(24px, 2.4vw, 30px)/1.3 var(--f-serif); color: var(--gold-hi); }
.try__hint { margin-top: 10px; font-size: 15.5px; color: #B9C6BE; }
.try__stage { position: relative; display: grid; place-items: center; padding: 40px 0; }
.try__halo { position: absolute; width: min(620px, 120%); fill: none; stroke: rgba(232, 201, 135, .22); stroke-width: .5; animation: halo 60s linear infinite; }
.try__halo--2 { width: min(460px, 92%); stroke: rgba(232, 201, 135, .32); animation-direction: reverse; animation-duration: 80s; }
@keyframes halo { to { transform: rotate(360deg); } }
.phone { position: relative; width: 330px; max-width: 100%; padding: 12px; border-radius: 52px; background: linear-gradient(145deg, #2B3A33, #0A1712); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 70px 120px -50px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .4); }
.phone__island { position: absolute; z-index: 2; left: 50%; top: 22px; width: 96px; height: 28px; margin-left: -48px; border-radius: 20px; background: #050B08; }
.phone__screen { position: relative; display: flex; flex-direction: column; min-height: 600px; padding: 54px 18px 20px; border-radius: 41px; overflow: hidden; color: var(--ink); background: linear-gradient(180deg, #FBF6EC, var(--ivory)); }
.phone__bar { position: absolute; left: 26px; right: 26px; top: 20px; display: flex; justify-content: space-between; font: 700 13px/1 var(--f-sans); }
.phone__bar b { font: 600 11px/1 var(--f-brand); letter-spacing: .08em; color: var(--emerald); }
.deck { position: relative; margin-top: 10px; }
.deck__ghost { position: absolute; inset: 10px 8px -10px; border-radius: 24px; background: #fff; box-shadow: 0 10px 30px -18px rgba(40, 30, 10, .4); transform: rotate(4deg); transition: opacity .6s, transform .6s var(--ease); }
.deck__ghost--2 { inset: 20px 16px -20px; transform: rotate(-5deg); opacity: .7; }
.pcard { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 22px 28px; border-radius: 24px; background: #fff; text-align: center; cursor: grab; touch-action: pan-y; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 24px 40px -24px rgba(40, 30, 10, .45); transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.pcard.is-dragging { transition: none; cursor: grabbing; }
.pcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.pcard__seal { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #2A7556, var(--deep)); box-shadow: 0 0 0 6px #F5EBD5, 0 0 0 7px var(--hair-gold); }
.pcard__seal svg { width: 60%; fill: none; stroke: var(--gold-hi); stroke-width: 2.5; }
.pcard__tag { margin-top: 14px; font: 600 28px/1.1 var(--f-serif); }
.pcard__meta { font-size: 15px; color: var(--muted); }
.pcard__bar { width: 70%; height: 9px; border-radius: 6px; background: var(--ivory-2); }
.pcard__bar--s { width: 46%; }
.pcard__stamp { position: absolute; z-index: 2; top: 26px; left: 50%; padding: 6px 16px; border: 3px solid #B05A44; border-radius: 8px; font: 800 22px/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: #B05A44; background: rgba(255, 255, 255, .85); opacity: 0; transform: translateX(-50%) rotate(-14deg) scale(1.6); transition: opacity .2s, transform .35s cubic-bezier(.2, 1.6, .4, 1); pointer-events: none; }
.pcard.is-stamped .pcard__stamp { opacity: 1; transform: translateX(-50%) rotate(-14deg) scale(1); }
.pflow { display: grid; gap: 10px; max-height: 0; overflow: hidden; transition: max-height .8s var(--ease), margin .6s; }
.pflow li { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; background: #fff; font-weight: 700; font-size: 15px; box-shadow: inset 0 0 0 1px var(--hair-gold); opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease); }
.pflow span { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--deep); color: var(--gold-hi); font: 600 italic 16px/1 var(--f-serif); }
.try.is-refused .pcard { padding: 16px; flex-direction: row; text-align: left; gap: 14px; }
.try.is-refused .pcard__seal { flex: none; width: 54px; height: 54px; box-shadow: 0 0 0 3px #F5EBD5; }
.try.is-refused .pcard__tag { margin: 0; font-size: 22px; }
.try.is-refused .pcard__bar, .try.is-refused .pcard__meta, .try.is-refused .deck__ghost { display: none; }
.try.is-refused .pflow { max-height: 340px; margin-top: 16px; }
.try.is-refused .pflow li { opacity: 1; transform: none; }
.try.is-refused .pflow li:nth-child(2) { transition-delay: .15s; }
.try.is-refused .pflow li:nth-child(3) { transition-delay: .3s; }
.try.is-refused .pflow li:nth-child(4) { transition-delay: .45s; }
.phone__btns { margin-top: auto; padding-top: 22px; display: flex; justify-content: center; gap: 22px; }
.phone__btns button { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; background: #fff; color: var(--ink); font-size: 22px; box-shadow: 0 10px 22px -12px rgba(40, 30, 10, .5), inset 0 0 0 1px var(--hair); transition: transform .25s var(--ease); }
.phone__btns button:hover { transform: translateY(-2px); }
@media (max-width: 860px) { .try__grid { grid-template-columns: 1fr; text-align: center; } .try .eyebrow { justify-content: center; } .phone__screen { min-height: 560px; } }
@media (prefers-reduced-motion: reduce) { .try__halo { animation: none; } }

/* =====================================================================
   ROLES
   ===================================================================== */
.roles .h2 { max-width: 900px; }
/* choose your door */
.roles__ui { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.rtabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.rtab { --c: #A97A2C; --zel: var(--zel-wali); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--muted); }
.rtab--her { --c: #B9566F; --zel: var(--zel-her); } .rtab--him { --c: var(--emerald); --zel: var(--zel-him); } .rpanel--her { --c: #B9566F; } .rpanel--him { --c: var(--emerald); } .rpanel--wali { --c: #A97A2C; }
.door__arch { position: relative; display: block; width: 100%; aspect-ratio: 10 / 13; border-radius: 4px; overflow: hidden; background: var(--zel) 0 0 / 46px 46px; box-shadow: var(--shadow); filter: saturate(.25) brightness(1.04); opacity: .72; transition: filter .5s, opacity .5s, transform .5s var(--ease), box-shadow .5s, background-position 1.6s var(--ease); }
.door__ring, .door__open { position: absolute; display: block; clip-path: polygon(0.0% 100.0%, 0.0% 46.0%, 0.4% 40.1%, 1.7% 34.7%, 3.7% 29.7%, 6.4% 25.2%, 9.7% 21.1%, 13.4% 17.4%, 17.5% 14.0%, 21.9% 11.1%, 26.6% 8.4%, 31.3% 6.1%, 36.2% 4.2%, 40.9% 2.5%, 45.6% 1.1%, 50.0% 0.0%, 54.4% 1.1%, 59.1% 2.5%, 63.8% 4.2%, 68.7% 6.1%, 73.4% 8.4%, 78.1% 11.1%, 82.5% 14.0%, 86.6% 17.4%, 90.3% 21.1%, 93.6% 25.2%, 96.3% 29.7%, 98.3% 34.7%, 99.6% 40.1%, 100.0% 46.0%, 100.0% 100.0%); }
.door__ring { left: 13%; right: 13%; top: 7%; bottom: 0; background: var(--c); }
.door__open { left: 19%; right: 19%; top: 12%; bottom: 0; background: linear-gradient(180deg, #FBF3E2, var(--paper) 70%); }
.door__glow { position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 100%, rgba(255, 210, 130, .7), transparent 70%); opacity: 0; transition: opacity .6s; }
.rtab__val { position: absolute; left: 0; right: 0; bottom: 12%; text-align: center; font: 500 clamp(26px, 3vw, 46px)/1 var(--f-serif); letter-spacing: -.02em; color: var(--c); }
.rtab__who { font: 700 13px/1.2 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; text-align: center; transition: color .3s; }
.rtab:hover .door__arch { filter: saturate(.7); opacity: .9; }
.rtab[aria-selected="true"] .door__arch { filter: none; opacity: 1; transform: translateY(-8px); box-shadow: 0 1px 2px rgba(60, 40, 10, .05), 0 34px 60px -30px rgba(60, 40, 10, .55); background-position: 23px -23px; }
.rtab[aria-selected="true"] .door__glow { opacity: 1; }
.rtab[aria-selected="true"] .rtab__who { color: var(--c); }
.rtab:focus-visible { outline: none; } .rtab:focus-visible .door__arch { outline: 2px solid var(--c); outline-offset: 4px; }
.rpanel { padding: clamp(24px, 2.8vw, 36px); border-radius: 4px; background: var(--paper); box-shadow: var(--shadow), inset 0 3px 0 var(--c); }
.js .rpanel:not(.is-open) { display: none; }
.js .rpanel.is-open { animation: rise .5s var(--ease); }
.no-js .rpanel + .rpanel { margin-top: 20px; }
.rpanel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 16px; }
.rpanel__who { font: 600 clamp(28px, 2.6vw, 36px)/1.1 var(--f-serif); }
.rpanel__price { font: 700 12.5px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); }
.rpanel__price b { font: 600 22px/1 var(--f-serif); letter-spacing: 0; text-transform: none; color: var(--c); }
.rpanel .list li { font-size: 17.5px; padding: 15px 0 15px 30px; }
.rpanel .list li::before { top: 21px; width: 14px; height: 14px; background: var(--c); }
.rpanel .note { margin-top: 20px; }
@media (max-width: 900px) { .roles__ui { grid-template-columns: 1fr; } .rtab { gap: 10px; } .rtab__who { font-size: 11px; letter-spacing: .08em; } }
.list li { position: relative; padding: 18px 0 18px 36px; border-top: 1px solid var(--hair); font-size: 18.5px; }
.list li:last-child { border-bottom: 1px solid var(--hair); }
.list li::before { content: ""; position: absolute; left: 2px; top: 27px; width: 16px; height: 16px; background: var(--gold); clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%); }
.note { margin-top: 26px; padding: 22px 24px; border-radius: 4px; background: var(--paper); box-shadow: inset 3px 0 0 var(--rose), var(--shadow); }
.note h3 { font: 800 17px/1.3 var(--f-sans); margin-bottom: 6px; }
.note h3 a { color: inherit; text-decoration: none; }
.note h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.note p { color: var(--muted); font-size: 16.5px; }
/* 44x44 CSS-px minimum interactive target (this card's mailto CTA only — .link elsewhere on the
   page, e.g. "Read the full FAQ ->", is untouched). Negative margins keep the larger hit area from
   visually enlarging the gap above/below the link or shifting the card's own padding. */
.note .link { display: inline-flex; align-items: center; min-height: 44px; margin: 14px -4px -11px; padding: 0 4px; }

/* =====================================================================
   GUARDIAN (emerald band): the gate opens for the wali
   ===================================================================== */
.guard { position: relative; overflow: hidden; background: radial-gradient(80% 100% at 85% 40%, #1B4E3B, var(--deep) 65%); color: #F7F1E4; }
.guard__grid { display: grid; grid-template-columns: 1fr minmax(320px, 470px); gap: clamp(40px, 7vw, 110px); align-items: center; }
.guard__lede { margin-top: 24px; font-size: 19px; color: #ECE6D9; }
.switch { margin-top: 34px; display: inline-flex; align-items: center; gap: 14px; padding: 10px 24px 10px 10px; border: 0; cursor: pointer; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(232, 201, 135, .35); color: #F7F1E4; font-weight: 800; font-size: 16.5px; transition: background .3s; }
.switch:hover { background: rgba(255, 255, 255, .1); }
.switch__track { width: 60px; height: 34px; border-radius: 999px; background: rgba(255, 255, 255, .18); position: relative; transition: background .35s; }
.switch__track span { position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .4s var(--ease); }
.switch[aria-pressed="true"] .switch__track { background: var(--gold); }
.switch[aria-pressed="true"] .switch__track span { transform: translateX(26px); }
.guard__status { margin-top: 16px; font-size: 17px; color: #E4DED0; min-height: 3.4em; max-width: 48ch; }
.wgate { --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath fill='none' stroke='%23C29548' stroke-width='1.3' d='M22.00 7.00 L25.83 12.76 L32.61 11.39 L31.24 18.17 L37.00 22.00 L31.24 25.83 L32.61 32.61 L25.83 31.24 L22.00 37.00 L18.17 31.24 L11.39 32.61 L12.76 25.83 L7.00 22.00 L12.76 18.17 L11.39 11.39 L18.17 12.76 Z M0 0L7 7M44 0L37 7M0 44L7 37M44 44L37 37'/%3E%3C/svg%3E"); position: relative; width: 100%; aspect-ratio: 470 / 660; }
.wgate__ring, .wgate__inside { position: absolute; clip-path: polygon(0.0% 100.0%, 0.0% 46.0%, 0.4% 40.1%, 1.7% 34.7%, 3.7% 29.7%, 6.4% 25.2%, 9.7% 21.1%, 13.4% 17.4%, 17.5% 14.0%, 21.9% 11.1%, 26.6% 8.4%, 31.3% 6.1%, 36.2% 4.2%, 40.9% 2.5%, 45.6% 1.1%, 50.0% 0.0%, 54.4% 1.1%, 59.1% 2.5%, 63.8% 4.2%, 68.7% 6.1%, 73.4% 8.4%, 78.1% 11.1%, 82.5% 14.0%, 86.6% 17.4%, 90.3% 21.1%, 93.6% 25.2%, 96.3% 29.7%, 98.3% 34.7%, 99.6% 40.1%, 100.0% 46.0%, 100.0% 100.0%); }
.wgate__ring { inset: 0; background: var(--zel-main) 0 0 / 52px 52px; }
.wgate__inside { inset: 4.5% 6.5% 0; background: linear-gradient(180deg, #F3E6CB, #FFFBF1 60%); perspective: 1400px; }
.wgate__path { position: absolute; left: 9%; right: 9%; top: 31%; bottom: 5%; display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); }
.wgate__path li { position: relative; display: grid; gap: 1px; padding-left: 34px; opacity: .25; transition: opacity .5s; }
.wgate__path li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; background: var(--hair-gold); clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%); transition: background .4s, transform .5s var(--ease); }
.wgate__path li:not(:last-child)::after { content: ""; position: absolute; left: 7.5px; top: 26px; bottom: -22px; width: 1px; background: var(--hair-gold); }
.wgate__path b { font: 600 clamp(19px, 1.7vw, 23px)/1.15 var(--f-serif); }
.wgate__path small { font-size: 14.5px; color: var(--muted); }
.wgate__path .is-key b { color: var(--emerald); }
.is-live .wgate__path li { opacity: 1; }
.is-live .wgate__path li::before { background: var(--gold); transform: rotate(45deg); }
.is-live .wgate__path li:nth-child(1) { transition-delay: .7s; } .is-live .wgate__path li:nth-child(2) { transition-delay: .95s; } .is-live .wgate__path li:nth-child(3) { transition-delay: 1.2s; } .is-live .wgate__path li:nth-child(4) { transition-delay: 1.45s; } .is-live .wgate__path li:nth-child(5) { transition-delay: 1.7s; }
.wgate__doors { position: absolute; inset: 0; }
.wgate__leaf { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--lattice) 0 0 / 44px 44px, linear-gradient(180deg, #17402F, #0F2E23); box-shadow: inset 0 0 0 6px #0B241B, inset 0 0 0 8px rgba(194, 149, 72, .6); transition: transform 1.4s cubic-bezier(.7, 0, .2, 1); }
.wgate__leaf--l { left: 0; transform-origin: left center; }
.wgate__leaf--r { right: 0; transform-origin: right center; }
.is-live .wgate__leaf--l { transform: rotateY(-102deg); }
.is-live .wgate__leaf--r { transform: rotateY(102deg); }
.wgate__lock { position: absolute; left: 50%; top: 58%; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translate(-50%, -50%); transition: opacity .4s, transform .5s var(--ease); }
.wgate__lock svg { width: 64px; height: 100px; padding: 18px 20px; border-radius: 999px; background: #0B241B; box-shadow: 0 0 0 2px var(--gold), 0 16px 30px -12px rgba(0, 0, 0, .6); }
.wgate__lock b { padding: 7px 14px; border-radius: 999px; background: #0B241B; color: var(--gold-hi); font: 700 11.5px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 0 1px rgba(194, 149, 72, .6); }
.is-live .wgate__lock { opacity: 0; transform: translate(-50%, -40%); }
.no-js .wgate__leaf, .no-js .wgate__lock { display: none; } .no-js .wgate__path li { opacity: 1; }
@media (max-width: 900px) { .guard__grid { grid-template-columns: 1fr; } .wgate { max-width: 440px; margin: 0 auto; } }

/* =====================================================================
   PRIVACY: light through the screen
   ===================================================================== */
.privacy { background: linear-gradient(180deg, var(--ivory) 0%, #FBF3E4 100%); overflow: hidden; }
.privacy__head { max-width: 980px; margin-bottom: clamp(44px, 6vw, 80px); }
.privacy__head .h2 { text-wrap: balance; }
.privacy__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.screen { --mx: 50%; --my: 50%; position: relative; margin: 0 0 130px; aspect-ratio: 4 / 3.4; border-radius: 6px; background: #FBEFD6; box-shadow: 0 0 0 10px #EFE2C8, 0 0 0 11px var(--hair-gold), 0 50px 80px -50px rgba(122, 88, 28, .55); }
.screen__glow { position: absolute; inset: 0; border-radius: 6px; background: radial-gradient(70% 60% at 65% 30%, #FFF4D2 0%, #FFDFA0 45%, #F7C982 100%); }
.screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; filter: blur(7px) saturate(1.15) brightness(1.12); opacity: .55; mix-blend-mode: multiply; }
.screen__lattice { position: absolute; inset: 0; border-radius: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath fill-rule='evenodd' fill='%23D2B486' d='M0 0H56V56H0Z M28.00 9.00 L32.97 15.99 L41.44 14.56 L40.01 23.03 L47.00 28.00 L40.01 32.97 L41.44 41.44 L32.97 40.01 L28.00 47.00 L23.03 40.01 L14.56 41.44 L15.99 32.97 L9.00 28.00 L15.99 23.03 L14.56 14.56 L23.03 15.99 Z M0 6a6 6 0 1 0 0.01 0Z M56 6a6 6 0 1 0 0.01 0Z M0 44a6 6 0 1 0 0.01 0Z M56 44a6 6 0 1 0 0.01 0Z'/%3E%3Cpath fill='none' stroke='%23A9844E' stroke-width='1.6' d='M28.00 9.00 L32.97 15.99 L41.44 14.56 L40.01 23.03 L47.00 28.00 L40.01 32.97 L41.44 41.44 L32.97 40.01 L28.00 47.00 L23.03 40.01 L14.56 41.44 L15.99 32.97 L9.00 28.00 L15.99 23.03 L14.56 14.56 L23.03 15.99 Z'/%3E%3C/svg%3E") 0 0 / 92px 92px; box-shadow: inset 0 0 40px rgba(122, 88, 28, .18);  }
.screen__floor { position: absolute; left: -6%; right: -6%; top: 100%; height: 150px; margin-top: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath fill='%23FFD98A' d='M28.00 9.00 L32.97 15.99 L41.44 14.56 L40.01 23.03 L47.00 28.00 L40.01 32.97 L41.44 41.44 L32.97 40.01 L28.00 47.00 L23.03 40.01 L14.56 41.44 L15.99 32.97 L9.00 28.00 L15.99 23.03 L14.56 14.56 L23.03 15.99 Z M0 6a6 6 0 1 0 0.01 0Z M56 6a6 6 0 1 0 0.01 0Z M0 44a6 6 0 1 0 0.01 0Z M56 44a6 6 0 1 0 0.01 0Z'/%3E%3C/svg%3E") 0 0 / 56px 56px; opacity: .55; transform: perspective(500px) rotateX(58deg); transform-origin: top; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); filter: blur(1.2px); pointer-events: none; }
.screen figcaption { position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); width: max-content; max-width: 92%; padding: 12px 20px; border-radius: 999px; background: var(--paper); color: var(--ink); font: 500 italic 18px/1.35 var(--f-serif); text-align: center; box-shadow: var(--shadow), inset 0 0 0 1px var(--hair-gold); }
.pledges { display: grid; }
.pledges li { display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--hair); font: 600 clamp(19px, 1.6vw, 22px)/1.35 var(--f-serif); color: var(--ink); }
.pledges li:first-child { padding-top: 0; }
.pledges svg { width: 46px; height: 46px; padding: 11px; border-radius: 50%; background: #FFF6E2; fill: none; stroke: var(--gold-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; box-shadow: inset 0 0 0 1px var(--hair-gold); }
.privacy .fine { margin-top: 26px; padding-top: 0; border: 0; }
@media (max-width: 900px) { .privacy__grid { grid-template-columns: 1fr; } .screen { margin-bottom: 110px; } .screen figcaption { font-size: 16px; white-space: normal; width: 88%; } }

/* =====================================================================
   COMMUNITY: Calgary at golden hour
   ===================================================================== */
.community { position: relative; overflow: hidden; padding-top: clamp(90px, 12vw, 150px); background: linear-gradient(180deg, var(--ivory) 0%, #F7EAD5 55%, #F3D8AE 100%); }
.community__inner { position: relative; z-index: 1; text-align: center; }
.community__inner .eyebrow { justify-content: center; }
.community__inner .eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; }
.community__inner .h2 { max-width: 18ch; margin: 0 auto; }
.community__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); margin: clamp(40px, 5vw, 60px) auto 0; max-width: 1000px; text-align: left; }
.community__cols p { padding: 26px 28px; border-radius: 4px; background: rgba(255, 252, 246, .75); box-shadow: inset 0 0 0 1px var(--hair-gold); color: var(--muted); font-size: 18px; }
.community__cols p:first-child::first-letter { float: left; margin: 6px 10px 0 0; font: 600 64px/.8 var(--f-serif); color: var(--emerald); }
.community__city { margin-top: 36px; font: 500 italic clamp(24px, 2.4vw, 30px)/1.3 var(--f-serif); color: var(--emerald); }
.community__coord { margin-top: 10px; font: 700 12px/1 var(--f-sans); letter-spacing: .2em; color: var(--gold-ink); }
.skyline { position: relative; height: clamp(220px, 30vw, 420px); margin-top: clamp(10px, 3vw, 40px); }
.skyline svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sk { will-change: transform; }
@media (max-width: 760px) { .community__cols { grid-template-columns: 1fr; } }

/* =====================================================================
   PRICING
   ===================================================================== */
.center-head { text-align: center; max-width: 820px; margin: 0 auto clamp(46px, 6vw, 70px); }
.center-head .eyebrow { justify-content: center; }
.center-head .eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; }
.pricing { position: relative; padding: clamp(80px, 10vw, 140px) 0; color: #F7F1E4; background: var(--zel-main) 0 0 / 64px 64px; isolation: isolate; }
.pricing::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 120% at 50% 0%, rgba(20, 59, 45, .9), rgba(15, 46, 35, .97) 60%); }
.ticket { max-width: 980px; margin: 0 auto; padding: 14px; border-radius: 4px; background: var(--zel-main) 0 0 / 54px 54px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .6); }
.ticket__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-radius: 2px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2px rgba(194, 149, 72, .55); }
.invite { text-align: center; padding: clamp(40px, 5vw, 64px) 24px clamp(30px, 4vw, 44px); transition: transform .5s var(--ease); }
.invite__k { display: flex; align-items: center; justify-content: center; font: 700 13px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.invite__price { font: 500 clamp(76px, 8.4vw, 116px)/1 var(--f-serif); letter-spacing: -.02em; margin: 20px 0 12px; color: var(--emerald); }
.invite__price small { margin-left: 6px; font: 700 .15em/1 var(--f-sans); letter-spacing: .14em; color: var(--gold-ink); vertical-align: .6em; }
.invite__cap { font-size: 18px; color: var(--muted); }
.invite.is-picked { transform: translateY(-4px); }
.ticket__seal { position: relative; width: 88px; height: 88px; display: grid; place-items: center; }
.ticket__seal::before { content: ""; position: absolute; left: 50%; top: -160%; bottom: -160%; width: 1px; background: linear-gradient(transparent, var(--hair-gold) 30%, var(--hair-gold) 70%, transparent); }
.ticket__seal > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--deep); stroke: var(--gold); stroke-width: 2.5; }
.ticket__mark { position: relative; width: 22px; height: 34px; }
.ticket__foot { grid-column: 1 / -1; display: flex; justify-content: center; padding: 26px 24px 34px; border-top: 1px solid var(--hair); }
@media (max-width: 700px) {
  .ticket__in { grid-template-columns: 1fr; }
  .ticket__seal { justify-self: center; width: 64px; height: 64px; }
  .ticket__seal::before { left: -120%; right: -120%; top: 50%; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--hair-gold) 30%, var(--hair-gold) 70%, transparent); }
  .ticket__foot .btn { flex: 1; }
}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq { background: var(--paper); }
.faq__wrap { display: grid; grid-template-columns: 1fr minmax(280px, 380px); gap: 30px clamp(30px, 6vw, 90px); align-items: end; }
.faq__head .link { margin-top: 18px; }
.ask { position: relative; padding: 24px 26px; border-radius: 4px; background: var(--ivory); box-shadow: inset 0 0 0 1px var(--hair-gold); overflow: hidden; }
.ask__star { position: absolute; right: -22px; top: -22px; width: 92px; height: 92px; fill: none; stroke: var(--hair-gold); stroke-width: 2; }
.ask .ask__k { font: 600 24px/1.15 var(--f-serif); margin-bottom: 4px; }
.ask p { font-size: 16px; color: var(--muted); }
.ask a { display: inline-block; margin-top: 10px; font-weight: 800; color: var(--emerald); text-decoration: none; overflow-wrap: anywhere; }
.ask a:hover { text-decoration: underline; text-underline-offset: 4px; }
.faq__list, .reader { grid-column: 1 / -1; margin-top: clamp(20px, 3vw, 40px); }
/* phones and no-JS: a quiet accordion */
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 36px 1fr 20px; align-items: center; gap: 12px; padding: 20px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq__n { font: 500 italic 21px/1 var(--f-serif); color: var(--gold); }
.faq__q { font: 600 clamp(20px, 1.7vw, 23px)/1.25 var(--f-serif); color: var(--ink); }
.faq__star { width: 20px; height: 20px; fill: none; stroke: var(--gold-ink); stroke-width: 5; transition: transform .5s var(--ease), fill .3s; }
.faq details[open] .faq__star { transform: rotate(135deg); fill: var(--gold); stroke: var(--gold); }
.faq details p { padding: 0 0 22px 48px; color: var(--muted); max-width: 66ch; }
/* desktop: the guidebook */
.reader { display: none; }
@media (min-width: 900px) {
  .js .faq__list { display: none; }
  .js .reader { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 4vw, 60px); align-items: start; }
}
.reader__index { counter-reset: q; border-top: 1px solid var(--hair); }
.reader__index button { width: 100%; display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 10px; padding: 13px 0; border: 0; border-bottom: 1px solid var(--hair); background: none; cursor: pointer; text-align: left; font: 600 18.5px/1.3 var(--f-serif); color: #4E534D; transition: color .25s, padding .35s var(--ease); }
.reader__index button span { font: 500 italic 18px/1 var(--f-serif); color: var(--gold); }
.reader__index button i { width: 12px; height: 12px; justify-self: end; background: var(--gold); clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%); opacity: 0; transform: scale(.4) rotate(-45deg); transition: opacity .3s, transform .45s var(--ease); }
.reader__index button:hover { color: var(--ink); }
.reader__index button[aria-selected="true"] { color: var(--emerald); padding-left: 8px; }
.reader__index button[aria-selected="true"] i { opacity: 1; transform: none; }
.reader__pane { position: sticky; top: calc(var(--nav) + 30px); min-height: 420px; display: flex; flex-direction: column; padding: clamp(34px, 4vw, 56px); border-radius: 4px; overflow: hidden; color: #F7F1E4; background: radial-gradient(120% 120% at 100% 0%, var(--deep-2), var(--deep) 65%); box-shadow: 0 50px 90px -46px rgba(15, 46, 35, .8); }
.reader__pane::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 260px; height: 260px; border: 1.5px solid rgba(232, 201, 135, .22); clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%); background: rgba(232, 201, 135, .06); }
.reader__n { font: 700 12.5px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.reader__q { margin-top: 18px; font: 500 clamp(32px, 3vw, 44px)/1.08 var(--f-serif); text-wrap: balance; }
.reader__a { margin-top: 22px; font-size: 19px; line-height: 1.7; color: #E6E0D3; max-width: 48ch; }
.reader__body { animation: rise .45s var(--ease); }
.reader__nav { position: relative; z-index: 1; display: flex; gap: 10px; margin-top: auto; padding-top: 34px; }
.reader__nav button { width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, .08); color: #F7F1E4; font-size: 18px; box-shadow: inset 0 0 0 1px rgba(232, 201, 135, .4); transition: background .25s; }
.reader__nav button:hover { background: rgba(232, 201, 135, .2); }
@media (max-width: 900px) { .faq__wrap { grid-template-columns: 1fr; } }

/* =====================================================================
   CLOSE: the garden photograph, made to live (js/garden-photo.js)
   ===================================================================== */
.close { --rise: 0; position: relative; overflow: hidden; isolation: isolate; min-height: clamp(620px, 92vh, 860px); display: flex; align-items: flex-start; padding-top: clamp(90px, 12vw, 150px); text-align: center; background: linear-gradient(180deg, #E6EEF1 0%, #F2ECE2 38%, #F8DFC0 70%, #F3C996 100%); }
.close__copy { position: relative; z-index: 2; }
.close__copy .eyebrow { justify-content: center; }
.close__copy .eyebrow::after { content: ""; width: 34px; height: 1px; background: currentColor; }
.close__title { font: 500 clamp(48px, 7vw, 104px)/.98 var(--f-serif); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.close__title em { display: block; color: var(--emerald); }
.close__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(26px, 3vw, 40px); }
.close .btn--line { background: rgba(255, 255, 255, .5); }
.close + .foot, .foot { margin-top: -1px; }
@media (max-width: 700px) { .close { min-height: 640px; } .close__cta .btn { flex: 1 1 100%; } }

/* =====================================================================
   FOOTER + DOCK
   ===================================================================== */
.foot { background: #93AE92; color: #1C3328; }
.foot__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(34px, 4vw, 50px) 0 26px; border-bottom: 1px solid rgba(21, 36, 29, .2); }
.brand--foot .brand__word { color: #10261D; }
.foot__up { font-weight: 800; font-size: 15px; color: #10261D; text-decoration: none; }
.foot__up span { display: inline-block; transition: transform .3s var(--ease); }
.foot__up:hover span { transform: translateY(-3px); }
.foot__main { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px clamp(30px, 6vw, 100px); padding: clamp(46px, 6vw, 80px) 0; }
.foot__say { font: 500 clamp(40px, 4.6vw, 68px)/1 var(--f-serif); letter-spacing: -.02em; color: #10261D; text-wrap: balance; }
.foot__say em { display: block; color: #FBF6EA; }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.foot__k { margin-bottom: 14px; font: 700 12px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: #3D5A47; }
.foot__col { display: flex; flex-direction: column; align-items: flex-start; }
.foot__col a { position: relative; padding: 6px 0; font-size: 16px; font-weight: 600; color: #10261D; text-decoration: none; transition: padding .3s var(--ease); }
.foot__col a::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: #FBF6EA; clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%); opacity: 0; transform: scale(.3); transition: opacity .25s, transform .35s var(--ease); }
.foot__col a:hover { padding-left: 16px; }
.foot__col a:hover::before { opacity: 1; transform: none; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 30px; padding: 22px 0 30px; border-top: 1px solid rgba(21, 36, 29, .2); font-size: 14.5px; color: #2D4A39; }
.foot__credit a { color: #10261D; font-weight: 800; }
@media (max-width: 980px) { .foot__main { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .foot__cols { grid-template-columns: 1fr 1fr; } .foot__base { flex-direction: column; } }
.dock { display: none; }
@media (max-width: 900px) {
  .dock { display: flex; align-items: center; gap: 14px; position: fixed; z-index: 50; left: 12px; right: 12px; bottom: 12px; padding: 8px 8px 8px 20px; border-radius: 999px; background: rgba(255, 252, 246, .97); box-shadow: var(--shadow), inset 0 0 0 1px var(--hair-gold); transform: translateY(140%); transition: transform .45s var(--ease); }
  .dock.is-on { transform: none; }
  .dock .btn { flex: 1; --h: 48px; }
  .dock__signin { font-weight: 800; color: var(--deep); text-decoration: none; }
  .foot { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* reveal (with an unconditional JS fallback) */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; }
.rm .rv { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   DAY PALETTE: light, welcoming bands; emerald stays an accent
   ===================================================================== */
.try { background: linear-gradient(180deg, #EEF3EC, #E1EADF); color: var(--ink); }
.guard { background: linear-gradient(180deg, #FBF3EC, #F4E4D8); color: var(--ink); }
.try .h2--light, .guard .h2--light, .pricing .h2--light { color: var(--ink); }
.try .h2--light em, .guard .h2--light em, .pricing .h2--light em { color: var(--emerald); }
.try .eyebrow--light, .guard .eyebrow--light, .pricing .eyebrow--light { color: var(--gold-ink); }
.try__prompt { color: var(--emerald); }
.try__hint { color: var(--muted); }
.try__halo { stroke: rgba(122, 88, 28, .22); }
.try__halo--2 { stroke: rgba(122, 88, 28, .3); }
.phone { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 60px 100px -50px rgba(30, 50, 40, .55); }
.guard__lede, .guard__status { color: var(--muted); }
.switch { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-gold), 0 10px 24px -16px rgba(60, 40, 10, .5); }
.switch:hover { background: #fff; }
.switch__track { background: rgba(21, 36, 29, .16); }
.wgate__leaf { --lattice: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath fill='none' stroke='%23946A34' stroke-width='1.3' d='M22 7L26.3 12.6 33.2 11.2 31.8 18.1 37 22 31.8 25.9 33.2 32.8 26.3 31.4 22 37 17.7 31.4 10.8 32.8 12.2 25.9 7 22 12.2 18.1 10.8 11.2 17.7 12.6Z M0 0L7 7M44 0L37 7M0 44L7 37M44 44L37 37'/%3E%3C/svg%3E") 0 0 / 44px 44px, linear-gradient(180deg, #E6CFA6, #D3B385); box-shadow: inset 0 0 0 6px #C9A574, inset 0 0 0 8px rgba(255, 248, 230, .7); }
.wgate__lock svg, .wgate__lock b { background: var(--paper); }
.wgate__lock b { color: var(--gold-ink); }
.pricing { color: var(--ink); }
.pricing::before { background: linear-gradient(180deg, rgba(250, 245, 236, .94), rgba(243, 233, 214, .97)); }
.ticket { box-shadow: 0 50px 90px -50px rgba(90, 60, 20, .45); }
.walled__in { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2px rgba(194, 149, 72, .45); }
.walled .vs__title { color: var(--gold-ink); }
.calm li { border-color: var(--hair); }
.calm li::before { background: var(--gold); }
.reader__pane { color: var(--ink); background: linear-gradient(160deg, #FFFCF5, #F4EAD7); box-shadow: var(--shadow), inset 0 0 0 1px var(--hair-gold); }
.reader__pane::after { border-color: var(--hair-gold); background: rgba(194, 149, 72, .07); }
.reader__n { color: var(--gold-ink); }
.reader__a { color: var(--muted); }
.reader__nav button { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-gold); }
.reader__nav button:hover { background: var(--ivory-2); }
.gate__ring { filter: drop-shadow(0 30px 40px rgba(90, 60, 20, .25)); }
@media (max-width: 1180px) and (min-width: 861px) {
  .noise { min-height: 0; }
  .noise__chips { position: static; display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
  .chip { position: relative; left: auto; top: auto; max-width: 94%; }
  .chip:nth-child(even) { align-self: flex-end; margin-right: 10px; }
}

.pcard, .pcard * { -webkit-user-select: none; user-select: none; }
.phone__icons { display: flex; gap: 3px; align-items: flex-end; }
.phone__icons b { width: 4px; border-radius: 1px; background: var(--ink); }
.phone__icons b:nth-child(1) { height: 5px; } .phone__icons b:nth-child(2) { height: 8px; } .phone__icons b:nth-child(3) { height: 11px; }
/* footer: pale morning sage, continuous with the hedges above */
.foot { position: relative; overflow: hidden; background: #E2EADC; color: var(--ink); }
.foot::after { content: ""; position: absolute; right: -140px; top: 40px; width: 520px; height: 520px; background: var(--zel-main) 0 0 / 52px 52px; opacity: .14; clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%); pointer-events: none; }
.foot .wrap { position: relative; z-index: 1; }
.foot__top, .foot__base { border-color: rgba(21, 36, 29, .14); }
.foot__say em { color: var(--emerald); }
.foot__k { color: var(--gold-ink); }
.foot__col a::before { background: var(--gold); }
.foot__base { color: var(--muted); }
.foot::after { right: -260px; top: auto; bottom: -200px; opacity: .1; }
/* readability and spacing refinements */
@media (max-width: 860px) {
  .try { padding-block: 0; min-height: 100svh; display: flex; align-items: center; }
  .try__grid { gap: 14px; padding-block: calc(var(--nav) + 14px) 20px; width: 100%; }
  .try .h2 { font-size: clamp(36px, 9vw, 52px); }
  .try__prompt { margin-top: clamp(28px, 7vw, 36px); min-height: 0; font-size: 20px; }
  .try__hint { display: none; }
  .try__stage { padding: 4px 0 0; }
  .phone { width: min(290px, 74vw); padding: 9px; border-radius: 42px; }
  .phone__screen { min-height: 0; height: min(500px, calc(100svh - var(--nav) - 230px)); padding: 46px 14px 14px; border-radius: 34px; }
  .phone__island { top: 17px; width: 80px; height: 24px; margin-left: -40px; }
  .phone__bar { top: 15px; left: 22px; right: 22px; }
  .pcard { padding: 22px 16px 18px; gap: 6px; }
  .pcard__seal { width: 84px; height: 84px; }
  .pcard__tag { margin-top: 8px; font-size: 24px; }
  .phone__btns { padding-top: 12px; }
  .phone__btns button { width: 50px; height: 50px; }
  .try__halo { width: 130%; }
}
.noise__chips .chip { align-self: flex-start; }
.noise__chips .chip:nth-child(even) { align-self: flex-end; }
.door__arch { filter: saturate(.55) brightness(1.02); opacity: .9; }
@media (max-width: 900px) {
  .guard__grid { gap: 30px; }
  .guard__lede { font-size: 17px; }
  .wgate { max-width: 360px; }
}

/* Calgary: editorial text, crafted skyline */
.community__cols { position: relative; gap: clamp(30px, 6vw, 90px); }
.community__cols::before { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(transparent, var(--hair-gold) 15%, var(--hair-gold) 85%, transparent); }
.community__cols p { padding: 0; background: none; box-shadow: none; font-size: 18.5px; line-height: 1.75; }
.skyline .mtn { fill: #B9C4C6; } .skyline .mtn-lit { fill: #D8C9B6; opacity: .75; } .skyline .snow { fill: #FBF7EF; }
.skyline .hills { fill: #8FA796; }
.skyline .bld { fill: #1E4A39; } .skyline .bld-lit { fill: #C98E52; opacity: .5; } .skyline .gold, .skyline .lamp { fill: #E2B867; }
.skyline .tree { fill: #2C5A44; } .skyline .ground { fill: #1B4334; }
.skyline .bridge path { fill: none; stroke: #C2523F; stroke-width: 3; stroke-linecap: round; }
@media (max-width: 760px) { .community__cols::before { display: none; } }

.screen img { display: none; }
.screen__glow { background: radial-gradient(38% 42% at var(--mx) var(--my), #FFFDF4 0%, #FFF0C6 35%, rgba(255, 228, 160, 0) 100%), linear-gradient(180deg, #FFE6AE, #F8C987); }
.screen__lattice { box-shadow: inset 0 0 0 6px #C6A574, inset 0 0 60px rgba(90, 60, 20, .35); }
.screen__floor { background-size: 92px 92px; opacity: .7; }

/* mashrabiya: carved shutter panels over the garden */
.mash { position: relative; margin: 0 0 40px; aspect-ratio: 4 / 3.2; border-radius: 6px; overflow: hidden; background: #E9D9B8; box-shadow: 0 0 0 10px #EFE2C8, 0 0 0 11px var(--hair-gold), 0 50px 80px -50px rgba(122, 88, 28, .55); }
.mash img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.mash__tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols, 8), 1fr); grid-auto-rows: 1fr; perspective: 700px; }
.mash__tiles i { display: block; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath fill-rule='evenodd' fill='%23EADBBE' d='M0 0H64V64H0Z M32.00 12.00 L37.17 19.53 L46.14 17.86 L44.47 26.83 L52.00 32.00 L44.47 37.17 L46.14 46.14 L37.17 44.47 L32.00 52.00 L26.83 44.47 L17.86 46.14 L19.53 37.17 L12.00 32.00 L19.53 26.83 L17.86 17.86 L26.83 19.53 Z M6 6h5v5h-5Z M53 6h5v5h-5Z M6 53h5v5h-5Z M53 53h5v5h-5Z'/%3E%3Cpath fill='none' stroke='%23B8925A' stroke-width='1.4' d='M32.00 12.00 L37.17 19.53 L46.14 17.86 L44.47 26.83 L52.00 32.00 L44.47 37.17 L46.14 46.14 L37.17 44.47 L32.00 52.00 L26.83 44.47 L17.86 46.14 L19.53 37.17 L12.00 32.00 L19.53 26.83 L17.86 17.86 L26.83 19.53 Z'/%3E%3Cpath fill='none' stroke='%23C9A574' stroke-width='2' d='M1 1H63V63H1Z'/%3E%3Cpath fill='none' stroke='%23FFF7E6' stroke-opacity='.7' stroke-width='1' d='M3 3H61V61H3Z'/%3E%3C/svg%3E") center / 100% 100%; transform-origin: 0 50%; transition: transform .9s cubic-bezier(.2, .8, .2, 1), filter .9s; box-shadow: inset 0 0 12px rgba(120, 85, 35, .25); will-change: transform; }
.mash__tiles i.is-open { transform: rotateY(-78deg); filter: brightness(.9); }
.mash figcaption { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: max-content; max-width: 90%; padding: 11px 20px; border-radius: 999px; background: rgba(255, 252, 246, .94); color: var(--ink); font: 500 italic 17.5px/1.35 var(--f-serif); text-align: center; box-shadow: var(--shadow), inset 0 0 0 1px var(--hair-gold); }
@media (max-width: 560px) { .mash { aspect-ratio: 4 / 4.2; } .mash figcaption { width: 88%; font-size: 15.5px; } }
/* behind the screen: you */
.mash__scene { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(60% 60% at 70% 20%, #FFF7DD 0%, #FFE3A8 45%, #F6C98A 100%); }
.mash__scene::before { content: ""; position: absolute; inset: -20%; background: repeating-conic-gradient(from 200deg at 85% 0%, rgba(255, 250, 230, .55) 0deg 4deg, rgba(255, 250, 230, 0) 4deg 14deg); }
.mcard { position: relative; width: min(74%, 380px); padding: 26px; border-radius: 14px; background: #fff; box-shadow: 0 30px 60px -30px rgba(90, 60, 20, .55); }
.mcard__top { display: flex; align-items: center; gap: 16px; }
.mcard__av { width: 62px; height: 62px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #2A7556, var(--deep)); box-shadow: 0 0 0 5px #F5EBD5; }
.mcard__av svg { width: 58%; fill: none; stroke: var(--gold-hi); stroke-width: 3; }
.mcard__name { font: 600 24px/1.1 var(--f-serif); } .mcard__meta { font-size: 14.5px; color: var(--muted); }
.mcard__l { display: block; height: 10px; margin-top: 16px; border-radius: 6px; background: var(--ivory-2); }
.mcard__l--m { width: 80%; margin-top: 10px; } .mcard__l--s { width: 55%; margin-top: 10px; }
.mcard__lock { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 12px 14px; border-radius: 10px; background: #F7F0E3; box-shadow: inset 0 0 0 1px var(--hair-gold); }
.mcard__lock svg { width: 34px; height: 34px; flex: none; padding: 7px; border-radius: 50%; background: #fff; fill: none; stroke: var(--gold-ink); stroke-width: 1.7; stroke-linecap: round; }
.mcard__lock p { display: grid; font-size: 14.5px; color: var(--muted); } .mcard__lock b { color: var(--ink); font-size: 15px; }
.mash figcaption { z-index: 2; }
@media (max-width: 560px) { .mcard { width: 82%; padding: 18px; } .mcard__name { font-size: 20px; } }

.mash__tiles i { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath fill-rule='evenodd' fill='%23E8D6B3' d='M0 0H64V64H0Z M32.00 11.00 L37.36 19.07 L46.85 17.15 L44.93 26.64 L53.00 32.00 L44.93 37.36 L46.85 46.85 L37.36 44.93 L32.00 53.00 L26.64 44.93 L17.15 46.85 L19.07 37.36 L11.00 32.00 L19.07 26.64 L17.15 17.15 L26.64 19.07 Z M32 -7 L39 0 L32 7 L25 0Z M0 25 L7 32 L0 39 L-7 32Z M64 25 L71 32 L64 39 L57 32Z M32 57 L39 64 L32 71 L25 64Z'/%3E%3Cpath fill='none' stroke='%23B38D55' stroke-width='1.3' d='M32.00 11.00 L37.36 19.07 L46.85 17.15 L44.93 26.64 L53.00 32.00 L44.93 37.36 L46.85 46.85 L37.36 44.93 L32.00 53.00 L26.64 44.93 L17.15 46.85 L19.07 37.36 L11.00 32.00 L19.07 26.64 L17.15 17.15 L26.64 19.07 Z M32 -7 L39 0 L32 7 L25 0Z M0 25 L7 32 L0 39 L-7 32Z M64 25 L71 32 L64 39 L57 32Z M32 57 L39 64 L32 71 L25 64Z'/%3E%3C/svg%3E") center / 100% 100%; box-shadow: none; }
.mash__tiles i.is-open { box-shadow: 8px 0 18px -6px rgba(90, 60, 20, .45); }
.mash { max-height: 560px; width: 100%; }
@media (max-width: 900px) { .mash { aspect-ratio: 4 / 3; } }

/* footer: the seal */
.foot { position: relative; overflow: hidden; padding-top: clamp(30px, 4vw, 50px); background: #E2EADC; color: var(--ink); text-align: center; }
.foot::after { display: none; }
.seal { position: relative; width: min(340px, 70vw); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.seal__art { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--gold-ink); stroke-width: 1.1; stroke-linejoin: round; }
.seal__art path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.4, 0, .2, 1); transition-delay: calc(var(--i) * 90ms); }
.foot.is-in .seal__art path, .no-js .seal__art path, .rm .seal__art path { stroke-dashoffset: 0; }
.seal__mark { position: relative; width: 44px; height: 68px; padding: 8px; border-radius: 999px; background: #E2EADC; }
.foot__in { position: relative; padding-top: 18px; }
.foot__name { display: inline-block; font: 600 clamp(30px, 4.4vw, 52px)/1.1 var(--f-brand); letter-spacing: .06em; color: var(--deep); text-decoration: none; }
.foot__say { margin-top: 8px; font: 500 italic clamp(20px, 2vw, 25px)/1.3 var(--f-serif); color: var(--emerald); }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; max-width: 880px; margin: 30px auto 0; }
.foot__links a { position: relative; padding: 8px 16px; font-size: 15.5px; font-weight: 600; color: var(--ink); text-decoration: none; transition: color .2s; }
.foot__links a + a::before { content: ""; position: absolute; left: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--gold); clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%); }
.foot__links a:hover { color: var(--emerald); }
.foot__base { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 20px; margin-top: clamp(40px, 5vw, 60px); padding: 22px 0 28px; border-top: 1px solid rgba(21, 36, 29, .14); font-size: 14.5px; color: var(--muted); }
.foot__base p:first-child { text-align: left; } .foot__base .foot__credit { text-align: right; }
.foot__clock { padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .55); color: var(--ink); font-weight: 600; }
.foot__clock time { font-variant-numeric: tabular-nums; }
.foot__credit a { color: var(--ink); font-weight: 800; }
@media (max-width: 700px) { .foot__base { grid-template-columns: 1fr; } .foot__base p, .foot__base .foot__credit { text-align: center !important; } .foot__clock { justify-self: center; } }

/* promises: a slow marquee */
.promises { overflow: hidden; padding: 26px 0; border-block: 1px solid var(--hair-gold); background: var(--paper); }
.marquee__run { display: flex; align-items: center; width: max-content; animation: marquee 48s linear infinite; }
.marquee__run span { padding: 0 34px; font: 500 italic clamp(26px, 2.6vw, 36px)/1 var(--f-serif); color: var(--ink); white-space: nowrap; }
.marquee__run span:nth-of-type(even) { color: var(--emerald); }
.marquee__run i { width: 16px; height: 16px; flex: none; background: var(--gold); clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%); }
@keyframes marquee { to { transform: translateX(-50%); } }
.promises:hover .marquee__run { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee__run { animation: none; } }

/* entrances: each section arrives its own way */
.js .noise.rv .chip { opacity: 0; transform: translate(var(--fx, 0), 40px) rotate(calc(var(--r) * 3)); transition: opacity .7s, transform 1.1s cubic-bezier(.2, 1.3, .4, 1); animation: none; }
.js .noise.rv.is-in .chip { opacity: 1; transform: rotate(var(--r)); }
.js .noise.rv.is-in .chip { animation: drift var(--d, 7s) ease-in-out 1.4s infinite alternate; }
.chip--1 { --fx: -60px; transition-delay: .05s !important; } .chip--2 { --fx: 70px; transition-delay: .18s !important; } .chip--3 { --fx: -40px; transition-delay: .31s !important; } .chip--4 { --fx: 80px; transition-delay: .44s !important; } .chip--5 { --fx: -70px; transition-delay: .57s !important; }
.js .walled.rv .calm li { opacity: 0; transform: translateX(-16px); transition: opacity .6s, transform .8s var(--ease); }
.js .walled.rv.is-in .calm li { opacity: 1; transform: none; }
.js .walled.rv.is-in .calm li:nth-child(2) { transition-delay: .12s; } .js .walled.rv.is-in .calm li:nth-child(3) { transition-delay: .24s; } .js .walled.rv.is-in .calm li:nth-child(4) { transition-delay: .36s; } .js .walled.rv.is-in .calm li:nth-child(5) { transition-delay: .48s; }
.js .roles__ui.rv .rtab { opacity: 0; transform: translateY(50px); transition: opacity .7s, transform 1s cubic-bezier(.2, 1.2, .4, 1); }
.js .roles__ui.rv.is-in .rtab { opacity: 1; transform: none; }
.js .roles__ui.rv.is-in .rtab:nth-child(2) { transition-delay: .14s; } .js .roles__ui.rv.is-in .rtab:nth-child(3) { transition-delay: .28s; }
.js .ticket.rv .ticket__seal { transform: rotate(-180deg) scale(.4); transition: transform 1.4s cubic-bezier(.2, 1.2, .4, 1) .3s; }
.js .ticket.rv.is-in .ticket__seal { transform: none; }
.js .ticket.rv .invite__price { opacity: 0; transform: translateY(20px); transition: opacity .8s .5s, transform 1s var(--ease) .5s; }
.js .ticket.rv.is-in .invite__price { opacity: 1; transform: none; }
.js .pledges li.rv { transform: translateX(30px); }
.js .pledges li.rv.is-in { transform: none; }
.rm .chip, .rm .calm li, .rm .rtab, .rm .ticket__seal, .rm .invite__price { opacity: 1 !important; transform: none !important; }
.seal__art { stroke-width: 1.2; }
.seal__art path:nth-child(3), .seal__art path:nth-child(6) { fill: rgba(194, 149, 72, .07); }
/* try-it: after the swipe, the four steps always fit */
.try.is-refused .pflow { max-height: 460px; }
.pflow li { line-height: 1.3; }
@media (max-width: 860px) {
  .phone__screen { height: auto; min-height: min(500px, calc(100svh - var(--nav) - 230px)); }
  .try.is-refused .pcard { padding: 12px; }
  .try.is-refused .pcard__seal { width: 44px; height: 44px; }
  .try.is-refused .pcard__tag { font-size: 19px; }
  .try.is-refused .pflow { margin-top: 12px; gap: 8px; }
  .pflow li { padding: 10px 12px; font-size: 14px; }
}
.mash__tiles i.is-open { transform: rotateY(-88deg); }
.seal__mark { width: 58px; height: 58px; padding: 10px; border-radius: 50%; background: #F3F6EF; box-shadow: 0 0 0 1px rgba(122, 88, 28, .35); }

.close__copy { position: relative; z-index: 2; }

/* =====================================================================
   Motion layer (js/motion.js, GSAP). Only applies once html.gs is set; without it everything is static and visible.
   ===================================================================== */
.gs .phone.rv, .gs .wgate.rv, .gs .mash.rv, .gs .ticket.rv { transform: none; transition: opacity .9s var(--ease); }
.gs .walled.rv .calm li { opacity: 1; transform: none; transition: none; }
.gs .marquee__run { animation: none; }
/* headlines: each word rises out of its own mask */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.w__i { display: inline-block; will-change: transform; }
em .w { overflow: visible; }
em.has-flourish { position: relative; display: inline-block; }
.flourish { position: absolute; left: -2%; right: -2%; bottom: -.16em; width: 104%; height: .32em; overflow: visible; pointer-events: none; }
.flourish path { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }

.h2--light .flourish path { stroke: var(--gold-hi); }
.eyebrow::before { transform: scaleX(var(--eb, 1)); transform-origin: left; }
.center-head .eyebrow::after, .community__inner .eyebrow::after { transform: scaleX(var(--eb, 1)); transform-origin: right; }
/* why: struck-out chips, lit list stars */
.chip { --k: 0; scale: calc(1 - var(--k) * .07); opacity: calc(1 - var(--k) * .5); filter: grayscale(var(--k)); }
.chip span { text-decoration: line-through; text-decoration-color: rgba(176, 90, 68, calc(var(--k) * .9)); text-decoration-thickness: 2px; }
.calm li { --st: 1; }
.calm li::before { scale: calc(.4 + var(--st) * .6); rotate: calc((1 - var(--st)) * -90deg); filter: drop-shadow(0 0 calc(var(--st) * 6px) rgba(232, 201, 135, .8)); }
/* roles: doors lean toward the cursor */
.door__arch { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.rtab[aria-selected="true"] .door__arch { transform: perspective(700px) translateY(-8px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.gs .door__arch { transition: filter .5s, opacity .5s, box-shadow .5s, background-position 1.6s var(--ease); }
/* pricing: a sheen that follows the cursor across the ticket */
.ticket { position: relative; transform-style: preserve-3d; }
.ticket__glare { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s; mix-blend-mode: soft-light;
  background: radial-gradient(40% 50% at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%); }
/* the gold thread down the left edge: lamps light as you pass each section */
.thread { position: fixed; z-index: 30; left: max(14px, calc((100vw - var(--wrap)) / 2 - 56px)); top: 18vh; bottom: 18vh; width: 14px; pointer-events: none; opacity: 0; transition: opacity .6s; }
.thread.is-on { opacity: 1; }
.thread__line { position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: rgba(194, 149, 72, .2); overflow: hidden; }
.thread__fill { position: absolute; inset: 0; background: linear-gradient(180deg, #E8C987, #C29548); transform-origin: top; transform: scaleY(0); }
.thread__bead { position: absolute; left: 1px; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #FFF3D6; box-shadow: 0 0 0 2px #E8C987, 0 0 14px 4px rgba(255, 196, 110, .75); }
.thread__lamp { position: absolute; left: 2px; width: 10px; height: 10px; margin-top: -5px; background: rgba(194, 149, 72, .35); clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%); transition: background .5s, filter .5s, scale .5s; }
.thread__lamp.is-lit { background: #E8C987; filter: drop-shadow(0 0 6px rgba(255, 196, 110, .95)); scale: 1.35; }
@media (max-width: 1099px) {
  .thread { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 3px; z-index: 60; }
  .thread__line { left: 0; right: 0; top: 0; width: auto; height: 3px; border-radius: 0; }
  .thread__fill { transform-origin: left; }
  .thread__bead, .thread__lamp { display: none; }
}
/* petals */
.petals { position: fixed; inset: 0; z-index: 25; pointer-events: none; opacity: 0; transition: opacity .8s; }
.petals.is-on { opacity: .75; }
/* manifesto: a tall section with a sticky stage; the words light up as you scroll through it */
.manifesto { position: relative; height: 220vh; background: radial-gradient(70% 60% at 50% 50%, #FFF6E6 0%, var(--ivory) 70%); }
.manifesto__stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; width: min(1180px, 100% - 2 * var(--gut)); margin-inline: auto; }
.manifesto__k { margin-bottom: 26px; font: 700 13px/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
.manifesto__t { font: 500 clamp(40px, 6.2vw, 96px)/1.05 var(--f-serif); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.manifesto__t b { font-weight: 500; font-style: italic; color: var(--emerald); }
.gs .manifesto__t .mw { opacity: .14; transition: none; }
.gs .manifesto__t b .mw { text-shadow: 0 0 calc(var(--g, 0) * 28px) rgba(232, 180, 90, calc(var(--g, 0) * .75)); }
.no-js .manifesto, .rm .manifesto { height: auto; } .no-js .manifesto__stick, .rm .manifesto__stick { position: static; height: auto; padding-block: 120px; }
@media (max-width: 700px) { .manifesto { height: 180vh; } .manifesto__t { font-size: clamp(34px, 9.6vw, 46px); line-height: 1.12; } }
/* headline variety: each section's title has its own shape */
.try .h2 em { display: block; font-size: 1.7em; line-height: .88; margin-top: .04em; }
.roles .h2 { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.2; color: var(--muted); max-width: none; }
.roles .h2 em { display: block; margin-top: .12em; font-size: clamp(46px, 6vw, 88px); line-height: .98; letter-spacing: -.02em; }
.privacy__head .h2 em { display: block; padding-left: clamp(0px, 9vw, 160px); }
.guard .h2 em { display: block; margin-top: .1em; }
.try .h2 em.has-flourish, .try .h2 em { display: table; }
@media (max-width: 1023px) { .try .h2 em { margin-inline: auto; } }

/* Calgary in 3D: a tall full-bleed stage; the drawn skyline stays underneath as the fallback */
.skyline { height: clamp(360px, 48vw, 680px); }
.skyline__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 1.2s ease; }
.skyline.gl-on .skyline__gl { opacity: 1; }
.skyline.gl-on svg { opacity: 0; transition: opacity 1s; }
.skyline::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, #F7EAD5, rgba(247, 234, 213, 0)); }
.skyline__credit { position: absolute; right: 14px; bottom: 10px; z-index: 3; margin: 0; font-size: 11px; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.skyline__credit a { color: inherit; }

/* the courtyard behind the mashrabiya */
.mash__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s; }
.mash.yard-on .mash__gl { opacity: 1; }
.mash.yard-on .mash__scene::before { opacity: 0; }
/* the petal formation layer sits above the content but never takes clicks */
.petalform { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
/* the evening-into-morning wash: very faint, multiplied over the light sections */
.arc { position: fixed; inset: 0; z-index: 20; pointer-events: none; mix-blend-mode: multiply; opacity: 0; transition: opacity .8s;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--arc, #fff) 22%, white), transparent 75%), linear-gradient(180deg, color-mix(in srgb, var(--arc, #fff) 12%, white), white); }
.arrive__hint { display: flex; align-items: center; gap: 10px; margin: -8px 0 0; font: 600 12.5px/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.arrive__hint span { width: 10px; height: 10px; background: var(--gold); clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%); animation: hintPulse 1.8s ease-in-out infinite; }
@keyframes hintPulse { 50% { transform: scale(1.5) rotate(45deg); opacity: .6; } }
.rings-tapped .arrive__hint { opacity: .45; }
.no-js .arrive__hint { display: none; }
.story .stage__canvas { cursor: default; }
/* loading mark: two rings draw themselves while the 3D garden loads, over the still image */
.loadmark { position: absolute; z-index: 3; right: clamp(16px, 3vw, 40px); bottom: clamp(90px, 12vh, 130px); display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border-radius: 999px;
  background: rgba(255, 252, 246, .82); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .6s, transform .6s var(--ease); }
.loadmark svg { width: 46px; height: 27px; overflow: visible; }
.loadmark circle { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--load, .08)); transition: stroke-dashoffset .5s var(--ease); transform-origin: center; }
.loadmark .lm-b { stroke: #D9A9B6; animation: lmSpin 2.4s linear infinite; }
.loadmark .lm-a { animation: lmSpin 3s linear infinite reverse; }
@keyframes lmSpin { to { rotate: 360deg; } }
.loadmark span { font: 600 12px/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.gl-ready .loadmark, .gl-off .loadmark, .no-js .loadmark { opacity: 0; transform: translateY(10px); pointer-events: none; }
@media (max-width: 700px) { .loadmark { bottom: auto; top: calc(var(--nav) + 14px); } }
/* ambient sound toggle (off by default) */
.sound { position: fixed; z-index: 48; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 252, 246, .9); color: var(--ink); box-shadow: var(--shadow), inset 0 0 0 1px var(--hair-gold); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 700 12px/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; }
.sound__bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound__bars i { width: 2.5px; height: 4px; border-radius: 2px; background: var(--gold-ink); transition: height .3s; }
.sound.is-on .sound__bars i { animation: snd 1s ease-in-out infinite alternate; }
.sound.is-on .sound__bars i:nth-child(2) { animation-delay: -.3s; } .sound.is-on .sound__bars i:nth-child(3) { animation-delay: -.6s; } .sound.is-on .sound__bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes snd { from { height: 3px; } to { height: 14px; } }
.sound:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }
@media (max-width: 900px) { .sound { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); height: 36px; padding: 0 11px; } .sound__t { display: none; } }
@media (prefers-reduced-motion: reduce) { .sound.is-on .sound__bars i { animation: none; height: 10px; } }

/* Calgary, a living photograph */
.skyline__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 55%; }
.skyline.gl-on .skyline__img { opacity: 0; transition: opacity 1s; }
.skyline__birds { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.skyline::before { z-index: 3; }

/* =====================================================================
   Footer, redesigned (2026-10-12): the real logo as the centrepiece, a gold ornament rule,
   grouped links, a refined base row. Warm ivory and champagne, no star seal.
   ===================================================================== */
.foot { position: relative; overflow: hidden; padding: clamp(70px, 9vw, 120px) 0 0; color: var(--ink);
  background: radial-gradient(70% 60% at 50% 0%, #FFF8EA 0%, rgba(255, 248, 234, 0) 70%), linear-gradient(180deg, #F6EEDF 0%, #F1E6D2 100%); border-top: 1px solid rgba(194, 149, 72, .35); }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, #C29548 20%, #E8C987 50%, #C29548 80%, transparent); opacity: .85; }
.foot::after { content: none; }
.foot .seal, .foot__name { display: none; }
.foot__in { position: relative; z-index: 1; }
.foot__brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.foot__logo { display: block; width: clamp(200px, 22vw, 290px); filter: drop-shadow(0 18px 30px rgba(90, 60, 20, .18)); transition: transform .6s var(--ease); }
.foot__logo:hover { transform: translateY(-3px); }
.foot__logo img { display: block; width: 100%; height: auto; }
.foot__say { margin-top: 22px; font: 500 clamp(26px, 2.6vw, 36px)/1.15 var(--f-serif); letter-spacing: -.01em; color: var(--ink); }
.foot__say em { font-style: italic; color: var(--emerald); }
.foot__where { margin-top: 10px; font: 700 12px/1 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); }
.foot__rule { display: flex; align-items: center; gap: 14px; max-width: 520px; margin: clamp(40px, 5vw, 60px) auto; }
.foot__rule span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(194, 149, 72, .7)); }
.foot__rule span:last-child { background: linear-gradient(90deg, rgba(194, 149, 72, .7), transparent); }
.foot__rule i { width: 9px; height: 9px; transform: rotate(45deg); border: 1.5px solid var(--gold); background: #FBF4E4; }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 34px clamp(20px, 3vw, 44px); max-width: 1120px; margin: 0 auto; }
.foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.foot__k { margin-bottom: 12px; font: 700 11.5px/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
.foot__col a:not(.btn) { position: relative; padding: 5px 0; font: 500 16px/1.4 var(--f-sans); color: #2D3A33; text-decoration: none; transition: color .3s; }
.foot__col a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: 3px; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.foot__col a:not(.btn):hover { color: var(--emerald); }
.foot__col a:not(.btn):hover::after { transform: scaleX(1); }
.foot__col a::before { content: none !important; }
.foot__col--contact .foot__mail { font: 500 italic 21px/1.3 var(--f-serif); color: var(--emerald); word-break: break-word; }
.foot__col--contact .btn { margin-top: 16px; }
.foot__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 30px; margin-top: clamp(50px, 6vw, 80px); padding: 24px 0 28px; border-top: 1px solid rgba(122, 88, 28, .18); font-size: 14px; color: #5A635D; }
.foot__base p { margin: 0; }
.foot__clock { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 252, 246, .7); box-shadow: inset 0 0 0 1px rgba(194, 149, 72, .3); }
.foot__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald-2); box-shadow: 0 0 0 3px rgba(42, 117, 86, .16); animation: footDot 2.4s ease-in-out infinite; }
@keyframes footDot { 50% { opacity: .45; } }
.foot__credit a { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(194, 149, 72, .6); }
/* entrance */
.js .foot__brand, .js .foot__cols, .js .foot__rule { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .foot.is-in .foot__brand, .js .foot.is-in .foot__cols, .js .foot.is-in .foot__rule { opacity: 1; transform: none; }
.js .foot.is-in .foot__rule { transition-delay: .15s; } .js .foot.is-in .foot__cols { transition-delay: .3s; }
.rm .foot__brand, .rm .foot__cols, .rm .foot__rule, .no-js .foot__brand, .no-js .foot__cols, .no-js .foot__rule { opacity: 1 !important; transform: none !important; }
@media (max-width: 980px) { .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot__col--contact { grid-column: 1 / -1; align-items: center; text-align: center; } }
@media (max-width: 560px) { .foot__base { flex-direction: column; text-align: center; } .foot__cols { gap: 30px 18px; } }
.foot__col { text-align: left; }
.foot__col a:hover { padding-left: 0; }
.foot__col .btn { padding: 0 22px; color: #FBF6EC; font: 700 15px/1 var(--f-sans); }
.foot__col .btn:hover { color: #fff; }
@media (max-width: 980px) { .foot__col--contact { text-align: center; } }
/* the promise: copy on the left, the 3D rings on the right (above the copy on phones) */
.manifesto__stick { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; align-content: center; gap: 20px clamp(20px, 4vw, 60px); }
.manifesto__t { font-size: clamp(38px, 4.8vw, 78px); }
.manifesto__rings { width: 100%; height: min(70vh, 620px); opacity: 0; transition: opacity 1.2s ease; cursor: grab; touch-action: pan-y; }
.manifesto__rings.is-grab { cursor: grabbing; }
.manifesto.rings-on .manifesto__rings { opacity: 1; }
.manifesto__hint { grid-column: 2; justify-self: center; margin: -10px 0 0; font: 600 11.5px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); opacity: 0; transition: opacity 1s 1s; }
.manifesto.rings-on .manifesto__hint { opacity: .8; }
@media (max-width: 900px) {
  .manifesto__stick { grid-template-columns: 1fr; align-content: center; gap: 6px; }
  .manifesto__rings { order: -2; height: 34vh; height: 34svh; }
  .manifesto__hint { order: -1; grid-column: 1; margin: 0 0 14px; }
}
.no-js .manifesto__rings, .no-js .manifesto__hint { display: none; }

/* =====================================================================
   2026-10-12: the blue-and-gold "newborder" design replaces the old star tiles everywhere
   (frames: the blue filigree with gold edges; pricing: the misty blue with gold sparkles)
   ===================================================================== */
:root { --nb-frame: url("/landing/img/nb-filigree.jpg") center / cover, linear-gradient(160deg, #6E93C4, #3E6297); }
.walled, .ticket { background: var(--nb-frame); box-shadow: inset 0 0 0 1px rgba(232, 201, 135, .9), inset 0 0 0 3px rgba(194, 149, 72, .35), 0 40px 80px -46px rgba(30, 60, 110, .55); }
.walled__in, .ticket__in { box-shadow: 0 0 0 2px #D8B26A, 0 0 0 3px rgba(255, 244, 214, .7), 0 10px 30px -12px rgba(20, 40, 80, .45); }
.wgate__ring { background: var(--nb-frame); }
.wgate__ring::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px #D8B26A; pointer-events: none; }
.rtab--her, .rtab--him, .rtab--wali { --zel: var(--nb-frame); }
.door__arch { background: var(--nb-frame); background-position: center; }
.rtab[aria-selected="true"] .door__arch { background-position: center; }
.door__arch { box-shadow: inset 0 0 0 1px rgba(232, 201, 135, .8), var(--shadow); }
.pricing { background: url("/landing/img/nb-sky.jpg?v=2") center / cover, #7FA0CC; }
.pricing::before { background: linear-gradient(180deg, rgba(250, 245, 236, .35), rgba(250, 245, 236, .12) 45%, rgba(250, 245, 236, .3)); }
.pricing .eyebrow { color: #FFF3D6; } .pricing .h2 { color: #FFFDF8; text-shadow: 0 2px 18px rgba(20, 40, 80, .35); } .pricing .h2 em { color: #F3D58F; }
.pricing .center-head .eyebrow::before, .pricing .center-head .eyebrow::after { background: #F3D58F; }
.h2--light .flourish path, .pricing .flourish path { stroke: #F3D58F; }

/* =====================================================================
   Custom blue-and-gold frames (2026-10-12, replaces the image-based ones):
   deep lapis blue, a fine hand-drawn gold lattice, a double gold rule on both edges.
   ===================================================================== */
:root {
  --lapis-1: #1E3A66; --lapis-2: #2C5490; --gold-1: #E6C784; --gold-2: #B98E45;
  --lattice-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23D9B66F' stroke-width='.8' opacity='.55'%3E%3Cpath d='M20 4 L24 16 L36 20 L24 24 L20 36 L16 24 L4 20 L16 16 Z'/%3E%3Cpath d='M0 0 L8 8 M40 0 L32 8 M0 40 L8 32 M40 40 L32 32'/%3E%3Ccircle cx='20' cy='20' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  --nb-frame: var(--lattice-gold) 0 0 / 40px 40px, radial-gradient(120% 90% at 50% 0%, var(--lapis-2), var(--lapis-1) 70%);
}
.walled, .ticket {
  background: var(--nb-frame);
  box-shadow: inset 0 0 0 1px var(--gold-1), inset 0 0 0 4px var(--lapis-1), inset 0 0 0 5px rgba(230, 199, 132, .75), 0 40px 80px -46px rgba(20, 40, 80, .55);
}
.walled__in, .ticket__in { box-shadow: 0 0 0 1px var(--gold-1), 0 0 0 4px var(--lapis-1), 0 0 0 5px var(--gold-2), 0 14px 30px -14px rgba(10, 25, 55, .5); }
.wgate__ring { background: var(--nb-frame); }
.wgate__ring::after { box-shadow: inset 0 0 0 2px var(--gold-1), inset 0 0 0 6px var(--lapis-1), inset 0 0 0 7px rgba(230, 199, 132, .7); }
.door__arch, .rtab[aria-selected="true"] .door__arch { background: var(--nb-frame); }
.door__arch { box-shadow: inset 0 0 0 1px var(--gold-1), inset 0 0 0 4px var(--lapis-1), inset 0 0 0 5px rgba(230, 199, 132, .7), var(--shadow); }
.door__ring { background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); }

/* pricing: a clean night-blue sky with a few fine gold stars, cream text */
.pricing { background: radial-gradient(1.5px 1.5px at 12% 18%, rgba(240, 214, 150, .9), transparent 60%), radial-gradient(1px 1px at 28% 42%, rgba(240, 214, 150, .7), transparent 60%),
  radial-gradient(1.5px 1.5px at 71% 22%, rgba(240, 214, 150, .85), transparent 60%), radial-gradient(1px 1px at 86% 55%, rgba(240, 214, 150, .7), transparent 60%),
  radial-gradient(1px 1px at 52% 12%, rgba(240, 214, 150, .7), transparent 60%), radial-gradient(1.2px 1.2px at 40% 78%, rgba(240, 214, 150, .6), transparent 60%),
  linear-gradient(180deg, #223B66 0%, #1B2F55 45%, #15264A 100%); }
.pricing::before { background: none; }
.pricing .eyebrow { color: var(--gold-1); } .pricing .h2 { color: #FBF6EC; text-shadow: none; } .pricing .h2 em { color: var(--gold-1); }
.pricing .center-head .eyebrow::before, .pricing .center-head .eyebrow::after { background: var(--gold-1); }

/* Calgary fades softly into the night-blue pricing below (no hard line) */
.community { background: linear-gradient(180deg, var(--ivory) 0%, #F7EAD5 45%, #F3D8AE 62%, #223B66 100%); padding-bottom: 0; }
.skyline { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 62%, transparent 100%); }
.skyline::before { display: none; }
.skyline + .skyline__credit, .community { position: relative; }

/* Three roles: a calm, elegant entrance (fade and rise, no bounce, no wipe) */
.js .roles__ui.rv .rtab { opacity: 0; transform: translateY(24px); transition: opacity 1.1s cubic-bezier(.22, .61, .36, 1), transform 1.2s cubic-bezier(.22, .61, .36, 1); }
.js .roles__ui.rv.is-in .rtab { opacity: 1; transform: none; }
.js .roles__ui.rv.is-in .rtab:nth-child(2) { transition-delay: .15s; } .js .roles__ui.rv.is-in .rtab:nth-child(3) { transition-delay: .3s; }
/* three roles: sisters pink, brothers lapis blue, guardians green (all framed in gold) */
.rtab--her, .rpanel--her { --c: #A84568; }
.rtab--him, .rpanel--him { --c: #2C5490; }
.rtab--wali, .rpanel--wali { --c: #1F6B48; }
.rtab--her .door__arch, .rtab--her[aria-selected="true"] .door__arch { background: var(--lattice-gold) 0 0 / 40px 40px, radial-gradient(120% 90% at 50% 0%, #D9819D, #A9466A 70%); }
.rtab--him .door__arch, .rtab--him[aria-selected="true"] .door__arch { background: var(--lattice-gold) 0 0 / 40px 40px, radial-gradient(120% 90% at 50% 0%, var(--lapis-2), var(--lapis-1) 70%); }
.rtab--wali .door__arch, .rtab--wali[aria-selected="true"] .door__arch { background: var(--lattice-gold) 0 0 / 40px 40px, radial-gradient(120% 90% at 50% 0%, #2E8A5E, #17543A 70%); }
.rtab--her .door__arch { box-shadow: inset 0 0 0 1px var(--gold-1), inset 0 0 0 4px #A9466A, inset 0 0 0 5px rgba(230, 199, 132, .7), var(--shadow); }
.rtab--wali .door__arch { box-shadow: inset 0 0 0 1px var(--gold-1), inset 0 0 0 4px #17543A, inset 0 0 0 5px rgba(230, 199, 132, .7), var(--shadow); }
.k--her { background: #C0587A; } .k--him { background: #2C5490; } .k--wali { background: #1F6B48; }


/* =====================================================================
   2D fallbacks (no 3D / no WebGL / reduced motion): stills rendered from the real scenes, kept alive with CSS
   ===================================================================== */
@keyframes kb { 0% { transform: scale(1.04) translate3d(0, 0, 0); } 100% { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }
@keyframes kbFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
/* hero walk */
.stage__still { animation: kb 26s ease-in-out infinite alternate; transform-origin: 60% 45%; }
.gl-ready .stage__still { animation: none; }
/* promise rings: the still and the live canvas share one box; the canvas always keeps its real size so the renderer
   is measured correctly, and fades in over the still once the first frame is drawn */
.manifesto__art { position: relative; width: 100%; height: min(70vh, 620px); }
.manifesto__art .manifesto__rings { position: absolute; inset: 0; height: 100%; }
.manifesto__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: kbFloat 6s ease-in-out infinite; filter: drop-shadow(0 30px 30px rgba(90, 60, 20, .18)); transition: opacity 1s ease; }
.manifesto.rings-on .manifesto__still { opacity: 0; animation: none; }
@media (max-width: 900px) { .manifesto__art { order: -2; height: 34vh; height: 34svh; } }
/* courtyard behind the mashrabiya */
.mash__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kb 24s ease-in-out infinite alternate; }
.mash.yard-on .mash__still { display: none; }

/* =====================================================================
   CLOSE: the garden photograph (the photo itself is the fallback; js/garden-photo.js brings it to life)
   ===================================================================== */
.close { min-height: clamp(640px, 94vh, 900px); align-items: center; padding: 120px 0 90px; text-align: left; background: var(--paper); }
.garden { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.garden__img, .garden__gl, .garden__petals { position: absolute; inset: 0; width: 100%; height: 100%; }
.garden__img { object-fit: cover; object-position: 50% 56%; animation: kb 30s ease-in-out infinite alternate; transform-origin: 50% 70%; }
.garden__gl { opacity: 0; transition: opacity 1.2s ease; }
.close.gl-on .garden__gl { opacity: 1; }
.close.gl-on .garden__img { animation: none; }
.garden__petals { z-index: 1; }
/* a soft wash of paper from the FAQ above and from the left, so the copy reads while the gazebo and rings stay clear */
.garden::after { content: ""; position: absolute; inset: 0; z-index: 2; background:
  linear-gradient(180deg, var(--paper) 0%, rgba(255, 252, 246, 0) 16%),
  linear-gradient(90deg, rgba(255, 252, 246, .94) 0%, rgba(255, 252, 246, .82) 26%, rgba(255, 252, 246, .35) 40%, rgba(255, 252, 246, 0) 52%); }
.close__copy { position: relative; z-index: 3; }
.close__copy > * { max-width: 520px; }
.close__copy .eyebrow { justify-content: flex-start; }
.close__title { font-size: clamp(46px, 5.4vw, 84px); line-height: 1; color: var(--ink); }
.close__title em { color: var(--emerald); }
.close__cta { justify-content: flex-start; }
.close .btn--line { color: var(--ink); background: rgba(255, 255, 255, .7); }
/* phones and tablets: the copy sits on paper at the top, the garden opens up below it */
@media (max-width: 900px) {
  .close { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 96px 0 0; text-align: center; }
  .close__copy > * { max-width: none; }
  .close__copy .eyebrow, .close__cta { justify-content: center; }
  .garden { position: relative; inset: auto; order: 2; height: min(118vw, 640px); margin-top: 34px; }
  .garden::after { background: linear-gradient(180deg, var(--paper) 0%, rgba(255, 252, 246, 0) 24%); }
  .garden__img { object-position: 50% 60%; }
}
@media (prefers-reduced-motion: reduce) { .stage__still, .mash__still, .manifesto__still, .garden__img { animation: none; } }