/* The Iron Canine — concept site.
   ============================================================================
   The organising idea is their own new identity. Their logos are playing cards:
   "THE IRON CANINE" running up both edges, a rank letter in the corner with a
   PAW as the suit, and an engraved black-and-white plate in the window. So the
   site is the deck. The family are the face cards — Aric the King, Emily the
   Queen, which is their own word for her on Facebook, and Rachel the Jack. The
   programmes are the suits. The dogs are cards.

   Colours are sampled, not chosen: the greys are the forged iron of the logo,
   and the red came off the training blind in their own photographs (#9C0000).
   Everything else is black and bone, because their identity is monochrome and
   that restraint is what makes the engraved artwork read. */

:root{
  --pitch:#08080A;
  --iron:#121215;
  --forge:#1C1C21;
  --edge:#2E2F35;
  --edge-2:#43444C;
  --pewter:#9BA0A6;
  --pewter-dim:#6B7076;
  --bone:#EDEBE6;
  --blood:#9C0000;
  --blood-hi:#C0141B;
  /* Edge reds. The mark is monochrome, but an all-grey page went dead — these
     put the forge back into it without touching the engraved artwork. */
  --ember:#8E1418;
  --ember-soft:rgba(192,20,27,.42);
  --ember-faint:rgba(192,20,27,.16);

  --display:'Cinzel', 'Trajan Pro', Georgia, serif;
  --body:'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cond:'Barlow Condensed', 'Arial Narrow', sans-serif;

  --gut:clamp(18px,4vw,54px);
  --max:1280px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--pitch); color:var(--bone);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
:focus-visible{outline:2px solid var(--pewter); outline-offset:3px;}
.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gut);}

/* ---------- type ---------- */
.h{font-family:var(--display); font-weight:700; letter-spacing:.02em; line-height:1.06; margin:0;
  text-transform:uppercase;}
.h-xl{font-size:clamp(34px,5.4vw,68px);}
.h-lg{font-size:clamp(26px,3.6vw,44px);}
.h-md{font-size:clamp(19px,2vw,25px);}
.eyebrow{font-family:var(--cond); font-weight:600; text-transform:uppercase;
  letter-spacing:.34em; font-size:12px; color:var(--pewter-dim); margin:0;}
.eyebrow-hi{color:var(--blood-hi);}
.lede{font-size:clamp(17px,1.5vw,20px); color:#C3C6CA; max-width:62ch; margin:0;}
.rule{height:1px; background:linear-gradient(90deg,var(--edge-2),transparent); border:0; margin:0;}

/* ---------- header ---------- */
.top{position:sticky; top:0; z-index:60; background:rgba(8,8,10,.9);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--edge);}
.top-in{display:flex; align-items:center; gap:26px; height:74px;}
.brand{display:flex; align-items:center; gap:12px; flex:0 0 auto;}
.brand img{height:44px; width:auto;}
.brand span{font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.18em;
  text-transform:uppercase; line-height:1;}
.nav{display:flex; gap:26px; margin-left:auto; align-items:center;}
.nav a{font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  font-size:13.5px; color:var(--pewter); padding:6px 0; border-bottom:1px solid transparent;
  transition:color .15s,border-color .15s;}
.nav a:hover{color:var(--bone); border-bottom-color:var(--blood-hi);}
.burger{display:none; width:40px; height:40px; margin-left:auto; border:1px solid var(--edge-2);
  place-items:center;}
.burger i{display:block; width:17px; height:1px; background:var(--bone); position:relative;}
.burger i::before,.burger i::after{content:''; position:absolute; left:0; width:17px; height:1px;
  background:var(--bone);}
.burger i::before{top:-5px;} .burger i::after{top:5px;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 30px;
  font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.18em;
  font-size:13.5px; border:1px solid transparent; transition:background .16s,border-color .16s,color .16s;}
