/* fgfencing.ie — per-style fence pages (jalousie / rhombus / horizontal /
   vertical / pine). Loaded AFTER styles.css; only what those pages add.
   Motion law: transform + stroke only, JS-gated with .has-js, CSS default =
   the finished state so no-JS and reduced-motion always see everything. */

/* ---------- hero: slat wipe ---------- */
/* Six graphite bands over the photo slide out to the right, bottom first:
   the fence is "fitted" from the ground up and the picture is what is left.
   Pure transform; the bands park off-screen inside the hero's overflow. */
.fhero .lede { max-width: 58ch; }
.fhero-wipe { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; }
.has-js .fhero-wipe { display: block; }
.fhero-wipe i {
  position: absolute; left: 0; right: 0; height: calc(100% / 6 + 1px);
  background: var(--graphite-deep);
  transform: translate3d(0,0,0);
  animation: fwipe .95s cubic-bezier(.76,0,.18,1) forwards;
}
.fhero-wipe i:nth-child(1) { top: 0;               animation-delay: .62s; }
.fhero-wipe i:nth-child(2) { top: calc(100% / 6);  animation-delay: .52s; }
.fhero-wipe i:nth-child(3) { top: calc(200% / 6);  animation-delay: .42s; }
.fhero-wipe i:nth-child(4) { top: calc(300% / 6);  animation-delay: .32s; }
.fhero-wipe i:nth-child(5) { top: calc(400% / 6);  animation-delay: .22s; }
.fhero-wipe i:nth-child(6) { top: calc(500% / 6);  animation-delay: .12s; }
@keyframes fwipe { to { transform: translate3d(101%,0,0); } }
.fhero .hero-inner { z-index: 2; }
.fhero-price {
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; padding: 12px 18px; border-radius: 12px;
  background: rgba(36,40,44,.72); border: 1px solid rgba(255,140,58,.35);
  backdrop-filter: blur(6px);
}
.fhero-price strong { font-family: var(--font-head); font-size: 34px; line-height: 1; color: var(--orange); letter-spacing: -.5px; }
.fhero-price span { color: var(--mist); font-size: 14px; font-weight: 600; }
@media (min-width: 861px) { .fhero .hero-inner { text-align: left; } .fhero .hero-inner h1, .fhero .hero-inner .lede, .fhero .hero-inner .stringline { margin-left: 0; } .fhero .hero-inner .cta-row { justify-content: flex-start; } .fhero .hero-inner h1 { max-width: 14ch; } }
@media (max-width: 860px) {
  .fhero-price { margin-top: 14px; padding: 9px 14px; gap: 8px; }
  .fhero-price strong { font-size: 27px; }
  .fhero-price span { font-size: 12.5px; }
  .fhero .hero-inner { padding-top: 92px; padding-bottom: 118px; }
  .fhero .lede { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .has-js .fhero-wipe { display: none; } }

/* ---------- style switcher (sticky under the header) ---------- */
.style-bar { top: 70px; z-index: 40; }
.style-bar .cat-chip { text-decoration: none; }
.style-bar .cat-chip.active { pointer-events: none; }
.style-bar .cat-count { font-weight: 600; }
@media (max-width: 860px) { .style-bar { top: 70px; } }

/* ---------- at a glance: counters ---------- */
.fstats { margin-top: 0; }
.fstats span b { font-variant-numeric: tabular-nums; }
.fstats span b small { font-size: 16px; font-family: var(--font-body); font-weight: 700; margin-left: 3px; color: var(--mist); }

/* ---------- the profile builder ---------- */
.fprof-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; margin-top: 44px; align-items: start; }
.fprof {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; padding: 22px;
  position: sticky; top: 132px;
}
.fprof svg { display: block; width: 100%; height: auto; }
.fprof .post { fill: #1b1f23; }
.fprof .post-cap { fill: #15181b; }
.fprof .ground { stroke: rgba(255,255,255,.14); stroke-width: 2; }
.fprof .slat { fill: #3d4349; }
.fprof .slat-hi { fill: #4c535a; }
.fprof .slat-lo { fill: #2a2f34; }
.fprof .slat-back { fill: #262a2e; }
.fprof .rail { fill: #2a2f34; }
.fprof .string { stroke: var(--orange); stroke-width: 2.2; stroke-linecap: round; fill: none; }
/* JS takes the finished fence apart, then the observer puts it back. */
.has-js .fprof .slat-g { transition: transform .62s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 55ms + .25s); }
.has-js .fprof:not(.is-built) .slat-g { transform: translate3d(-118%,0,0); }
.has-js .fprof:not(.is-built) .slat-g.from-r { transform: translate3d(118%,0,0); }
.has-js .fprof .post-g { transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.has-js .fprof:not(.is-built) .post-g { transform: translate3d(0,-120%,0); }
.has-js .fprof .string { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .6s cubic-bezier(.55,0,.1,1) .05s; }
.has-js .fprof:not(.is-built) .string { stroke-dashoffset: 1; }
.fprof-cap { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.fprof-cap p { color: var(--mist); font-size: 13.5px; }
.fprof-cap b { color: var(--snow); }
/* cross-section badge: the slat, end on, draws itself */
.fsect {
  flex: none; width: 82px; height: 82px; border-radius: 12px;
  background: rgba(0,0,0,.22); border: 1px solid var(--line);
  display: grid; place-items: center;
}
.fsect svg { width: 60px; height: 60px; display: block; }
.fsect path { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.has-js .fsect path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) .5s; }
.has-js .fprof:not(.is-built) .fsect path { stroke-dashoffset: 1; }
.fprof-copy p { color: var(--mist); font-size: 16.5px; margin-top: 14px; max-width: 58ch; }
.fprof-copy p:first-child { margin-top: 0; }
.fprof-copy .fnote {
  margin-top: 18px; padding: 14px 18px; border-radius: 12px;
  background: rgba(255,140,58,.08); border: 1px solid rgba(255,140,58,.3);
  color: var(--snow); font-size: 15px;
}
@media (max-width: 860px) {
  .fprof-wrap { grid-template-columns: 1fr; gap: 22px; }
  .fprof { position: static; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .has-js .fprof .slat-g, .has-js .fprof .post-g, .has-js .fprof .string, .has-js .fsect path { transition: none; transform: none; stroke-dashoffset: 0; }
}

/* ---------- meters ---------- */
.fmeters { display: grid; gap: 12px; margin-top: 26px; }
.fmeter { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; }
.fmeter > span { font-size: 13px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mist); }
.fmeter-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.fmeter-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--orange-deep), var(--orange)); transform: scaleX(var(--v)); transform-origin: left center; }
.has-js .fmeter-bar i { transition: transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 120ms + .1s); }
.has-js .fmeter:not(.is-in) .fmeter-bar i { transform: scaleX(0); }
.fmeter em { grid-column: 2; font-style: normal; font-size: 13.5px; color: var(--mist); margin-top: -4px; }
@media (max-width: 560px) { .fmeter { grid-template-columns: 1fr; gap: 6px; } .fmeter em { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .has-js .fmeter-bar i { transition: none; transform: scaleX(var(--v)); } }

/* ---------- colour try-on ---------- */
.fc-wrap { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; margin-top: 40px; align-items: start; }
.fc-stage { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--panel); aspect-ratio: 3/2; min-width: 0; }
.fc-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s ease; }
.fc-tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  padding: 8px 14px; border-radius: 99px;
  background: rgba(16,19,22,.78); border: 1px solid var(--line);
  color: var(--snow); font-size: 13px; font-weight: 700; letter-spacing: .3px;
}
.fc-tag b { color: var(--orange); }
.fc-controls { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; gap: 22px; }
.fc-dots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.fc-dot {
  position: relative; aspect-ratio: 1; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--c); border: 2px solid rgba(255,255,255,.16);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s, box-shadow .18s;
}
.fc-dot.wood { background: repeating-linear-gradient(105deg, #7a4d2b 0 5px, #8f5c34 5px 9px, #6e421f 9px 13px); }
.fc-dot.active { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,140,58,.28); transform: scale(1.1); }
.fc-dot:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
@media (hover:hover) and (pointer:fine) { .fc-dot:hover { transform: scale(1.08); } }
.fc-name { font-size: 15px; color: var(--mist); }
.fc-name b { color: var(--snow); }
.fc-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
html:not(.has-js) .fc-controls { display: none; }
@media (max-width: 860px) { .fc-wrap { grid-template-columns: 1fr; } .fc-stage { aspect-ratio: 4/3; } .fc-dots { grid-template-columns: repeat(6, 1fr); } }

/* ---------- the two shots (up close / from the street) ---------- */
.fshots { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 320px; margin-top: 40px; }
/* 08/09/2026: a style whose close-up render is not ready ships one tile, centred, not a half-empty row. */
.fshots.one-up { grid-template-columns: minmax(0, 640px); justify-content: center; }
@media (max-width: 860px) { .fshots { grid-template-columns: 1fr; grid-auto-rows: 230px; } }

/* ---------- specs ---------- */
.fspec-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; align-items: start; }
.fspec { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fspec-row { display: flex; justify-content: space-between; gap: 18px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.fspec-row:last-child { border-bottom: 0; }
.fspec-row span { color: var(--mist); font-size: 14.5px; }
.fspec-row strong { font-size: 15px; text-align: right; }
.fspec-head { padding: 16px 22px 12px; font-size: 12px; font-weight: 800; letter-spacing: 3px; color: var(--orange); border-bottom: 1px solid var(--line); }
.fincl { list-style: none; display: grid; gap: 10px; }
.fincl li { display: flex; gap: 12px; align-items: flex-start; color: var(--mist); font-size: 15.5px; }
.fincl li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: rgba(255,140,58,.16); border: 1.5px solid var(--orange); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8c3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); background-size: 11px; background-repeat: no-repeat; background-position: center; }
.fincl li b { color: var(--snow); }
@media (max-width: 860px) { .fspec-wrap { grid-template-columns: 1fr; } .fspec-row { flex-direction: column; gap: 3px; } .fspec-row strong { text-align: left; } }

