/* Plot Photography: the site header and footer.
   Ported verbatim from build/blocks/site-header/style.css and build/blocks/site-footer/style.css (2026-10-03),
   plus the few lines under "WordPress port" at the end. Do not edit here without updating the mockup blocks, or the
   other way round, until the mockups retire. */

/* ===== BLOCK site-header (build/blocks/site-header/style.css): the bar, the phone menu, and the hide-on-scroll behaviour.
   Colours are set explicitly so the header reads the same over any section ground. ===== */
/* Layout (2026-09-29): logo left, the five main links centred on the page, and on the right a quiet "Client login" text link
   beside Order Now. Three columns, the outer two equal, so the links sit on the true centre line. */
.site-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:24px;padding:20px var(--grid-margin);color:var(--plot-bone)}
.site-top .logo{justify-self:start}
.site-top .logo img{height:38px;width:auto}
.site-top nav{display:flex;align-items:center;gap:30px;font-size:17px;font-weight:500}
.site-top .top-right{justify-self:end;display:flex;align-items:center;gap:22px}
.site-top .top-right .login{font-size:15px;font-weight:400;color:rgba(243,238,230,.66);text-decoration:none;white-space:nowrap;transition:color 150ms ease}
.site-top .top-right .login:hover{color:var(--plot-bone);text-decoration:underline;text-underline-offset:.35em}
.site-top .top-right .login:focus-visible{outline:2px solid var(--plot-bone);outline-offset:3px;border-radius:4px}
.site-top nav a{text-decoration:none}
.site-top nav a:hover,.site-top nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.4em}
/* Services and Pricing dropdowns (same pattern): the link still goes to its page; the chevron (and hover, and keyboard focus) opens the list.
   A 14px bridge above the panel keeps it open while the pointer travels down to it. */
.nav-drop{position:relative;display:flex;align-items:center;gap:6px}
.drop-btn{appearance:none;display:inline-grid;place-items:center;width:24px;height:32px;margin-right:-6px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.drop-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform 220ms cubic-bezier(.16,1,.3,1)}
.nav-drop.open .drop-btn svg{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 14px);left:-18px;min-width:268px;display:flex;flex-direction:column;padding:8px;border-radius:14px;
  background:rgba(21,18,15,.97);box-shadow:0 0 0 1px rgba(243,238,230,.1),0 28px 56px -20px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 160ms ease,transform 200ms ease,visibility 0s linear 200ms}
.drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-drop.open .drop{opacity:1;visibility:visible;transform:none;transition:opacity 180ms ease,transform 260ms cubic-bezier(.16,1,.3,1),visibility 0s}
.site-top nav .drop a{padding:11px 14px;border-radius:9px;font-size:17px;font-weight:500;white-space:nowrap;transition:background-color 150ms ease}
.site-top nav .drop a:hover{background:rgba(243,238,230,.08);text-decoration:none}
.site-top nav a:focus-visible,.drop-btn:focus-visible{outline:2px solid var(--plot-bone);outline-offset:3px;border-radius:4px}
.site-top .btn{min-height:46px;padding:0 24px;--btn-bg:var(--plot-bone);--btn-text:var(--plot-night)}
/* Phone menu button: three lines to open, an X on the sheet to close (labels in aria-label). Just the lines, no box,
   border or tint (2026-10-12); the 46px button (44px on small phones) stays as an invisible tap area, and the 4px
   corners only shape the keyboard focus outline. */
.menu-btn{display:none;justify-content:center;color:inherit;background:none;border:0;
  border-radius:4px;width:46px;height:46px;padding:0;cursor:pointer}
