/* Cake Dudes — an English, genuine-product-led celebration storefront.
   One active stylesheet. Original-photo cake clips and background-removed
   official Instagram cakes; no proprietary reference assets. */
:root {
  --yellow: #ffcf32;
  --ivory: #fffaf1;
  --cocoa: #432319;
  --red: #a92c24;
  --line: #43231938;
  --light-line: #fffaf14d;
  --font: 'Montserrat', Arial, sans-serif;
  --gutter: clamp(18px, 2.1vw, 30px);
  --soft: #fff7e2;
  --butter: #fff4d6;
  --lilac: #dbc8f3;
  --sky: #bbddf3;
  --mint: #bfe5d2;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-padding-top: var(--header-offset, 100px); }
body { margin: 0; background: var(--ivory); color: var(--cocoa); font: 400 1rem/1.65 var(--font); }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: not-allowed; opacity: .6; }
button, input, select, textarea { max-width: 100%; }
img { display: block; max-width: 100%; height: auto; }
figure, h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.1; letter-spacing: -.045em; font-weight: 900; }
h1 { font-weight: 900; }
em { font-style: normal; }
h2 { font-size: clamp(2.25rem, 1.3rem + 4vw, 4.5rem); }
h3 { font-size: 1.25rem; }
p, address { overflow-wrap: anywhere; }
p + p { margin-top: 1rem; }
h1, h2, h3, a, button, label, summary, strong { overflow-wrap: anywhere; }
:where([id],a,button,input,select,textarea,summary):not(html) { scroll-margin-block: 12px; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
::selection { background: var(--yellow); color: var(--cocoa); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 12px 18px; background: var(--cocoa); color: var(--ivory); transform: translateY(-200%); }
.skip:focus { transform: none; }
.section { padding: clamp(56px, 6vw, 88px) var(--gutter); }
.eyebrow { font-size: .75rem; line-height: 1.6; letter-spacing: .025em; font-weight: 700; text-transform:none; }
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3 { margin-top: 18px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:28px; min-height:62px; padding:18px 36px; border:1px solid currentColor; border-radius:100px; background:transparent; color:inherit; font-size:1rem; font-weight:700; line-height:1.4; text-align:center; text-transform:none; white-space:normal; }
.button:hover { background:var(--cocoa); color:var(--ivory); border-color:var(--cocoa); }
.button:focus-visible { outline-color:var(--red); }
.text-link, .under-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 7px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; font-size: .875rem; font-weight: 700; line-height: 1.5; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
/* Content-sized header: no absolute logo, overlay menu or forced single-line links. */
.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; padding: 16px var(--gutter); background: var(--ivory); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { width: 58px; height:auto; flex: 0 0 58px; object-fit: contain; }
.brand-words { font-size: 1.125rem; line-height: 1.1; font-weight: 900; letter-spacing: -.035em; max-width: 8em; }
.brand-words small { display: block; margin-top: 6px; font-size: .6875rem; font-weight: 500; line-height: 1.4; letter-spacing: .04em; }
.site-header nav { display: flex; align-items: center; flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap; gap: 8px 26px; min-width: 0; }
.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; line-height: 1.4; font-weight: 600; padding: 6px 0; }
.site-header nav a[aria-current=page], .site-header nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.site-header .nav-brief { color:var(--red); font-weight:700; border:1px solid currentColor; border-radius:100px; padding:14px 24px; }
.header-cta { display: none; }
.header-phone { display: grid; place-items: center; flex: 0 0 46px; min-height: 46px; border: 1px solid var(--line); border-radius: 50%; font-size: 1.5rem; }
.nav-toggle { display: none; align-items: center; gap: 8px; min-height: 46px; padding: 10px 12px; background: transparent; border: 1px solid var(--line); border-radius: 100px; font-size: .875rem; font-weight: 700; }
/* Cake-first Doe poster: quiet editorial copy, an authentic foreground cake,
   one unmistakable enquiry action. DOM order also follows the mobile hierarchy. */
