/* Concept face — the custom build tier.
   Loaded only when a site sets `face = concept`. It overlays site.css rather
   than replacing it, so every shared page (shop, dogs, contact) keeps working
   while the home page renders the designed composition. Colours still come from
   the site's theme, so a face is not tied to one client's palette. */

.face-concept .cf-code,
.face-concept .cf-eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--on-dark-mut);
}
.face-concept .cf-mark{
  display:inline-block; width:26px; height:2px; background:var(--rust);
  vertical-align:middle; margin-right:11px;
}

/* hero ------------------------------------------------------------------- */
.face-concept .cf-hero{
  position:relative; min-height:88vh; display:flex; align-items:flex-end;
  background:var(--marsh); border-bottom:1px solid var(--line); overflow:hidden;
}
/* No photograph on this door yet. 88vh of empty black reads as a page that failed
   to load, not as restraint, so the hero collapses to the height of its own words
   and keeps the masthead solid above it. */
.face-concept .cf-hero:not(.has-bg){ min-height:0; }
.face-concept .cf-hero:not(.has-bg) .cf-hero-in{ padding:76px 0 52px; }
.face-concept .cf-hero.has-bg{
  /* Take the photograph but NOT the shared .has-bg gradient — this face paints
     its own two scrims below, and stacking all three renders a black rectangle
     with an invisible photograph behind it. */
  background-image:var(--bg-url);
  background-size:cover; background-position:var(--bg-focus,center); background-repeat:no-repeat;
}
/* Two scrims, not one. A single top-down gradient leaves small mono type sitting
   on whatever the photograph happens to be doing at that height — on the first
   build that was a bright blue vest, and the eyebrow was invisible. */
.face-concept .cf-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.22) 34%,rgba(0,0,0,.92) 84%);
}
.face-concept .cf-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.50) 44%,rgba(0,0,0,0) 76%);
}
.face-concept .cf-hero-in{ position:relative; z-index:2; width:100%; padding:0 0 52px; }
.face-concept .cf-hero h1{
  font-size:clamp(42px,7.6vw,96px); line-height:.9; letter-spacing:-.028em;
  text-transform:uppercase; margin:16px 0 0; text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.face-concept .cf-hero h1 em,
.face-concept .cf-band h2 em,
.face-concept .cf-hd h2 em{
  font-family:var(--display); font-style:italic; font-weight:500;
  text-transform:none; letter-spacing:-.01em; color:var(--wheat);
}
.face-concept .cf-lede{ max-width:56ch; margin-top:18px; font-size:17px; color:var(--on-dark); }
.face-concept .cf-cta{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:26px; }
.face-concept .cf-spec{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; max-width:820px;
  margin-top:32px; padding-top:20px; border-top:1px solid rgba(255,255,255,.18);
}
.face-concept .cf-spec .v{
  display:block; font-family:var(--mono); font-size:14px; color:var(--on-dark); margin-top:5px;
}

/* sections --------------------------------------------------------------- */
.face-concept .cf-sec{ padding:clamp(3.5rem,8vw,6rem) 0; border-bottom:1px solid var(--line); }
.face-concept .cf-sec-alt{ background:var(--marsh-2); }
.face-concept .cf-hd{
  display:grid; grid-template-columns:96px 1fr; gap:22px; align-items:start; margin-bottom:38px;
}
.face-concept .cf-rail{
  font-family:var(--display); font-weight:900; font-size:52px; line-height:1;
  color:var(--marsh-3);
}
.face-concept .cf-hd h2{ font-size:clamp(28px,4.2vw,44px); text-transform:uppercase; letter-spacing:-.028em; }
.face-concept .cf-sub{ margin-top:13px; max-width:72ch; color:var(--on-dark-mut); }

.face-concept .cf-trio{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line);
}
.face-concept .cf-trio>div{ padding:30px 26px 34px; border-right:1px solid var(--line); }
.face-concept .cf-trio>div:last-child{ border-right:0; }
.face-concept .cf-pcode{
  font-family:var(--display); font-weight:900; font-size:26px; color:var(--rust); margin-bottom:16px;
}
.face-concept .cf-trio h3{ font-size:17px; margin-bottom:9px; text-transform:uppercase; }
.face-concept .cf-trio p{ font-size:14.5px; color:var(--on-dark-mut); }