/* ---------- real jobs on this page ---------- */
.fjobs { grid-auto-rows: 260px; }
.fjobs.work-grid.open .work-tile { grid-row: auto; }
.fjobs-none {
  margin-top: 40px; padding: 22px 26px; border-radius: var(--radius);
  background: var(--panel); border: 1px dashed rgba(255,255,255,.22);
  color: var(--mist); font-size: 15.5px; max-width: 70ch;
}
.fjobs-none b { color: var(--snow); }
@media (max-width: 860px) { .fjobs { grid-auto-rows: 190px; } }

/* ---------- price ---------- */
.fprice-note { color: var(--mist); font-size: 14px; margin-top: 14px; max-width: 64ch; }

/* ---------- compare the others ---------- */
.fothers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.fother {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 4/3; text-decoration: none; color: var(--snow);
  transition: transform .25s ease, border-color .25s ease;
}
.fother img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
@media (hover:hover) and (pointer:fine) { .fother:hover { transform: translateY(-3px); border-color: rgba(255,140,58,.4); } .fother:hover img { transform: scale(1.05); } }
@media (max-width: 860px) { .fothers { grid-template-columns: repeat(2, 1fr); } }

/* Vertical only: the seven cuts grid gets the same reveal grammar */
.fcuts { margin-top: 30px; }

