/* ==========================================================
       1. COLOURS - change a colour here and it changes everywhere.
       Format is a hex code, e.g. #d9480f. Search "--acc" below
       to see where the main orange is used.
       ========================================================== */
 :root {
     --bg: #fbf8f4;
     /* page background (warm cream) */
     --surf: #fff;
     /* cards, menu bar, form boxes */
     --ink: #241c17;
     /* main text colour */
     --mute: #6b5f56;
     /* softer grey-brown text */
     --line: #e8dfd6;
     /* thin borders */
     --acc: #d9480f;
     /* MAIN ORANGE: buttons, prices, links */
     --acc2: #b83a08;
     /* darker orange when you hover a button */
     --hero: #2a1a12;
     /* dark brown: footer + oven picture panels */
     --hi: #fff4ea;
     /* light text used on the dark footer */
     --hb1: #fff3e6;
     /* top banner gradient: start colour */
     --hb2: #f6dcc0;
     /* top banner gradient: end colour */
     --hk: #2a1a12;
     /* top banner text colour */
     --t1: #fdeee0;
     /* background of the HIRE section (peach) */
     --t2: #f2eee8;
     /* background of the LEASE section (stone) */
     --t3: #fffaf4;
     /* background of the SALES section (cream) */


     /* Backgrounds of the scrolling banner paragraphs, 1st to 6th: each a touch warmer than the last. */
     --s1: #fffaf5;
     --s2: #ffeedd;
     --s3: #ffe6cf;
     --s4: #ffdcbd;
     --s5: #fbd3ab;
     --s6: #f6c799;



     box-sizing: border-box;
     padding-bottom: env(safe-area-inset-bottom, 0px);
     /* keeps content clear of the iPhone home bar */
 }

 /* DARK MODE: used automatically when the visitor's phone/computer is set to dark.
       Same names as above, with darker values. Keep both blocks identical. */
 @media (prefers-color-scheme:dark) {
     :root:not([data-theme="light"]) {
         --bg: #17110d;
         --surf: #221a15;
         --ink: #f5ece4;
         --mute: #b3a398;
         --line: #382b22;
         --acc: #ff7a3d;
         --acc2: #ff9461;
         --hero: #0f0a07;
         --hb1: #2a1d15;
         --hb2: #3a2417;
         --hk: #f5ece4;
         --t1: #2a1d15;
         --t2: #211a16;
         --t3: #1b1410;

         --s1: #2f2018;
         --s2: #36241a;
         --s3: #3d281c;
         --s4: #442d1f;
         --s5: #4b3122;
         --s6: #523525;


     }
 }

 :root[data-theme="dark"] {
     --bg: #17110d;
     --surf: #221a15;
     --ink: #f5ece4;
     --mute: #b3a398;
     --line: #382b22;
     --acc: #ff7a3d;
     --acc2: #ff9461;
     --hero: #0f0a07;
     --hb1: #2a1d15;
     --hb2: #3a2417;
     --hk: #f5ece4;
     --t1: #2a1d15;
     --t2: #211a16;
     --t3: #1b1410;

     --s1: #2f2018;
     --s2: #36241a;
     --s3: #3d281c;
     --s4: #442d1f;
     --s5: #4b3122;
     --s6: #523525;

 }

 /* ==========================================================
       2. BASICS - page-wide text and spacing
       ========================================================== */
 * {
     box-sizing: border-box
 }

 /* padding never makes boxes wider than set */
 html {
     scroll-behavior: smooth;
     /* menu links glide to their section */
     scroll-padding-top: 72px;
     /* stops headings hiding under the fixed menu (script refines it) */
     -webkit-text-size-adjust: 100%;
 }

 body {
     margin: 0;
     background: var(--bg);
     color: var(--ink);
     /* Text size scales with the screen: smallest 16px, largest 18px. Font is the visitor's own system font. */
     font: clamp(16px, 1.1vw + 12px, 18px)/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     overflow-x: hidden;
     /* never allow sideways scrolling */
     padding-top: 64px;
     /* room for the fixed menu bar (script sets the exact height) */
 }

 a {
     color: var(--acc)
 }

 /* links are orange */
 h1,
 h2,
 h3 {
     line-height: 1.2;
     margin: 0 0 .5em
 }

 h2 {
     font-size: clamp(1.6rem, 4vw, 2.3rem)
 }

 /* section headings */
 h3 {
     font-size: 1.15rem
 }

 p {
     margin: 0 0 .9em
 }

 .w {
     /* ".w" = the centred content column */
     max-width: 1200px;
     border: 1px dotted red;
     /* widest the content gets on big screens */
     margin: 0 auto;
     padding: 0 clamp(16px, 4vw, 32px);
     /* side gaps */
 }



 section {
     padding: clamp(44px, 7vw, 80px) 0
 }

 /* space above/below every section */
 .alt {
     background: var(--surf);
     border-block: 1px solid var(--line)
 }

 /* white band sections */
 .t1 {
     background: var(--t1)
 }

 /* Hire section tint */
 .t2 {
     background: var(--t2)
 }

 /* Lease section tint */
 .t3 {
     background: var(--t3)
 }

 /* Sales section tint */
 .t1,
 .t2,
 .t3 {
     border-block: 1px solid var(--line)
 }

 /* faint line between tinted sections */

 /* ==========================================================
       3. MENU BAR (floats at the top while scrolling)
       ========================================================== */
 header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     /* pinned to the top of the screen */
     z-index: 50;
     /* sits above everything else */
     background: var(--surf);
     border-bottom: 1px solid var(--line);
     box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
     /* soft shadow so it looks like it floats */
     padding-top: env(safe-area-inset-top, 0px);
     /* clears the phone notch */
 }

 nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     min-height: 60px;
     position: relative
 }

 .logo {
     display: block;
     line-height: 0;
     text-decoration: none;
     color: var(--ink);
     padding: 6px 0
 }

 .logo svg {
     display: block;
     height: 50px;
     width: auto
 }

 /* LOGO SIZE on desktop: change 50px */
 @media(max-width:480px) {
     .logo svg {
         height: 40px
     }
 }

 /* LOGO SIZE on small phones */
 nav ul {
     display: flex;
     gap: 22px;
     list-style: none;
     margin: 0;
     padding: 0
 }

 /* the menu links in a row */
 nav li a {
     color: var(--ink);
     text-decoration: none;
     font-size: .95rem
 }

 nav li a:hover {
     color: var(--acc)
 }

 .nt {
     position: absolute;
     opacity: 0;
     pointer-events: none
 }

 /* hidden tick-box that powers the phone menu */
 nav label {
     display: none;
     cursor: pointer;
     font-weight: 600;
     padding: 8px 4px
 }

 /* the "Menu" button (phones only) */
 @media(max-width:860px) {

     /* PHONE / TABLET MENU: below 860px wide */
     nav label {
         display: block
     }

     /* show the Menu button */
     nav ul {
         /* links become a drop-down list */
         display: none;
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
         flex-direction: column;
         gap: 0;
         background: var(--surf);
         border-bottom: 1px solid var(--line);
     }

     .nt:checked~ul {
         display: flex
     }

     /* show the list when Menu is tapped */
     nav li a {
         display: block;
         padding: 14px 16px
     }
 }

 /* ==========================================================
       4. TOP BANNER ("A Festival Oven")
       ========================================================== */
 .hero {
     background: linear-gradient(135deg, var(--hb1), var(--hb2));
     /* change colours in section 1 */
     color: var(--hk);
     /* padding: clamp(64px, 12vw, 120px) 0;*/

     padding: clamp(28px, 5vw, 56px) 0;
     /* banner height: was 64px–120px */
     /* banner height */
 }

 .hero h1 {
     font-size: clamp(2.2rem, 7vw, 4rem);
     margin-bottom: .2em
 }

 .hero p {
     font-size: clamp(1.05rem, 2.5vw, 1.3rem);
     max-width: 60em;
     /*  changed from 30em by Paul to give longer text */
     opacity: .92
 }

 /* --- SCROLLING PARAGRAPHS inside the banner (a slideshow) --- */
 .slider {
     margin: 18px 0 6px
 }

 .slides {
     display: flex;
     margin: 0;
     padding: 0;
     list-style: none;
     /* slides sit side by side in one row */
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     /* each swipe/scroll stops on a slide */
     scrollbar-width: none;
     border-radius: 18px;
     /* hide the scroll bar; round the corners */
 }

 .slides::-webkit-scrollbar {
     display: none
 }

 .slide {
     flex: 0 0 100%;
     scroll-snap-align: start;
     /* every slide is exactly one full width */
     display: flex;
     align-items: center;
     padding: clamp(20px, 4vw, 34px);
     /* space inside each coloured panel */
     background: var(--s6);
     /* fallback colour for any extra slides */
     color: var(--ink);
 }

 .slide:nth-child(1) {
     background: var(--s1)
 }

 .slide:nth-child(2) {
     background: var(--s2)
 }

 .slide:nth-child(3) {
     background: var(--s3)
 }

 .slide:nth-child(4) {
     background: var(--s4)
 }

 .slide:nth-child(5) {
     background: var(--s5)
 }

 .slide:nth-child(6) {
     background: var(--s6)
 }

 .slide p {
     margin: 0;
     max-width: none;
     opacity: 1;
     font-size: clamp(1.05rem, 2.2vw, 1.3rem)
 }

 .ctrl {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     margin: 14px 0 22px
 }

 .arr {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     border: 2px solid currentColor;
     background: transparent;
     color: inherit;
     font-size: 1.4rem;
     line-height: 1;
     cursor: pointer
 }

 .arr:hover {
     background: var(--acc);
     border-color: var(--acc);
     color: #fff
 }

 .dots button {
     width: 23px;
     height: 23px;
     border: 6px solid transparent;
     background: currentColor;
     background-clip: padding-box;
     border-radius: 50%;
     opacity: .3;
     padding: 0;
     cursor: pointer;
 }

 .dots button[aria-current="true"] {
     opacity: 1;
     background: var(--acc)
 }




 /* ==========================================================
       5. BUTTONS, CARDS AND LABELS
       ========================================================== */
 .btn {
     /* orange pill button */
     display: inline-block;
     background: var(--acc);
     color: #fff;
     border: 0;
     padding: 13px 26px;
     border-radius: 999px;
     font: 600 1rem inherit;
     text-decoration: none;
     cursor: pointer;
 }

 .btn:hover {
     background: var(--acc2)
 }

 .btn.g {
     background: transparent;
     border: 2px solid currentColor;
     margin-left: 8px
 }

 /* outline ("ghost") button */
 .g3 {
     /* grid of cards: as many columns as fit (min 260px each) */
     display: grid;
     gap: clamp(16px, 3vw, 28px);
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
 }

 .card {
     background: var(--surf);
     border: 1px solid var(--line);
     border-radius: 14px;
     padding: 22px
 }

 .card p {
     margin: 0;
     color: var(--mute);
     font-size: .95rem
 }

 .lead {
     color: var(--mute);
     max-width: none
         /*changed from 42 em by Paul */
 }

 /* intro line under a heading */
 .tag {
     display: inline-block;
     background: var(--acc);
     color: #fff;
     font-size: .72rem;
     font-weight: 700;
     padding: 2px 10px;
     border-radius: 99px
 }

 /* ==========================================================
       6. OVEN CARDS (sales section)
       ========================================================== */
 .ovens {
     /* the grid holding the oven cards */
     display: grid;
     gap: 24px;
     margin-top: 20px;
     /* 290px = narrowest a card gets. Smaller number = more cards per row; bigger = fewer. */
     grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
 }

 .oven {
     display: flex;
     flex-direction: column;
     background: var(--surf);
     border: 1px solid var(--line);
     border-radius: 18px;
     overflow: hidden
 }

 .oven .b {
     padding: 20px;
     display: flex;
     flex-direction: column;
     flex: 1
 }

 /* text area inside a card */
 .oven .btn {
     margin-top: auto;
     text-align: center
 }

 /* keeps buttons level across a row */
 .fig {
     /* picture panel at the top of each card */
     position: relative;
     aspect-ratio: 16/10;
     overflow: hidden;
     background: radial-gradient(circle at 50% 120%, #ff9a52, var(--acc) 45%, var(--hero));
     /* orange fallback */
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     color: #fff;
     text-align: center;
 }

 .fig b {
     font-size: clamp(2.2rem, 5vw, 3rem);
     line-height: 1
 }

 /* big size text (e.g. 60cm) */
 .fig span {
     opacity: .85;
     letter-spacing: .1em;
     text-transform: uppercase;
     font-size: .8rem;
     margin-top: 8px
 }

 .fig img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: contain;
     background: var(--surf)
 }

 /* the photo covers the panel */
 .oven h3 {
     font-size: 1.4rem;
     margin-bottom: .1em
 }

 /* oven name */
 .sz {
     color: var(--mute);
     margin-bottom: 12px
 }

 /* size line under the name */
 .price {
     font-size: 1.7rem;
     font-weight: 800;
     color: var(--acc);
     margin: 6px 0 14px
 }

 .price small {
     font-size: .9rem;
     font-weight: 500;
     color: var(--mute)
 }

 /* the "+ VAT" text */
 dl {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
     gap: 10px;
     margin: 0 0 18px
 }

 /* spec tiles */
 dl div {
     background: var(--surf);
     border: 1px solid var(--line);
     border-radius: 10px;
     padding: 8px 12px
 }

 dt {
     font-size: .72rem;
     text-transform: uppercase;
     letter-spacing: .05em;
     color: var(--mute)
 }

 /* tile label */
 dd {
     margin: 0;
     font-weight: 700
 }

 /* tile value */
 .ex {
     font-size: .88rem;
     color: var(--mute);
     margin-bottom: 16px
 }

 /* "Optional extras" line */
 .oven p {
     font-size: .95rem
 }

 /* oven description text */

 /* ==========================================================
       7. PIZZA BOX HIGHLIGHT BOX (orange outline)
       ========================================================== */
 .pb {
     background: var(--surf);
     border: 2px solid var(--acc);
     border-radius: 16px;
     padding: clamp(20px, 4vw, 32px);
     margin: 28px 0
 }

 .pb ul {
     margin: 10px 0 0;
     padding-left: 20px
 }

 /* ==========================================================
       8. CONTACT FORM
       ========================================================== */
 form {
     display: grid;
     gap: 16px;
     grid-template-columns: 1fr 1fr
 }

 /* two columns on desktop */
 .full {
     grid-column: 1/-1
 }

 /* a field that spans both columns */
 label {
     font-size: .9rem;
     font-weight: 600;
     display: block;
     margin-bottom: 6px
 }

 input,
 select,
 textarea {
     width: 100%;
     padding: 12px 14px;
     border: 1px solid var(--line);
     border-radius: 10px;
     background: var(--bg);
     color: var(--ink);
     font: inherit;
 }

 input:focus,
 select:focus,
 textarea:focus {
     outline: 2px solid var(--acc);
     border-color: transparent
 }

 /* orange ring when clicked */
 .hp {
     position: absolute;
     left: -9999px
 }

 /* hidden spam-trap field: real people never see it */
 .ok {
     background: #e6f6ec;
     color: #14532d;
     padding: 14px 18px;
     border-radius: 10px;
     margin-bottom: 18px;
     display: none
 }

 /* green "sent" message (shown by script) */

 /* ==========================================================
       9. FOOTER
       ========================================================== */
 footer {
     background: var(--hero);
     color: var(--hi);
     padding: 32px 0;
     font-size: .9rem
 }

 footer p {
     margin: 4px 0
 }

 /* ==========================================================
       10. SMALL PHONES (under 600px wide)
       ========================================================== */
 @media(max-width:600px) {
     form {
         grid-template-columns: 1fr
     }

     /* form becomes one column */
     .btn.g {
         margin: 10px 0 0
     }

     /* outline button drops under the first button */
 }