/* =========================================================
   Dorylab, shared stylesheet. Mobile first.

   Paper and ink. Dark is the default theme; [data-theme="light"] is
   the paper version. Paper objects (prints, the checklist sheet, the
   business card, the map frame, the WhatsApp chip) keep navy ink in
   both themes, like things lying on a desk.

   Breakpoints: 480 (large phones), 640 (tablets, the call bar gives
   way to buttons), 768, 1024 (desktop layouts, full menu), 1280,
   1536. Short screens (landscape phones) have their own rules at the
   end. Components that sit in narrow columns use container queries.

   Shape rule: buttons 3px; the WhatsApp chip fully round; photos 12px
   (--r-photo), large feature photos 18px on some corners (--r-soft);
   paper prints and cards 2-3px; one organic blob per page; torn edges
   on the note.

   Layers: photo 3, header 50, floating buttons 60, grain 90, skip 100.
   ========================================================= */
:root{
  /* fixed brand colours */
  --navy:#102a43;
  --navy-2:#3b4f63;
  --navy-3:#56677a;
  --paper-light:#fbf5ee;
  --card:#fffaf4;
  --kraft:#e9dccb;
  --teal:#0b8796;
  --teal-ink:#006e7b;
  --blade:#11395c;          /* the logo's navy blade */
  --red:#cf3f0e;            /* the logo's orange-red: calls only */
  --red-press:#9e3008;
  --on-red:#fffaf4;

  /* dark theme (default) */
  color-scheme:dark;
  --bg:#0f1a27;
  --bg-2:#15243a;
  --fg:#f2e9dd;             /* 14.6:1 on --bg */
  --fg-2:#c2cbd4;           /* 10.7:1 */
  --fg-3:#9ba8b5;           /* 7.2:1 */
  --line:rgba(242,233,221,.2);
  --line-soft:rgba(242,233,221,.1);
  --link-line:rgba(242,233,221,.4);
  --hover-wash:rgba(242,233,221,.07);
  --accent:#6ccad3;         /* teal as text, 9.2:1 */
  --stroke:#2aa3b1;         /* teal as a drawn line */
  --stroke-2:#d9cfc1;
  --focus:#6ccad3;
  --block-bg:var(--kraft);  /* the maintenance note turns to kraft paper at night */
  --block-fg:var(--navy);
  --block-fg-2:var(--navy-2);
  --block-accent:#005f6b;
  --footer-bg:#09111b;
  --footer-fg:#f2e9dd;
  --footer-fg-2:#aab5c0;
  --tri-mid:#0d5b91;
  --mark-bg:var(--paper-light);
  --mark-img:34px;
  --wa:#35c472;
  --chip-offset:var(--stroke);
  --shadow-print:rgba(0,0,0,.34);
  --photo-bg:#1b2a3d;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.91 0 0 0 0 0.86 1.4 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-op:.2;
  --underline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M4 12.1C5.7 12 10.8 11.8 14.4 11.7C17.9 11.5 20.5 11.3 25.1 11.1C29.7 10.8 36.9 10.4 42 10.2C47 9.9 50.1 9.8 55.5 9.7C60.9 9.7 68.6 9.7 74.4 9.9C80.2 10.1 83.9 10.3 90.2 10.7C96.5 11 105.9 11.7 112.4 12C118.8 12.3 122.7 12.5 129.1 12.5C135.5 12.6 144.5 12.5 150.8 12.3C157.1 12.1 160.7 11.8 167 11.4C173.3 11 182.2 10.4 188.5 10C194.7 9.6 198.2 9.3 204.4 9C210.5 8.7 219 8.3 225.3 8.2C231.7 8 235.7 8.1 242.5 8.2C249.2 8.3 259.3 8.6 265.7 8.8C272.2 9 276.2 9.3 281.2 9.3C286.3 9.4 293.5 9.1 296 9.1L296 8.9C293.6 8.6 286.4 7.6 281.3 7.2C276.3 6.7 272.3 6.4 265.9 6C259.4 5.6 249.3 4.9 242.6 4.6C235.8 4.2 231.8 4 225.4 3.8C218.9 3.7 210.3 3.8 204.1 3.9C197.9 4.1 194.4 4.4 188.1 4.8C181.9 5.2 172.9 5.9 166.7 6.3C160.4 6.7 156.8 7 150.6 7.2C144.4 7.4 135.5 7.4 129.2 7.4C122.8 7.4 119 7.3 112.5 7.1C106.1 7 96.7 6.8 90.4 6.6C84 6.5 80.3 6.3 74.5 6.3C68.7 6.3 60.9 6.3 55.4 6.5C50 6.7 46.9 6.9 41.8 7.3C36.7 7.7 29.5 8.5 24.9 9C20.3 9.6 17.7 10 14.2 10.5C10.7 10.9 5.7 11.7 4 11.9Z' fill='%232aa3b1'/%3E%3C/svg%3E");
  --ring:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M17.7 6.6C19.1 6.3 23.4 4.9 26.3 5C29.2 5.2 32.8 5.9 35.1 7.6C37.3 9.3 38.7 12.5 40.1 15.1C41.4 17.7 42.8 20.5 43.1 23.3C43.4 26.2 43 29.6 41.8 32.3C40.7 35 38.5 37.9 36.1 39.5C33.7 41.1 30.5 41.6 27.5 42.1C24.6 42.7 21.3 43.8 18.5 43C15.8 42.3 13.2 39.8 11.2 37.7C9.3 35.6 7.6 33 6.6 30.3C5.7 27.7 5.5 24.6 5.7 21.8C5.9 18.9 6.2 15.5 7.7 13C9.2 10.5 11.9 8.2 14.5 6.9C17.1 5.6 21.9 5.4 23.3 5.1' fill='none' stroke='%234fbac6' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --edge-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 17.9C26.7 19.7 106.7 28.4 160 28.5C213.3 28.5 266.7 21.8 320 18.2C373.3 14.6 426.7 7.6 480 6.9C533.3 6.2 586.7 10.8 640 14.3C693.3 17.8 746.7 24.5 800 28.1C853.3 31.7 906.7 36.8 960 36.1C1013.3 35.3 1066.7 29.3 1120 23.8C1173.3 18.4 1226.7 3.9 1280 3.4C1333.3 3 1413.3 18.2 1440 21.1L1440 40L0 40Z' fill='%2315243a'/%3E%3C/svg%3E");   /* wavy, into a band */
  --edge-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22.8L7.8 25.7L16.9 25.1L31.3 23.8L42.6 22L51.5 22.8L58.4 24.2L67.1 25.6L79.9 22.6L87.9 19.9L102.8 22.5L116.8 22.6L125.7 20.2L132.6 23.3L147.4 23.8L153.2 18.5L166.5 18.6L172.7 26.1L181.3 20.7L194.2 17.8L202.1 19.6L210.9 21L217.5 21.8L230.1 20.1L236.4 17.3L243.5 17.2L254.3 20.4L267.8 16.5L275 16.1L286.1 15.7L295.3 19.9L304.7 17.2L318.5 20L327.7 17.1L339.4 18.1L353.2 18.2L366.4 17.7L374.6 18L384.2 19L394.5 18.5L407.4 16.2L415.3 18.1L427 16.4L438.9 16.2L450.7 15.1L464.6 14.4L476.7 17.7L488.5 13.2L500.2 16.3L507.8 16.9L517.1 12.6L522.5 13.7L535 12.8L544.7 12.9L557.2 14.4L568.6 15.2L581.3 19.2L587.7 13.4L602.4 13.9L613.1 16.9L621.4 15.8L634.4 13.8L644.2 12.4L653.9 16.4L663.3 17L671.1 13.3L685 13.9L699.4 14.6L713.4 14.7L719.5 13.4L725 13.9L733.7 16.3L744.2 15.8L753.6 13.3L759.4 12.6L767 16.7L776.6 16.5L789.8 13.5L797.8 15L805.1 16.1L816.8 17.7L828.7 17.4L835.5 14L847.1 14.6L859.4 17.3L870.7 22.4L879.4 17.7L886.5 15L901.2 25.1L910.2 18.6L923.2 16.4L936.2 20.2L949.5 20.5L962.3 18L968.1 18.2L975.1 21.4L988.2 18.1L997.7 17.1L1009 18.7L1017.5 28.1L1030.7 20.8L1042.8 17.8L1051 20.1L1065 19.4L1079.9 19.7L1086.9 21.8L1097.7 19.1L1111.8 20.2L1126.7 21L1136.2 19.8L1146.4 25.2L1152.5 23.4L1159.2 25.4L1169.4 21.8L1176.8 25.4L1184.2 25.3L1196.7 22.4L1204.5 24.8L1214.8 26.3L1222.4 24.5L1231.9 24.6L1239.7 26.1L1246.9 32.8L1252.6 22.4L1258.5 23.8L1272.8 23.8L1281 26.6L1289.7 23.5L1297.6 25.3L1303.3 24.2L1316.7 25.2L1325.2 25.3L1338 23.5L1345.6 26.9L1351.6 23.5L1361.2 27.5L1370.2 26.1L1383 28.9L1395.2 28.5L1402.9 29.2L1411.5 24.7L1422.8 25.5L1432.5 24.3L1438.6 26.4L1440 20L1440 40L0 40Z' fill='%230f1a27'/%3E%3C/svg%3E");   /* torn, out of a band */
  --edge-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 25.4C26.7 27.2 106.7 37.3 160 36C213.3 34.7 266.7 23 320 17.5C373.3 12 426.7 2.7 480 3.2C533.3 3.7 586.7 17.3 640 20.5C693.3 23.8 746.7 20.8 800 22.9C853.3 25.1 906.7 35.4 960 33.5C1013.3 31.6 1066.7 16.1 1120 11.4C1173.3 6.7 1226.7 5.4 1280 5.4C1333.3 5.4 1413.3 10.4 1440 11.4L1440 40L0 40Z' fill='%2315243a'/%3E%3C/svg%3E");   /* wavy, into a band */
  --edge-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 17.4L11.7 15.5L21.1 15.7L28.8 18.3L43.9 17.6L59.5 20.2L76.3 21.5L85.6 18.1L95.5 20.9L103.5 17.8L112.1 17.5L122.9 17.3L132.5 19.6L150.2 23.1L163.7 23.4L178 22.1L196.9 20.3L214.9 22.7L226 24.9L234 25.3L246.9 20.1L266.3 25.7L277.4 26.2L291.6 21.7L299.3 21.3L307.5 26.8L315.3 23.4L334.6 24.2L348.6 30L356.3 25.9L363.5 27.8L376.8 24.4L388.6 22.7L403.4 28L423.2 23.4L432.3 25.8L445.7 26.2L455.3 29.1L468 27.8L477.1 26.4L489.6 24.9L502.9 26.2L515.7 26.8L532.7 32L544.3 32.6L559.1 27.3L573.6 25.4L583.6 28.2L601.8 29.4L621 25.2L639.9 25.5L649 29.8L664.8 26.4L673.6 25.4L684.2 25.9L703.9 26.5L720.9 25.9L736.2 25.7L747.9 26.4L766.2 24.1L783 27.8L791.1 27.8L799.6 25.5L816.2 27.4L830.7 27.2L843.4 25L855.5 23.9L862.9 22.1L870.4 25L884.8 26.5L894.8 23.8L910.3 22.3L918.3 21.4L928.3 22.7L946.8 22.9L957.4 22.4L974.6 21.2L983.3 24.6L990.9 21.2L998.2 21L1013.6 23.2L1025.2 18.6L1037.2 21.2L1044.8 22.2L1057.8 18.3L1074.2 20L1084.4 28L1101.5 22.2L1118.1 18.7L1128.7 17.6L1147.1 20.3L1162.6 17.5L1170.1 17.3L1183.1 23L1199.1 15.3L1206.5 16L1214.8 18.1L1226.7 18.6L1238.6 16.5L1257.5 14.8L1275.4 13.4L1283.5 18.6L1294.1 18.2L1312.7 17.8L1322.4 15.7L1337.1 17.2L1351.9 16.2L1364.8 24.1L1383.9 12.3L1392 19L1399.9 16.1L1418.6 13L1429.4 17.3L1440 20L1440 40L0 40Z' fill='%2309111b'/%3E%3C/svg%3E");   /* torn, into the footer */
  --edge-e:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 30.2C26.7 30.8 106.7 35.5 160 33.8C213.3 32.1 266.7 25 320 20.1C373.3 15.1 426.7 4.6 480 3.9C533.3 3.1 586.7 11.5 640 15.5C693.3 19.5 746.7 25.2 800 27.7C853.3 30.1 906.7 33.2 960 30.1C1013.3 27.1 1066.7 13.6 1120 9.3C1173.3 5 1226.7 3.9 1280 4.3C1333.3 4.7 1413.3 10.4 1440 11.6L1440 40L0 40Z' fill='%230f1a27'/%3E%3C/svg%3E");   /* wavy, bottom of the hero photo */
  --tick-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13C3.8 13.9 6.7 17.3 8 18.4C9.4 19.6 9.8 20.9 11.2 19.8C12.5 18.8 14.2 14.6 16 12.1C17.8 9.7 21 6.4 22.1 5.2' fill='none' stroke='%230b8796' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --card-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E %3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E %3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='3' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .25 0 0 0 .09 0'/%3E %3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E");

  /* type (fluid between 320px and 1440px) */
  --serif:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wide:"Michroma","Eurostile","Bank Gothic",Verdana,sans-serif;
  --t-hero:clamp(2.2rem,1.6rem + 2.8vw,3.6rem);
  --t-h1:clamp(1.8rem,1.35rem + 1.9vw,2.9rem);
  --t-h2:clamp(1.5rem,1.2rem + 1.35vw,2.35rem);
  --t-h3:clamp(1.08rem,1.02rem + .25vw,1.26rem);
  --t-body:clamp(1.0625rem,1.02rem + .18vw,1.14rem);
  --t-lead:clamp(1.05rem,1rem + .3vw,1.2rem);
  --t-label:clamp(.6875rem,.66rem + .1vw,.75rem);

  /* space */
  --gutter:clamp(18px,5.2vw,40px);
  --max:1180px;
  --col-gap:clamp(14px,2.4vw,34px);
  --edge:max(var(--gutter), calc((100vw - var(--max)) / 2));
  --sec:clamp(42px,5.6vw,5rem);
  --edge-h:clamp(16px,2.6vw,36px);
  --header-h:58px;
  --dock-h:66px;

  /* shapes */
  --r-btn:3px;
  --r-print:2px;
  --r-photo:12px;
  --r-soft:18px;

  /* layers */
  --z-photo:3;
  --z-header:50;
  --z-float:60;
  --z-grain:90;
  --z-skip:100;
}

