/* Petal & Pine, flower shop in Fishtown, Philadelphia.
   Tokens, base rules and shared primitives. Every hex value lives in :root.
   The two literals in the pasted credit block (#fff, rgba(0,0,0,.3)) are part
   of that block and the only exception to the rule. */

:root {
  /* colour, paired by use */
  --primary: #1F4A38;
  --primary-hover: #173A2C;
  --scrim-strong: rgba(31,74,56,.78);
  --scrim-soft: rgba(31,74,56,.45);
  --on-primary: #F7F3E8;
  --accent: #C08A93;
  --on-accent: #2A1F22;
  --ink: #1C2A24;
  --cream: #FBF8F1;
  --surface: #F1EBDD;
  --muted: #5A6B62;
  --muted-on-dark: #C9D3CC;
  --border: #D8D0BE;
  --focus: #C08A93;

  /* type */
  --font-display: "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-h1: clamp(32px, 7vw, 56px);
  --fs-h2: clamp(24px, 4.5vw, 36px);
  --fs-h3: clamp(18px, 2.4vw, 22px);
  --fs-body: clamp(16px, 1.6vw, 18px);
  --fs-small: 14px;
  --fs-credit: 10px;

  /* radius */
  --r-1: 4px;
  --r-2: 10px;
  --r-3: 16px;
  --r-pill: 999px;

  /* shadow */
  --shadow-1: 0 1px 2px rgba(28,42,36,.06), 0 2px 8px rgba(28,42,36,.06);
  --shadow-2: 0 4px 12px rgba(28,42,36,.10), 0 12px 32px rgba(28,42,36,.08);

  /* layout */
  --container: 1160px;
  --container-pad: 20px;
  --motion: 200ms ease;

  /* space, 4/8 scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
}

h1,
h2,
h3 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  color: var(--primary);
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.1;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.15;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
}

p {
  max-width: 65ch;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

section {
  padding-block: var(--space-7);
}

@media (min-width:960px){section{padding-block:var(--space-8)}}

/* The FAQ follows the spec's section padding at each width: --space-7 on the
   phone, --space-8 from 768px up. The id outranks the bare `section` selector,
   so the values are stated here rather than inherited. */
#faq{padding-block:var(--space-7)}
@media (min-width:768px){#faq{padding-block:var(--space-8)}}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
  background: var(--primary);
  color: var(--on-primary);
  padding: var(--space-3) var(--space-4);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.photo{position:relative;margin:0}.photo>img{display:block;width:100%;height:auto}.band{position:relative}.photo .credit,.band .credit{position:absolute;right:.5rem;bottom:.5rem;margin:0;z-index:1;font:400 var(--fs-credit)/1 system-ui,sans-serif;letter-spacing:.02em;color:#fff;background:rgba(0,0,0,.3);padding:.25rem .45rem;border-radius:.25rem;opacity:.5}.credit a{color:inherit;text-decoration:none}.photo .credit:hover,.photo .credit:focus-within,.band .credit:hover,.band .credit:focus-within{opacity:1}

@media (min-width: 960px) {
  .container {
    padding-inline: 24px;
  }

  section {
    padding-block: var(--space-8);
  }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none; transition: none; } }

.site-header{position:sticky;top:0;z-index:50;background:var(--primary);color:var(--on-primary);min-height:56px}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);min-height:56px}
.brand{display:flex;align-items:center;min-height:44px;min-width:0;flex:0 1 auto}
.brand svg{width:150px;height:auto}
.header-inner>.btn{padding:var(--space-3) var(--space-4);font-size:var(--fs-small);margin-inline-start:auto}
.nav-toggle{margin-inline-start:var(--space-2)}
#site-nav{display:none}
.nav-toggle{width:44px;height:44px;background:transparent;border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 24px;border-radius:var(--r-pill);text-decoration:none;box-shadow:var(--shadow-1);transition:var(--motion);background:var(--primary);color:var(--on-primary)}
.btn:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-2)}
.site-header .btn{background:var(--on-primary);color:var(--primary)}
.site-header .btn:hover{background:var(--cream)}
@media (min-width:768px){.nav-toggle{display:none}.brand svg{width:140px}.header-inner>.btn{padding:var(--space-3) var(--space-4);font-size:var(--fs-small)}#site-nav{display:flex;gap:var(--space-3);align-items:center}#site-nav a{color:var(--on-primary);text-decoration:none;font-size:14px;padding:var(--space-2) 0;border-bottom:2px solid transparent;transition:var(--motion)}#site-nav a:hover{border-bottom-color:var(--accent)}#site-nav a[aria-current]{border-bottom-color:var(--accent)}.header-inner>.btn{margin-inline-start:auto}}
@media (min-width:960px){.nav-toggle{display:none}#site-nav{display:flex;gap:var(--space-5);margin-inline-start:auto}#site-nav a{font-size:var(--fs-body)}#site-nav a[aria-current]{border-bottom-color:var(--accent)}.header-inner{min-height:72px}.site-header{min-height:72px}.brand svg{width:176px}.header-inner>.btn{padding:12px 24px;font-size:var(--fs-body)}}
/* Full-bleed hero: the section's own padding is 0 by design; the inner block
   (.hero-inner) carries padding-block var(--space-9). The layout audit reads
   the section element, so it reports this as cramped; that is expected here. */
#hero{padding-block:0;position:relative;isolation:isolate;background:var(--primary);min-height:560px;display:flex;align-items:center}
#hero .hero-photo{position:absolute;inset:0;z-index:0}
#hero .hero-photo>img{width:100%;height:100%;object-fit:cover}
/* The scrim is fully strong on the phone: the hero text block is full width
   there, so the trust line runs past the 60% mark and the soft tail left it at
   about 2.1:1 over a pale photograph. The soft tail returns from 960px up,
   where the text sits in the left 45%. */
#hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--scrim-strong) 0%,var(--scrim-strong) 100%)}
#hero .hero-inner{position:relative;z-index:2;width:100%;padding-block:var(--space-9)}
#hero .hero-text{max-width:520px;min-width:0}
#hero h1{color:var(--on-primary);margin:0}
#hero .lead{color:var(--on-primary);margin:var(--space-3) 0 0}
#hero .btn{margin-top:var(--space-5);background:var(--on-primary);color:var(--primary);width:100%;box-shadow:var(--shadow-2)}
#hero .btn:hover{background:var(--cream);color:var(--primary);transform:translateY(-1px)}
#hero .hero-trust{margin:var(--space-4) 0 0;font-size:var(--fs-small);color:var(--on-primary)}
@keyframes hero-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#hero .hero-text{animation:hero-rise 400ms ease both}
@media (min-width:960px){#hero{min-height:640px}#hero .hero-inner{padding-block:var(--space-10)}#hero .btn{width:auto}#hero::after{background:linear-gradient(90deg,var(--scrim-strong) 0%,var(--scrim-strong) 60%,var(--scrim-soft) 100%)}}

html.nav-open{overflow:hidden}
html.nav-open #site-nav{display:flex;flex-direction:column;position:fixed;top:56px;right:0;bottom:0;width:min(320px,84vw);margin:0;padding:var(--space-5);gap:var(--space-4);background:var(--primary);box-shadow:var(--shadow-2);overflow-y:auto;z-index:60}
html.nav-open #site-nav a{display:flex;align-items:center;min-height:44px;padding:var(--space-3) 0;color:var(--on-primary);text-decoration:none;border-bottom:1px solid rgba(247,243,232,.18)}
@media (min-width:768px){html.nav-open #site-nav{position:static;flex-direction:row;width:auto;inset:auto;padding:0;gap:var(--space-3);background:transparent;box-shadow:none;overflow:visible;margin-inline-start:auto}html.nav-open #site-nav a{border-bottom:2px solid transparent;min-height:44px}html.nav-open{overflow:auto}}

/* services: four icon cards on the alternate surface */
.section-alt{background:var(--surface)}
.lead{font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--muted);margin:var(--space-3) 0 0;max-width:65ch}
.card-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-top:var(--space-5)}
.card{background:var(--cream);border-radius:var(--r-3);padding:var(--space-5);box-shadow:var(--shadow-1);transition:var(--motion);display:flex;flex-direction:column;min-width:0}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.card:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.card-icon{width:32px;height:32px;color:var(--primary);flex:0 0 auto}
.card h3{color:var(--primary);margin:var(--space-4) 0 0}
.card-price{color:var(--muted);font-size:var(--fs-small);margin:var(--space-2) 0 0;font-weight:600}
.card p:not(.card-price):not(.card-benefit){color:var(--ink);margin:var(--space-2) 0 0}
.card-benefit{color:var(--muted);margin:var(--space-2) 0 0}
@media (min-width:768px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}}
@media (min-width:960px){.card-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-6);margin-top:var(--space-6)}.card{padding:var(--space-6)}}

