/* Agadir Bouffi Tours — Moroccan heritage theme */
:root{
  --green:#173a2c;--green-2:#1f4a39;--green-3:#2b5c47;
  --cream:#f7f0e3;--sand:#eedfc4;--sand-2:#e4ceaa;
  --terra:#b8553a;--terra-d:#9b432c;--gold:#c8a165;--gold-l:#e3c999;
  --ink:#2b241c;--muted:#5f5446;--white:#fff;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","URW Palladio L",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:10px;--shadow:0 6px 22px rgba(43,36,28,.10),0 1px 3px rgba(43,36,28,.08);
  --wrap:1160px;
  --zellige:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23b08a52' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M28 6l6.4 15.6L50 28l-15.6 6.4L28 50l-6.4-15.6L6 28l15.6-6.4z'/%3E%3Cpath d='M12.4 12.4h31.2v31.2H12.4z' transform='rotate(45 28 28)'/%3E%3Ccircle cx='28' cy='28' r='5'/%3E%3Cpath d='M0 0l6 6M56 0l-6 6M0 56l6-6M56 56l-6-6'/%3E%3C/g%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--cream) var(--zellige);background-size:56px 56px}
img{max-width:100%;height:auto;display:block}
a{color:var(--terra-d)}
a:hover{color:var(--terra)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.15;color:var(--green);margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);letter-spacing:-.01em}
h2{font-size:clamp(1.65rem,3.4vw,2.35rem)}
h3{font-size:1.28rem}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:var(--terra);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:10px;top:10px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* Header */
.site-header{background:var(--green);border-top:6px solid var(--green-3);color:#fff;position:relative;z-index:20}
.nav-bar{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.brand svg{width:46px;height:46px;flex:none}
.brand-name{font-family:var(--serif);line-height:1;display:flex;flex-direction:column}
.brand-name b{font-size:1.45rem;font-weight:700;letter-spacing:.02em;color:var(--gold-l)}
.brand-name span{font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:#f1e6cf;margin-top:4px}
.brand:hover b{color:#fff}
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.nav-btn{display:none;cursor:pointer;width:48px;height:48px;border:1px solid rgba(255,255,255,.25);border-radius:8px;align-items:center;justify-content:center}
.nav-btn span,.nav-btn span::before,.nav-btn span::after{display:block;width:22px;height:2px;background:#fff;position:relative;transition:.2s}
.nav-btn span::before,.nav-btn span::after{content:"";position:absolute;left:0}
.nav-btn span::before{top:-7px}.nav-btn span::after{top:7px}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px}
.main-nav a{color:#f4ecdc;text-decoration:none;padding:10px 12px;border-radius:6px;font-size:.98rem;display:block}
.main-nav a:hover,.main-nav a[aria-current=page]{color:#fff;background:rgba(255,255,255,.08)}
.main-nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--gold)}
.main-nav .nav-cta{background:var(--terra);color:#fff;margin-left:8px;padding:10px 18px}
.main-nav .nav-cta:hover{background:var(--terra-d)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:7px;background:var(--terra);color:#fff;text-decoration:none;font-weight:600;font-size:1rem;border:2px solid var(--terra);transition:background .2s,border-color .2s}
.btn:hover{background:var(--terra-d);border-color:var(--terra-d);color:#fff}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.75);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-outline{background:transparent;color:var(--terra-d);border-color:var(--terra)}
.btn-outline:hover{background:var(--terra);color:#fff}
.btn-sm{min-height:42px;padding:8px 18px;font-size:.95rem}

/* Arch hero */
.hero{padding:34px 0 0}
.arch-wrap{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.page-hero .arch-wrap{display:block}
.arch-box{position:relative}
.arch-line{position:absolute;inset:-12px -12px 0 -12px;width:calc(100% + 24px);height:calc(100% + 12px);pointer-events:none;overflow:visible}
.arch-line path{fill:none;stroke:var(--gold);stroke-width:1.6;vector-effect:non-scaling-stroke}
.arch{position:relative;overflow:hidden;min-height:560px;display:flex;align-items:center;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V24C0 11 14 6.5 34 5.2 42 4.6 47 3 50 0c3 3 8 4.6 16 5.2C86 6.5 100 11 100 24v76z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V24C0 11 14 6.5 34 5.2 42 4.6 47 3 50 0c3 3 8 4.6 16 5.2C86 6.5 100 11 100 24v76z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.arch>picture,.arch>img{position:absolute;inset:0}
.arch picture img,.arch>img{width:100%;height:100%;object-fit:cover}
.arch::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,30,22,.78) 0%,rgba(18,30,22,.5) 42%,rgba(18,30,22,.05) 75%)}
.arch-content{position:relative;z-index:2;color:#fff;padding:120px 7% 110px;max-width:720px}
.arch-content h1{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.arch-content .lede{font-size:1.18rem;color:#f6efe2;max-width:34em}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--gold-l);margin-bottom:14px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.quick{position:relative;z-index:3;max-width:900px;margin:-38px auto 0;background:#fff;border-radius:12px;box-shadow:var(--shadow);display:flex;align-items:center;flex-wrap:wrap;gap:6px 4px;padding:10px 12px}
.quick strong{font-family:var(--serif);color:var(--green);padding:6px 12px;font-size:1.05rem}
.quick a{flex:1 1 auto;text-align:center;text-decoration:none;color:var(--ink);padding:10px 14px;border-radius:8px;font-weight:600;font-size:.95rem;border-left:1px solid #eadfcd;min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px}
.quick a:hover{background:var(--cream);color:var(--terra-d)}
.quick svg{width:20px;height:20px;stroke:var(--terra);fill:none;stroke-width:1.6}

/* Inner page hero */
.page-hero .arch{min-height:420px}
.page-hero .arch-content{padding:110px 7% 64px}
.page-hero .arch-plain{background:var(--green) var(--zellige);background-size:56px 56px;min-height:300px}
.page-hero .arch-plain::after{background:none}
.crumbs{font-size:.9rem;margin:0 0 10px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.crumbs li:not(:last-child)::after{content:"›";margin-left:6px;color:var(--gold-l)}
.crumbs a{color:#f3e7cf}
.crumbs [aria-current]{color:#fff}

/* Sections */
.section{padding:72px 0}
.section-head{text-align:center;max-width:720px;margin:0 auto 40px}
.section-head h2{text-transform:none}
.ornament{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold);margin-bottom:10px}
.ornament::before,.ornament::after{content:"";height:1px;width:56px;background:currentColor}
.ornament svg{width:18px;height:18px}
.section-head p{color:var(--muted)}

/* Cards */
.grid{display:grid;gap:24px;grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;border:1px solid #efe4d2}
.card-img{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .card-img img{transform:scale(1.04)}
.card-body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.card-tag{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-d);font-weight:700;margin-bottom:6px}
.card h3{font-size:1.2rem;margin-bottom:6px}
.card h3 a{color:var(--green);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card{position:relative}
.card p{font-size:.96rem;color:var(--muted);margin-bottom:16px}
.card .btn{margin-top:auto;align-self:flex-start;position:relative;z-index:1}

/* Why band */
.why{background:var(--sand) var(--zellige);background-size:56px 56px;border-top:1px solid var(--sand-2);border-bottom:1px solid var(--sand-2);position:relative}
.why::before,.why::after{content:"";position:absolute;top:0;bottom:0;width:70px;background:repeating-linear-gradient(45deg,transparent 0 9px,rgba(176,138,82,.16) 9px 10px),repeating-linear-gradient(-45deg,transparent 0 9px,rgba(176,138,82,.16) 9px 10px);border-right:1px solid var(--sand-2)}
.why::before{left:0}.why::after{right:0;border-right:0;border-left:1px solid var(--sand-2)}
.why-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.why-list li{text-align:center;padding:8px 26px}
.why-list li+li{border-left:1px solid #cdb68f}
.why-list svg{width:48px;height:48px;stroke:var(--terra);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 12px}
.why-list h3{font-size:1.15rem;margin-bottom:6px}
.why-list p{font-size:.95rem;color:var(--muted);margin:0}

/* Destination */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.split-img{position:relative}
.split-img img{border-radius:200px 200px 10px 10px;box-shadow:var(--shadow);aspect-ratio:4/4.3;object-fit:cover;width:100%}
.split-img figcaption{font-size:.85rem;color:var(--muted);margin-top:10px;text-align:center}
.places{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:12px}
.places li{padding-left:30px;position:relative}
.places li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;background:var(--terra);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.places b{color:var(--green);font-family:var(--serif);font-size:1.08rem}

/* CTA band */
.cta-band{background:var(--terra);color:#fff;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:var(--zellige);background-size:56px 56px;opacity:.5;filter:brightness(3)}
.cta-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:52px 20px}
.cta-band h2{color:#fff;margin-bottom:6px}
.cta-band p{margin:0;color:#fbeee6;max-width:36em}
.cta-band .btn{background:#fff;color:var(--terra-d);border-color:#fff}
.cta-band .btn:hover{background:var(--cream)}
.cta-band .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.8)}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.12)}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;flex:none}

/* Footer */
.site-footer{background:var(--green);color:#e9dfcb;font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.3fr 1.1fr;gap:36px;padding:56px 20px 36px}
.site-footer h2{font-size:1rem;color:var(--gold-l);letter-spacing:.14em;text-transform:uppercase;font-family:var(--sans);font-weight:700;margin-bottom:14px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:6px}
.site-footer a{color:#efe6d4;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-about p{color:#cfc4ae;margin-top:14px;max-width:26em}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.88rem;color:#bfb49d}
.footer-bottom a{color:#e2d6bd}

/* Tour detail */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start}
.intro{font-size:1.15rem;color:#3d342a;border-left:3px solid var(--gold);padding-left:18px;margin-bottom:34px}
.prose h2{font-size:1.65rem;margin-top:38px}
.prose h2:first-child{margin-top:0}
.highlights{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:12px}
.highlights li{background:#fff;border:1px solid #efe4d2;border-radius:var(--radius);padding:14px 16px 14px 48px;position:relative;box-shadow:0 2px 8px rgba(43,36,28,.05)}
.highlights li::before{content:"";position:absolute;left:16px;top:18px;width:18px;height:18px;background:var(--terra);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.highlights b{color:var(--green)}
.aside{position:sticky;top:20px;display:grid;gap:20px}
.panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;border-top:4px solid var(--terra)}
.panel h2{font-size:1.3rem}
.panel dl{margin:0}
.panel dt{font-weight:700;color:var(--green);font-size:.92rem;margin-top:12px}
.panel dd{margin:2px 0 0;font-size:.95rem;color:var(--muted)}
.panel .btn{width:100%;margin-top:18px}
.panel-green{background:var(--green);color:#efe6d4;border-top-color:var(--gold)}
.panel-green h2{color:var(--gold-l)}
.panel-green p{font-size:.96rem}
.panel-green a{color:#fff}
.faq details{background:#fff;border:1px solid #efe4d2;border-radius:var(--radius);margin-bottom:10px}
.faq summary{cursor:pointer;padding:16px 48px 16px 18px;font-weight:600;color:var(--green);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--terra)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 18px 16px;margin:0;color:var(--muted)}
.note{font-size:.9rem;color:var(--muted);background:var(--sand);border-radius:8px;padding:12px 16px}
.photo-credit{font-size:.82rem;color:var(--muted);margin-top:8px}

/* Generic content pages */
.content{max-width:780px}
.content h2{margin-top:36px}
.content ul{padding-left:1.2em}
.content li{margin-bottom:6px}
.mail-box{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:34px;text-align:center;border-top:5px solid var(--terra);margin-bottom:40px}
.mail-box .mail{font-family:var(--serif);font-size:clamp(1.25rem,3.6vw,1.9rem);color:var(--green);word-break:break-word;display:block;margin:6px 0 18px}
.content .checklist{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.checklist li{background:#fff;border:1px solid #efe4d2;border-radius:var(--radius);padding:16px 18px}
.checklist b{display:block;color:var(--green);font-family:var(--serif);font-size:1.1rem}
.group-title{display:flex;align-items:baseline;gap:14px;margin:48px 0 18px;scroll-margin-top:20px}
.group-title:first-of-type{margin-top:0}
.group-title p{margin:0;color:var(--muted)}
.credits-table{width:100%;border-collapse:collapse;background:#fff;font-size:.92rem}
.credits-table th,.credits-table td{border:1px solid #eadfcd;padding:10px;text-align:left;vertical-align:top}
.credits-table th{background:var(--sand);color:var(--green)}
.table-scroll{overflow-x:auto}

/* Responsive */
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .why-list{grid-template-columns:repeat(2,1fr);row-gap:30px}
  .why-list li:nth-child(3){border-left:0}
  .footer-grid{grid-template-columns:1fr 1fr}
  .detail{grid-template-columns:1fr}
  .aside{position:static;grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav-btn{display:inline-flex}
  .main-nav{position:absolute;left:0;right:0;top:100%;background:var(--green);border-top:1px solid rgba(255,255,255,.1);display:none;box-shadow:0 12px 24px rgba(0,0,0,.25)}
  .nav-toggle:checked~.main-nav{display:block}
  .nav-toggle:checked~.nav-btn span{background:transparent}
  .nav-toggle:checked~.nav-btn span::before{top:0;transform:rotate(45deg)}
  .nav-toggle:checked~.nav-btn span::after{top:0;transform:rotate(-45deg)}
  .nav-toggle:focus-visible~.nav-btn{outline:3px solid var(--gold)}
  .main-nav ul{flex-direction:column;align-items:stretch;padding:10px 20px 20px;gap:2px}
  .main-nav a{padding:13px 10px;font-size:1.05rem}
  .main-nav .nav-cta{margin:8px 0 0;text-align:center}
  .split{grid-template-columns:1fr;gap:32px}
  .split-img img{aspect-ratio:4/3.2}
  .cta-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  body{font-size:1rem}
  .hero{padding-top:20px}
  .arch-wrap{padding:0 12px}
  .arch-line{inset:-8px -6px 0;width:calc(100% + 12px);height:calc(100% + 8px)}
  .arch{min-height:540px;align-items:flex-end}
  .arch::after{background:linear-gradient(180deg,rgba(18,30,22,.15) 0%,rgba(18,30,22,.45) 40%,rgba(18,30,22,.85) 100%)}
  .arch-content{padding:140px 22px 70px}
  .arch-content .lede{font-size:1.05rem}
  .page-hero .arch{min-height:380px}
  .page-hero .arch-content{padding:120px 22px 40px}
  .page-hero .arch-plain{min-height:260px}
  .quick{margin:-30px 12px 0;padding:8px}
  .quick strong{width:100%;text-align:center;padding:4px}
  .quick a{flex:1 1 45%;border-left:0;background:var(--cream);font-size:.9rem;padding:8px}
  .section{padding:52px 0}
  .grid,.grid-3{grid-template-columns:1fr}
  .why::before,.why::after{display:none}
  .why-list{grid-template-columns:1fr}
  .why-list li{border-left:0!important;padding:0 6px}
  .why-list li+li{border-top:1px solid #cdb68f;padding-top:26px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .aside{grid-template-columns:1fr}
  .checklist{grid-template-columns:1fr}
  .mail-box{padding:26px 18px}
  .brand-name b{font-size:1.25rem}
  .brand-name span{font-size:.68rem;letter-spacing:.26em}
  .brand svg{width:40px;height:40px}
}
@media (min-width:641px) and (max-width:1080px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-3 .card p{font-size:.92rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}