/* light theme: the paper version */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#fbf5ee;
  --bg-2:#f3e9dd;
  --fg:var(--navy);
  --fg-2:var(--navy-2);
  --fg-3:var(--navy-3);
  --line:rgba(16,42,67,.22);
  --line-soft:rgba(16,42,67,.11);
  --link-line:rgba(16,42,67,.38);
  --hover-wash:rgba(16,42,67,.05);
  --accent:var(--teal-ink);
  --stroke:var(--teal);
  --stroke-2:var(--navy);
  --focus:var(--teal-ink);
  --block-bg:var(--navy);
  --block-fg:#fbf5ee;
  --block-fg-2:#c5d2dd;
  --block-accent:#6fd0d9;
  --footer-bg:var(--navy);
  --footer-fg:#fbf5ee;
  --footer-fg-2:#c5d2dd;
  --tri-mid:var(--blade);
  --mark-bg:transparent;
  --mark-img:40px;
  --wa:#168a4b;
  --chip-offset:var(--navy);
  --shadow-print:rgba(16,42,67,.08);
  --photo-bg:#e7dccd;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.13 0 0 0 0 0.2 1.4 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-op:.32;
  --underline:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M4 12.1C5.7 12 10.8 11.8 14.4 11.7C17.9 11.5 20.5 11.3 25.1 11.1C29.7 10.8 36.9 10.4 42 10.2C47 9.9 50.1 9.8 55.5 9.7C60.9 9.7 68.6 9.7 74.4 9.9C80.2 10.1 83.9 10.3 90.2 10.7C96.5 11 105.9 11.7 112.4 12C118.8 12.3 122.7 12.5 129.1 12.5C135.5 12.6 144.5 12.5 150.8 12.3C157.1 12.1 160.7 11.8 167 11.4C173.3 11 182.2 10.4 188.5 10C194.7 9.6 198.2 9.3 204.4 9C210.5 8.7 219 8.3 225.3 8.2C231.7 8 235.7 8.1 242.5 8.2C249.2 8.3 259.3 8.6 265.7 8.8C272.2 9 276.2 9.3 281.2 9.3C286.3 9.4 293.5 9.1 296 9.1L296 8.9C293.6 8.6 286.4 7.6 281.3 7.2C276.3 6.7 272.3 6.4 265.9 6C259.4 5.6 249.3 4.9 242.6 4.6C235.8 4.2 231.8 4 225.4 3.8C218.9 3.7 210.3 3.8 204.1 3.9C197.9 4.1 194.4 4.4 188.1 4.8C181.9 5.2 172.9 5.9 166.7 6.3C160.4 6.7 156.8 7 150.6 7.2C144.4 7.4 135.5 7.4 129.2 7.4C122.8 7.4 119 7.3 112.5 7.1C106.1 7 96.7 6.8 90.4 6.6C84 6.5 80.3 6.3 74.5 6.3C68.7 6.3 60.9 6.3 55.4 6.5C50 6.7 46.9 6.9 41.8 7.3C36.7 7.7 29.5 8.5 24.9 9C20.3 9.6 17.7 10 14.2 10.5C10.7 10.9 5.7 11.7 4 11.9Z' fill='%230b8796'/%3E%3C/svg%3E");
  --ring:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M17.7 6.6C19.1 6.3 23.4 4.9 26.3 5C29.2 5.2 32.8 5.9 35.1 7.6C37.3 9.3 38.7 12.5 40.1 15.1C41.4 17.7 42.8 20.5 43.1 23.3C43.4 26.2 43 29.6 41.8 32.3C40.7 35 38.5 37.9 36.1 39.5C33.7 41.1 30.5 41.6 27.5 42.1C24.6 42.7 21.3 43.8 18.5 43C15.8 42.3 13.2 39.8 11.2 37.7C9.3 35.6 7.6 33 6.6 30.3C5.7 27.7 5.5 24.6 5.7 21.8C5.9 18.9 6.2 15.5 7.7 13C9.2 10.5 11.9 8.2 14.5 6.9C17.1 5.6 21.9 5.4 23.3 5.1' fill='none' stroke='%230b8796' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --edge-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 17.9C26.7 19.7 106.7 28.4 160 28.5C213.3 28.5 266.7 21.8 320 18.2C373.3 14.6 426.7 7.6 480 6.9C533.3 6.2 586.7 10.8 640 14.3C693.3 17.8 746.7 24.5 800 28.1C853.3 31.7 906.7 36.8 960 36.1C1013.3 35.3 1066.7 29.3 1120 23.8C1173.3 18.4 1226.7 3.9 1280 3.4C1333.3 3 1413.3 18.2 1440 21.1L1440 40L0 40Z' fill='%23f3e9dd'/%3E%3C/svg%3E");
  --edge-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22.8L7.8 25.7L16.9 25.1L31.3 23.8L42.6 22L51.5 22.8L58.4 24.2L67.1 25.6L79.9 22.6L87.9 19.9L102.8 22.5L116.8 22.6L125.7 20.2L132.6 23.3L147.4 23.8L153.2 18.5L166.5 18.6L172.7 26.1L181.3 20.7L194.2 17.8L202.1 19.6L210.9 21L217.5 21.8L230.1 20.1L236.4 17.3L243.5 17.2L254.3 20.4L267.8 16.5L275 16.1L286.1 15.7L295.3 19.9L304.7 17.2L318.5 20L327.7 17.1L339.4 18.1L353.2 18.2L366.4 17.7L374.6 18L384.2 19L394.5 18.5L407.4 16.2L415.3 18.1L427 16.4L438.9 16.2L450.7 15.1L464.6 14.4L476.7 17.7L488.5 13.2L500.2 16.3L507.8 16.9L517.1 12.6L522.5 13.7L535 12.8L544.7 12.9L557.2 14.4L568.6 15.2L581.3 19.2L587.7 13.4L602.4 13.9L613.1 16.9L621.4 15.8L634.4 13.8L644.2 12.4L653.9 16.4L663.3 17L671.1 13.3L685 13.9L699.4 14.6L713.4 14.7L719.5 13.4L725 13.9L733.7 16.3L744.2 15.8L753.6 13.3L759.4 12.6L767 16.7L776.6 16.5L789.8 13.5L797.8 15L805.1 16.1L816.8 17.7L828.7 17.4L835.5 14L847.1 14.6L859.4 17.3L870.7 22.4L879.4 17.7L886.5 15L901.2 25.1L910.2 18.6L923.2 16.4L936.2 20.2L949.5 20.5L962.3 18L968.1 18.2L975.1 21.4L988.2 18.1L997.7 17.1L1009 18.7L1017.5 28.1L1030.7 20.8L1042.8 17.8L1051 20.1L1065 19.4L1079.9 19.7L1086.9 21.8L1097.7 19.1L1111.8 20.2L1126.7 21L1136.2 19.8L1146.4 25.2L1152.5 23.4L1159.2 25.4L1169.4 21.8L1176.8 25.4L1184.2 25.3L1196.7 22.4L1204.5 24.8L1214.8 26.3L1222.4 24.5L1231.9 24.6L1239.7 26.1L1246.9 32.8L1252.6 22.4L1258.5 23.8L1272.8 23.8L1281 26.6L1289.7 23.5L1297.6 25.3L1303.3 24.2L1316.7 25.2L1325.2 25.3L1338 23.5L1345.6 26.9L1351.6 23.5L1361.2 27.5L1370.2 26.1L1383 28.9L1395.2 28.5L1402.9 29.2L1411.5 24.7L1422.8 25.5L1432.5 24.3L1438.6 26.4L1440 20L1440 40L0 40Z' fill='%23fbf5ee'/%3E%3C/svg%3E");
  --edge-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 25.4C26.7 27.2 106.7 37.3 160 36C213.3 34.7 266.7 23 320 17.5C373.3 12 426.7 2.7 480 3.2C533.3 3.7 586.7 17.3 640 20.5C693.3 23.8 746.7 20.8 800 22.9C853.3 25.1 906.7 35.4 960 33.5C1013.3 31.6 1066.7 16.1 1120 11.4C1173.3 6.7 1226.7 5.4 1280 5.4C1333.3 5.4 1413.3 10.4 1440 11.4L1440 40L0 40Z' fill='%23f3e9dd'/%3E%3C/svg%3E");
  --edge-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 17.4L11.7 15.5L21.1 15.7L28.8 18.3L43.9 17.6L59.5 20.2L76.3 21.5L85.6 18.1L95.5 20.9L103.5 17.8L112.1 17.5L122.9 17.3L132.5 19.6L150.2 23.1L163.7 23.4L178 22.1L196.9 20.3L214.9 22.7L226 24.9L234 25.3L246.9 20.1L266.3 25.7L277.4 26.2L291.6 21.7L299.3 21.3L307.5 26.8L315.3 23.4L334.6 24.2L348.6 30L356.3 25.9L363.5 27.8L376.8 24.4L388.6 22.7L403.4 28L423.2 23.4L432.3 25.8L445.7 26.2L455.3 29.1L468 27.8L477.1 26.4L489.6 24.9L502.9 26.2L515.7 26.8L532.7 32L544.3 32.6L559.1 27.3L573.6 25.4L583.6 28.2L601.8 29.4L621 25.2L639.9 25.5L649 29.8L664.8 26.4L673.6 25.4L684.2 25.9L703.9 26.5L720.9 25.9L736.2 25.7L747.9 26.4L766.2 24.1L783 27.8L791.1 27.8L799.6 25.5L816.2 27.4L830.7 27.2L843.4 25L855.5 23.9L862.9 22.1L870.4 25L884.8 26.5L894.8 23.8L910.3 22.3L918.3 21.4L928.3 22.7L946.8 22.9L957.4 22.4L974.6 21.2L983.3 24.6L990.9 21.2L998.2 21L1013.6 23.2L1025.2 18.6L1037.2 21.2L1044.8 22.2L1057.8 18.3L1074.2 20L1084.4 28L1101.5 22.2L1118.1 18.7L1128.7 17.6L1147.1 20.3L1162.6 17.5L1170.1 17.3L1183.1 23L1199.1 15.3L1206.5 16L1214.8 18.1L1226.7 18.6L1238.6 16.5L1257.5 14.8L1275.4 13.4L1283.5 18.6L1294.1 18.2L1312.7 17.8L1322.4 15.7L1337.1 17.2L1351.9 16.2L1364.8 24.1L1383.9 12.3L1392 19L1399.9 16.1L1418.6 13L1429.4 17.3L1440 20L1440 40L0 40Z' fill='%23102a43'/%3E%3C/svg%3E");
  --edge-e:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 30.2C26.7 30.8 106.7 35.5 160 33.8C213.3 32.1 266.7 25 320 20.1C373.3 15.1 426.7 4.6 480 3.9C533.3 3.1 586.7 11.5 640 15.5C693.3 19.5 746.7 25.2 800 27.7C853.3 30.1 906.7 33.2 960 30.1C1013.3 27.1 1066.7 13.6 1120 9.3C1173.3 5 1226.7 3.9 1280 4.3C1333.3 4.7 1413.3 10.4 1440 11.6L1440 40L0 40Z' fill='%23fbf5ee'/%3E%3C/svg%3E");
}