/* how: three numbered steps on --cream, the number is the visual */
.steps{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--space-5)}
.step{display:grid;grid-template-columns:40px 1fr;column-gap:var(--space-3);row-gap:var(--space-2);align-items:start;min-width:0;position:relative}
.step-num{grid-row:1/span 2;width:40px;height:40px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--fs-h3);line-height:1}
.step h3{margin:0;color:var(--primary);padding-top:var(--space-1)}
.step p{margin:0;color:var(--ink);grid-column:2}
@media (min-width:768px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}}
@media (min-width:960px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-6)}.step::after{content:"";position:absolute;top:19px;left:calc(40px + var(--space-3));right:calc(-1 * var(--space-6));height:2px;background:var(--border);z-index:0}.step:last-child::after{display:none}.step-num{position:relative;z-index:1}}

/* pricing: three tiers on --surface, the featured one in the middle from 768px up */
.tiers{display:grid;grid-template-columns:1fr;gap:var(--space-4);margin-top:var(--space-5);align-items:start}
.tier{background:var(--cream);border-radius:var(--r-3);padding:var(--space-5);box-shadow:var(--shadow-1);min-width:0;border-top:2px solid transparent;transition:var(--motion)}
.tier h3{margin:0;color:var(--primary)}
.tier-price{font-family:var(--font-display);font-size:var(--fs-h2);line-height:1.1;color:var(--primary);margin:var(--space-2) 0 0}
.tier-includes{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;gap:var(--space-2)}
.tier-includes li{display:flex;gap:var(--space-2);align-items:flex-start;color:var(--ink);min-width:0}
.tier-includes svg{width:16px;height:16px;flex:0 0 16px;color:var(--primary);margin-top:4px}
.tier-featured{border-top-color:var(--primary);box-shadow:var(--shadow-2)}
.pricing-notes{margin-top:var(--space-6);display:grid;gap:var(--space-2);max-width:65ch}
.pricing-notes p{margin:0;color:var(--muted)}
.pricing-notes p:last-child{color:var(--ink);font-weight:600}
/* Named areas, not `order`: the DOM order is the phone order (featured first), and only from
   768px up does the grid put bouquet left, featured in the middle, plant right. */
