/* ========================================================================
   HAVNA AI — paper & sand skin / override layer
   Place AFTER the site's existing <style>. Relative file paths assume
   sand-tile.webp, paper-fill.webp live beside havna-paper.css.

   Thin 2–4 CSS-pixel deckle: four tiny, repeating SVG alpha masks plus a
   solid centre mask; not a full-page SVG filter or a % polygon clip-path.
   The tiny SVG strokes follow the same edge paths (1px warm-brown rules).
   No JavaScript or extra HTML is required. Reuses the site's design tokens.
   ======================================================================== */

:root {
  --havna-rule: rgba(121, 101, 76, .45); /* Lovable: #79654c / 45% */
  --havna-edge-depth: 8px;            /* tile width; exposed tear ~2–4px */
  --havna-mask-top: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwIiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjgiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGQ9Ik0wLjAwLDMuMzcgTDguMDAsMy42MCBMMTYuMDAsMy4wNCBMMjQuMDAsMy4wMiBMMzIuMDAsMi43OCBMNDAuMDAsNC4wMCBMNDguMDAsMi41NiBMNTYuMDAsMi4yNiBMNjQuMDAsMi41MCBMNzIuMDAsMi41MCBMODAuMDAsMi42NCBMODguMDAsMi41MSBMOTYuMDAsMi4xOCBMMTA0LjAwLDIuNjMgTDExMi4wMCwyLjYwIEwxMjAuMDAsMy4xNSBMMTI4LjAwLDIuMzcgTDEzNi4wMCwyLjEwIEwxNDQuMDAsMi4zOCBMMTUyLjAwLDMuMDkgTDE2MC4wMCwyLjc3IEwxNjguMDAsMy40OSBMMTc2LjAwLDMuNjQgTDE4NC4wMCwyLjgyIEwxOTIuMDAsMi4xNiBMMjAwLjAwLDMuNDggTDIwOC4wMCwzLjU0IEwyMTYuMDAsMi43OCBMMjI0LjAwLDMuMzMgTDIzMi4wMCwyLjU4IEwyNDAuMDAsMy44NyBMMjQ4LjAwLDMuNzAgTDI1Ni4wMCwzLjM3IEwyNTYsOCBMMCw4IFoiIGZpbGw9IiNmZmYiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcCkiLz48L3N2Zz4=");
  --havna-ink-top: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwIiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjgiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGQ9Ik0wLjAwLDMuMzcgTDguMDAsMy42MCBMMTYuMDAsMy4wNCBMMjQuMDAsMy4wMiBMMzIuMDAsMi43OCBMNDAuMDAsNC4wMCBMNDguMDAsMi41NiBMNTYuMDAsMi4yNiBMNjQuMDAsMi41MCBMNzIuMDAsMi41MCBMODAuMDAsMi42NCBMODguMDAsMi41MSBMOTYuMDAsMi4xOCBMMTA0LjAwLDIuNjMgTDExMi4wMCwyLjYwIEwxMjAuMDAsMy4xNSBMMTI4LjAwLDIuMzcgTDEzNi4wMCwyLjEwIEwxNDQuMDAsMi4zOCBMMTUyLjAwLDMuMDkgTDE2MC4wMCwyLjc3IEwxNjguMDAsMy40OSBMMTc2LjAwLDMuNjQgTDE4NC4wMCwyLjgyIEwxOTIuMDAsMi4xNiBMMjAwLjAwLDMuNDggTDIwOC4wMCwzLjU0IEwyMTYuMDAsMi43OCBMMjI0LjAwLDMuMzMgTDIzMi4wMCwyLjU4IEwyNDAuMDAsMy44NyBMMjQ4LjAwLDMuNzAgTDI1Ni4wMCwzLjM3IiBmaWxsPSJub25lIiBzdHJva2U9IiM3OTY1NEMiIHN0cm9rZS1vcGFjaXR5PSIuNDUiIHN0cm9rZS13aWR0aD0iLjg1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3ApIi8+PC9zdmc+");
  --havna-mask-bottom: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwIiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjgiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGQ9Ik0wLjAwLDQuODUgTDguMDAsNC43MiBMMTYuMDAsNC4zMyBMMjQuMDAsNS40NyBMMzIuMDAsNC42OCBMNDAuMDAsNC4xOCBMNDguMDAsNC4xNCBMNTYuMDAsNS42NiBMNjQuMDAsNC42OCBMNzIuMDAsNC43NSBMODAuMDAsNC45OSBMODguMDAsNC4wMiBMOTYuMDAsNC45NCBMMTA0LjAwLDUuMTEgTDExMi4wMCw0LjA3IEwxMjAuMDAsNC43MiBMMTI4LjAwLDUuNDIgTDEzNi4wMCw1LjQwIEwxNDQuMDAsNS4wMSBMMTUyLjAwLDUuOTQgTDE2MC4wMCw0Ljc3IEwxNjguMDAsNC41MCBMMTc2LjAwLDUuMTYgTDE4NC4wMCw0LjI3IEwxOTIuMDAsNC4xMCBMMjAwLjAwLDQuODggTDIwOC4wMCw0LjYyIEwyMTYuMDAsNS44MCBMMjI0LjAwLDUuOTMgTDIzMi4wMCw0LjAwIEwyNDAuMDAsNS40NSBMMjQ4LjAwLDUuNjAgTDI1Ni4wMCw0Ljg1IEwyNTYsMCBMMCwwIFoiIGZpbGw9IiNmZmYiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcCkiLz48L3N2Zz4=");
  --havna-ink-bottom: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwIiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjgiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGQ9Ik0wLjAwLDQuODUgTDguMDAsNC43MiBMMTYuMDAsNC4zMyBMMjQuMDAsNS40NyBMMzIuMDAsNC42OCBMNDAuMDAsNC4xOCBMNDguMDAsNC4xNCBMNTYuMDAsNS42NiBMNjQuMDAsNC42OCBMNzIuMDAsNC43NSBMODAuMDAsNC45OSBMODguMDAsNC4wMiBMOTYuMDAsNC45NCBMMTA0LjAwLDUuMTEgTDExMi4wMCw0LjA3IEwxMjAuMDAsNC43MiBMMTI4LjAwLDUuNDIgTDEzNi4wMCw1LjQwIEwxNDQuMDAsNS4wMSBMMTUyLjAwLDUuOTQgTDE2MC4wMCw0Ljc3IEwxNjguMDAsNC41MCBMMTc2LjAwLDUuMTYgTDE4NC4wMCw0LjI3IEwxOTIuMDAsNC4xMCBMMjAwLjAwLDQuODggTDIwOC4wMCw0LjYyIEwyMTYuMDAsNS44MCBMMjI0LjAwLDUuOTMgTDIzMi4wMCw0LjAwIEwyNDAuMDAsNS40NSBMMjQ4LjAwLDUuNjAgTDI1Ni4wMCw0Ljg1IiBmaWxsPSJub25lIiBzdHJva2U9IiM3OTY1NEMiIHN0cm9rZS1vcGFjaXR5PSIuNDUiIHN0cm9rZS13aWR0aD0iLjg1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3ApIi8+PC9zdmc+");
  --havna-mask-left: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwIiB3aWR0aD0iOCIgaGVpZ2h0PSIyNTYiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGQ9Ik0zLjEwLDAuMDAgTDIuMjMsOC4wMCBMMy40NCwxNi4wMCBMMi41OCwyNC4wMCBMMy45MiwzMi4wMCBMMi4zNSw0MC4wMCBMMy41NSw0OC4wMCBMMi4zMCw1Ni4wMCBMMy45OCw2NC4wMCBMMy43OCw3Mi4wMCBMMi4xOCw4MC4wMCBMMy4zMSw4OC4wMCBMMi40MSw5Ni4wMCBMMy4wMiwxMDQuMDAgTDMuNzQsMTEyLjAwIEwyLjI4LDEyMC4wMCBMMi40MSwxMjguMDAgTDIuMTAsMTM2LjAwIEwyLjA4LDE0NC4wMCBMMy4wMCwxNTIuMDAgTDIuMjksMTYwLjAwIEwyLjIyLDE2OC4wMCBMMy40MiwxNzYuMDAgTDIuNTYsMTg0LjAwIEwyLjY2LDE5Mi4wMCBMMi42NiwyMDAuMDAgTDMuNzIsMjA4LjAwIEwyLjUyLDIxNi4wMCBMMy4zMSwyMjQuMDAgTDMuOTIsMjMyLjAwIEwzLjE1LDI0MC4wMCBMMi41NCwyNDguMDAgTDMuMTAsMjU2LjAwIEw4LDI1NiBMOCwwIFoiIGZpbGw9IiNmZmYiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcCkiLz48L3N2Zz4=");
  --havna-ink-left: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwIiB3aWR0aD0iOCIgaGVpZ2h0PSIyNTYiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGQ9Ik0zLjEwLDAuMDAgTDIuMjMsOC4wMCBMMy40NCwxNi4wMCBMMi41OCwyNC4wMCBMMy45MiwzMi4wMCBMMi4zNSw0MC4wMCBMMy41NSw0OC4wMCBMMi4zMCw1Ni4wMCBMMy45OCw2NC4wMCBMMy43OCw3Mi4wMCBMMi4xOCw4MC4wMCBMMy4zMSw4OC4wMCBMMi40MSw5Ni4wMCBMMy4wMiwxMDQuMDAgTDMuNzQsMTEyLjAwIEwyLjI4LDEyMC4wMCBMMi40MSwxMjguMDAgTDIuMTAsMTM2LjAwIEwyLjA4LDE0NC4wMCBMMy4wMCwxNTIuMDAgTDIuMjksMTYwLjAwIEwyLjIyLDE2OC4wMCBMMy40MiwxNzYuMDAgTDIuNTYsMTg0LjAwIEwyLjY2LDE5Mi4wMCBMMi42NiwyMDAuMDAgTDMuNzIsMjA4LjAwIEwyLjUyLDIxNi4wMCBMMy4zMSwyMjQuMDAgTDMuOTIsMjMyLjAwIEwzLjE1LDI0MC4wMCBMMi41NCwyNDguMDAgTDMuMTAsMjU2LjAwIiBmaWxsPSJub25lIiBzdHJva2U9IiM3OTY1NEMiIHN0cm9rZS1vcGFjaXR5PSIuNDUiIHN0cm9rZS13aWR0aD0iLjg1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3ApIi8+PC9zdmc+");
  --havna-mask-right: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwIiB3aWR0aD0iOCIgaGVpZ2h0PSIyNTYiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGQ9Ik01LjAxLDAuMDAgTDQuODgsOC4wMCBMNC4zNSwxNi4wMCBMNS4zOCwyNC4wMCBMNS4zOCwzMi4wMCBMNC41OSw0MC4wMCBMNS4wMyw0OC4wMCBMNS4zMCw1Ni4wMCBMNS4yMCw2NC4wMCBMNS4zNiw3Mi4wMCBMNS43MCw4MC4wMCBMNC43Miw4OC4wMCBMNC4xNyw5Ni4wMCBMNC42MCwxMDQuMDAgTDQuNzIsMTEyLjAwIEw1LjM0LDEyMC4wMCBMNS4xNCwxMjguMDAgTDUuNzUsMTM2LjAwIEw0LjUyLDE0NC4wMCBMNS40MywxNTIuMDAgTDUuNDQsMTYwLjAwIEw0LjAwLDE2OC4wMCBMNS4zNCwxNzYuMDAgTDQuMDAsMTg0LjAwIEw0Ljc1LDE5Mi4wMCBMNC40NSwyMDAuMDAgTDQuNzMsMjA4LjAwIEw1LjY3LDIxNi4wMCBMNC41NSwyMjQuMDAgTDUuNTEsMjMyLjAwIEw1LjE5LDI0MC4wMCBMNS43OCwyNDguMDAgTDUuMDEsMjU2LjAwIEwwLDI1NiBMMCwwIFoiIGZpbGw9IiNmZmYiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcCkiLz48L3N2Zz4=");
  --havna-ink-right: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwIiB3aWR0aD0iOCIgaGVpZ2h0PSIyNTYiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGQ9Ik01LjAxLDAuMDAgTDQuODgsOC4wMCBMNC4zNSwxNi4wMCBMNS4zOCwyNC4wMCBMNS4zOCwzMi4wMCBMNC41OSw0MC4wMCBMNS4wMyw0OC4wMCBMNS4zMCw1Ni4wMCBMNS4yMCw2NC4wMCBMNS4zNiw3Mi4wMCBMNS43MCw4MC4wMCBMNC43Miw4OC4wMCBMNC4xNyw5Ni4wMCBMNC42MCwxMDQuMDAgTDQuNzIsMTEyLjAwIEw1LjM0LDEyMC4wMCBMNS4xNCwxMjguMDAgTDUuNzUsMTM2LjAwIEw0LjUyLDE0NC4wMCBMNS40MywxNTIuMDAgTDUuNDQsMTYwLjAwIEw0LjAwLDE2OC4wMCBMNS4zNCwxNzYuMDAgTDQuMDAsMTg0LjAwIEw0Ljc1LDE5Mi4wMCBMNC40NSwyMDAuMDAgTDQuNzMsMjA4LjAwIEw1LjY3LDIxNi4wMCBMNC41NSwyMjQuMDAgTDUuNTEsMjMyLjAwIEw1LjE5LDI0MC4wMCBMNS43OCwyNDguMDAgTDUuMDEsMjU2LjAwIiBmaWxsPSJub25lIiBzdHJva2U9IiM3OTY1NEMiIHN0cm9rZS1vcGFjaXR5PSIuNDUiIHN0cm9rZS13aWR0aD0iLjg1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3ApIi8+PC9zdmc+");
}