/* paper objects keep navy ink in both themes */
.print,.sheet,.bcard,.map,.wa-float{
  --fg:var(--navy);
  --fg-2:var(--navy-2);
  --fg-3:var(--navy-3);
  --line:rgba(16,42,67,.22);
  --line-soft:rgba(16,42,67,.11);
  --link-line:rgba(16,42,67,.3);
  --accent:var(--teal-ink);
  --stroke:var(--teal);
  --focus:var(--teal-ink);
  --wa:#168a4b;
  color:var(--fg);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;min-width:300px;background:var(--bg);color:var(--fg);font:400 var(--t-body)/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word}
body::after{content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;background-image:var(--grain);background-size:220px 220px;opacity:var(--grain-op)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
strong,b{font-weight:700}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--link-line);transition:text-decoration-color .2s ease,text-decoration-thickness .2s ease,color .2s ease}
a:hover{text-decoration-color:var(--stroke);text-decoration-thickness:2px}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:2px}
svg{flex:none}
.ico{width:20px;height:20px;fill:currentColor}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-80px;z-index:var(--z-skip);padding:12px 18px;background:var(--fg);color:var(--bg);border-radius:var(--r-btn);text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.wrap{width:min(calc(100% - 2 * var(--gutter)), var(--max));margin-inline:auto}
.tri{height:4px;background:linear-gradient(90deg,var(--teal) 0 33.4%,var(--tri-mid) 33.4% 66.7%,var(--red) 66.7% 100%)}
.theme-switching *,.theme-switching *::before,.theme-switching *::after{transition:none!important}