.menu-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
.menu-btn:focus-visible{outline:2px solid var(--plot-bone);outline-offset:3px}
.menu{position:fixed;inset:0;z-index:50;background:var(--plot-night);color:var(--plot-bone);padding:20px var(--grid-margin) 40px;display:none;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
.menu.open{display:flex}
.menu .row{display:flex;justify-content:space-between;align-items:center}
.menu .row img{height:34px}
.menu ul{list-style:none;margin:48px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.menu ul a{font-family:var(--font-display);font-weight:600;font-size:34px;letter-spacing:-.02em;text-decoration:none;line-height:1.3}
.menu ul li.sub a{font-size:22px;font-weight:500;color:var(--plot-ash);padding-left:18px}
.menu ul li.sub a[aria-current]{color:var(--plot-bone)}
.menu .foot-row{margin-top:auto;padding-top:28px;display:flex;align-items:center;gap:22px}
.menu .foot-row a:not(.btn){color:var(--plot-ash);font-size:17px}
.menu .btn{--btn-bg:var(--plot-bone);--btn-text:var(--plot-night)}
@media (max-width:1180px){
  .site-top nav{gap:22px;font-size:16px}
  .site-top .top-right{gap:16px}
}
@media (max-width:1060px){
  .site-top{column-gap:16px}
  .site-top nav{gap:16px}
  .site-top .top-right{gap:12px}
  .site-top .top-right .btn{padding:0 18px}
}
@media (max-width:960px){
  .site-top{grid-template-columns:auto auto;justify-content:space-between}
  .site-top nav,.site-top .top-right{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .top-actions{display:flex;gap:10px;align-items:center}
}
@media (max-width:760px){
  .site-top{padding-top:14px}
  .menu{padding-top:14px}   /* same top as the header, so the X sits exactly where the three lines were */
  .site-top .logo img{height:30px}
  .site-top .top-actions .btn{min-height:44px;padding:0 18px;font-size:16px}
  .menu-btn{width:44px;height:44px}
}
/* hide-on-scroll (was homepage/site-header.css). The header is fixed. Past 80px, scrolling down slides it up out of view
   (250ms ease-out); any upward scroll of more than 5px brings it straight back (200ms). It gets a solid ground once the page
   has moved. It never changes layout height, so there is no CLS. Reduced motion: it toggles without the slide. */
[data-site-header]{position:fixed;top:0;left:0;right:0;z-index:40;transform:translateY(0);will-change:transform;
  transition:transform 200ms cubic-bezier(.16,1,.3,1),background-color 250ms ease,box-shadow 250ms ease}
[data-site-header].is-hidden{transform:translateY(-100%);transition:transform 250ms cubic-bezier(.2,0,0,1),background-color 250ms ease}
[data-site-header].is-scrolled{background:rgba(21,18,15,.94);box-shadow:0 1px 0 rgba(243,238,230,.06)}
@media (prefers-reduced-motion:reduce){[data-site-header],[data-site-header].is-hidden,.drop,.nav-drop.open .drop,.drop-btn svg{transition:none}}
/* ===== end site-header ===== */

/* ===== BLOCK site-footer (build/blocks/site-footer/style.css; was homepage/site-footer.css + three page copies) =====
   Desktop: brand column + three link columns, then a base row (© left, legal centred, "Website by" bottom-right).
   ≤600px: a purpose-built stack: logo + one line, a full-width Order Now, phone and email as big tap rows, the nav as a
   2-column grid, the social icons centred, a divider, the legal links centred, and the credit centred at the very
   bottom. Every tap target is 44px or more, and the bottom respects the iPhone home-indicator safe area
   (needs viewport-fit=cover in the viewport meta).                                                               */
.foot{padding:var(--space-xl) 0 calc(var(--space-m) + env(safe-area-inset-bottom,0px));color:var(--text-muted);font-size:17px}
.foot a{text-decoration:none}
/* footer.foot, not .foot: sections have their own .foot row (reviews, aerial proof), and this hover turned their light
   button's label bone on white (about 1.1:1). Buttons keep the .btn hover: white fill, dark label. */
footer.foot a:not(.btn):hover{color:var(--plot-bone);text-decoration:underline;text-decoration-color:var(--accent)}
.foot-grid{display:grid;grid-template-columns:minmax(0,5fr) repeat(2,minmax(0,2fr)) minmax(0,3fr);gap:var(--space-l)}
/* 2026-10-24 (Nicolas): "Talk to us" is wider (3fr, taken from the brand column's empty space) so the support
   email fits on one line at common laptop widths. Each column is a size container so the email can size to it (below). */
.foot-grid>div{container-type:inline-size}
.foot .brand img{height:42px;width:auto}
.foot .brand .logo{display:inline-block;border-radius:4px}
.foot .brand p{margin-top:18px;max-width:30ch}
.foot .foot-h{font-family:var(--font-text);font-weight:600;font-size:17px;letter-spacing:0;color:var(--plot-bone);margin:0 0 12px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.foot .hours{color:var(--text-muted);line-height:1.45;margin-bottom:4px}   /* 2026-10-07: hours sit with the phone number */
.foot .tel{font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--plot-bone);letter-spacing:-.01em}
/* The support email under the hours (2026-10-20; fitted 2026-10-24). It sizes to its column so it stays on one line:
   17px (the column's text size) where there is room, easing down to 15px (caption size, the floor) as the column narrows.
   An address is about 15.2em wide, so 6.5cqi is the size that just fits. Only where even 15px cannot fit does it break,
   and then cleanly after the @ (the <wbr> in footer.php); a mid-word break is the last resort for a very long address. */
.foot .mail{display:inline-block;max-width:100%;font-size:clamp(15px,6.5cqi,17px);line-height:1.45;overflow-wrap:anywhere}
/* 2026-10-08 (Nicolas): the footer's Order Now is a real button in the header's style (bone on night), sized for the
   column; Client login is a normal link, last under Plot. Same as build/blocks/site-footer/style.css. */
.foot .f-cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 22px;margin-top:10px;
  border-radius:var(--radius-button);background:var(--plot-bone);border:1px solid var(--plot-bone);color:var(--plot-night);
  font-family:var(--font-display);font-weight:600;font-size:16px;white-space:nowrap;text-decoration:none}
.foot .f-cta:hover{background:#fff;border-color:#fff;color:var(--plot-night);text-decoration:none}
.social{display:flex;gap:10px;margin-top:22px}
.social a{display:inline-grid;place-items:center;width:46px;height:46px;border:1px solid var(--rule);border-radius:50%;color:var(--plot-bone)}
.social a:hover{border-color:var(--plot-bone);text-decoration:none}
.social a.todo{border-style:dashed}
.social svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.foot-m{display:none}
.foot-base{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-top:var(--space-xl);padding-top:var(--space-m);border-top:1px solid var(--rule);font-size:15px}
.foot-base ul{flex-direction:row;gap:22px;flex-wrap:wrap;justify-content:center}
.foot-base .credit{justify-self:end}
.foot-base .credit a{color:var(--plot-bone)}
@media (max-width:1080px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){
  .foot{padding-top:var(--space-l)}
  .foot-grid{display:none}
  .foot-m{display:flex;flex-direction:column;gap:28px}
  .foot-m .logo img{height:36px;width:auto}
  .foot-m .line{margin-top:12px;font-size:17px;line-height:1.5;max-width:32ch}
  .foot-m .f-order{width:100%;min-height:54px}
  .foot-m .rows{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
  .foot-m .f-row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;border-bottom:1px solid var(--rule);color:var(--plot-bone)}
  .foot-m .f-row span{font-size:16px;color:var(--text-muted)}
  .foot-m .f-row b{font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.01em}
  .foot-m .f-hours b{font-size:18px;white-space:nowrap}   /* 2026-10-07: the hours stay on one line at 360px */
  /* An email address is too long to sit beside its label at 390px: the label goes above it and the address may break anywhere. */
  .foot-m .f-mail{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:10px 0}
  .foot-m .f-mail b{font-size:18px;min-width:0;max-width:100%;overflow-wrap:anywhere}
  .foot-m .f-nav{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}
  .foot-m .f-nav a{display:flex;align-items:center;min-height:46px;font-size:18px;color:var(--plot-bone)}
  .foot-m .social{justify-content:center;gap:14px;margin:0}
  .foot-m .social a{width:48px;height:48px}
  .foot-base{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;margin-top:28px;padding-top:24px}
  .foot-base ul{justify-content:center;gap:4px 8px}
  .foot-base ul a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
  .foot-base .credit{justify-self:center;order:3}
  .foot-base .credit a{display:inline-flex;align-items:center;min-height:44px}
}
/* ===== end site footer ===== */

/* ===== WordPress port ===== */
/* The plugin's Instagram glyph is the filled brand mark and fills its whole 24-unit box; at 18px it covers the same
   footprint as the mockup's 20px outline icon (whose square spans 18 of its 20px). */
.social .mss-social-icon{width:18px;height:18px}
/* The logo is a <picture> now: keep the img sizing rules working through it. */
.site-top .logo picture,.menu .row picture,.foot picture{display:block}
.foot .brand img,.foot-m .logo img{width:auto}
/* The mockup set display:inline-flex inline on the sheet's Close button; .menu-btn is display:none on desktop. */
.menu .menu-btn{display:inline-flex;align-items:center}

/* ===== Made Solid Studio credit pop-up (final 2026-10-12, build/footer-popup-mockup.html) =====
   Desktop: a bone card rises out of the credit, anchored to it, with the computer breaking out past its right edge.
   Phones: docked to the bottom of the screen with a 16px gutter, the computer over its top edge. No close button:
   js/ms-credit.js closes it on moving away, focus leaving, a tap outside, scrolling or Escape.
   The art is laid out at its native 1200x1348 inside .crt-stage and the stage is scaled as a whole, so the screen
   fit can't drift between breakpoints. */
.credit{position:relative}
.msp{
  --bg:#F3EEE6;--title:#15120F;--body:#5A534B;--rim:rgba(21,18,15,.10);--ring:#15120F;
  position:absolute;right:34px;bottom:calc(100% + 18px);z-index:60;width:420px;min-height:280px;padding:24px;
  display:flex;align-items:center;text-align:left;font-size:17px;line-height:1.5;color:var(--body);
  background:var(--bg);border-radius:18px;
  box-shadow:0 0 0 1px var(--rim),0 2px 6px rgba(0,0,0,.18),0 28px 60px -14px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);transform-origin:85% 100%;
  transition:opacity 200ms var(--ease-press),transform 260ms var(--ease-press),visibility 0s linear 260ms;
}
.msp.is-open{opacity:1;visibility:visible;transform:none;
  transition:opacity 240ms var(--ease-settle),transform 520ms var(--ease-settle),visibility 0s}
/* a hover bridge across the 18px gap, so moving from the credit up to the card never closes it */
.msp::after{content:"";position:absolute;left:0;right:0;top:100%;height:20px}
.msp :focus-visible{outline:2.5px solid var(--ring);outline-offset:3px}
.msp-clip{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;overflow:hidden}
.msp-shadow{position:absolute;left:237px;top:228px;width:200px;height:30px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(40,28,14,.34),rgba(40,28,14,.12) 60%,rgba(40,28,14,0))}
.msp-art{position:absolute;width:210px;right:-44px;top:4px;z-index:4;pointer-events:none}
.msp-text{position:relative;z-index:1;width:100%;padding-right:150px}
.msp-title{margin:0;font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.14;letter-spacing:-.02em;color:var(--title);text-wrap:balance}
.msp-body{margin:8px 0 0;font-family:var(--font-text);font-weight:400;font-size:17px;line-height:1.55;text-wrap:balance}
/* the button: Plot's own .btn in the light-section colours (ink on bone, black on hover) */
.foot .msp a.btn{margin-top:18px;gap:8px;min-height:44px;padding:0 20px;font-size:16px;
  background:var(--plot-ink);border-color:var(--plot-ink);color:var(--plot-bone);text-decoration:none}
.foot .msp a.btn:hover{background:#000;border-color:#000;color:var(--plot-bone);text-decoration:none;transform:translateY(-1px)}
.crt{position:relative;width:100%;aspect-ratio:1200/1348}
.crt-stage{position:absolute;left:0;top:0;width:1200px;height:1348px;transform-origin:0 0;transform:scale(calc(210 / 1200))}
.foot .crt-stage>picture{display:block}
.crt-stage>picture img{display:block;width:1200px;height:1348px;max-width:none;filter:drop-shadow(-10px 18px 18px rgba(30,22,12,.30))}
/* the glass: a 640x601 box projected onto the glass corners measured from the art:
   TL 180.13,154.90  TR 820.20,124.98  BR 798.68,756.83  BL 160.68,724.44 */
.crt-scr{position:absolute;left:0;top:0;width:640px;height:601px;transform-origin:0 0;transform:matrix3d(0.873733227,-0.0660068776,0,-0.000154079673,-0.0323845649,0.94755546,0,-1.3589817e-07,0,0,1,0,180.13,154.9,0,1)}
.crt-on{position:absolute;inset:0;border-radius:5px;overflow:hidden;background:#000;opacity:0;transform-origin:50% 50%}
.crt-on picture{display:block;width:100%;height:100%}
.crt-on img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.crt-glass{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(158deg,rgba(255,255,255,.20) 0,rgba(255,255,255,.06) 30%,rgba(255,255,255,0) 46%),
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 3px,rgba(0,0,0,0) 3px 7px);
  box-shadow:inset 0 0 60px rgba(0,0,0,.40)}
.msp.is-open .crt-on{opacity:1;animation:crtOn 560ms cubic-bezier(.2,.7,.2,1) 120ms both}
@keyframes crtOn{
  0%{transform:scale(.04,.006);filter:brightness(6)}
  30%{transform:scale(1,.012);filter:brightness(5)}
  58%{transform:scale(1,1.04);filter:brightness(1.8)}
  72%{transform:scale(1,.985);filter:brightness(1.25)}
  100%{transform:none;filter:none}}
@media (max-width:600px){
  .msp{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:auto;max-width:420px;margin:0 auto;
    min-height:0;padding:82px 22px 24px;display:block;transform-origin:50% 100%}
  .msp::after{display:none}
  .msp-art{width:125px;left:calc(50% - 62.5px);right:auto;top:-76px}
  .crt-stage{transform:scale(calc(125 / 1200))}
  .msp-shadow{left:calc(50% - 66px);top:54px;width:125px;height:20px}
  .msp-text{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  .msp,.msp.is-open{transform:none;transition:opacity 160ms linear,visibility 0s linear 160ms}
  .msp.is-open{transition:opacity 160ms linear,visibility 0s}
  .msp.is-open .crt-on{animation:none;opacity:1}
}