.btn-blood{background:var(--blood); color:var(--bone); border-color:var(--blood);}
.btn-blood:hover{background:var(--blood-hi); border-color:var(--blood-hi);}
.btn-ghost{border-color:var(--edge-2); color:var(--bone);}
.btn-ghost:hover{border-color:var(--blood-hi); background:rgba(192,20,27,.08);}

/* ---------- hero ---------- */
.hero{position:relative; min-height:min(880px,94vh); display:flex; align-items:center;
  border-bottom:1px solid var(--edge); overflow:hidden;}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:58% 40%;
  filter:grayscale(1) contrast(1.16) brightness(.72);}
.hero-veil{position:absolute; inset:0;
  background:linear-gradient(90deg,var(--pitch) 4%,rgba(8,8,10,.86) 46%,rgba(8,8,10,.42) 100%),
             linear-gradient(0deg,var(--pitch) 1%,rgba(8,8,10,0) 42%);}
.hero-in{position:relative; width:100%; padding-block:clamp(70px,10vw,120px);}
.hero-mark{height:clamp(96px,12vw,150px); width:auto; margin-bottom:26px;
  filter:drop-shadow(0 6px 28px rgba(0,0,0,.8));}
.hero-h{margin-bottom:22px; max-width:17ch;}
.hero-sub{margin-bottom:34px;}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px;}

/* ---------- the card ----------
   One component, used for people, programmes and dogs. Everything that makes it
   read as a card — the double rule, the running edge type, the rank and paw in
   opposite corners — is drawn here rather than baked into an image, so a new
   card is a photograph and four lines of text. */
.card{position:relative; aspect-ratio:5/7; perspective:1400px; background:none;}
.card-in{position:relative; width:100%; height:100%; transition:transform .62s cubic-bezier(.2,.8,.25,1);
  transform-style:preserve-3d;}
.card.flipped .card-in{transform:rotateY(180deg);}
.card-face{position:absolute; inset:0; backface-visibility:hidden; overflow:hidden;
  background:var(--pitch); border:1px solid var(--ember);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 10px 30px rgba(0,0,0,.5);
  transition:border-color .2s, box-shadow .2s;}
.card:hover .card-face,.card:focus-visible .card-face{border-color:var(--blood-hi);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 22px rgba(192,20,27,.28), 0 10px 30px rgba(0,0,0,.5);}
.card-back{transform:rotateY(180deg);}

/* the plate */
.card-art{position:absolute; inset:26px 34px; overflow:hidden; background:#000;}
.card-art img{width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.1); transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.card:hover .card-art img{transform:scale(1.05);}
.card-art::after{content:''; position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.92) 2%,rgba(0,0,0,.12) 40%,rgba(0,0,0,.30) 74%,rgba(0,0,0,.66) 100%);}

/* the inner rule */
.card-face::before{content:''; position:absolute; inset:14px; border:1px solid var(--ember-soft);
  pointer-events:none; z-index:3;}
.card-face::after{content:''; position:absolute; inset:18px; border:1px solid rgba(155,160,166,.22);
  pointer-events:none; z-index:3;}

/* THE IRON CANINE running up both edges */
.card-edge{position:absolute; top:0; bottom:0; width:34px; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:10.5px; letter-spacing:.34em;
  text-transform:uppercase; color:rgba(237,235,230,.78); z-index:4; pointer-events:none;
  text-shadow:0 0 10px rgba(192,20,27,.35);}
.card-edge-l{left:0; writing-mode:vertical-rl; transform:rotate(180deg);}
.card-edge-r{right:0; writing-mode:vertical-rl;}

/* rank + paw, opposite corners, the second rotated like a real card */
.card-rank{position:absolute; z-index:5; display:grid; justify-items:center; gap:3px;
  font-family:var(--display); font-weight:700; font-size:19px; line-height:1; color:var(--bone);
  text-shadow:0 1px 6px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9);}