/* ---------- the slat, measured (replaces the builder, 07/09 round 3) ---------- */
.fprof .sec-grid { fill: none; }
.fprof .sec-shape { fill: rgba(255,255,255,.05); stroke: var(--snow); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fprof .sec-inner { fill: var(--panel); stroke-width: 1.6; stroke: var(--mist); }
.fprof .dim line { stroke: var(--orange); stroke-width: 1.6; stroke-linecap: round; }
.fprof .dim text { fill: var(--orange); font: 700 20px var(--font-head); letter-spacing: .2px; }
.fprof .dim text.lbl { fill: var(--mist); font: 600 12.5px var(--font-body); letter-spacing: .3px; }
.fprof .dim text.len { font-size: 12px; }
.has-js .fprof .sec-shape { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.15s cubic-bezier(.65,0,.35,1) .15s; }
.has-js .fprof:not(.is-built) .sec-shape { stroke-dashoffset: 1; }
.has-js .fprof .dim { transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 160ms + .95s); transform-box: fill-box; }
.has-js .fprof:not(.is-built) .dim { opacity: 0; transform: translate3d(0,8px,0); }
@media (prefers-reduced-motion: reduce) { .has-js .fprof .sec-shape, .has-js .fprof .dim { transition: none; stroke-dashoffset: 0; opacity: 1; transform: none; } }

/* ---------- isometric slat drawing + technical data (round 4) ---------- */
.fprof .iso-face { fill: rgba(255,255,255,.045); stroke: rgba(255,255,255,.55); stroke-width: 1.1; stroke-linejoin: round; }
.fprof .iso-back { fill: rgba(255,255,255,.02); }
.fprof .iso-front { fill: rgba(255,255,255,.09); }
.fprof .iso-ghost { fill: none; stroke: rgba(255,140,58,.35); stroke-width: 1.2; stroke-dasharray: 4 4; }
.fprof .dim text { font-size: 19px; }
.has-js .fprof .iso-face { transition: opacity .6s ease .35s; }
.has-js .fprof:not(.is-built) .iso-face { opacity: 0; }
.ftech { margin-top: 16px; border-top: 1px solid var(--line); }
.ftech .fspec-head { padding: 14px 0 6px; }
.ftech-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.ftech-row:last-child { border-bottom: 0; }
.ftech-row span { color: var(--mist); font-size: 13.5px; }
.ftech-row strong { font-size: 13.5px; text-align: right; }