/* 1. Fine sand. Remove the old fixed SVG-noise overlay. */
html { background-color: var(--sand, #E8DFD0); }
body {
  background-color: var(--sand, #E8DFD0);
  background-image: url("sand-tile-9d276969.webp");
  background-repeat: repeat;
  background-position: left top;
  background-size: 1024px 1024px;
}
body::before { content: none !important; background: none !important; }

/* 2. The paper surface/edge recipe. The five mask layers are ADDED
      (united): top / bottom / left / right / solid centre.
      Alpha is rendered on 8px strips, never via a large filter. */
.sheet,
.ab-restoration-video .ab-video-mat,
:is(.ab-photo, .ab-strip-portrait, .vignette, .ab-video-mat,
    .pricing-card, .audience-card, .ab-provider) {
  border-radius: 0 !important;
  -webkit-mask-image:
    var(--havna-mask-top), var(--havna-mask-bottom),
    var(--havna-mask-left), var(--havna-mask-right),
    linear-gradient(#000 0 0);
  mask-image:
    var(--havna-mask-top), var(--havna-mask-bottom),
    var(--havna-mask-left), var(--havna-mask-right),
    linear-gradient(#000 0 0);
  /* [fix] edge strips stop 4px short of each corner (patterned SVG, no stretching) so they no longer poke past the corners */
  -webkit-mask-position: 4px 0, 4px 100%, 0 4px, 100% 4px, center;
  mask-position: 4px 0, 4px 100%, 0 4px, 100% 4px, center;
  -webkit-mask-size: calc(100% - 8px) 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), 8px calc(100% - 8px),
                     calc(100% - 12px) calc(100% - 12px);
  mask-size: calc(100% - 8px) 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), 8px calc(100% - 8px),
             calc(100% - 12px) calc(100% - 12px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Shared physical paper fill and drawn 1px-like edge stroke.
   Keep the SVG strokes tiny; NEVER apply a filter to the full sheet. */
.sheet,
.ab-restoration-video .ab-video-mat,
:is(.ab-photo, .ab-strip-portrait, .vignette, .ab-video-mat,
    .pricing-card, .audience-card, .ab-provider) {
  background-color: var(--paper, #F7F2EA);
  background-image:
    var(--havna-ink-top), var(--havna-ink-bottom),
    var(--havna-ink-left), var(--havna-ink-right),
    url("paper-fill-ea4332df.webp");
  background-position: 4px 0, 4px 100%, 0 4px, 100% 4px, left top;
  background-size: calc(100% - 8px) 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), 8px calc(100% - 8px),
                   1024px 1024px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-attachment: scroll;
}

/* 3. Large page. Override the desktop 300-point polygon AND mobile none. */
.sheet-wrap {
  filter: none !important;           /* removes old 23px blurred drop shadow */
  -webkit-filter: none !important;
  box-shadow: none !important;
  max-width: 1512px;
  margin: 24px auto 40px;
  padding-inline: clamp(7px, 1.55vw, 23px); /* thin sand reveal */
}
.sheet {
  position: relative;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  filter: none !important;
  box-shadow: none !important;
  border: 0;
}

/* 4. Photo and editorial mats: paper/card stock, no rounded corners,
      no heavy lift shadows; preserve existing tilts and transforms. */
:is(.ab-photo, .ab-strip-portrait, .vignette, .ab-video-mat,
    .pricing-card, .audience-card, .ab-provider) {
  border: 1px solid var(--havna-rule) !important;
  box-shadow: none !important;
  outline: none;
}

/* Keep each site's existing mat padding, existing image crop, and photo tilts. */
.ab-photo,
.ab-strip-portrait {
  padding: 7px 7px 5px;
  box-shadow: 1px 1px 0 rgba(121, 101, 76, .12) !important;
}
.ab-photo {
  transform: translateY(10px) rotate(var(--ab-tilt, 0deg));
  transform-origin: center center;
  transition: transform .6s cubic-bezier(.2,.6,.2,1),
              box-shadow .25s ease;
}
.ab-photo.ab-settled {
  transform: translateY(0) rotate(var(--ab-tilt, 0deg));
}
@media (hover: hover) and (pointer: fine) {
  .ab-photo:hover {
    transform: translateY(-3px) rotate(0deg);
    box-shadow: 2px 2px 0 rgba(121, 101, 76, .14) !important;
  }
  .vignette:hover, .audience-card:hover,
  .pricing-card:hover, .ab-provider:hover {
    box-shadow: 2px 2px 0 rgba(121, 101, 76, .12) !important;
  }
}

.vignette {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  height: auto;
  padding: 7px;
  margin-bottom: 20px;
  overflow: hidden;
}
.vignette img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 0 !important;
  filter: saturate(.97) sepia(.02); /* small image only, not scrolling sheet */
}

.ab-restoration-video .ab-video-mat {
  padding: 9px;
  box-shadow: none !important;
}
.ab-provider {
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Preserve featured-pricing layout after normalising 4px top rule to 1px. */
.pricing-card.featured {
  border-top: 1px solid var(--havna-rule) !important;
  padding-top: clamp(24px, 3vw, 39px);
}
/* Both are media VIEWPORTS, not paper mats: keep their overflow clipped. */
.ab-compare, .ab-panorama-frame {
  border: 1px solid var(--havna-rule);
  border-radius: 0;
}
/* Other paper frame used by founder/profile portraits. */
.portrait-frame {
  border: 1px solid var(--havna-rule);
  border-radius: 0;
  box-shadow: none;
}

/* 5. Lovable-weight section dividers; no thick gold rules. */
.section,
.ab-file,
.step {
  border-top: 1px solid var(--havna-rule) !important;
}
.offer-strip,
.faq-list {
  border-top: 1px solid var(--havna-rule) !important;
  border-bottom: 1px solid var(--havna-rule) !important;
}
.hours-col { border-left: 1px solid var(--havna-rule) !important; }
.faq-list > :is(article, details, div),
.faq-list .faq-item { border-bottom: 1px solid var(--havna-rule); }

/* 6. Mobile: keep the narrow sand margin AND deckle, with no clip-path reset.
      Avoid affecting site-wide responsive grid, typography and fixed CTA. */
@media (max-width: 520px) {
  .sheet-wrap {
    margin: 10px auto 18px;
    padding-inline: 7px;
    filter: none !important;
  }
  .sheet {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    /* SVG tile masks above remain active on mobile. */
  }
  /* Small cards need only a whisper of shadow on touch screens. */
  .ab-photo, .ab-strip-portrait { box-shadow: none !important; }
}

/* 7. Motion and accessibility. Maintain visible focus for interaction. */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  .ab-photo, .ab-provider,
  .vignette, .audience-card, .pricing-card {
    transition: none !important;
    animation: none !important;
  }
  .ab-photo:hover { transform: translateY(0) rotate(var(--ab-tilt, 0deg)); }
}
:is(.ab-photo, .ab-strip-portrait, .vignette, .ab-video-mat,
    .pricing-card, .audience-card, .ab-provider):focus-visible {
  outline: 2px solid var(--lapis, #1E3A5F);
  outline-offset: 2px;
}

/* ========================================================================
   DESKTOP EDITORIAL LAYOUT (>=801px only; phones/tablets untouched)
   Grid: the content column of .container (1106px at 1440). Text sits on the
   editorial indent (--ab-indent, the same axis as every .ab-file-copy);
   media spans the full content column. Spacing scale: 8/16/24/32/48/72/112.
   Print sets are "justified" rows: each print's flex-basis is proportional to
   its photo's real aspect ratio, so every print in a row shares one image
   height, captions line up, and nothing is stretched or heavily cropped.
   --mat = horizontal mat (7px padding x2 + 1px rule x2).
   ======================================================================== */
@media (min-width: 801px) {
  :root {
    --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 72px; --s7: 112px;
    --ab-indent: clamp(0px, 19vw, 250px);
    --gal-gap: 28px;
    --mat: 16px;
  }

  /* --- Pricing: its own deckled sheet on the sand, not a flat band butting the hero sheet --- */
  .pricing {
    margin-top: var(--s4);
    background-color: #efe7d9;
    background-blend-mode: multiply;
    -webkit-mask-image: var(--havna-mask-top), var(--havna-mask-bottom), var(--havna-mask-left), var(--havna-mask-right), linear-gradient(#000 0 0);
    mask-image: var(--havna-mask-top), var(--havna-mask-bottom), var(--havna-mask-left), var(--havna-mask-right), linear-gradient(#000 0 0);
    -webkit-mask-position: 4px 0, 4px 100%, 0 4px, 100% 4px, center;
    mask-position: 4px 0, 4px 100%, 0 4px, 100% 4px, center;
    -webkit-mask-size: calc(100% - 8px) 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), 8px calc(100% - 8px), calc(100% - 12px) calc(100% - 12px);
    mask-size: calc(100% - 8px) 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), 8px calc(100% - 8px), calc(100% - 12px) calc(100% - 12px);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    background-image: var(--havna-ink-top), var(--havna-ink-bottom), var(--havna-ink-left), var(--havna-ink-right), url("paper-fill-ea4332df.webp");
    background-position: 4px 0, 4px 100%, 0 4px, 100% 4px, left top;
    background-size: calc(100% - 8px) 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), 8px calc(100% - 8px), 1024px 1024px;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    border-top: 0 !important;
  }
  .pricing-grid { gap: var(--s3); }

  /* --- Industry photo cards: equal-height cards, image + copy on one baseline --- */
  .audience-grid { gap: var(--s3); align-items: stretch; }
  .audience-card { min-height: 0; display: flex; flex-direction: column; padding: var(--s3) var(--s3) var(--s4); }
  .audience-card .vignette { margin-bottom: var(--s3); }

  /* --- About rhythm --- */
  .ab-about-head { margin-bottom: var(--s6); }
  .ab-intro {
    grid-template-columns: clamp(205px, 21vw, 285px) minmax(0, 690px);
    column-gap: var(--s5);
    align-items: center;
    margin: 0 0 var(--s5);
  }
  /* The founder photo is a tall 852x1536 stage shot: show it as a 3:4 portrait, not a 4:3 crop of a banner. */
  .ab-intro-portrait img { aspect-ratio: 3 / 4; object-position: 50% 40%; }
  /* Origin line hangs on the same axis as the intro text beside the portrait. */
  .ab-business-origin { margin: 0 0 0 calc(clamp(205px, 21vw, 285px) + var(--s5)); max-width: 690px; }

  .ab-file, .ab-file-site, .ab-file-vr, .ab-file-restoration { margin-top: var(--s7); padding-top: var(--s4); }
  .ab-file-head { margin: 0 0 var(--s3); }
  .ab-file-copy { margin: 0 0 var(--s5) var(--ab-indent); max-width: 760px; }

  /* --- FILE 01 Site: one composed 5-print set (3-up over 2-up) under the paragraph --- */
  .ab-file-site { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: var(--gal-gap); row-gap: var(--s4); }
  .ab-file-site > .ab-file-head { flex: 0 0 100%; margin-bottom: 0; }
  .ab-file-site .ab-file-copy, .ab-file-site .ab-site-lead, .ab-file-site .ab-site-photos { display: contents; }
  .ab-file-site .ab-site-lead > p {
    order: 1; flex: 0 0 100%; box-sizing: border-box; margin: 0 0 var(--s3);
    padding-left: var(--ab-indent); padding-right: max(0px, calc(100% - var(--ab-indent) - 760px));
  }
  .ab-file-site figure.ab-photo {
    margin: 0; width: auto; max-width: none; grid-row: auto; grid-column: auto; justify-self: auto;
  }
  .ab-file-site figure.ab-photo img { width: 100%; height: auto; aspect-ratio: auto; object-fit: cover; padding: 0; }
  /* Row A: Allianz 1:1 + two 4:3 (sum of ratios 3.669) */
  .ab-file-site .ab-site-allianz  { order: 2; flex: 0 0 calc((100% - 3 * var(--mat) - 2 * var(--gal-gap) - 1px) * 1.002 / 3.669 + var(--mat)); }
  .ab-file-site .ab-site-primary  { order: 3; flex: 0 0 calc((100% - 3 * var(--mat) - 2 * var(--gal-gap) - 1px) * 1.3333 / 3.669 + var(--mat)); }
  .ab-file-site .ab-site-secondary{ order: 4; flex: 0 0 calc((100% - 3 * var(--mat) - 2 * var(--gal-gap) - 1px) * 1.3333 / 3.669 + var(--mat)); }
  /* Row B: 4:3 + 16:9 (sum 3.111) */
  .ab-file-site .ab-site-tertiary { order: 5; flex: 0 0 calc((100% - 2 * var(--mat) - var(--gal-gap) - 1px) * 1.3333 / 3.111 + var(--mat)); }
  .ab-file-site .ab-site-new      { order: 6; flex: 0 0 calc((100% - 2 * var(--mat) - var(--gal-gap) - 1px) * 1.7778 / 3.111 + var(--mat)); }

  /* --- FILE 02 Inspiro VR: justified 2-up at true ratios, then the panorama at full content width --- */
  .ab-file-vr .ab-vr-photos { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--gal-gap); margin: 0; }
  .ab-file-vr .ab-vr-photos > figure { margin: 0; width: auto; }
  .ab-file-vr .ab-vr-photos img { aspect-ratio: auto; height: auto; }
  .ab-file-vr .ab-vr-primary   { flex: 0 0 calc((100% - 2 * var(--mat) - var(--gal-gap) - 1px) * 1.1422 / 2.92 + var(--mat)); }
  .ab-file-vr .ab-vr-secondary { flex: 0 0 calc((100% - 2 * var(--mat) - var(--gal-gap) - 1px) * 1.7776 / 2.92 + var(--mat)); }
  .ab-file-vr .ab-panorama { margin-top: var(--s5); }

  /* --- FILE 03 Vending Blue: 3 equal columns; 01/02 (16:9) stack beside the two 3:4 portraits --- */
  .ab-vending-copy { margin-bottom: var(--s5); }
  .ab-vending-photos {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto;
    column-gap: var(--gal-gap); row-gap: var(--gal-gap); align-items: start; margin: 0;
  }
  .ab-vending-concept { grid-column: 1; grid-row: 1; }
  .ab-vending-art     { grid-column: 1; grid-row: 2; align-self: end; }
  .ab-vending-machine { grid-column: 2; grid-row: 1 / span 2; }
  .ab-vending-client  { grid-column: 3; grid-row: 1 / span 2; }
  .ab-vending-concept img, .ab-vending-art img { aspect-ratio: 16 / 9; }
  .ab-vending-machine img, .ab-vending-client img { aspect-ratio: 3 / 4; }

  .ab-pull-line { margin: var(--s7) auto; }

  /* --- FILE 05 Restoration: slider and video as one pair at equal height across the content width --- */
  .ab-file-restoration {
    display: grid; grid-template-columns: minmax(0, 16fr) minmax(0, 9.25fr);
    column-gap: var(--gal-gap); align-items: start;
  }
  .ab-file-restoration > .ab-file-head, .ab-file-restoration > .ab-file-copy { grid-column: 1 / -1; }
  .ab-file-restoration .ab-comparison-figure { grid-column: 1; margin: 0; }
  .ab-file-restoration .ab-compare { aspect-ratio: 1 / 1; }
  .ab-file-restoration .ab-restoration-video { grid-column: 2; margin: 0; max-width: none; width: 100%; }
  .ab-restoration-video figcaption, .ab-comparison-figure figcaption { padding-top: 12px; }

  .ab-end-notes { margin: var(--s7) 0 0 var(--ab-indent); max-width: 810px; }
}