/* ---------- type ---------- */
.h1{font:400 var(--t-h1)/1.1 var(--serif);letter-spacing:-.02em;padding-bottom:.08em}
.h2{font:400 var(--t-h2)/1.12 var(--serif);letter-spacing:-.016em;padding-bottom:.08em}
.h1 em,.h2 em,.hero__big em{font-style:italic;letter-spacing:-.01em}
.lead{max-width:32em;margin-top:10px;font-size:var(--t-lead);line-height:1.5;color:var(--fg-2)}
.label{font:400 var(--t-label)/1.6 var(--wide);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.label a{display:inline-block;padding:15px 0;margin:-15px 0;text-underline-offset:.35em}
figcaption{font:italic 400 .86rem/1.4 var(--serif);color:var(--fg-3)}
.more{display:inline-block;min-height:44px;padding:10px 0;font-weight:600;line-height:1.5;color:var(--accent);text-decoration-color:currentColor;text-underline-offset:.28em}
.more .ico{width:18px;height:18px;margin-left:.35em;vertical-align:-.24em;transition:translate .2s ease}
.more:hover{color:var(--fg)}
.more:hover .ico{translate:3px 0}

/* ---------- buttons: solid, squarer, one primary style ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:3.25rem;padding:.8rem 1.3rem;border:0;border-radius:var(--r-btn);font:600 1.02rem/1.15 var(--sans);letter-spacing:.005em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:translate .18s ease,box-shadow .18s ease,background-color .18s ease}
.btn:hover{translate:0 -1px}
.btn:active{translate:0 2px}
.btn--primary{background:var(--red);color:var(--on-red);box-shadow:0 3px 0 var(--red-press)}
.btn--primary:hover{box-shadow:0 4px 0 var(--red-press)}
.btn--primary:active{box-shadow:0 1px 0 var(--red-press)}
.btn--ink{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--fg)}
.btn--ink:hover{background:var(--hover-wash)}
.btn--wa .ico{color:var(--wa)}
.btn--sm{min-height:2.75rem;padding:.55rem 1rem;font-size:.96rem}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:var(--bg);border-bottom:1px solid var(--line-soft)}
.header__row{display:flex;align-items:center;gap:clamp(10px,2vw,28px);height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:0;color:var(--fg);text-decoration:none;flex:none}
.brand__mark{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--mark-bg);flex:none}
.brand__mark .brand__logo{width:var(--mark-img);height:var(--mark-img)}
.brand__logo{transform-origin:55.8% 47.1%}
.brand__wm{display:flex;flex-direction:column;line-height:1}
.brand__wm b{font:400 1.12rem/1 var(--wide);letter-spacing:.03em}
.brand__wm small{margin-top:6px;font:400 .48rem/1 var(--wide);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.nav{margin-left:auto}
.nav__toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 8px;border:0;border-radius:var(--r-btn);background:transparent;color:var(--fg);cursor:pointer}
.nav__toggle .ico{width:26px;height:26px}
.nav__toggle .i-close{display:none}
.nav__toggle[aria-expanded="true"] .i-open{display:none}
.nav__toggle[aria-expanded="true"] .i-close{display:block}
.js .nav__list{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow-y:auto;padding:8px var(--gutter) 22px;background:var(--bg);border-bottom:1px solid var(--line)}
.js .nav__list.is-open{display:flex}
.nav__list > li > a{display:block;padding:12px 0;font:400 1.35rem/1.25 var(--serif);text-decoration:none}
.nav__list > li > a[aria-current="page"]{color:var(--accent)}
html:not(.js) .nav__toggle{display:none}
html:not(.js) .header__row{height:auto;flex-wrap:wrap;padding:8px 0}
html:not(.js) .nav{order:3;width:100%}
html:not(.js) .nav__list{display:flex;flex-wrap:wrap;gap:0 18px}
html:not(.js) .nav__list > li > a{font:600 .98rem/1 var(--sans);padding:14px 0}
html:not(.js) .nav__theme{display:none}
.theme-t{display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;width:100%;padding:10px 0;border:0;border-radius:var(--r-btn);background:transparent;color:var(--fg);font:400 1.35rem/1.25 var(--serif);cursor:pointer}
.theme-t:hover{background:var(--hover-wash)}
.header__call{display:none;flex:none}

/* ---------- sections and drawn edges ---------- */
.band{position:relative;background:var(--bg-2)}
.to-band,.to-base,.to-band-2,.to-footer{position:relative}
.to-band::after,.to-base::after,.to-band-2::after,.to-footer::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--edge-h);background:center bottom/100% 100% no-repeat;pointer-events:none}
.to-band::after{background-image:var(--edge-a)}
.to-base::after{background-image:var(--edge-b)}
.to-band-2::after{background-image:var(--edge-c)}
.to-footer::after{background-image:var(--edge-d)}