.card-rank svg{width:15px; height:15px; fill:var(--blood-hi); opacity:1;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.95));}
.card-rank-tl{top:24px; left:40px;}
.card-rank-br{bottom:24px; right:40px; transform:rotate(180deg);}

/* The name clears the corner rank on the right and the turn hint below it —
   at 5-up the three were landing on top of each other. */
.card-name{position:absolute; left:34px; right:58px; bottom:58px; z-index:5;}
.card-name h3{font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(15px,1.5vw,19px); letter-spacing:.05em; margin:0 0 3px; line-height:1.12;
  text-shadow:0 1px 8px rgba(0,0,0,.9);}
.card-name p{font-family:var(--cond); font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; font-size:10.5px; color:var(--pewter); margin:0;}

/* the back: forged iron with the rank ghosted through it */
.card-back{background:
  repeating-linear-gradient(45deg,rgba(192,20,27,.07) 0 2px,transparent 2px 7px),
  repeating-linear-gradient(-45deg,rgba(192,20,27,.07) 0 2px,transparent 2px 7px),
  var(--iron);
  display:flex; flex-direction:column; padding:34px 32px;}
.card-back h4{font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:14px;
  letter-spacing:.08em; margin:0 0 14px; color:var(--bone);}
.card-back ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; overflow:auto;}
.card-back li{font-size:14px; line-height:1.45; color:#BFC3C7; padding-left:16px; position:relative;}
/* A five-across hand makes small cards, and a small card cannot hold body copy at
   the same size a three-across one can. The back scales with the hand it is in. */
.deck-5 .card-back{padding:24px 22px;}
.deck-5 .card-back h4{font-size:12.5px; margin-bottom:7px; line-height:1.2;}
.deck-5 .card-back ul{gap:7px;}
.deck-5 .card-back li{font-size:12.5px; line-height:1.4; padding-left:13px;}
.deck-5 .card-back li::before{top:8px; width:5px;}
.card-back li::before{content:''; position:absolute; left:0; top:9px; width:6px; height:1px;
  background:var(--blood-hi);}
.card-flip{position:absolute; left:0; right:0; bottom:27px; text-align:center;
  font-family:var(--cond); font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; font-size:10px; color:var(--pewter-dim); z-index:6;
  transition:color .15s;}
.card-hit{position:absolute; inset:0; z-index:7;}
.card:hover .card-flip{color:var(--bone);}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,9vw,120px) 0;}
.sec-head{margin-bottom:clamp(34px,5vw,58px); max-width:70ch; position:relative; padding-top:22px;}
.sec-head::before{content:''; position:absolute; top:0; left:0; width:64px; height:2px;
  background:linear-gradient(90deg,var(--blood-hi),var(--ember-faint));}
.sec-head .eyebrow{margin-bottom:16px;}
.sec-head .h{margin-bottom:18px;}
.sec-alt{background:var(--iron); border-block:1px solid var(--edge);}

.deck{display:grid; gap:clamp(16px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(212px,1fr));}
@media (min-width:1180px){ .deck-5{grid-template-columns:repeat(5,1fr);} }
.deck-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); max-width:1060px;}

/* ---------- band ---------- */
.band{position:relative; min-height:clamp(360px,52vw,600px); display:flex; align-items:flex-end;
  border-block:1px solid var(--edge); overflow:hidden;}
.band-bg{position:absolute; inset:0; background-size:cover; background-position:center;
  filter:grayscale(1) contrast(1.1) brightness(.66);}
.band-veil{position:absolute; inset:0;
  background:linear-gradient(0deg,var(--pitch) 3%,rgba(8,8,10,.1) 62%);}
.band-in{position:relative; width:100%; padding-block:clamp(34px,5vw,60px);}
.band-in .h{max-width:20ch; margin-bottom:14px;}