@media (min-width:768px){.tiers{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"pricing-a pricing-c pricing-b";gap:var(--space-6)}.tiers .tier:nth-child(1){grid-area:pricing-c}.tiers .tier:nth-child(2){grid-area:pricing-a}.tiers .tier:nth-child(3){grid-area:pricing-b}.tier{padding:var(--space-6)}}
@media (min-width:960px){.tier-featured{transform:translateY(-8px)}}

/* band: full-bleed photograph with a gradient scrim, caption bottom-left.
   The flat --scrim-soft at 55% measured 3.6:1 over a pale photograph, under 4.5:1,
   so the scrim is a gradient: 4.9:1 at the bottom where band.line sits, and the
   picture still shows through at the top. The credit label is lifted to z-index 3
   so it paints above the scrim rather than under it. */
/* Full-bleed band: the section's own padding is 0 by design; the inner block
   (.band-inner) carries padding-block var(--space-7). The layout audit reads
   the section element, so it reports this as cramped; that is expected here. */
#band{padding-block:0;position:relative;isolation:isolate;overflow:hidden;height:220px;display:flex;align-items:flex-end;background:var(--primary)}
#band .band-photo{position:absolute;inset:0}
#band .band-photo>img{width:100%;height:100%;object-fit:cover}
#band::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(31,74,56,.25) 0%,rgba(31,74,56,.50) 55%,rgba(31,74,56,.80) 100%)}
#band .credit{z-index:3}
#hero .credit{z-index:3}
#band .band-inner{position:relative;z-index:2;width:100%;padding-block:var(--space-7)}
#band .band-line{margin:0;color:var(--on-primary);font-family:var(--font-display);font-size:var(--fs-h3);max-width:65ch}
@media (min-width:768px){#band{height:260px}}
@media (min-width:960px){#band{height:320px}#band .band-inner{padding-block:var(--space-7)}}

/* why: three facts with icons on --surface.
   At 640 the icon sits LEFT of the text; from 768 it goes back ABOVE the text
   (the spec's responsive table: icon left at 390, icon above at 768 and 1180).
   The 768 block also overrides .card-grid's 2 columns to 3, so all three facts
   sit across at 768 rather than two plus a stray. */
.why-grid{margin-top:var(--space-5)}
.why-grid .card h3{margin-top:var(--space-4)}
.why-grid .card p:not(.card-price):not(.card-benefit){color:var(--muted);margin:var(--space-2) 0 0}
@media (min-width:640px){.why-grid .card{display:grid;grid-template-columns:32px 1fr;column-gap:var(--space-4);align-items:start}.why-grid .card-icon{grid-row:1/span 2}.why-grid .card h3{margin-top:0}.why-grid .card p{grid-column:2}}
@media (min-width:768px){.why-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.why-grid .card{grid-template-columns:1fr}.why-grid .card-icon{grid-row:auto}.why-grid .card h3{margin-top:var(--space-4)}.why-grid .card p{grid-column:auto}}

/* faq: four questions as an accordion. Answers are in the markup, not fetched.
   The toggle JS is a later step; the CSS carries the open and closed states. */
.faq-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3);margin-top:var(--space-6)}
.faq-item{background:var(--cream);border:1px solid var(--border);border-radius:var(--r-2);padding:var(--space-4) var(--space-5);transition:var(--motion)}
.faq-item:hover{border-color:var(--primary)}
.faq-q{margin:0}
.faq-q button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:44px;padding:var(--space-3) var(--space-3);border:0;background:none;text-align:left;font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.25;color:var(--primary);cursor:pointer;transition:var(--motion)}
.faq-q svg{width:16px;height:16px;flex:0 0 16px;color:var(--primary);transition:transform var(--motion)}
.faq-q button[aria-expanded="true"] svg{transform:rotate(45deg)}
/* The OPEN state is the default, so every answer is readable with no JavaScript.
   The script adds .is-collapsed on load and toggles it on click. */