/* ---------- home: hero ---------- */
.hero{overflow-x:clip;padding-bottom:calc(var(--sec) * .75 + var(--edge-h))}
.hero__grid{display:grid}
.hero__photo{position:relative;z-index:var(--z-photo);margin:0 calc(-1 * var(--gutter))}
.hero__photo img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:52% 60%;background:var(--photo-bg)}
.hero__photo::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--edge-h);background:var(--edge-e) center bottom/100% 100% no-repeat;pointer-events:none}
.hero__air{position:absolute;z-index:1;left:calc(var(--gutter) - 8px);bottom:-30px;width:min(64%,300px);height:auto;pointer-events:none}
.air-a{fill:var(--stroke)}
.air-b{fill:var(--stroke);opacity:.6}
.air-c{fill:var(--stroke-2);opacity:.45}
.hero__text{position:relative;z-index:4;padding-top:24px;container-type:inline-size}
/* the two proofs sit on one line only when the text column has room for both */
@container (min-width:520px){
  .label__sep{display:inline}
  .label__item{display:inline}
}
.hero__text .label{margin-bottom:12px}
.label__sep{display:none}
.label__item{display:block}
.hero__title{font-family:var(--serif);font-weight:400}
.hero__big{display:block;font-size:var(--t-hero);line-height:1.1;letter-spacing:-.028em;padding-bottom:.08em}
.hero__small{display:block;max-width:24em;margin-top:.6em;font-size:clamp(1.04rem,.98rem + .45vw,1.3rem);line-height:1.42;letter-spacing:-.005em}
.hero__cta{display:none;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ---------- home: steps (one drawn line carries three steps) ---------- */
.steps{padding:calc(var(--sec) * .7) 0 calc(var(--sec) * .8 + var(--edge-h))}
.steps__track{position:relative;margin-top:22px}
.steps__line{position:absolute;pointer-events:none}
.steps__line--h{display:none}
.steps__line--v{left:2px;top:4px;width:40px;height:calc(100% - 30px)}
.line-a{fill:var(--stroke)}
.line-b{fill:var(--stroke-2);opacity:.28}
.line-v{fill:var(--stroke);opacity:.8}
.steps__list{position:relative;display:grid;gap:20px}
.step{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 84px;grid-template-rows:auto 1fr;column-gap:14px;align-items:start;padding-left:58px;min-height:46px}
.step__n{position:absolute;left:0;top:-4px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ring) center/100% 100% no-repeat,var(--bg-2);font:italic 400 1.3rem/1 var(--serif);color:var(--accent)}
.step > h3{grid-column:1;grid-row:1;font:700 var(--t-h3)/1.25 var(--serif)}
.step > p{grid-column:1;grid-row:2;margin-top:2px;color:var(--fg-2);line-height:1.45}
.step__photo{grid-column:2;grid-row:1 / span 2}
.step__photo img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-photo);background:var(--photo-bg)}
.step--1 img{object-position:62% 35%}
.step--2 img{object-position:58% 30%}
.step--3 img{object-position:50% 25%}