.hero-poster { --hero-surface:var(--butter); --hero-ink:var(--cocoa); position:relative; isolation:isolate; background:var(--hero-surface); color:var(--hero-ink); transition:background-color .36s ease; }
.hero-poster[data-hero-scene="teddy"] { --hero-surface:var(--sky); }
.hero-poster[data-hero-scene="castle"] { --hero-surface:var(--lilac); }
.hero-poster[data-hero-scene="peacock"] { --hero-surface:var(--mint); }
.hero-poster[data-hero-scene="milestone"] { --hero-surface:#f7d6d0; }
.hero-poster[data-hero-scene="rider"] { --hero-surface:#dce7bf; }
.hero-poster[data-hero-scene="family"] { --hero-surface:#f5e6bf; }
.hero-layout { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.65fr) minmax(0,.85fr); grid-template-areas:"offer scene actions" "meta meta meta"; align-items:center; gap:4px 30px; padding:24px var(--gutter) 12px; margin-inline:auto; max-width:1600px; }
.hero-offer { grid-area:offer; position:relative; z-index:2; min-width:0; max-width:320px; }
.hero-poster h1 { font-size:clamp(1.5rem,1.15rem + 1.05vw,2.25rem); line-height:1.15; letter-spacing:-.04em; margin:0; max-width:18ch; }
.hero-summary { font-size:.9375rem; line-height:1.6; max-width:26em; margin-top:14px; }
.hero-actions { grid-area:actions; display:flex; flex-direction:column; align-items:stretch; gap:10px; min-width:0; width:100%; max-width:300px; justify-self:end; position:relative; z-index:2; }
.hero-actions .hero-primary { min-height:60px; padding:16px 26px; gap:22px; background:var(--red); color:var(--ivory); border:2px solid var(--red); box-shadow:0 4px 0 var(--cocoa); font-size:1.125rem; line-height:1.25; font-weight:700; text-transform:none; }
.hero-actions .hero-primary:hover { background:var(--cocoa); color:var(--ivory); border-color:var(--cocoa); }
.hero-secondary { display:inline-flex; justify-content:center; align-items:center; gap:12px; min-height:44px; font-size:.875rem; font-weight:600; text-decoration:underline; text-underline-offset:5px; }
.hero-secondary:hover { text-decoration-thickness:2px; }
.hero-actions p { font-size:.75rem; line-height:1.6; max-width:38em; text-align:center; }
.hero-contact { display:flex; flex-wrap:wrap; justify-content:center; grid-column:1/-1; gap:0 14px; position:relative; z-index:2; }
.hero-contact a { display:inline-flex; align-items:center; min-height:44px; font-size:.75rem; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.hero-cake { grid-area:scene; align-self:center; justify-self:center; position:relative; width:100%; min-width:0; max-width:560px; padding:0; text-align:center; z-index:1; }
.hero-cake-stage { position:relative; isolation:isolate; padding:0; }
/* A quiet, scene-coloured backplate frames the real cake, never replaces it.
   Brand motifs are the supplied vector artwork, not invented cake decoration. */
.hero-poster { --cake-halo:#eed392; --cake-tilt:-9deg; --cake-radius:48% 52% 44% 56% / 56% 44% 56% 44%; }
.hero-poster[data-hero-scene="teddy"] { --cake-halo:#e6f4fc; --cake-tilt:8deg; --cake-radius:50% 50% 38% 42%; }
.hero-poster[data-hero-scene="castle"] { --cake-halo:#f4e7fa; --cake-tilt:-6deg; --cake-radius:48% 48% 20% 20%; }
.hero-poster[data-hero-scene="peacock"] { --cake-halo:#dcefc9; --cake-tilt:10deg; --cake-radius:55% 45% 55% 45%; }
.hero-poster[data-hero-scene="milestone"] { --cake-halo:#fff1d0; --cake-tilt:-7deg; --cake-radius:48% 52% 36% 54%; }
.hero-poster[data-hero-scene="rider"] { --cake-halo:#f4edce; --cake-tilt:7deg; --cake-radius:45% 55% 48% 52%; }
.hero-poster[data-hero-scene="family"] { --cake-halo:#f0c9b2; --cake-tilt:-5deg; --cake-radius:46% 54% 40% 50%; }
.hero-cake-stage::before { content:""; position:absolute; z-index:-2; pointer-events:none; inset:13% 0 5%; border-radius:var(--cake-radius); background:var(--cake-halo); transform:rotate(var(--cake-tilt)); opacity:.7; transition:background-color .36s ease,border-radius .36s ease; }
/* The authentic motifs belong to the entire scene, not a clipped cake-stage patch. */
.hero-poster::before { content:""; position:absolute; z-index:-1; pointer-events:none; inset:0; background:var(--cocoa); opacity:.025; -webkit-mask:url('/assets/brand/cake-dudes-pattern.svg') repeat center / 320px auto; mask:url('/assets/brand/cake-dudes-pattern.svg') repeat center / 320px auto; }
.hero-poster[data-hero-scene="family"] .hero-cake-stage::before { inset:24% -2% 12%; }

.hero-cake img { object-fit:contain; margin-inline:auto; filter:drop-shadow(0 18px 9px #43231938); }
.hero-slides { position:relative; width:100%; max-width:480px; aspect-ratio:1095 / 1300; margin-inline:auto; }
.hero-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .36s ease,transform .36s ease,visibility 0s linear .36s; }
.hero-slide.is-current { opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; }
.hero-slide img { width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; object-position:center bottom; }
.hero-slide[data-scene="family"] img { width:106%; margin-left:-3%; object-position:center 70%; }
.hero-poster.is-interacting .hero-slide,.hero-poster.is-interacting { transition:none; }
.hero-meta { grid-area:meta; position:relative; z-index:2; min-width:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 24px; }
.hero-controls { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0 6px; }
.hero-controls button { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-width:44px; min-height:44px; padding:0; border:0; background:transparent; color:var(--hero-ink); font-size:.75rem; font-weight:600; }
.hero-controls .hero-play { gap:7px; min-width:76px; padding:0 8px; border-radius:100px; box-shadow:inset 0 0 0 1px #43231926; }
.hero-play::before { content:""; width:10px; height:11px; background:currentColor; clip-path:polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0); }
.hero-play[data-playback="paused"]::before { clip-path:polygon(10% 0,100% 50%,10% 100%); }
.hero-play:hover:not(:disabled) { background:var(--cocoa); color:var(--ivory); }
.hero-controls button:disabled { opacity:1; }
.hero-dots { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; width:308px; max-width:100%; }
.hero-controls .hero-dot { width:44px; height:44px; border-radius:50%; }
.hero-dot span { display:block; width:8px; height:8px; border:1px solid currentColor; border-radius:100px; background:transparent; transition:width .2s ease,background-color .2s ease; }
.hero-dot[aria-current="true"] span { width:20px; background:currentColor; }
.hero-dot:hover span { background:currentColor; }
.hero-photo-caption { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 14px; font-size:.75rem; line-height:1.5; margin-top:0; }
.hero-photo-caption strong { font-weight:500; }
.hero-photo-caption a { display:inline-flex; align-items:center; min-height:44px; font-size:.75rem; text-decoration:underline; text-underline-offset:4px; }
.hero-poster :focus-visible { outline-color:var(--cocoa); }
.doe-home .site-header { background:var(--cocoa); color:var(--ivory); border-color:var(--light-line); }
.doe-home .site-header .nav-brief { color:var(--yellow); }
.doe-home .nav-toggle,.doe-home .header-phone { border-color:var(--ivory); }
.doe-home .site-header :focus-visible { outline-color:var(--yellow); }
.occasion-section { background:var(--yellow); color:var(--cocoa); display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,2fr); gap:30px; align-items:center; padding:20px var(--gutter); border-block:1px solid var(--line); }
.occasion-intro h2 { font-size:1.25rem; line-height:1.35; letter-spacing:-.035em; margin-top:8px; }
.occasion-rail { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.occasion-rail a { display:flex; align-items:center; gap:10px; padding:16px 12px; min-height:54px; }
.occasion-rail a>span { font-size:.75rem; flex:none; }
.occasion-rail a>span:last-child { margin-left:auto; }
/* Small celebratory accents only; the approved red/yellow/ivory/cocoa scenes remain. */
.occasion-rail a>span:first-child { display:grid; place-items:center; flex:none; width:32px; height:32px; border:1px solid var(--cocoa); border-radius:50%; background:var(--lilac); color:var(--cocoa); font-weight:700; }
.occasion-rail a:nth-child(2)>span:first-child { background:var(--sky); }
.occasion-rail a:nth-child(3)>span:first-child { background:var(--mint); }
.occasion-rail a:nth-child(4)>span:first-child { background:var(--ivory); }

.occasion-rail h3 { font-size:.9375rem; line-height:1.4; letter-spacing:-.02em; }
/* Three unboxed square products, then a native disclosure for the full real portfolio. */
.collection { background:var(--ivory); padding-block:clamp(52px,5.5vw,80px); }
.collection>.design-grid { align-items:start; }
.section-heading { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:36px; align-items:end; margin-bottom:46px; }
.section-heading h2 { text-transform:none; }
.section-intro { max-width:440px; justify-self:end; font-size:1.125rem; }
.section-intro .text-link { margin-top:16px; }
.gallery-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px 24px; margin-bottom:32px; }
.gallery-filters { display:flex; flex-wrap:wrap; gap:8px; }
.gallery-filters button { min-height:46px; padding:12px 20px; border:1px solid var(--cocoa); border-radius:60px; background:transparent; font-size:.875rem; }
.gallery-filters button[aria-pressed=true] { background:var(--cocoa); color:var(--ivory); }
.gallery-toolbar>p { font-size:.8125rem; }
.design-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 22px; margin-inline:auto; }
.design-card { min-width:0; width:100%; max-width:360px; justify-self:center; }
.design-visual,.instagram-cake-photo { display:block; position:relative; }
.featured-cake .design-visual { background:var(--butter); aspect-ratio:1; }
.featured-cake:nth-child(2) .design-visual { background:var(--cocoa); color:var(--ivory); }
.featured-cake:nth-child(3) .design-visual { background:var(--red); color:var(--ivory); }
.featured-cake .design-visual:focus-visible { outline-color:var(--cocoa); }
.featured-cake .design-visual>img { width:100%; height:100%; object-fit:contain; padding:20px 16px 34px; }
.design-stamp { position:absolute; top:0; right:10px; transform:translateY(-15%); display:grid; place-content:center; width:86px; min-height:86px; border-radius:50%; border:1px solid var(--cocoa); background:var(--ivory); color:var(--cocoa); font-size:.75rem; font-weight:700; line-height:1.4; text-align:center; }
.design-zoom { display:flex; justify-content:space-between; align-items:center; min-height:44px; padding:8px 0; font-size:.875rem; }
.featured-cake .design-zoom { position:absolute; inset-inline:14px; bottom:0; }
.featured-cake .design-stamp { background:var(--lilac); }
.featured-cake:nth-child(2) .design-stamp { background:var(--sky); }
.featured-cake:nth-child(3) .design-stamp { background:var(--mint); }

.instagram-cake-photo>img { width:100%; height:auto; }
.more-designs .design-card { max-width:360px; justify-self:center; }
.more-designs .design-visual>img { width:100%; height:auto; }
.instagram-cake-caption { margin-top:20px; }
.instagram-cake-caption h3 { font-size:clamp(1.125rem,.8rem + 1.2vw,1.75rem); line-height:1.2; text-transform:none; letter-spacing:-.045em; }
.instagram-cake-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 20px; margin-top:10px; }
.instagram-cake-actions a,.design-select { display:inline-flex; align-items:center; min-height:44px; gap:12px; font-size:.875rem; text-decoration:underline; text-underline-offset:4px; }
.design-select,[data-design] { font-weight:600; }
.more-designs { margin-top:50px; border-block:1px solid var(--line); }
.more-designs>summary { display:flex; justify-content:space-between; gap:20px; padding:24px 0; min-height:64px; cursor:pointer; font-size:1rem; font-weight:700; list-style:none; }
.more-designs>summary::-webkit-details-marker { display:none; }
.more-designs[open]>summary>span:last-child { transform:rotate(45deg); }
.more-designs>.design-grid { padding:28px 0 46px; }
.gallery-note { font-size:.875rem; max-width:900px; margin-top:26px; }
.instagram-section { background:var(--soft); }
.instagram-section .instagram-connection { margin-top:0; padding-top:0; border-top:0; }
.instagram-connection { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px 60px; border-top:1px solid var(--line); margin-top:38px; padding-top:30px; }
.instagram-connect-copy h3 { font-size:1.6rem; margin:14px 0; text-transform:none; }
.instagram-connect-copy p:not(.eyebrow),[data-instagram-status] { font-size:.875rem; }
.instagram-connect-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:22px; }
.instagram-profile-container { min-width:0; }
.instagram-profile-preview { max-width:540px; }
.instagram-profile-preview iframe,.instagram-profile-preview blockquote { max-width:100%!important; margin-inline:0!important; }
/* Full-bleed flavour scene: one real cake and the actual menu, not a pretend cart. */
.menu-section { background:var(--yellow); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:50px 7%; }
.menu-intro { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:8%; align-items:start; }
.menu-intro h2 { font-size:clamp(2.75rem,1.4rem + 4.8vw,5.5rem); text-transform:none; line-height:.98; }
.menu-intro>div:last-child { font-size:clamp(1.125rem,.9rem + .9vw,1.5rem); padding-top:28px; }
.menu-intro .button { margin-top:32px; }
.menu-still-life { align-self:end; min-width:0; }
.menu-still-life img { width:100%; max-width:600px; max-height:600px; object-fit:contain; margin-inline:auto; filter:drop-shadow(0 22px 10px #4323191a); }
.menu-still-life p { font-size:.875rem; text-align:center; margin-top:14px; }
.menu-list { min-width:0; align-self:center; }
.menu-controls,.menu-column-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; }
.menu-controls { margin-bottom:24px; font-size:.875rem; font-weight:600; }
.size-toggle { display:flex; flex-wrap:wrap; border:1px solid var(--cocoa); padding:4px; border-radius:60px; }
.size-toggle button { min-height:44px; background:transparent; padding:10px 20px; border:0; border-radius:60px; font-size:1rem; }
.size-toggle button[aria-pressed=true] { background:var(--cocoa); color:var(--ivory); }
.menu-column-head { border-bottom:1px solid var(--cocoa); padding-bottom:12px; font-size:.75rem; letter-spacing:.02em; }
.flavour-row { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; padding:20px 0; border-bottom:1px solid var(--line); min-height:72px; }
.flavour-number { font-size:.75rem; flex:none; }
.flavour-row h3 { flex:1 1 10ch; min-width:0; font-size:1.35rem; line-height:1.35; letter-spacing:-.035em; }
.flavour-row .price { margin-left:auto; white-space:nowrap; font-size:1.125rem; font-weight:600; }
.row-arrow { flex:none; }
.menu-note { font-size:.8125rem; margin-top:18px; }
.price-anchor { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:24px 48px; padding-top:30px; border-top:1px solid var(--line); }
.price-anchor>div { display:flex; flex-wrap:wrap; gap:6px 26px; align-items:baseline; }
.price-anchor .eyebrow { flex-basis:100%; }
.price-anchor strong { font-size:1.5rem; }
.price-anchor>p { flex:1 1 22em; font-size:.875rem; }
/* Connected numbered process, adapted to the bakery's verified three-step enquiry. */
.order-process { background:var(--cocoa); color:var(--ivory); text-align:center; padding-block:clamp(64px,7vw,104px); }
.process-intro { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr); gap:8%; align-items:center; max-width:1300px; margin-inline:auto; }
.process-intro>div { min-width:0; }
.process-cake { width:100%; max-width:320px; height:auto; justify-self:center; transform:rotate(7deg); }
.order-process .button:hover { background:var(--ivory); color:var(--cocoa); border-color:var(--ivory); }
.order-process :focus-visible { outline-color:var(--yellow); }
.order-process h2 { font-size:clamp(2.6rem,1.5rem + 3.8vw,5.5rem); text-transform:none; margin-block:22px 34px; }
.process { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:50px; list-style:none; margin:90px 0 0; padding:0; text-align:left; }
.process li { min-width:0; position:relative; }
.process li::before { content:''; position:absolute; top:54px; left:56px; width:calc(100% + 50px); height:1px; background:var(--light-line); }
.process li:last-child::before { display:none; }
.process li>span { display:grid; place-items:center; position:relative; z-index:1; width:108px; height:108px; background:var(--yellow); color:var(--cocoa); border:1px solid var(--yellow); border-radius:50%; font-size:2.5rem; font-weight:900; }
.process li>div { margin-top:34px; }
.process strong { display:block; font-size:1.65rem; line-height:1.2; text-transform:none; letter-spacing:-.04em; }
.process p { margin-top:16px; font-size:1rem; }
.create-section { background:var(--butter); color:var(--cocoa); padding-block:clamp(64px,7vw,104px); }
.gift-note { max-width:810px; margin:70px auto 0; padding-top:28px; border-top:1px solid var(--line); }
.gift-note h3 { text-transform:none; font-size:1.5rem; margin-block:14px; }
.cake-brief { min-width:0; padding:0; width:100%; max-width:810px; margin-inline:auto; }
.cake-brief > .eyebrow { display: none; }
.cake-brief h2 { font-size:clamp(2.4rem,1.2rem + 4vw,5rem); text-align:center; text-transform:none; margin:0 auto 28px; max-width:850px; }
.brief-intro { font-size:1.125rem; text-align:center; }
.cake-brief label, .cake-brief legend { font-size: .875rem; font-weight: 600; }
.cake-brief label { display: block; min-width: 0; }
.cake-brief label > small { font-size: .75rem; font-weight: 400; }
.form-note { font-size: .8125rem; line-height: 1.7; }
.draft-note { margin-block:16px 40px; text-align:center; }
.cake-brief fieldset { min-width: 0; border: 0; padding: 0; margin: 0 0 24px; }
.cake-brief legend { margin-bottom: 10px; }
.occasion-options { display: flex; flex-wrap: wrap; gap: 8px; }
.occasion-options label { position: relative; }
.occasion-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.occasion-options span { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--cocoa); padding: 12px 18px; border-radius:60px; font-size: .875rem; font-weight: 500; }
.occasion-options input:checked + span { background:var(--cocoa); color:var(--ivory); border-color:var(--cocoa); }
.occasion-options input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 3px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,12em),1fr)); gap: 18px; margin-bottom: 22px; }
.cake-brief input:not([type=radio]):not([type=hidden]), .cake-brief textarea, .cake-brief select { width: 100%; min-width: 0; border:1px solid var(--cocoa); border-radius:40px; padding:18px 22px; margin-top: 8px; background:transparent; color:var(--cocoa); font-size: 1rem; line-height: 1.5; }
.cake-brief textarea { resize:vertical; border-radius:20px; min-height:180px; }
.cake-brief ::placeholder { color: #432319b3; opacity: 1; }
.reference-help { margin-block: 9px 22px; }
.reference-help span { display: block; margin-top: 6px; }
.brief-extra { border-block: 1px solid var(--line); margin-block: 20px; }
.brief-extra summary { display: flex; justify-content: space-between; gap: 18px; cursor: pointer; padding-block: 18px; font-size: .875rem; font-weight: 600; }
.brief-extra .form-grid { margin-top: 12px; }
.brief-extra .form-note { margin-bottom: 18px; }
.dietary-note { margin-block: 18px; }
.cake-brief > .button { width:100%; margin:24px 0 16px; background:var(--red); border-color:var(--red); color:var(--ivory); }
.enquiry-call a, .form-note a { text-decoration: underline; text-underline-offset: 4px; }
.enquiry-call { margin-top: 16px; }
.brief-alternatives { margin-top: 18px; }
.review-brief { display: flex; justify-content: space-between; gap: 18px; min-height: 48px; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; font-size: .875rem; padding: 12px 0; }
.selected-design { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 16px; margin-bottom: 24px; background: var(--yellow); color: var(--cocoa); }
.selected-design > div { min-width: 0; }
.selected-design small { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .02em; }
.selected-design strong { display: block; font-size: .875rem; margin-top: 4px; }
.selected-design button { flex: none; min-width: 44px; min-height: 44px; background: transparent; border: 1px solid var(--line); font-size: 1.5rem; }
.selected-design :focus-visible { outline-color: var(--cocoa); }
.enquiry-preview { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.preview-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-block: 18px; }
#brief-status { font-size: .875rem; margin-top: 18px; }
#brief-status a { text-decoration: underline; text-underline-offset: 4px; }
.create-section :focus-visible { outline-color:var(--red); }
.create-section .selected-design :focus-visible { outline-color: var(--cocoa); }
.create-section .button:hover { background:var(--cocoa); color:var(--ivory); border-color:var(--cocoa); }
/* Practical information stays real, readable and secondary to the photographic scenes. */
.questions { background:var(--ivory); }
.questions>div:first-child { text-align:center; margin-bottom:50px; }
.questions h2 { text-transform:none; }
.faq-list { max-width:950px; margin-inline:auto; }
.faq-list details { border-top:1px solid var(--line); }
.faq-list details:last-child { border-bottom:1px solid var(--line); }
.faq-list summary { display:flex; justify-content:space-between; gap:24px; align-items:baseline; padding:22px 0; font-size:1rem; font-weight:600; cursor:pointer; }
.faq-list summary span { flex:none; }
.faq-list details[open] summary span { transform:rotate(45deg); }
.faq-list p { padding-bottom:26px; font-size:1rem; }
.faq-list a { text-decoration:underline; text-underline-offset:4px; }
.visit-section { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:7%; align-items:center; background:var(--ivory); }
.visit-heading h2 { text-transform:none; font-size:clamp(2.6rem,1.5rem + 3.6vw,4.75rem); }
.visit-postcode { display:inline-block; font-size:.875rem; letter-spacing:.2em; padding-top:20px; margin-top:30px; border-top:1px solid var(--line); }
.visit-copy { min-width:0; }
address { font-style:normal; font-size:1.125rem; }
.landmark { font-size:.875rem; margin-top:16px; }
.visit-copy .actions { margin-block:28px 20px; }
.visit-copy>.text-link { margin-top:18px; }
.tamil-note { font-size:.9375rem; line-height:1.9; }
.visit-copy .tamil-note { margin-top:20px; }
.site-footer { --footer-wave-height:150px; background:var(--butter); position:relative; isolation:isolate; padding:0; }
.footer-wave { display:block; width:100%; height:var(--footer-wave-height); }
.footer-wave .wave-cutout { fill:var(--ivory); }
.footer-wave .wave-shadow { fill:#43231914; }
.footer-content { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,.7fr) minmax(0,.8fr) minmax(0,1.3fr); gap:32px; padding:55px var(--gutter) 90px; }
.footer-content>div { min-width:0; }
.footer-content h2 { text-transform:none; font-size:1.3rem; line-height:1.3; margin-bottom:22px; }
.footer-brand p { font-size:.875rem; margin-top:20px; }
.footer-links a { display:flex; align-items:center; min-height:44px; font-size:.875rem; }
.footer-enquiry h2 { font-size:2rem; }
.footer-enquiry p { font-size:1rem; }
.footer-enquiry .button { width:100%; margin-block:26px 14px; background:var(--cocoa); color:var(--ivory); border-color:var(--cocoa); }
.footer-enquiry>a:last-child { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:4px; }
.footer-legal { margin-inline:var(--gutter); border-top:1px solid var(--line); padding:22px 0; font-size:.75rem; }
.quick-contact { display:none; }
.doe-home .site-footer { background:var(--red); color:var(--ivory); }
.doe-home .site-footer .brand-words { color:var(--ivory); }
.doe-home .footer-wave .wave-shadow { fill:#43231938; }
.doe-home .footer-enquiry .button { background:transparent; color:var(--ivory); border-color:var(--ivory); }
.doe-home .footer-enquiry .button:hover { background:var(--yellow); color:var(--cocoa); border-color:var(--yellow); }
.doe-home .footer-legal { border-color:var(--light-line); }
.doe-home .site-footer :focus-visible { outline-color:var(--yellow); }
/* Authentic brand-guide vector pattern (page 8). One footer-wide layer continues
   through the transparent curve; the ivory SVG cutout hides it above the crest.
   Its tile origin preserves the approved pattern placement in the footer body. */
.collection,.create-section { position:relative; isolation:isolate; }
.collection::before,.create-section::before,.site-footer::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--cocoa); -webkit-mask:url('/assets/brand/cake-dudes-pattern.svg') repeat left top / 320px auto; mask:url('/assets/brand/cake-dudes-pattern.svg') repeat left top / 320px auto; }
.collection::before { opacity:.025; }
.create-section::before { opacity:.025; }
.create-section>.cake-brief,.create-section>.gift-note { background:transparent; }
.create-section input:not([type=radio]):not([type=hidden]),.create-section textarea,.create-section select,.create-section .occasion-options span { background:var(--butter); }
.create-section .occasion-options input:checked + span { background:var(--cocoa); }
.site-footer::before { opacity:.03; -webkit-mask-position:left var(--footer-wave-height); mask-position:left var(--footer-wave-height); }
.doe-home .site-footer::before { background:var(--ivory); opacity:.035; }
/* Native photo detail retains the original high-resolution files. */
.cake-dialog { padding: 0; width: min(940px,calc(100% - 32px)); max-height: 90dvh; overflow: auto; border: 1px solid var(--line); background: var(--ivory); color: var(--cocoa); }
.cake-dialog::backdrop { background: #432319cc; }
.dialog-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 46px; height: 46px; border: 1px solid var(--cocoa); background: var(--ivory); color: var(--cocoa); border-radius:50%; font-size:1.75rem; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.detail-layout img { width: 100%; height: auto; }
.detail-layout figcaption { padding: 14px; font-size: .75rem; }
.detail-copy { min-width: 0; padding: 66px 28px 30px; }
.detail-copy h2 { font-size: 2rem; margin-block: 16px; }
.detail-copy p, .detail-copy dl { font-size: .9375rem; }
.detail-copy dl > div { padding: 14px 0; border-top: 1px solid var(--line); }
.detail-copy dt { font-weight: 700; }
.detail-copy dd { margin: 6px 0 0; }
.detail-note { margin-top: 14px; font-size: .8125rem !important; }
.dialog-open { overflow: hidden; }
/* The same coherent type, colours and reflow apply to all practical routes. */
.guide-page { padding: 28px var(--gutter) 72px; max-width: 1480px; margin-inline: auto; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 12px; font-size: .8125rem; }
.breadcrumbs a { text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.breadcrumbs span { display: inline-flex; align-items: center; }
.guide-heading { padding-block: 46px 56px; max-width: 920px; }
.guide-heading h1 { font-size: clamp(2.25rem,1.5rem + 3vw,4.5rem); }
.guide-heading > p:not(.eyebrow) { margin-top: 24px; max-width: 52em; font-size: 1.125rem; }
.guide-heading .guide-small { font-size: .875rem !important; }
.guide-heading .button, .guide-heading .actions { margin-top: 24px; }
.guide-content { border-top: 1px solid var(--line); padding-top: 38px; }
.guide-content > h2 { font-size: clamp(1.75rem,1.25rem + 1.5vw,2.5rem); margin-bottom: 24px; }
.guide-content > p { max-width: 64em; }
.price-table-wrap { max-width: 100%; overflow-x: auto; margin-block: 28px; }
.price-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.price-table caption { text-align: left; font-size: .8125rem; padding-bottom: 14px; }
.price-table th, .price-table td { padding: 18px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.price-table thead { background:var(--butter); }
.price-table thead th { font-size: .8125rem; }
.price-table td:nth-child(2), .price-table td:nth-child(3) { white-space: nowrap; }
.price-table a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 600; text-decoration: underline; }
.guide-note { background:var(--butter); color: var(--cocoa); padding: 24px; margin-block: 28px; font-size: .9375rem; }
.answer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px 48px; margin-block: 38px; }
.answer-grid > * { min-width: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.answer-grid h3 { font-size: 1.25rem; margin-bottom: 14px; line-height: 1.4; }
.answer-grid a { text-decoration: underline; }
.cake-stories { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; margin-block: 36px 56px; }
.cake-story { min-width: 0; }
.story-image img { width: 100%; max-width: 500px; height: auto; }
.cake-story .eyebrow { margin-top: 20px; }
.cake-story h3 { font-size: 1.5rem; margin-block: 10px 14px; }
.cake-story p { font-size: .9375rem; }
.guide-contact { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px; padding: 38px; margin-top: 52px; background: var(--cocoa); color: var(--ivory); }
.guide-contact h2 { font-size: clamp(1.75rem,1.3rem + 1.4vw,2.75rem); }
.guide-contact .button { margin-block: 24px 10px; }
.guide-contact :focus-visible { outline-color: var(--yellow); }
/* Content-flow adaptations; rendered acceptance is checked on the connected browser. */
@media (max-width:1100px) {
  .hero-layout { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); grid-template-areas:"scene offer" "scene actions" "meta meta"; gap:4px 30px; }
  .hero-offer { align-self:end; }
  .hero-actions { align-self:start; justify-self:start; }
  .hero-cake { max-width:440px; }
  .site-header { gap:12px; }
  .site-header .brand { margin-right:auto; }
  .nav-toggle:not([hidden]) { display:inline-flex; }
  .has-menu .site-header nav { display:none; }
  .site-header nav { flex-basis:100%; justify-content:flex-start; }
  .has-menu .site-header.menu-open { position:relative; }
  .has-menu .site-header.menu-open nav { display:flex; border-top:1px solid currentColor; padding-top:12px; }
  .section-heading { gap:28px; }
  .process { gap:28px; }
  .process li::before { width:calc(100% + 28px); }
  .footer-content { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
}
@media (max-width:820px) {
  .hero-layout { gap:6px 24px; padding-top:20px; }
  .hero-poster h1 { font-size:1.75rem; }
  .process-intro { grid-template-columns:minmax(0,1fr); }
  .process-cake { display:none; }
  .occasion-section { grid-template-columns:1fr; gap:14px; }
  .section-heading,.menu-intro,.menu-section,.visit-section { grid-template-columns:1fr; }
  .section-intro { justify-self:start; max-width:650px; }
  .occasion-rail { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .design-grid { gap:28px 16px; }
  .featured-cake .design-visual>img { padding:16px 4px 38px; }
  .design-stamp { width:65px; min-height:65px; font-size:.6875rem; right:4px; }
  .menu-intro { gap:24px; }
  .menu-intro>div:last-child { padding-top:0; }
  .menu-still-life { order:2; }
  .menu-still-life img { max-height:430px; }
  .menu-list { order:1; }
  .price-anchor { order:3; }
  .process strong { font-size:1.35rem; }
  .detail-layout { grid-template-columns:1fr; }
  .detail-layout figure { max-width:500px; margin-inline:auto; }
  .detail-copy { padding:28px; }
  .guide-contact { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:600px) {
  .section { padding-block:44px; }
  .hero-layout { grid-template-columns:minmax(0,1fr); grid-template-areas:"offer" "scene" "actions" "meta"; gap:8px; padding-block:18px 8px; }
  .hero-offer { max-width:100%; justify-self:center; text-align:center; }
  .hero-poster h1 { font-size:clamp(1.5rem,6.4vw,1.875rem); line-height:1.12; max-width:20ch; margin-inline:auto; }
  .hero-summary { font-size:.8125rem; margin:8px auto 0; max-width:32ch; }
  .hero-cake { width:min(82vw,330px); padding:0; }
  .hero-cake-stage { padding:0; }
  .hero-slides { width:100%; }
  .hero-actions { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; max-width:420px; gap:10px 14px; justify-self:center; }
  .hero-actions .hero-primary { min-width:0; min-height:54px; padding:14px 16px; gap:12px; font-size:1rem; }
  .hero-secondary { justify-content:center; gap:8px; font-size:.8125rem; line-height:1.5; }
  .hero-actions p { grid-column:1/-1; font-size:.6875rem; max-width:35em; margin-inline:auto; }
  .hero-meta { display:grid; grid-template-columns:minmax(0,1fr) 76px; align-items:center; gap:0 8px; width:min(100%,400px); justify-self:center; }
  .hero-controls { display:contents; }
  .hero-dots { grid-column:1/-1; grid-row:1; justify-self:center; }
  .hero-controls .hero-play { grid-column:2; grid-row:2; }
  .hero-photo-caption { grid-column:1; grid-row:2; justify-content:flex-start; gap:0 8px; font-size:.6875rem; }
  .hero-photo-caption a { font-size:.6875rem; }
  .hero-contact { justify-content:center; gap:0 16px; margin-top:-8px; }
  .hero-slide[data-scene="family"] img { width:112%; margin-left:-6%; }
  .hero-poster::before { -webkit-mask-size:260px auto; mask-size:260px auto; }
  .occasion-section { padding-block:20px; }
  .occasion-intro h2 { display:none; }
  .site-header { padding:12px 18px; }
  .brand { gap:9px; }
  .brand img { width:46px; height:auto; flex-basis:46px; }
  .brand-words { font-size:1rem; max-width:7em; }
  .header-phone { display:none; }
  .nav-toggle { padding:10px 14px; }
  .site-header nav { gap:10px 20px; }
  .doe-home .site-header { padding:10px var(--gutter); }
  .doe-home .brand img { width:38px; height:auto; flex-basis:38px; }
  .doe-home .brand-words { font-size:.875rem; max-width:none; }
  .doe-home .brand-words small { font-size:.5625rem; letter-spacing:.025em; max-width:24ch; }
  .doe-home .nav-toggle { min-height:44px; padding:8px 12px; }
  .button { min-height:54px; padding:16px 25px; font-size:.875rem; gap:20px; }
  .occasion-rail { margin-top:0; }
  .occasion-rail a { flex-wrap:wrap; gap:8px; padding:16px 8px; }
  .occasion-rail h3 { flex:1 1 8ch; font-size:.9375rem; }
  .section-heading { margin-bottom:30px; }
  .section-heading h2 { font-size:2.4rem; }
  .section-intro { font-size:1rem; }
  .gallery-filters button { padding:10px 14px; }
  .collection>.design-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 14px; }
  .featured-cake { max-width:420px; justify-self:center; }
  .featured-cake .design-visual>img { padding:12px 4px 42px; }
  .design-stamp { display:none; }
  .instagram-cake-caption h3 { font-size:1rem; line-height:1.4; }
  .more-designs>.design-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 14px; }
  .more-designs .instagram-cake-caption h3 { font-size:1rem; }
  .instagram-cake-actions { display:block; }
  .instagram-cake-actions a { display:flex; }
  .instagram-connection { grid-template-columns:1fr; gap:24px; }
  .menu-intro h2 { font-size:2.75rem; }
  .menu-section { gap:36px; }
  .menu-still-life img { max-height:360px; }
  .flavour-row h3 { font-size:1.2rem; }
  .price-anchor { gap:20px; }
  .order-process h2 { font-size:2.5rem; }
  .process { grid-template-columns:1fr; gap:28px; margin-top:46px; text-align:left; }
  .process li { display:grid; grid-template-columns:70px minmax(0,1fr); gap:24px; }
  .process li>span { width:70px; height:70px; font-size:1.75rem; }
  .process li::before { top:35px; left:35px; width:1px; height:calc(100% + 28px); }
  .process li>div { margin:0; padding-top:8px; }
  .process strong { font-size:1.35rem; }
  .process p { margin-top:12px; }
  .create-section { padding-top:30px; }
  .cake-brief h2 { font-size:2.5rem; }
  .cake-brief input:not([type=radio]):not([type=hidden]),.cake-brief textarea,.cake-brief select { padding:16px 18px; }
  .questions h2 { font-size:2.25rem; }
  .visit-section { gap:38px; }
  .visit-heading h2 { font-size:2.6rem; }
  .site-footer { --footer-wave-height:90px; }
  .footer-content { grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 22px; padding-block:34px 48px; }
  .footer-brand,.footer-enquiry { grid-column:1/-1; }
  .footer-legal { font-size:.75rem; }
  .quick-contact { display:flex; flex-wrap:wrap; gap:12px; padding:16px var(--gutter) 30px; background:var(--butter); }
  .quick-contact .button { flex:1 1 10em; padding-inline:12px; gap:8px; }
  .answer-grid,.cake-stories { grid-template-columns:1fr; }
  .guide-heading { padding-block:30px 38px; }
  .guide-heading>p:not(.eyebrow) { font-size:1rem; }
  .guide-contact { padding:26px 22px; }
  .price-table th,.price-table td { padding:14px 12px; }
  .cake-dialog { width:calc(100% - 24px); }
}
/* At the narrowest phone/zoom widths, do not make the logo and menu compete
   for a flex row, or split the primary action into two short words. */
@media (max-width:360px) {
  .doe-home .site-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:10px 14px; }
  .doe-home .site-header .brand { margin-right:0; gap:7px; }
  .doe-home .brand img { width:32px; height:auto; flex-basis:32px; }
  .doe-home .brand-words { min-width:0; font-size:.75rem; }
  .doe-home .brand-words small { font-size:.5rem; max-width:18ch; }
  .doe-home .site-header nav { grid-column:1/-1; }
  .hero-meta { width:calc(100% + 24px); margin-inline:-12px; }
  .hero-photo-caption { padding-left:10px; }
  .hero-actions { grid-template-columns:minmax(0,1fr); gap:6px; }
  .hero-actions .hero-primary { width:100%; }
}
@media (max-height:650px) {
  .site-header { position:relative; }
  .hero-poster { min-height:0; }
}
html:not(.has-menu) { --header-offset:0px; }
html:not(.has-menu) .site-header { position:relative; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}

@media (prefers-reduced-motion: reduce) { .hero-slide { transition:none; } }