.faq-a{overflow:hidden;max-height:32rem;transition:max-height var(--motion)}
.faq-a>p{margin:var(--space-3) 0 0;color:var(--ink)}
.faq-a.is-collapsed{max-height:0;visibility:hidden}
.faq-a.is-collapsed>p{visibility:hidden}
@media (min-width:960px){.faq-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-7)}.faq-item{padding:var(--space-5) var(--space-6)}}

/* contact: details and the Google map, 50/50 from 768px up */
.contact-split{display:grid;grid-template-columns:1fr;gap:var(--space-6);margin-top:var(--space-5)}
.contact-details dl{margin:0;display:grid;gap:var(--space-4)}
.contact-details dt{font-size:var(--fs-small);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.contact-details dd{margin:var(--space-1) 0 0;color:var(--ink);display:flex;align-items:flex-start;gap:var(--space-2)}
.contact-details dd a{color:var(--primary);text-decoration:none;border-bottom:2px solid transparent;transition:var(--motion);min-height:44px;display:inline-flex;align-items:center}
.contact-details dd a:hover{border-bottom-color:var(--accent)}
.contact-details .pin{width:20px;height:20px;flex:0 0 20px;color:var(--primary);margin-top:2px}
.map-frame{border:1px solid var(--border);border-radius:var(--r-2);overflow:hidden;height:320px;background:var(--surface)}
.map-frame iframe{display:block;width:100%;height:320px;border:0}
.contact-map .btn-secondary{margin-top:var(--space-3)}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 24px;border-radius:var(--r-pill);border:2px solid var(--primary);background:transparent;color:var(--primary);text-decoration:none;font-weight:600;transition:var(--motion)}
.btn-secondary:hover{background:var(--primary);color:var(--on-primary);transform:translateY(-1px)}
@media (min-width:768px){.contact-split{grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:start}.btn-secondary{padding:14px 28px}}
@media (min-width:960px){.contact-split{gap:var(--space-7)}}

/* footer: dark pine green, four columns from 960px */
.site-footer{background:var(--primary);color:var(--on-primary);padding-block:var(--space-7)}
.footer-inner{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
.footer-brand{display:grid;gap:var(--space-3);min-width:0}
.footer-lockup{width:176px;height:auto}
.footer-tagline{margin:0;color:var(--muted-on-dark);font-size:var(--fs-small);max-width:32ch}
.footer-group{min-width:0}
.footer-group p{margin:0;color:var(--muted-on-dark);font-size:var(--fs-small)}
.footer-group p+p{margin-top:var(--space-2)}
.site-footer a{color:var(--on-primary);text-decoration:none;border-bottom:2px solid transparent;transition:var(--motion);min-height:44px;display:inline-flex;align-items:center}
.site-footer a:hover{border-bottom-color:var(--accent)}
@media (min-width:768px){.footer-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}}
@media (min-width:960px){.footer-inner{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-6)}.site-footer{padding-block:var(--space-8)}}