/* ---------- home: our work (swipe on phones, grid on tablets, collage on desktop) ---------- */
.works{padding:calc(var(--sec) * .4) 0 calc(var(--sec) * .5)}
.works__grid{display:flex;gap:10px;margin:18px calc(-1 * var(--gutter)) 0;padding:2px var(--gutter) 10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.works__grid::-webkit-scrollbar{display:none}
.works__grid:focus-visible{outline-offset:-3px}
.w{flex:0 0 auto;height:clamp(180px,54vw,250px);scroll-snap-align:start}
.w img{height:100%;width:auto;max-width:none;aspect-ratio:var(--ar,4/3);object-fit:cover;object-position:var(--pos,50% 50%);border-radius:var(--r-photo);background:var(--photo-bg)}
.w--terrasse{--ar:4/3;--pos:55% 45%}
.w--toiture{--ar:16/10;--pos:50% 55%}
.w--escabeau{--ar:4/5;--pos:45% 40%}
.w--toit{--ar:16/10;--pos:55% 45%}
.w--livraison{--ar:1/1;--pos:45% 60%}
.w--tenue{--ar:4/3;--pos:52% 50%}
.w--tableau{--ar:16/10;--pos:68% 50%}

/* ---------- the four installation types, drawn ---------- */
.types-wrap{container-type:inline-size}
.types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.types li{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;text-align:center}
.types svg{width:100%;max-width:100px;height:auto;aspect-ratio:4/3}
.types .ink{fill:none;stroke:var(--fg);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.types .air{fill:none;stroke:var(--stroke);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.types span{font:600 .82rem/1.2 var(--sans);color:var(--fg-2)}
@container (max-width:300px){
  .types{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
  .types svg{max-width:88px}
}
@container (min-width:620px){
  .types svg{max-width:150px}
  .types span{font-size:.95rem}
}

/* ---------- home: services teaser ---------- */
.svc-teaser{padding:calc(var(--sec) * .6) 0 calc(var(--sec) * .45)}
.svc-teaser .types-wrap{max-width:760px;margin-top:22px}
.svc-teaser p{max-width:31em;margin-top:18px;color:var(--fg-2)}
.svc-teaser .more{margin-top:4px}

/* ---------- the note: kraft paper at night, navy by day, torn edges ---------- */
.note{position:relative;padding:28px 22px 22px;background:var(--block-bg);color:var(--block-fg);clip-path:polygon(0.0% 0.93%,3.8% 0.31%,7.7% 1.54%,11.5% 1.48%,15.4% 0.75%,19.2% 1.06%,23.1% 0.34%,26.9% 0.35%,30.8% 0.46%,34.6% 1.11%,38.5% 0.34%,42.3% 1.55%,46.2% 0.11%,50.0% 0.31%,53.8% 0.14%,57.7% 1.23%,61.5% 0.59%,65.4% 0.75%,69.2% 0.52%,73.1% 1.02%,76.9% 0.65%,80.8% 0.33%,84.6% 0.69%,88.5% 0.49%,92.3% 0.18%,96.2% 1.32%,100.0% 1.09%,100.0% 98.80%,95.5% 98.41%,90.9% 99.29%,86.4% 99.32%,81.8% 99.24%,77.3% 99.27%,72.7% 98.80%,68.2% 99.99%,63.6% 99.16%,59.1% 99.04%,54.5% 99.38%,50.0% 99.96%,45.5% 98.73%,40.9% 99.98%,36.4% 98.98%,31.8% 99.72%,27.3% 99.94%,22.7% 99.67%,18.2% 99.88%,13.6% 99.73%,9.1% 98.77%,4.5% 98.69%,0.0% 99.35%)}
.note h2{font:400 clamp(1.4rem,1.25rem + .7vw,1.9rem)/1.2 var(--serif)}
.note p{margin-top:8px;color:var(--block-fg-2);max-width:32em}
.note .more{color:var(--block-accent)}
.note .more:hover{color:var(--block-fg)}
.note :focus-visible{outline-color:var(--block-fg)}
.maint-teaser{padding:calc(var(--sec) * .5 + 40px) 0 calc(var(--sec) + var(--edge-h))}
.maint-teaser__grid{position:relative}
/* the photo is pinned over the top edge; a small float keeps the first line of the heading clear of it */
.maint-teaser .note::before{content:"";float:right;width:62px;height:14px}
.note-blob{position:absolute;z-index:2;top:-58px;right:2px;width:96px;aspect-ratio:1/1;overflow:hidden;border-radius:61% 39% 55% 45%/47% 57% 43% 53%;background:var(--navy);box-shadow:0 0 0 5px var(--bg)}
.note-blob img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}

/* ---------- contact block (home) ---------- */
.contact{padding:calc(var(--sec) * .8) 0 calc(var(--sec) + var(--edge-h))}
.contact__block{display:grid;gap:4px}
.phone-big{justify-self:start;display:inline-block;margin-top:10px;padding:4px 0 10px;font:400 clamp(1.9rem,1.45rem + 2.2vw,3.2rem)/1.1 var(--serif);letter-spacing:-.01em;color:var(--fg);text-decoration:none;white-space:nowrap;background:var(--underline) left bottom/100% 9px no-repeat}
.phone-big:hover{color:var(--accent)}
.contact__addr{margin-top:12px;color:var(--fg-2);line-height:1.5}
.contact__links{display:flex;flex-wrap:wrap;gap:0 22px}
.contact__links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--accent)}
.contact__cta{display:none;flex-wrap:wrap;gap:12px;margin-top:18px}

/* ---------- prints ---------- */
.print{background:var(--card);padding:8px 8px 10px;border-radius:var(--r-print);box-shadow:0 1px 1px var(--shadow-print),6px 7px 0 var(--shadow-print)}
.print figcaption{margin-top:8px}

/* ---------- secondary pages ---------- */
.page-head{padding:clamp(24px,5vw,56px) 0 clamp(18px,3vw,30px)}
.page-head .lead + .lead{margin-top:6px}
.end{padding:calc(var(--sec) * .6) 0 calc(var(--sec) + var(--edge-h))}
.end__line{font:400 clamp(1.25rem,1.1rem + .7vw,1.8rem)/1.3 var(--serif)}
.end__line a{display:inline-block;padding:10px 0;margin:-10px 0;white-space:nowrap}

/* services page: installation */
.install{padding:0 0 calc(var(--sec) * .8)}
.install__grid{display:grid;gap:22px}
.install__text h2{font:400 clamp(1.4rem,1.22rem + .9vw,2rem)/1.12 var(--serif);letter-spacing:-.012em}
.install__text > p{margin-top:8px;max-width:30em;color:var(--fg-2);line-height:1.5}
.install__text .types-wrap{margin-top:20px}
.install__photo{position:relative;order:-1;padding-bottom:14%}
.install__photo .main img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:45% 40%;border-radius:var(--r-soft) var(--r-soft) var(--r-soft) 0;background:var(--photo-bg)}
.install__photo .inset{position:absolute;right:0;bottom:0;width:46%;border-radius:var(--r-soft);overflow:hidden;box-shadow:0 0 0 6px var(--bg)}
.install__photo .inset img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 25%}
.brands-line{position:relative;max-width:34em;margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.brands-line::before{content:"";position:absolute;left:0;top:-2px;width:72px;height:3px;background:linear-gradient(90deg,var(--teal) 0 33.4%,var(--tri-mid) 33.4% 66.7%,var(--red) 66.7% 100%)}
.brands-line__names{font:400 clamp(1.1rem,1rem + .6vw,1.45rem)/1.3 var(--serif)}
.brands-line__names span{display:block;margin-bottom:2px;font-size:.68em;font-style:italic;color:var(--fg-2)}
.brands-line p + p{margin-top:6px;color:var(--fg-2)}

/* services page: the other services, a plain list */
.svc-all{padding:0 0 calc(var(--sec) + var(--edge-h))}
.svc-all__list{display:grid;row-gap:18px;margin-top:16px;padding-top:18px;border-top:1px solid var(--line)}
.svc-all__list h3{font:700 var(--t-h3)/1.25 var(--serif)}
.svc-all__list p{margin-top:3px;max-width:34em;color:var(--fg-2);line-height:1.5}

/* services page: clients */
.clients{padding:calc(var(--sec) * .8) 0 calc(var(--sec) * .8 + var(--edge-h))}
.aud{display:grid;gap:18px;align-items:start;margin-top:22px}
.aud__item{display:grid;grid-template-columns:clamp(84px,24vw,112px) minmax(0,1fr);gap:16px;align-items:start;align-content:start}
.aud__item img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-photo);background:var(--photo-bg)}
.aud__item h3{font:400 clamp(1.15rem,1.08rem + .4vw,1.5rem)/1.2 var(--serif)}
.aud__item p{margin-top:4px;color:var(--fg-2);line-height:1.45}

/* maintenance page */
.maint-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center}
.maint-head > div{display:contents}
.maint-head .h1{grid-column:1 / -1}
.maint-head .lead{grid-column:1;grid-row:2}
.maint-head__blob{grid-column:2;grid-row:2;margin-top:10px;width:clamp(80px,22vw,170px);aspect-ratio:1/1;overflow:hidden;border-radius:61% 39% 55% 45%/47% 57% 43% 53%;background:var(--navy)}
.maint-head__blob img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.maint-body{padding:6px 0 calc(var(--sec) * .6)}
.maint-body__grid{display:grid;gap:22px}
.sheet{position:relative;align-self:start;padding:20px 18px 16px;background:var(--card) var(--card-grain);border:1px solid var(--line);border-radius:var(--r-print);box-shadow:6px 7px 0 var(--shadow-print)}
.sheet__photo{display:none}
.sheet h2{font:400 clamp(1.3rem,1.18rem + .7vw,1.85rem)/1.15 var(--serif)}
.sheet__list{margin-top:10px}
.sheet__list li{position:relative;break-inside:avoid;padding:4px 0 4px 32px;line-height:1.4}
.sheet__list li::before{content:"";position:absolute;left:0;top:.28em;width:22px;height:22px;background:var(--tick-paper) center/contain no-repeat}
.freq__rows{margin-top:12px}
.freq__rows > div + div{margin-top:10px}
.freq dt{font-weight:700;color:var(--block-fg)}
.freq dd{margin-top:2px;color:var(--block-fg-2)}
.freq dd em{display:block;font:italic 400 1.25rem/1.3 var(--serif);color:var(--block-accent)}
.note .note__cta-label{margin-top:18px;font-weight:600;color:var(--block-fg)}
.note .btn{margin-top:8px;background:transparent;color:var(--block-fg);box-shadow:inset 0 0 0 1.5px var(--block-fg)}