/* ---------- the ledger (agency work) ---------- */
.facts{display:grid; gap:0; border-top:1px solid var(--ember-soft); max-width:760px;}
.fact{display:grid; grid-template-columns:180px 1fr; gap:10px 26px; padding:17px 0;
  border-bottom:1px solid var(--edge-2); align-items:baseline;}
.fact dt{font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.2em;
  font-size:11.5px; color:var(--blood-hi); margin:0;}
.fact dd{margin:0; font-size:16px;}

/* ---------- apply ---------- */
.apply{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(26px,4vw,60px); align-items:start;}
.form{display:grid; gap:14px;}
.form label{display:grid; gap:6px;}
.form span{font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.2em;
  font-size:11px; color:var(--pewter-dim);}
.form input,.form select,.form textarea{width:100%; padding:13px 15px; background:var(--pitch);
  border:1px solid var(--edge-2); color:var(--bone); font:inherit; font-size:15.5px;}
.form textarea{min-height:118px; resize:vertical;}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--pewter); outline:none;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.note{font-size:14px; color:var(--pewter-dim);}

/* ---------- footer ---------- */
.foot{border-top:2px solid var(--ember); padding:44px 0 56px; background:var(--iron);}
.foot-in{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px;}
.foot h5{font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.24em;
  font-size:11px; color:var(--pewter-dim); margin:0 0 14px;}
.foot a{display:block; color:#C3C6CA; padding:4px 0; font-size:15px;}
.foot a:hover{color:var(--bone);}
.foot-mark{height:70px; width:auto; margin-bottom:16px;}
.foot-legal{margin-top:36px; padding-top:22px; border-top:1px solid var(--edge);
  font-size:13px; color:var(--pewter-dim); display:flex; flex-wrap:wrap; gap:10px 26px;}

/* ---------- concept ribbon ---------- */
.ribbon{position:fixed; left:0; right:0; bottom:0; z-index:80; display:flex; align-items:center;
  justify-content:center; gap:18px; flex-wrap:wrap;
  background:rgba(8,8,10,.96); border-top:1px solid var(--edge-2); padding:11px 18px;
  font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  font-size:11.5px; color:var(--pewter);}
.ribbon b{color:var(--blood-hi); letter-spacing:.22em;}
.ribbon a{border-bottom:1px solid var(--edge-2); padding-bottom:2px;}
.ribbon a:hover{color:var(--bone); border-bottom-color:var(--blood-hi);}
.ribbon button{color:var(--pewter-dim); padding:0 6px; font-size:15px;}
body.has-ribbon{padding-bottom:52px;}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .apply{grid-template-columns:1fr;}
  .foot-in{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .nav{position:fixed; inset:74px 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:var(--pitch); border-bottom:1px solid var(--edge); padding:6px 0 14px;
    transform:translateY(-140%); transition:transform .3s; margin-left:0;}
  .nav.open{transform:none;}
  .nav a{padding:14px var(--gut); border-bottom:1px solid var(--edge); font-size:15px;}
  .burger{display:grid;}
  .brand span{display:none;}
  .fact{grid-template-columns:1fr; gap:4px;}
  .form-row{grid-template-columns:1fr;}
  .foot-in{grid-template-columns:1fr;}
  /* our ribbon should not take two lines of a phone screen */
  .ribbon > span{display:none;}
  .ribbon{gap:14px; font-size:10.5px;}
  .card-edge{font-size:9px; width:26px;}
  .card-art{inset:22px 26px;}
  .card-rank-tl{left:31px;} .card-rank-br{right:31px;}
  .card-name{left:26px; right:26px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;
    scroll-behavior:auto !important;}
  .card-in{transition:none;}
}

/* Whether a call ran direct or through the relay, shown on the tile. */
.tile-path{position:absolute; top:10px; left:10px; font-family:var(--cond); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; padding:4px 9px; cursor:help;
  background:rgba(8,8,10,.86); border:1px solid var(--edge-2); color:var(--pewter);}