/* ---------- variants / shades strip ---------- */
.fvariants { grid-template-columns: repeat(5, 1fr); grid-auto-rows: 200px; margin-top: 36px; }
@media (max-width: 1000px) { .fvariants { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; } }
@media (max-width: 600px) { .fvariants { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } }

/* ---------- 3d.html: spin it in 3D ---------- */
.f3d-head { padding-bottom: 34px; }
.f3d-wrap { display: grid; grid-template-columns: 1.7fr 1fr; gap: 26px; align-items: start; }
.f3d-stage-wrap { position: sticky; top: 92px; }
.f3d-stage { position: relative; aspect-ratio: 3/2; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #262a2e; cursor: grab; }
.f3d-wrap.is-grabbing .f3d-stage { cursor: grabbing; }
.f3d-stage canvas { display: block; width: 100% !important; height: 100% !important; }
.f3d-stage noscript img { width: 100%; height: 100%; object-fit: cover; }
.f3d-nojs { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 12px 14px; border-radius: 10px; background: rgba(16,19,22,.8); color: var(--snow); font-size: 14px; }
.f3d-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.f3d-name { font-weight: 700; color: var(--snow); font-size: 15px; }
.f3d-shown { color: var(--mist); font-size: 13.5px; flex: 1 1 200px; }
.f3d-controls { gap: 20px; }
.f3d-page { color: var(--orange); font-weight: 600; text-decoration: none; }
.f3d-page:hover { text-decoration: underline; }
.nav-drop-panel .nd-all2 { margin-top: 0; border-top: 0; padding-top: 8px; }
@media (max-width: 860px) {
  .f3d-wrap { grid-template-columns: 1fr; }
  .f3d-stage-wrap { position: static; }
  .f3d-stage { aspect-ratio: 4/3; }
}

/* ---------- wood-effect swatches (round 7) ---------- */
.fc-dot.wood, .col-swatch.wood { background: repeating-linear-gradient(105deg, #7a4d2b 0 5px, #8f5c34 5px 9px, #6e421f 9px 13px); }
.fc-dot.wood-light, .col-swatch.wood-light { background: repeating-linear-gradient(105deg, #b98a55 0 5px, #cb9d68 5px 9px, #a97a46 9px 13px); }
.fc-dot.wood-dark, .col-swatch.wood-dark { background: repeating-linear-gradient(105deg, #4a3020 0 5px, #5a3b28 5px 9px, #3a2416 9px 13px); }
.fc-dot.wood-walnut, .col-swatch.wood-walnut { background: repeating-linear-gradient(105deg, #5e3524 0 5px, #74412c 5px 9px, #4b2a1c 9px 13px); }
.fc-sub { margin-top: 16px; margin-bottom: 10px; }
.fc-woods { grid-template-columns: repeat(6, 1fr); }
.fc-woods .fc-dot { max-width: 100%; }
/* homepage visualiser dot */
.see-colour-dot.wood-light { background: repeating-linear-gradient(105deg, #b98a55 0 5px, #cb9d68 5px 9px, #a97a46 9px 13px) !important; }
.see-colour-dot.wood-dark { background: repeating-linear-gradient(105deg, #4a3020 0 5px, #5a3b28 5px 9px, #3a2416 9px 13px) !important; }
.see-colour-dot.wood-walnut { background: repeating-linear-gradient(105deg, #5e3524 0 5px, #74412c 5px 9px, #4b2a1c 9px 13px) !important; }
/* Pine page: a photograph where the other styles carry the slat drawing */
.fprof-photo { padding: 0; overflow: hidden; }
.fprof-photo img { width: 100%; display: block; }
.fprof-photo .fprof-cap { padding: 16px 22px 20px; margin-top: 0; }

/* The gate question is a NEW question, not a third colour group: give it a
   rule and room so it stops crowding the colour name above it. */
.fc-gate-group { border-top: 1px solid var(--line); padding-top: 20px; }
.fc-controls .fc-name { margin-bottom: 2px; }