/* contact page */
.contact-head__photo{display:none}
.contact-body{padding:4px 0 calc(var(--sec) + var(--edge-h))}
.contact-body__grid{display:grid;gap:22px}
.desk{position:relative}
.print--e{display:none}
.bcard{position:relative;z-index:1;max-width:540px;padding:18px 16px 12px 26px;background:var(--card) var(--card-grain);border-radius:3px;rotate:-1deg;box-shadow:0 1px 1px var(--shadow-print),8px 10px 0 var(--shadow-print)}
.bcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;border-radius:3px 0 0 3px;background:linear-gradient(180deg,var(--teal) 0 33.4%,var(--blade) 33.4% 66.7%,var(--red) 66.7% 100%)}
.bcard__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px 20px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.bcard .brand{color:var(--fg)}
.bcard .brand__logo{width:52px;height:52px}
.bcard .brand__wm small{letter-spacing:.16em;color:var(--fg-2)}
.bcard__who{margin-left:auto;text-align:right}
.bcard__who b{display:block;font:700 1.05rem/1.2 var(--serif);letter-spacing:.05em;text-transform:uppercase}
.bcard__who span{display:block;margin-top:4px;font:600 .78rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.bcard__tag{margin:10px 0 6px;font:700 .72rem/1.7 var(--serif);letter-spacing:.05em;text-transform:uppercase;color:var(--fg)}
.bcard__tag br{display:none}
.bcard__list{font-style:normal}
.bcard__list dl > div{display:grid;grid-template-columns:4.6em minmax(0,1fr);align-items:baseline;column-gap:10px}
.bcard__list dt{font:italic 400 .95rem/1.4 var(--serif);color:var(--fg-3)}
.bcard__list dd{font-weight:600;line-height:1.45}
.bcard__list a{display:inline-block;min-height:44px;padding:10px 0}
.bcard__list .addr{padding:10px 0}
.map{padding:8px 8px 4px;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-print)}
.map iframe{display:block;width:100%;height:clamp(200px,56vw,300px);border:0;filter:saturate(.82) sepia(.06);background:#e6e1d6}
.map__link{display:flex;align-items:center;min-height:44px;padding:0 4px;font-weight:600;color:var(--accent)}

/* ---------- footer ---------- */
.site-footer{position:relative;background:var(--footer-bg);color:var(--footer-fg-2);padding:24px 0 calc(var(--dock-h) + 22px + env(safe-area-inset-bottom));font-size:.95rem}
.footer__grid{display:grid;gap:10px;align-items:center}
.site-footer .brand{color:var(--footer-fg)}
.site-footer .brand__wm small{color:var(--footer-fg-2)}
.seal{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--paper-light)}
.seal img{width:36px;height:36px}
.footer__nav{display:flex;flex-wrap:wrap;gap:0 20px}
.footer__nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--footer-fg);font-weight:600}
.site-footer .tri{--tri-mid:#0d5b91;width:72px;height:3px;margin-top:4px}
.site-footer :focus-visible{outline-color:var(--footer-fg)}

/* ---------- phones: the call bar is always there ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-float);display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:8px;padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
.dock a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:50px;min-width:0;border-radius:var(--r-btn);font:600 clamp(.94rem,.88rem + .3vw,1.04rem)/1 var(--sans);text-decoration:none;white-space:nowrap}
.dock__call{background:var(--red);color:var(--on-red);box-shadow:0 3px 0 var(--red-press)}
.dock__call:active{translate:0 2px;box-shadow:0 1px 0 var(--red-press)}
.dock__wa{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--fg)}
.dock__wa .ico{color:var(--wa)}
.wa-float{display:none}

/* ---------- reveal on scroll (only below the fold, only with motion allowed) ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  [data-reveal].pre{opacity:0;translate:0 16px}
  [data-reveal].pre.is-in{opacity:1;translate:none;transition:opacity .7s ease,translate .9s cubic-bezier(.2,.7,.2,1)}
  .site-header .brand__logo{animation:turn 1.8s cubic-bezier(.3,.6,.2,1) .15s both}
  @keyframes turn{from{rotate:-120deg}to{rotate:0deg}}
}

/* ================= very small phones (< 360px) ================= */
@media (max-width:359.98px){
  .brand__wm small{display:none}
  .label{font-size:.625rem;letter-spacing:.16em}
  .types span{font-size:.74rem}
  .dock{gap:6px}
  .dock a{gap:5px}
}

/* ================= large phones (480px and up) ================= */
@media (min-width:480px){
  .hero__photo img{aspect-ratio:16/11}
}

/* ================= tablets and up (640px): no call bar, buttons come back ================= */
@media (min-width:640px){
  .maint-head .h1{grid-column:1}
  .maint-head__blob{grid-row:1 / span 2;margin-top:0}
  .dock{display:none}
  .site-footer{padding-bottom:92px}  /* the last line stays clear of the floating WhatsApp chip */
  .header__call{display:inline-flex}
  .wa-float{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:var(--z-float);display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 18px 0 14px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--navy),3px 4px 0 var(--chip-offset);font:600 1rem/1 var(--sans);text-decoration:none;transition:translate .18s ease,box-shadow .18s ease,opacity .2s ease,visibility .2s}
  .wa-float .ico{width:22px;height:22px;color:var(--wa)}
  .wa-float:hover{translate:0 -1px;box-shadow:inset 0 0 0 1.5px var(--navy),4px 5px 0 var(--chip-offset)}
  .wa-float.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
  .hero__cta,.contact__cta{display:flex}
  .hero__photo{margin:0 calc(-1 * var(--gutter)) 0 14%}
  .hero__photo img{aspect-ratio:16/10}
  .hero__air{width:min(46%,340px);bottom:-36px;left:calc(var(--gutter) * -.4)}
  /* our work: a real grid, first photo across the top, exactly seven cells */
  .works__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0 0;padding:0;overflow:visible;scroll-snap-type:none}
  .w{height:auto}
  .w img{width:100%;height:auto;max-width:100%;aspect-ratio:3/2}
  .w--terrasse{grid-column:1 / -1}
  .w--terrasse img{aspect-ratio:21/9}
  .maint-teaser{padding-top:calc(var(--sec) * .5 + 30px)}
  .maint-teaser .note::before{width:110px;height:26px}
  .note-blob{width:136px;top:-70px;right:10px}
  .install__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--col-gap);align-items:start}
  .svc-all__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap)}
  .aud{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap)}
  .aud__item{grid-template-columns:minmax(0,1fr);gap:10px}
  .aud__item img{aspect-ratio:4/3;border-radius:0}
  .aud__item--home img{border-radius:var(--r-soft) 0 0 0}
  .aud__item--industry img{border-radius:0 0 var(--r-soft) 0}
  .aud__item--office{margin-top:clamp(24px,3.4vw,44px)}
  .aud__item--industry{margin-top:clamp(8px,1.2vw,14px)}
  .sheet{padding:26px 26px 20px}
  .sheet__list{columns:2;column-gap:32px}
  .bcard{padding:22px 24px 16px 34px;margin-inline:auto}
  .bcard__tag{text-align:center;font-size:.78rem}
  .bcard__tag br{display:inline}
  .bcard__list dl > div{grid-template-columns:5.2em minmax(0,1fr);column-gap:12px}
  .note .btn{background:var(--red);color:var(--on-red);box-shadow:0 3px 0 var(--red-press)}
  .contact-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:var(--col-gap);align-items:center}
  .contact-head__photo{display:block}
  .contact-head__photo img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:58% 30%;border-radius:var(--r-soft) var(--r-soft) var(--r-soft) 0}
  .contact-head__photo figcaption{margin-top:8px}
}