/* band ------------------------------------------------------------------- */
.face-concept .cf-band{
  position:relative; min-height:72vh; display:flex; align-items:flex-end;
  background-image:var(--bg-url);
  background-size:cover; background-position:var(--bg-focus,center); background-repeat:no-repeat;
  border-bottom:1px solid var(--line);
}
.face-concept .cf-band::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.08) 30%,rgba(0,0,0,.90) 86%);
}
.face-concept .cf-band-in{ position:relative; z-index:2; width:100%; padding:0 0 50px; }
.face-concept .cf-band h2{
  font-size:clamp(26px,4.4vw,50px); max-width:18ch; text-transform:uppercase;
  letter-spacing:-.028em; line-height:.94; text-shadow:0 2px 30px rgba(0,0,0,.55);
}

/* product + animal tiles -------------------------------------------------- */
/* The 1px gap is the hairline rule between tiles, drawn by letting the container
   colour show through. That trick turns any unfilled column into a solid grey
   slab, so a boarding company with two rates rendered half a row of nothing.
   --cols is set inline from the item count; the media queries still cap it. */
.face-concept .cf-kit,
.face-concept .cf-dogs{
  display:grid; grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
  gap:1px; background:var(--line);
}
.face-concept .cf-item,
.face-concept .cf-dog{
  background:var(--marsh-2); text-decoration:none; color:inherit; display:block;
}
.face-concept .cf-item:hover,
.face-concept .cf-dog:hover{ background:var(--marsh-3); }
.face-concept .cf-shot{
  position:relative; aspect-ratio:1; background:var(--canvas-2); overflow:hidden;
  display:grid; place-items:center;
}
.face-concept .cf-shot img{ width:100%; height:100%; object-fit:cover; }
.face-concept .cf-noimg{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-light-mut);
}
.face-concept .cf-chip{
  /* --on-accent, not --on-dark: the theme computes a foreground that actually
     reads on the accent and audits it at 4.5:1, and every other accent-backed
     element uses it. This one did not, so on a light accent (Dynasty's green)
     the category chip was near-white on bright green — 1.78:1. */
  position:absolute; top:0; left:0; z-index:2; background:var(--rust); color:var(--on-accent, #fff);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 9px; font-weight:700;
}
.face-concept .cf-ibody,
.face-concept .cf-dog h3{ padding:18px 20px 0; }
.face-concept .cf-ibody{ padding-bottom:20px; }
.face-concept .cf-ibody h3,
.face-concept .cf-dog h3{ font-size:15.5px; margin:0 0 8px; text-transform:uppercase; }
.face-concept .cf-ibody p,
.face-concept .cf-dog p{ font-size:13.5px; color:var(--on-dark-mut); margin:0; }
.face-concept .cf-dog p{ padding:0 20px 20px; }
.face-concept .cf-prow{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:12.5px;
}
.face-concept .cf-prow .amt{ font-size:17px; color:var(--on-dark); }
.face-concept .cf-out{ color:var(--rust); }
.face-concept .cf-more{ margin-top:26px; }

@media (max-width:960px){
  .face-concept .cf-kit,
  .face-concept .cf-dogs,
  .face-concept .cf-spec{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .face-concept .cf-kit,
  .face-concept .cf-dogs{ grid-template-columns:repeat(min(var(--cols,4),2),minmax(0,1fr)); }
  .face-concept .cf-trio{ grid-template-columns:1fr; }
  .face-concept .cf-trio>div{ border-right:0; border-bottom:1px solid var(--line); }
  .face-concept .cf-hd{ grid-template-columns:1fr; }
  .face-concept .cf-rail{ font-size:38px; }
}
@media (max-width:560px){
  .face-concept .cf-kit,
  .face-concept .cf-dogs,
  .face-concept .cf-spec{ grid-template-columns:1fr; }
}

/* Masthead floating over the hero -----------------------------------------
   Only on a page that opts in (cf-overlay, set by the face when a hero photo
   exists). The shared masthead is a solid sticky bar, which pushes the artwork
   down and reads as a website with a picture under it rather than a page that
   opens on a photograph. Lifting it out of flow lets the image run to the top
   edge, the way the concept does. Inner pages keep the solid bar — a
   transparent one over ordinary content would be unreadable. */
.face-concept.cf-overlay .topstack{
  /* The door bar and the masthead float over the artwork as ONE unit. Lifting
     the masthead on its own put it at top:0 underneath the bar, which was also
     at the top — the brand drew straight over the switcher. Positioning the
     stack instead means the bar can be any height, including wrapped on a
     phone, without anything having to know what that height is. */
  position:absolute; top:0; left:0; right:0; z-index:50;
  /* The stack spans the full width at z-index 50, so its transparent padding was
     swallowing clicks aimed at anything beneath it in the hero — the text-size
     buttons were visible, focusable and completely dead to a mouse. Let clicks
     fall through the container and re-enable them on the parts that are actually
     interactive. */
  pointer-events:none;
}
/* Only the things you actually click. Re-enabling .masthead-in put the
   full-width container back in the way, which is the same bug with an extra
   step — the buttons underneath stayed dead. */
.face-concept.cf-overlay .topstack a,
.face-concept.cf-overlay .topstack button,
.face-concept.cf-overlay .topstack input,
.face-concept.cf-overlay .topstack .brand,
.face-concept.cf-overlay .topstack .nav{ pointer-events:auto; }
.face-concept.cf-overlay .masthead{
  position:static; background:transparent;
  border-bottom:1px solid rgba(255,255,255,.10); backdrop-filter:none;
}
.face-concept.cf-overlay .doorbar{
  background:rgba(0,0,0,.34); border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
}
/* Type on the bar now sits on the photograph, so it needs its own lift. */
.face-concept.cf-overlay .masthead .brand,
.face-concept.cf-overlay .masthead .nav a{ text-shadow:0 1px 14px rgba(0,0,0,.65); }
.face-concept.cf-overlay .cf-hero{ min-height:100vh; }

/* The collapsed phone menu has nothing behind it once the bar is transparent,
   so give the open panel its own ground or it lands on the photograph. */
@media (max-width:860px){
  .face-concept.cf-overlay .nav.is-open{ background:rgba(8,8,10,.96); }
}

/* Shop not yet taking money — say so where the prices are, not only on /shop. */
.face-concept .cf-preorder{
  margin-top:22px; padding:14px 18px; border-left:2px solid var(--rust);
  background:rgba(255,255,255,.04); color:var(--on-dark); font-size:14.5px;
}

/* Opening-block text size -------------------------------------------------
   One custom property scales the eyebrow, headline, lede and facts bar together
   so they keep their designed relationship rather than the headline ballooning
   past everything else. Set by the client on the Front page screen (hero_scale,
   clamped 0.85–1.6), not by the visitor. */
.face-concept .cf-hero, .face-concept .cf-hero-in{ --cf-scale: 1; }
.face-concept .cf-hero .cf-eyebrow{ font-size:calc(10.5px * var(--cf-scale)); }
.face-concept .cf-hero h1{ font-size:calc(clamp(42px,7.6vw,96px) * var(--cf-scale)); }
.face-concept .cf-hero .cf-lede{ font-size:calc(17px * var(--cf-scale)); }
/* The follow-on paragraph: same measure, quieter, and it scales with the reader
   control like everything else in the opening block. */
.face-concept .cf-lede-sub{ font-size:calc(15px * var(--cf-scale)); margin-top:12px; opacity:.82; }
.face-concept .cf-hero .cf-spec .v{ font-size:calc(14px * var(--cf-scale)); }