/* ================= tablets only (640px to 1023px): three steps side by side ================= */
@media (min-width:640px) and (max-width:1023.98px){
  .steps__line{display:none}
  .steps__track{margin-top:26px}
  .steps__list{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
  .step{display:flex;flex-direction:column;padding-left:0}
  .step__photo{order:-1;margin-bottom:12px}
  .step__photo img{aspect-ratio:4/3}
  .step__n{top:-14px;left:-10px;z-index:1}
  .step--2{margin-top:26px}
}


/* ================= desktop (1024px and up) ================= */
@media (min-width:1024px){
  :root{--header-h:4.25rem}
  .nav__toggle{display:none}
  .nav__home{display:none}
  .js .nav__list,.nav__list{position:static;display:flex;flex-direction:row;align-items:center;gap:clamp(16px,2vw,28px);max-height:none;overflow:visible;padding:0;background:none;border:0}
  .nav__list > li > a{display:inline-block;padding:14px 1px;font:600 .98rem/1.1 var(--sans);background:linear-gradient(var(--stroke),var(--stroke)) left calc(100% - 3px)/0 2px no-repeat;transition:background-size .25s ease}
  .nav__list > li > a:hover,.nav__list > li > a[aria-current="page"]{background-size:100% 2px}
  .nav__list > li > a[aria-current="page"]{color:var(--fg)}
  .theme-t{width:auto;padding:0;justify-content:center;font:600 .98rem/1 var(--sans)}
  .theme-t__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html:not(.js) .nav{order:0;width:auto}
  html:not(.js) .header__row{height:var(--header-h);flex-wrap:nowrap;padding:0}

  /* hero: text left, photo right, bleeding towards the edge (capped on wide screens) */
  .hero{padding-bottom:calc(var(--sec) * .5 + var(--edge-h))}
  .hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(32px,4vw,64px);align-items:center}
  .hero__photo{grid-column:2;grid-row:1;margin:28px calc(-1 * min(var(--edge), 160px)) -40px 0}
  .hero__photo img{aspect-ratio:auto;height:min(64vh,34rem);height:min(64dvh,34rem);min-height:25rem;border-radius:0 0 0 var(--r-soft)}
  .hero__photo::after{display:none}
  .hero__text{grid-column:1;grid-row:1;padding:10px 0 60px}
  .hero__air{left:-3%;bottom:-8px;width:min(52%,520px)}

  /* steps: the line runs across, photos above the words */
  .steps .h2{max-width:min(40rem,58%)}
  .steps__line--v{display:none}
  .steps__track{margin-top:30px;container-type:inline-size}
  .steps__line--h{display:block;left:-2%;top:-1.2cqw;width:104%;height:auto}
  .steps__list{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);padding-top:7.1cqw}
  .step{display:flex;flex-direction:column;padding-left:0;min-height:0}
  .step__photo{order:-1;margin-bottom:12px}
  .step__photo img{aspect-ratio:16/10}
  .step--1{grid-column:1 / 4;margin-top:-.5cqw}
  .step--1 .step__n{top:calc(-3.09cqw - 23px)}
  .step--2{grid-column:5 / 9;margin-top:3.05cqw}
  .step--2 .step__n{top:calc(-2.2cqw - 23px)}
  .step--2 .step__photo img{aspect-ratio:16/9}
  .step--3{grid-column:10 / 13;margin-top:-.17cqw}
  .step--3 .step__n{top:calc(-2.06cqw - 23px)}
  .step--3 .step__photo img{aspect-ratio:4/3;border-radius:var(--r-soft)}

  /* our work: an uneven collage, exactly seven cells */
  .works__grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:clamp(240px,24vw,19rem) clamp(170px,16vw,13rem);gap:14px}
  .w,.w--terrasse{grid-column:auto;height:100%}
  .w img,.w--terrasse img{width:100%;height:100%;aspect-ratio:auto}
  .w--terrasse{grid-column:1 / 6}
  .w--toiture{grid-column:6 / 10}
  .w--escabeau{grid-column:10 / 13}
  .w--toit{grid-column:4 / 8}
  .w--livraison{grid-column:1 / 4}
  .w--tenue{grid-column:8 / 10}
  .w--tableau{grid-column:10 / 13}
  .w--livraison{grid-row:2}
  .w--terrasse img{border-radius:var(--r-soft) var(--r-photo) var(--r-photo) var(--r-photo)}
  .w--tableau img{border-radius:var(--r-photo) var(--r-photo) var(--r-soft) var(--r-photo)}

  /* services teaser: the drawings on the left, the words beside them */
  .svc-teaser .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:center}
  .svc-teaser .h2{grid-column:1 / -1}
  .svc-teaser .types-wrap{grid-column:1 / 8;max-width:none}
  .svc-teaser__side{grid-column:8 / 13;padding-top:14px}
  .svc-teaser__side p{margin-top:0}

  /* the note sits a little off the grid, its photo pinned beside it */
  .maint-teaser__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:center}
  .maint-teaser .note{grid-column:2 / 9;padding:32px 34px 26px;rotate:-.6deg}
  .maint-teaser{padding-top:calc(var(--sec) * .5)}
  .maint-teaser .note::before{display:none}
  .note-blob{position:relative;grid-column:9 / 12;justify-self:center;top:auto;right:auto;width:clamp(150px,15vw,190px);box-shadow:none}

  /* contact block: the number big, the details beside it */
  .contact__block{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end}
  .contact__block > .h2,.contact__block > .phone-big,.contact__block > .contact__cta{grid-column:1 / 8}
  .contact__block > .contact__addr{grid-column:9 / 13;grid-row:2;margin:0 0 10px}
  .contact__block > .contact__links{grid-column:9 / 13;grid-row:3;align-self:start}

  /* services page */
  .install__grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .install__photo{grid-column:1 / 7;padding-bottom:10%}
  .install__text{grid-column:7 / 13;align-self:center}
  .svc-all__list{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* maintenance page */
  .maint-head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  .maint-head .h1,.maint-head .lead{grid-column:1 / 10}
  .maint-head__blob{grid-column:10 / 13;grid-row:1 / span 2;justify-self:end}
  .maint-body{padding-top:56px}
  .maint-body__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  .sheet{grid-column:1 / 8;padding:30px 30px 24px}
  .sheet__photo{display:block;position:absolute;right:-24px;top:-64px;width:170px;padding:7px;background:var(--card);border:1px solid var(--line-soft);box-shadow:4px 5px 0 var(--shadow-print)}
  .sheet__photo img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:62% 50%}
  .sheet h2{max-width:60%}
  .maint-body .note{grid-column:8 / 13;margin-top:30px;margin-left:-8px}

  /* contact page */
  .contact-body__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
  .desk{grid-column:1 / 7;padding-top:128px}
  .print--e{display:block;position:absolute;top:-6px;right:-10px;width:220px;rotate:1.2deg}
  .print--e img{width:100%;aspect-ratio:600/338;object-fit:cover}
  .bcard{rotate:-2deg;margin-inline:0}
  .map{grid-column:7 / 13;align-self:start;margin-top:40px}

  .footer__grid{grid-template-columns:auto 1fr auto;column-gap:40px}
  .footer__nav{justify-content:center}
  .site-footer .tri{grid-column:1 / -1;margin-top:8px}
}

/* ================= wide screens ================= */
@media (min-width:1536px){
  :root{--max:1260px}
}
/* very wide screens (27-inch monitors at 100%): the whole page scales up a notch */
@media (min-width:1920px){
  html{font-size:112.5%}
  :root{--max:1400px}
}
@media (min-width:2400px){
  html{font-size:125%}
  :root{--max:1560px}
}

/* ================= short screens: landscape phones and small tablets ================= */
/* phones held upright but short: a flatter photo so the title stays in view */
@media (max-width:639.98px) and (max-height:720px) and (min-height:480.02px){
  .hero__photo img{aspect-ratio:16/10}
  .hero__text{padding-top:20px}
}
/* phones and small tablets held sideways: the photo goes beside the words */
@media (max-width:1023.98px) and (max-height:480px), (min-width:640px) and (max-width:1023.98px) and (max-height:560px){
  .hero{padding-bottom:calc(var(--sec) * .4 + var(--edge-h))}
  .hero__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:22px;align-items:center}
  .hero__photo{grid-column:2;grid-row:1;margin:10px calc(-1 * var(--gutter)) 0 0}
  .hero__photo img{aspect-ratio:auto;height:calc(100vh - var(--header-h) - 34px);height:calc(100dvh - var(--header-h) - 34px);min-height:190px;border-radius:0 0 0 var(--r-soft)}
  .hero__photo::after{display:none}
  .hero__air{display:none}
  .hero__text{grid-column:1;grid-row:1;padding:12px 0 18px}
  .hero__big{font-size:clamp(1.6rem,1rem + 2.4vw,2.3rem)}
  .hero__small{margin-top:.5em;font-size:1rem;line-height:1.4}
  .hero__cta{margin-top:14px;gap:10px}
  .hero__cta .btn{min-height:46px;padding:.55rem 1rem;font-size:.97rem}
}
/* sideways phones under 640px keep the call bar: a slimmer bar, and the photo stops above it */
@media (max-width:639.98px) and (max-height:480px){
  :root{--dock-h:58px}
  .dock{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .dock a{min-height:45px}
  .hero__photo img{height:calc(100vh - var(--header-h) - var(--dock-h) - 22px);height:calc(100dvh - var(--header-h) - var(--dock-h) - 22px);min-height:160px}
  .w{height:clamp(150px,42vh,220px);height:clamp(150px,42dvh,220px)}
}